Single Blog View page added #10
@@ -8,7 +8,7 @@ function QueryClientContext({children}) {
|
||||
refetchOnWindowFocus: false,
|
||||
retry: 3,
|
||||
// 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 (
|
||||
<>
|
||||
@@ -64,7 +65,8 @@ export default function Home() {
|
||||
<h3 className="s-38 w-700">
|
||||
{/*<Link href={data?.payload?.blogdata[0].guid}> {data?.payload?.blogdata[0].post_title}</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}
|
||||
</Link>
|
||||
@@ -109,7 +111,8 @@ export default function Home() {
|
||||
<h6 className="s-20 w-700">
|
||||
{/* <Link href={item.guid}> {item.post_title}</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}
|
||||
</Link>
|
||||
|
||||
Reference in New Issue
Block a user