victorAnumudu
109 lines
3.7 KiB
React
109 lines
3.7 KiB
React
import React, { useEffect, useState } from 'react'
|
|
import Layout from '../Partials/Layout'
|
|
import SearchCom from '../Helpers/SearchCom'
|
|
import DataIteration from '../Helpers/DataIteration'
|
|
import FamBlogItem from './FamBlogItem'
|
|
import CustomBreadcrumb from '../Breadcrumb/CustomBreadcrumb'
|
|
import usersService from '../../services/UsersService'
|
|
import LoadingSpinner from '../Spinners/LoadingSpinner'
|
|
|
|
export default function FamBlog() {
|
|
|
|
const [blogData, setBlogData] = useState({loading: true, data: []});
|
|
|
|
const [filteredBlog, setFilteredBlog] = useState({value: '', data:[]}) // State to hold filter blog
|
|
|
|
const handleFilterBlog = ({target}) => {
|
|
let filterWord = target.value
|
|
let filteredData = []
|
|
if(!filterWord){
|
|
filteredData = blogData?.data?.blogdata
|
|
}else{
|
|
filteredData = blogData?.data?.blogdata?.filter(item => item.post_title.toLowerCase().startsWith(filterWord.toLowerCase()))
|
|
}
|
|
setFilteredBlog({value:target.value, data: filteredData})
|
|
}
|
|
|
|
const api = new usersService();
|
|
const getFamilyBlog = async () => {
|
|
setBlogData({loading: true, data: []})
|
|
try {
|
|
const res = await api.getFamilyBlogData();
|
|
setBlogData({loading: false, data:res.data});
|
|
setFilteredBlog(prev => ({...prev, data:res.data?.blogdata}))
|
|
} catch (error) {
|
|
setBlogData({loading: false, data: []})
|
|
throw new Error("Error getting mode");
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
getFamilyBlog();
|
|
}, []);
|
|
|
|
return (
|
|
<Layout>
|
|
<>
|
|
<div className='mb-4'>
|
|
<CustomBreadcrumb
|
|
title='Blog'
|
|
breadcrumb = {
|
|
[
|
|
{ link: "/", title: "Home" },
|
|
{ link: "/fam-blog", title: "Blogs", active: true},
|
|
]
|
|
}
|
|
/>
|
|
</div>
|
|
<div className={`w-full`}>
|
|
<div className="main-container w-full">
|
|
<div className="filter-section w-full items-center sm:flex justify-between mb-6">
|
|
{/* filter-search */}
|
|
{blogData?.data?.blogdata?.length > 0 &&
|
|
<div className="sm:w-1/2 w-full sm:pr-20 pr-0 mb-5 sm:mb-0">
|
|
<SearchCom
|
|
placeholder='Search Blog Items...'
|
|
value={filteredBlog.value}
|
|
handleSearch={handleFilterBlog}
|
|
/>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<div className="content-section w-full-width">
|
|
{blogData.loading ?
|
|
<div className='flex justify-center items-center bg-white rounded-2xl'>
|
|
<LoadingSpinner size='10' color='sky-blue' height='h-[20rem]' />
|
|
</div>
|
|
: blogData?.data?.blogdata?.length > 0 && filteredBlog?.data?.length > 0?
|
|
<div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
|
|
<DataIteration
|
|
datas={filteredBlog?.data}
|
|
startLength={process.env.REACT_APP_ZERO_STATE}
|
|
endLength={filteredBlog?.data?.length}
|
|
>
|
|
{({ datas }) => (
|
|
<div key={Math.random()}>
|
|
<FamBlogItem
|
|
datas={datas}
|
|
bg={blogData?.data?.image_url && blogData?.data?.image_url}
|
|
className=''
|
|
hidden={false}
|
|
/>
|
|
</div>
|
|
)}
|
|
</DataIteration>
|
|
</div>
|
|
:
|
|
<div className='h-[30rem] flex justify-center items-center bg-white rounded-2xl'>
|
|
<p>No Blog Found</p>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
</Layout>
|
|
)
|
|
}
|