Feature | State management (Recoil)

frontend/package.json

@@ -40,6 +40,7 @@
     "react-router-dom": "^6.23.0",
     "react-toastify": "^10.0.5",
     "react-use": "^17.5.0",
+    "recoil": "^0.7.7",
     "tailwind-merge": "^2.3.0",
     "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss-animate": "^1.0.7",

frontend/src/App.tsx

@@ -2,6 +2,7 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { lazy, Suspense } from 'react';
 import Spinner from './components/Spinner';
 import { ThemeProvider } from "@/components/theme-provider"
+import { RecoilRoot } from 'recoil';
 const Home = lazy(() => import('./pages/Home'));
 const Signup = lazy(() => import('./pages/Signup'));
 const Signin = lazy(() => import('./pages/Signin'));
@@ -16,6 +17,7 @@ const Contributor = lazy(() => import('./pages/Contributor'));
 function App() {
   return (
     <ThemeProvider>
+      <RecoilRoot>
     <BrowserRouter>
       <Suspense
         fallback={
@@ -38,6 +40,7 @@ function App() {
         </Routes>
       </Suspense>
     </BrowserRouter>
+    </RecoilRoot>
     </ThemeProvider>
   );
 }

frontend/src/components/Blog/Story.tsx

@@ -1,7 +1,7 @@
 import { useState,useEffect } from 'react';
 import ReactQuill from 'react-quill';
 import { toast } from 'react-toastify';
-import { useBlog } from './../../hooks';
+import { useBlog, useSingleBlog } from './../../hooks';
 import { useNavigate, useParams } from 'react-router-dom';
 import BookmarkIcon from '../icons/Bookmark';
 import BookmarkSolid from '../icons/BookmarkSolid';
@@ -22,7 +22,8 @@ import ChatModule from '../ChatModule';
 const Story = () => {
   const { id } = useParams();
   const navigate = useNavigate();
-  const { blog, loading } = useBlog({ id: id || '' });
+  const {blog,loading} = useSingleBlog(id || "");
+
 
   function handleClickOnAvatar() {
     navigate(`/profile/${blog?.author?.id}`);

frontend/src/hooks/index.ts

@@ -5,6 +5,8 @@ import { useNavigate } from 'react-router-dom';
 import { BlogResponse } from '../types/blog';
 import { Post } from '../types/post';
 import { useSearchParams } from 'react-router-dom';
+import { useRecoilValueLoadable } from 'recoil';
+import { SinglePost } from '@/store/atoms/singlePost';
 
 const PAGE_SIZE = 10;
 
@@ -258,3 +260,25 @@ export const useBookmarks = () => {
     bookmarks,
   };
 };
+
+export const useSingleBlog = (id:string)=>{
+  const singleBlog = useRecoilValueLoadable(SinglePost(id));
+  const [loading, setloading] = useState(true);
+  const blog:Post = singleBlog.contents;
+
+  useEffect(()=>{
+    if(singleBlog.state==="hasValue"){
+      setloading(false)
+    }else if(singleBlog.state==="loading"){
+      setloading(true);
+    }else if(singleBlog.state==="hasError"){
+      setloading(false)
+    }
+
+  },[singleBlog.state]);
+
+  return {
+    loading,
+    blog
+  }
+}

frontend/src/store/atoms/singlePost.ts

@@ -0,0 +1,18 @@
+import { BACKEND_URL } from "@/config";
+import axios from "axios";
+import { atomFamily, selectorFamily } from "recoil";
+
+export const SinglePost = atomFamily({
+    key:"SinglePostAtom",
+    default:selectorFamily({
+        key:"SinglePostSelector",
+        get:(id)=>async()=>{
+            const res = await axios.get(`${BACKEND_URL}/api/v1/blog/${String(id)}`,{
+                headers:{
+                    "Authorization":`Bearer ${localStorage.getItem("token")}`
+                }
+            });
+            return res.data.post;
+        }
+    })
+})