src/components/familyResources/FamBlog.jsx

@@ -1,12 +1,46 @@
-import React from '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() {
-  let blogdata = [1,2,3,4,5,6,7,8]
+
+  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>
       <>
@@ -25,30 +59,46 @@ export default function FamBlog() {
           <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...' />
+                <SearchCom 
+                  placeholder='Search Blog Items...' 
+                  value={filteredBlog.value}
+                  handleSearch={handleFilterBlog}
+                />
               </div>
+              }
             </div>
 
             <div className="content-section w-full-width">
-              <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
-                <DataIteration
-                  datas={blogdata}
-                  startLength={process.env.REACT_APP_ZERO_STATE}
-                  endLength={blogdata.length}
-                >
-                  {({ datas }) => (
-                    <div key={Math.random()}>
-                      <FamBlogItem
-                        datas={datas}
-                        bg={blogdata?.image_url && blogdata.image_url}
-                        className=''
-                        hidden={false}
-                      />
-                    </div>
-                  )}
-                </DataIteration>
-              </div>
+              {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>

src/components/familyResources/FamBlogItem.jsx

@@ -13,7 +13,7 @@ export default function FamBlogItem({datas, className, bg, hidden=false}) {
               <div
                 className="w-full h-[236px] p-6  rounded-xl overflow-hidden bg-sky-200"
                 style={{
-                // background: `url(${`${bg}${datas.meta_value}`}) 0% 0% / cover no-repeat`,
+                background: `url(${`${bg}${datas.meta_value}`}) 0% 0% / cover no-repeat`,
                 }}
               >
                 <div className="product-two-options flex justify-between mb-5 relative">

src/services/UsersService.js

@@ -1279,6 +1279,20 @@ class usersService {
     };
     return this.postAuxEnd("/familyresources", postData);
   }
+
+  // API FUNCTION TO GET FAMILY BLOG DATA
+  getFamilyBlogData() {
+    var postData = {
+      uuid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      page: 0,
+      offset: 0,
+      limit: 100,
+    };
+    return this.postAuxEnd("/blogdata", postData);
+  }
+  
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)