single blog view added
This commit was merged in pull request #10.
This commit is contained in:
victorAnumudu
@@ -8,7 +8,7 @@ function QueryClientContext({children}) {
|
|||||||
refetchOnWindowFocus: false,
|
refetchOnWindowFocus: false,
|
||||||
retry: 3,
|
retry: 3,
|
||||||
// refetchOnMount: false,
|
// refetchOnMount: false,
|
||||||
staleTime: 60000,
|
staleTime: Infinity,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -0,0 +1,161 @@
|
|||||||
|
import { useRouter } from "next/router"
|
||||||
|
import Layout from "../../../components/layout/Layout"
|
||||||
|
import Link from "next/link"
|
||||||
|
import { useQuery } from "@tanstack/react-query"
|
||||||
|
import queryKeys from "../../../components/queryclientProvider/queryKeys"
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
|
||||||
|
const {data, isFetching, isError, error} = useQuery({
|
||||||
|
queryKey: queryKeys.blog,
|
||||||
|
queryFn: async () => {
|
||||||
|
try {
|
||||||
|
const blog_url = 'https://blogdata.chiefsoft.net/mermsblogdata/mermsemr';
|
||||||
|
const res = await fetch(blog_url)
|
||||||
|
const data = await res.json()
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
catch(e){
|
||||||
|
return(e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
let {query} = useRouter()
|
||||||
|
|
||||||
|
const blogData = data?.payload?.blogdata
|
||||||
|
const imageURL = data?.payload?.image_url
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Layout headerStyle={1} footerStyle={3} headerCls="navbar-dark inner-page-header">
|
||||||
|
<div>
|
||||||
|
{isFetching ?
|
||||||
|
<div className="pb-90 inner-page-hero blog-page-section">
|
||||||
|
<div className="">
|
||||||
|
<p className='text-mute text-center'>Loading...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
: isError ?
|
||||||
|
<div className="pb-90 inner-page-hero blog-page-section">
|
||||||
|
<div className="">
|
||||||
|
<p className='text-danger text-center'>{error.message}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
:
|
||||||
|
<>
|
||||||
|
<section id="single-post" className="pb-90 inner-page-hero blog-page-section">
|
||||||
|
<div className="container">
|
||||||
|
<div className="row justify-content-center">
|
||||||
|
{/* SINGLE POST CONTENT */}
|
||||||
|
<div className="col-xl-10">
|
||||||
|
{blogData?.filter(item => item?.id == query?.id).length > 0 ?
|
||||||
|
<>
|
||||||
|
{blogData?.filter(item => item?.id == query?.id).map(blog => {
|
||||||
|
return (
|
||||||
|
<div key={blog?.id} className="post-content">
|
||||||
|
{/* SINGLE POST TITLE */}
|
||||||
|
<div className="single-post-title text-center">
|
||||||
|
{/* Post Tag */}
|
||||||
|
{/* <span className="post-tag color--green-400">Community</span> */}
|
||||||
|
{/* Title */}
|
||||||
|
<h2 className="s-46 w-700">{blog?.post_title}</h2>
|
||||||
|
{/* Post Meta */}
|
||||||
|
<div className="blog-post-meta mt-35">
|
||||||
|
<ul className="post-meta-list ico-10">
|
||||||
|
<li><p className="w-500">MERMS </p></li>
|
||||||
|
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
|
||||||
|
<li><p>{new Date(blog?.post_date).toDateString()}</p></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div> {/* END SINGLE POST TITLE */}
|
||||||
|
{/* SINGLE POST IMAGE */}
|
||||||
|
<div className="blog-post-img py-50">
|
||||||
|
<img className="img-fluid r-16" src={`${imageURL}/${blog?.meta_value}`} alt="blog-post-image" />
|
||||||
|
</div>
|
||||||
|
{/* SINGLE POST TEXT */}
|
||||||
|
<p dangerouslySetInnerHTML={{ __html: blog?.post_content }} />
|
||||||
|
{/* END SINGLE POST TEXT */}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</>
|
||||||
|
:
|
||||||
|
<div className="">
|
||||||
|
<p className='text-danger text-center'>Error! Blog not found.</p>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div> {/* END SINGLE POST CONTENT */}
|
||||||
|
</div> {/* End row */}
|
||||||
|
</div> {/* End container */}
|
||||||
|
</section> {/* END SINGLE POST */}
|
||||||
|
{/* BLOG-1
|
||||||
|
============================================= */}
|
||||||
|
<section id="blog-1" className="bg--white-300 py-100 blog-section division">
|
||||||
|
<div className="container">
|
||||||
|
{/* SECTION TITLE */}
|
||||||
|
<div className="row justify-content-center">
|
||||||
|
<div className="col-md-10 col-lg-9">
|
||||||
|
<div className="section-title mb-70">
|
||||||
|
<h2 className="s-50 w-700">Recent Postings</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="row">
|
||||||
|
{/* BLOG POST #1 */}
|
||||||
|
{blogData?.filter(item => item.id != query?.id).map((item, index)=>{
|
||||||
|
if(index < 3){
|
||||||
|
return (
|
||||||
|
<div key={item.id || index} className="col-md-6 col-lg-4">
|
||||||
|
<div className="blog-post mb-40 wow fadeInUp clearfix">
|
||||||
|
{/* BLOG POST IMAGE */}
|
||||||
|
<div className="blog-post-img mb-35">
|
||||||
|
<img
|
||||||
|
className="img-fluid r-16"
|
||||||
|
src={`${imageURL}/${item.meta_value}`}
|
||||||
|
alt="blog-post-image"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/* BLOG POST TEXT */}
|
||||||
|
<div className="blog-post-txt">
|
||||||
|
{/* Post Tag */}
|
||||||
|
{/* <span className="post-tag color--red-400">Product News</span> */}
|
||||||
|
{/* Post Link */}
|
||||||
|
<h6 className="s-20 w-700">
|
||||||
|
{/* <Link href={item.guid}> {item.post_title}</Link> */}
|
||||||
|
<Link
|
||||||
|
href={`/blogview/${item.id}`}
|
||||||
|
// href={{pathname: '/merms-blogview', query:{...item, image_url:data?.payload?.image_url}}}
|
||||||
|
>
|
||||||
|
{item.post_title}
|
||||||
|
</Link>
|
||||||
|
</h6>
|
||||||
|
{/* Text */}
|
||||||
|
<p dangerouslySetInnerHTML={{ __html: item.post_content.length > 250 ? item.post_content.substring(0, 250) + ' ...' : item.post_content.substring(0, 250) }} />
|
||||||
|
{/* Post Meta */}
|
||||||
|
<div className="blog-post-meta mt-20">
|
||||||
|
<ul className="post-meta-list ico-10">
|
||||||
|
<li><p className="p-sm w-500">Merms</p></li>
|
||||||
|
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
|
||||||
|
<li><p className="p-sm">{new Date(item.post_date).toDateString()}</p></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div> {/* END BLOG POST TEXT */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
})}
|
||||||
|
{/* END BLOG POST #1 */}
|
||||||
|
</div> {/* End row */}
|
||||||
|
</div> {/* End container */}
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</Layout>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
+5
-2
@@ -22,6 +22,7 @@ export default function Home() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@@ -64,7 +65,8 @@ export default function Home() {
|
|||||||
<h3 className="s-38 w-700">
|
<h3 className="s-38 w-700">
|
||||||
{/*<Link href={data?.payload?.blogdata[0].guid}> {data?.payload?.blogdata[0].post_title}</Link>*/}
|
{/*<Link href={data?.payload?.blogdata[0].guid}> {data?.payload?.blogdata[0].post_title}</Link>*/}
|
||||||
<Link
|
<Link
|
||||||
href={{pathname: '/merms-blogview', query:{...data?.payload?.blogdata[0], image_url:data?.payload?.image_url}}}
|
href={`/blogview/${data?.payload?.blogdata[0].id}`}
|
||||||
|
// href={{pathname: '/merms-blogview', query:{...data?.payload?.blogdata[0], image_url:data?.payload?.image_url}}}
|
||||||
>
|
>
|
||||||
{data?.payload?.blogdata[0].post_title}
|
{data?.payload?.blogdata[0].post_title}
|
||||||
</Link>
|
</Link>
|
||||||
@@ -109,7 +111,8 @@ export default function Home() {
|
|||||||
<h6 className="s-20 w-700">
|
<h6 className="s-20 w-700">
|
||||||
{/* <Link href={item.guid}> {item.post_title}</Link> */}
|
{/* <Link href={item.guid}> {item.post_title}</Link> */}
|
||||||
<Link
|
<Link
|
||||||
href={{pathname: '/merms-blogview', query:{...item, image_url:data?.payload?.image_url}}}
|
href={`/blogview/${item.id}`}
|
||||||
|
// href={{pathname: '/merms-blogview', query:{...item, image_url:data?.payload?.image_url}}}
|
||||||
>
|
>
|
||||||
{item.post_title}
|
{item.post_title}
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
Reference in New Issue
Block a user