Files
Users-Wrench/src/components/Blogs/index.jsx
T
2023-07-24 20:06:25 +01:00

79 lines
3.2 KiB
React

import React, { useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import Layout from "../Partials/Layout";
import CommonHead from "../UserHeader/CommonHead";
import usersService from "../../services/UsersService";
import LoadingSpinner from "../Spinners/LoadingSpinner";
export default function BlogItem(props) {
const apiCall = new usersService()
const navigate = useNavigate()
const [blogdata, setBlogdata] = useState({loading: true, data:{}})
const [selectTab, setValue] = useState("today");
const filterHandler = (value) => {
setValue(value);
};
const queryParams = new URLSearchParams(location?.search);
const blog_id = queryParams.get("blog_id");
useEffect(()=>{
if(!blog_id){
navigate('/',{replace:true})
}
apiCall.getSingleBlogData({blog_id}).then(res => {
setBlogdata({loading: false, data:res.data})
}).catch(error => {
setBlogdata({loading: false, data:{}})
console.log('ERROR', error)
})
},[blog_id])
return (
<Layout>
<CommonHead
commonHeadData={props.commonHeadData}
/>
<div className="notification-page w-full mb-10">
<div className="mb-5">
<h1 className="text-26 font-bold text-dark-gray dark:text-white">
<span
className={`${selectTab === "today" ? "block" : "hidden"}`}
>
{blogdata.data?.blogdata?.[0]?.post_title}
</span>
</h1>
</div>
<div className="notification-wrapper w-full bg-white p-8 rounded-2xl">
{blogdata.loading ?
<LoadingSpinner size='8' color='sky-blue' height='h-[100px]' />
:
blogdata?.data?.blogdata && blogdata.data?.blogdata.length ?
<div className="w-full">
{/* heading */}
<div className="sm:flex justify-between items-center mb-6">
{/* <div className="mb-5">
<h1 className="text-26 font-bold text-dark-gray dark:text-white">
<span
className={`${selectTab === "today" ? "block" : "hidden"}`}
>
{blogdata.data?.blogdata?.[0]?.post_title}
</span>
</h1>
</div> */}
{/* <div className="slider-btns flex space-x-4">
</div> */}
</div>
<div dangerouslySetInnerHTML={{__html: blogdata.data?.blogdata?.[0]?.post_content}}>
</div>
</div>
:
<h1 className="text-26 font-bold text-dark-gray dark:text-white">No Blog Found!</h1>
}
</div>
</div>
</Layout>
);
}