From 9781011ec102478ffd74fbb78864864d410583b8 Mon Sep 17 00:00:00 2001 From: Dev Date: Sat, 6 Jul 2024 12:28:07 +0530 Subject: [PATCH] Global State Added --- frontend/package-lock.json | 25 +++++++++++++++++++++++++ frontend/package.json | 1 + frontend/src/App.tsx | 3 +++ frontend/src/components/Blog/Story.tsx | 5 +++-- frontend/src/hooks/index.ts | 24 ++++++++++++++++++++++++ frontend/src/store/atoms/singlePost.ts | 18 ++++++++++++++++++ 6 files changed, 74 insertions(+), 2 deletions(-) create mode 100644 frontend/src/store/atoms/singlePost.ts diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 3f95b65..026307b 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -26,6 +26,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", @@ -4245,6 +4246,11 @@ "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==", "dev": true }, + "node_modules/hamt_plus": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz", + "integrity": "sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA==" + }, "node_modules/has-bigints": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz", @@ -6516,6 +6522,25 @@ "node": ">=8.10.0" } }, + "node_modules/recoil": { + "version": "0.7.7", + "resolved": "https://registry.npmjs.org/recoil/-/recoil-0.7.7.tgz", + "integrity": "sha512-8Og5KPQW9LwC577Vc7Ug2P0vQshkv1y3zG3tSSkWMqkWSwHmE+by06L8JtnGocjW6gcCvfwB3YtrJG6/tWivNQ==", + "dependencies": { + "hamt_plus": "1.0.2" + }, + "peerDependencies": { + "react": ">=16.13.1" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, "node_modules/reflect.getprototypeof": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz", diff --git a/frontend/package.json b/frontend/package.json index f670a05..653181d 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 6ac5dfd..b33614e 100644 --- a/frontend/src/App.tsx +++ b/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 ( + + ); } diff --git a/frontend/src/components/Blog/Story.tsx b/frontend/src/components/Blog/Story.tsx index eb3800d..7d5dac1 100644 --- a/frontend/src/components/Blog/Story.tsx +++ b/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}`); diff --git a/frontend/src/hooks/index.ts b/frontend/src/hooks/index.ts index dbc396f..27792bd 100644 --- a/frontend/src/hooks/index.ts +++ b/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 + } +} \ No newline at end of file diff --git a/frontend/src/store/atoms/singlePost.ts b/frontend/src/store/atoms/singlePost.ts new file mode 100644 index 0000000..3199b56 --- /dev/null +++ b/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; + } + }) +}) \ No newline at end of file