diff --git a/components/queryclientProvider/QueryClientContext.js b/components/queryclientProvider/QueryClientContext.js new file mode 100644 index 0000000..8263637 --- /dev/null +++ b/components/queryclientProvider/QueryClientContext.js @@ -0,0 +1,22 @@ +import { QueryClientProvider, QueryClient } from '@tanstack/react-query' + + +function QueryClientContext({children}) { + const queryClient = new QueryClient({ + defaultOptions: { + queries: { + refetchOnWindowFocus: false, + retry: 3, + // refetchOnMount: false, + staleTime: 3000 + }, + }, + }) + return ( + + {children} + + ); +} + +export default QueryClientContext; diff --git a/package.json b/package.json index 15400ed..a35a3c5 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "sass": "sass --watch public/assets/scss/main.scss:public/assets/css/main.css" }, "dependencies": { + "@tanstack/react-query": "^5.62.16", "eslint": "8.41.0", "eslint-config-next": "13.4.3", "next": "^13.5.8", diff --git a/pages/_app.js b/pages/_app.js index 7c812fc..49eb95b 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -10,6 +10,7 @@ import "/public/css/lunar.css" import "/public/css/animate.css" import "/public/css/merms.css" import "/public/css/responsive.css" +import QueryClientContext from "../components/queryclientProvider/QueryClientContext" function MyApp({ Component, pageProps }) { @@ -24,7 +25,9 @@ function MyApp({ Component, pageProps }) { {/* */} {!loading ? ( // - + + + ) : ( )} diff --git a/pages/merms-blog.js b/pages/merms-blog.js index a85baa8..562ff28 100644 --- a/pages/merms-blog.js +++ b/pages/merms-blog.js @@ -1,33 +1,53 @@ //"use server" +import { useQuery } from "@tanstack/react-query"; import VideoPopup from "../components/elements/VidepPopup" import Layout from "../components/layout/Layout" import Link from "next/link" import {useState, useEffect } from "react"; export default function Home() { - const [posts, setPosts] = useState(null) + // const [posts, setPosts] = useState(null) - useEffect(() => { - async function fetchPosts() { + // useEffect(() => { + // async function fetchPosts() { + // try { + // const blog_url = 'https://blogdata.chiefsoft.net/mermsblogdata/mermsemr'; + // //http://localhost:8805/mermsblogdata/mermsemr'; // https://blogdata.chiefsoft.net/mermsblogdata/mermsemr + // const res = await fetch(blog_url) + // const data = await res.json() + // setPosts(data) + // console.log(data) + // } + // catch(e){ + // console.log(e) + // } + // } + // fetchPosts().then(r => { + // console.log(r) + // }) + // }, []) + + // const firstBlogItem = posts?.payload?.blogdata[0]; + // console.log(firstBlogItem); + + const {data, isFetching, isError, error} = useQuery({ + queryKey: ['blog'], + queryFn: async () => { try { const blog_url = 'https://blogdata.chiefsoft.net/mermsblogdata/mermsemr'; //http://localhost:8805/mermsblogdata/mermsemr'; // https://blogdata.chiefsoft.net/mermsblogdata/mermsemr const res = await fetch(blog_url) const data = await res.json() - setPosts(data) - console.log(data) + return data } catch(e){ - console.log(e) + return(e) } } - fetchPosts().then(r => { - console.log(r) - }) - }, []) + }) - const firstBlogItem = posts?.payload?.blogdata[0]; - console.log(firstBlogItem); + const blogData = data + console.log('DATA', blogData) return ( <> @@ -35,290 +55,261 @@ export default function Home() {
- {/* WIDE BLOG POST */} -
-
- {/* BLOG POST IMAGE */} -
-
- blog-post-image -
-
- {/* BLOG POST TEXT */} -
-
- -

- {firstBlogItem?.post_name} - -

- {/* Text */} -

{firstBlogItem?.post_content.substring(0, 250)} -

- {/* Post Meta */} -
-
    -

  • MERMS

    • -

    • -

  • {firstBlogItem?.post_date}

    • -
-
-
-
{/* END BLOG POST TEXT */} -
{/* End row */} -
{/* END WIDE BLOG POST */} - {/* POSTS WRAPPER */} -
-
- {/* BLOG POST #1 */} -
-
- {/* BLOG POST IMAGE */} -
- blog-post-image -
- {/* BLOG POST TEXT */} -
- {/* Post Tag */} - Product News - {/* Post Link */} -
- Aliqum mullam porta blandit: lacus and sapien - gravida - -
- {/* Text */} -

Egestas luctus vitae augue and ipsum ultrice quisque in cursus lacus feugiat - congue diam ultrice laoreet sagittis -

- {/* Post Meta */} -
-
    -

  • MermsEmr Team

    • -

    • -

  • Apr 23, 2023

    • -
-
-
{/* END BLOG POST TEXT */} -
-
{/* END BLOG POST #1 */} - {/* BLOG POST #2 */} -
-
- {/* BLOG POST IMAGE */} -
- blog-post-image -
- {/* BLOG POST TEXT */} -
- {/* Post Tag */} - Community - {/* Post Link */} -
- Porttitor cursus fusce neque CEO egestas cursus - magna sapien and suscipit ipsum - -
- {/* Text */} -

Aliqum mullam ipsum vitae and blandit vitae tempor sapien and donec lipsum

- {/* Post Meta */} -
-
    -

  • By Miranda Green

    • -

    • -

  • Apr 09, 2023

    • -
-
-
{/* END BLOG POST TEXT */} -
-
{/* END BLOG POST #2 */} - {/* BLOG POST #3 */} -
-
- {/* BLOG POST IMAGE */} -
- blog-post-image -
- {/* BLOG POST TEXT */} -
- {/* Post Tag */} - Freelancer Tips - {/* Post Link */} -
- Cubilia laoreet ipsum augue eget egestas Martex magna -
- {/* Text */} -

Luctus vitae egestas augue and ipsum ultrice quisque in cursus lacus feugiat - egets congue ultrice sagittis laoreet -

- {/* Post Meta */} -
-
    -

  • By Helen J.

    • -

    • -

  • Apr 01, 2023

    • -
-
-
{/* END BLOG POST TEXT */} -
-
{/* END BLOG POST #3 */} -
-
{/* END POSTS WRAPPER */} - {/* BLOG POSTS CATEGORY */} -
-
-
-

Latest News

-
+ {isFetching ? +
+
+

Loading...

- {/* POSTS WRAPPER */} -
-
- {/* BLOG POST #4 */} -
-
+ : isError ? +
+
+

{error.message}

+
+
+ : + <> + {(data && data?.payload?.blogdata?.length > 0) ? + <> + {/* WIDE BLOG POST */} +
+
{/* BLOG POST IMAGE */} -
- blog-post-image +
+
+ blog-post-image +
{/* BLOG POST TEXT */} -
- {/* Post Tag */} - Tutorials - {/* Post Link */} -
- Phasellus blandit justo undo aliquam vitae molestie - nunc sapien augue justo aliquet - -
- {/* Text */} -

Aliqum mullam ipsum vitae and blandit vitae tempor sapien and donec lipsum

- {/* Post Meta */} -
-
    -

  • By Miranda Green

    • -

    • -

  • Mar 20, 2023

    • -
+
+
+ +

+ {data?.payload?.blogdata[0].post_title} +

+ {/* Text */} + {/*

{data?.payload?.blogdata[0].post_content.substring(0, 250)}

*/} +

250 ? data?.payload?.blogdata[0].post_content.substring(0, 250) + ' ...' : data?.payload?.blogdata[0].post_content.substring(0, 250) }} /> + {/* Post Meta */} +

+
    +

  • MERMS

    • +

    • +

  • {data?.payload?.blogdata[0]?.post_date}

    • +
+
{/* END BLOG POST TEXT */} +
{/* End row */} +
{/* END WIDE BLOG POST */} + {/* POSTS WRAPPER */} +
+
+ {/* BLOG POST #1 */} + {data?.payload?.blogdata.map((item, index)=>{ + if(index > 0){ + return ( +
+
+ {/* BLOG POST IMAGE */} +
+ blog-post-image +
+ {/* BLOG POST TEXT */} +
+ {/* Post Tag */} + {/* Product News */} + {/* Post Link */} +
+ {item.post_title} +
+ {/* Text */} +

250 ? item.post_content.substring(0, 250) + ' ...' : item.post_content.substring(0, 250) }} /> + {/* Post Meta */} +

+
    +

  • Merms

    • +

    • +

  • {item.post_date}

    • +
+
+
{/* END BLOG POST TEXT */} +
+
+ ) + } + })} + {/* END BLOG POST #1 */}
-
{/* END BLOG POST #4 */} - {/* BLOG POST #5 */} -
-
- {/* BLOG POST IMAGE */} -
- blog-post-image +
{/* END POSTS WRAPPER */} + {/* BLOG POSTS CATEGORY */} +
+
+
+

Latest News

- {/* BLOG POST TEXT */} -
- {/* Post Tag */} - Freelancer Tips - {/* Post Link */} -
- Blandit justo phasellus undo aliquam diam molestie - vitae - -
- {/* Text */} -

Luctus vitae egestas augue and ipsum ultrice quisque in cursus lacus feugiat - egets congue ultrice sagittis laoreet -

- {/* Post Meta */} -
-
    -

  • MermsEmr Team

    • -

    • -

  • Mar 13, 2023

    • -
-
-
{/* END BLOG POST TEXT */}
-
{/* END BLOG POST #5 */} - {/* BLOG POST #6 */} -
-
- {/* BLOG POST IMAGE */} -
- blog-post-image -
- {/* BLOG POST TEXT */} -
- {/* Post Tag */} - Extensions - {/* Post Link */} -
- Cursus porttitor fusce neque CEO egestas cursus magna - sapien and ipsum suscipit - -
- {/* Text */} -

Mullam ipsum aliqum vitae and blandit vitae tempor sapien and lipsum donec

- {/* Post Meta */} -
-
    -

  • MermsEmr Team

    • -

    • -

  • Feb 23, 2023

    • -
-
-
{/* END BLOG POST TEXT */} -
-
{/* END BLOG POST #6 */} -
{/* End row */} -
{/* END POSTS WRAPPER */} - {/* SQUARE BLOG POST */} -
-
-
- {/* SQUARE BLOG POST WRAPPER */} -
-
- {/* BLOG POST TEXT */} -
-
+
+ {/* POSTS WRAPPER */} +
+
+ {/* BLOG POST #4 */} +
+
+ {/* BLOG POST IMAGE */} +
+ blog-post-image +
+ {/* BLOG POST TEXT */} +
{/* Post Tag */} - Video Tutorials + Tutorials {/* Post Link */} -

- Lipsum sodales sapien Martex aliquet blandit - augue gravida posuere +

+ Phasellus blandit justo undo aliquam vitae molestie + nunc sapien augue justo aliquet -
+ {/* Text */} -

Aliqum mullam blandit vitae and tempor sapien and donec lipsum gravida porta - undo velna dolor libero risus aliquet tempus posuere vitae tempor -

+

Aliqum mullam ipsum vitae and blandit vitae tempor sapien and donec lipsum

{/* Post Meta */} -
+
    -

  • MermsEmr Team

    • +

  • By Miranda Green

    • -

  • Feb 12, 2023

    • +

  • Mar 20, 2023

-
+
{/* END BLOG POST TEXT */}
- {/* BLOG POST IMAGE */} -
-
- {/* Play Icon */} - - {/* Preview Image */} - video-preview +
{/* END BLOG POST #4 */} + {/* BLOG POST #5 */} +
+
+ {/* BLOG POST IMAGE */} +
+ blog-post-image
+ {/* BLOG POST TEXT */} +
+ {/* Post Tag */} + Freelancer Tips + {/* Post Link */} +
+ Blandit justo phasellus undo aliquam diam molestie + vitae + +
+ {/* Text */} +

Luctus vitae egestas augue and ipsum ultrice quisque in cursus lacus feugiat + egets congue ultrice sagittis laoreet +

+ {/* Post Meta */} +
+
    +

  • MermsEmr Team

    • +

    • +

  • Mar 13, 2023

    • +
+
+
{/* END BLOG POST TEXT */}
-
{/* End row */} -
{/* END SQUARE BLOG POST WRAPPER */} +
{/* END BLOG POST #5 */} + {/* BLOG POST #6 */} +
+
+ {/* BLOG POST IMAGE */} +
+ blog-post-image +
+ {/* BLOG POST TEXT */} +
+ {/* Post Tag */} + Extensions + {/* Post Link */} +
+ Cursus porttitor fusce neque CEO egestas cursus magna + sapien and ipsum suscipit + +
+ {/* Text */} +

Mullam ipsum aliqum vitae and blandit vitae tempor sapien and lipsum donec

+ {/* Post Meta */} +
+
    +

  • MermsEmr Team

    • +

    • +

  • Feb 23, 2023

    • +
+
+
{/* END BLOG POST TEXT */} +
+
{/* END BLOG POST #6 */} +
{/* End row */} +
{/* END POSTS WRAPPER */} + {/* SQUARE BLOG POST */} +
+
+
+ {/* SQUARE BLOG POST WRAPPER */} +
+
+ {/* BLOG POST TEXT */} +
+
+ {/* Post Tag */} + Video Tutorials + {/* Post Link */} +

+ Lipsum sodales sapien Martex aliquet blandit + augue gravida posuere + +

+ {/* Text */} +

Aliqum mullam blandit vitae and tempor sapien and donec lipsum gravida porta + undo velna dolor libero risus aliquet tempus posuere vitae tempor +

+ {/* Post Meta */} +
+
    +

  • MermsEmr Team

    • +

    • +

  • Feb 12, 2023

    • +
+
+
+
+ {/* BLOG POST IMAGE */} +
+
+ {/* Play Icon */} + + {/* Preview Image */} + video-preview +
+
+
{/* End row */} +
{/* END SQUARE BLOG POST WRAPPER */} +
+
{/* End row */} +
{/* END SQUARE BLOG POST */} + + : +
+
+

No Blog Found!

-
{/* End row */} -
{/* END SQUARE BLOG POST */} - +
+ } + + }
{/* End container */}
{/* END BLOG POSTS LISTING */} {/* PAGE PAGINATION @@ -330,7 +321,6 @@ export default function Home() { ============================================= */}
- )