Refactor code to use state.auth instead of state.blog for user blogs

Author: ucangun

eslint.config.js

@@ -19,7 +19,7 @@ export default tseslint.config(
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
-      // "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-explicit-any": "off",
       "react-refresh/only-export-components": [
         "warn",
         { allowConstantExport: true },

src/components/Account/UserLatestBlogs/LatestBlogCard.tsx

@@ -14,7 +14,7 @@ import { useSelector } from "react-redux";
 
 const LatestBlogCard: React.FC = () => {
   const { getBlogByUserId } = useBlogCall();
-  const { userBlogs } = useSelector((state: RootState) => state.blog);
+  const { userBlogs } = useSelector((state: RootState) => state.auth);
   const { currentUser } = useSelector((state: RootState) => state.auth);
   const navigate = useNavigate();
 

src/components/Home/TopBlogWriter.tsx

@@ -17,13 +17,14 @@ import TopBlogWriterCard from "./TopBlogWriterCard";
 import { useNavigate } from "react-router-dom";
 
 const TopBlogWriter: React.FC = () => {
-  const { userBlogs, loading } = useSelector((state: RootState) => state.blog);
+  const { userBlogs, loading } = useSelector((state: RootState) => state.auth);
   const { getBlogByUserId } = useBlogCall();
   const navigate = useNavigate();
 
   // Get the best blog after loading
-  const bestBlog = userBlogs.length > 0 ? userBlogs[0] : null;
-  const topWriterBlogs = userBlogs.slice(1, 4);
+  const bestBlog = userBlogs && userBlogs.length > 0 ? userBlogs[0] : null;
+  const topWriterBlogs =
+    userBlogs && userBlogs.length > 1 ? userBlogs.slice(1, 4) : [];
 
   useEffect(() => {
     // Fetch data
@@ -46,7 +47,6 @@ const TopBlogWriter: React.FC = () => {
   return (
     <Grid2 container spacing={2}>
       {/* Main article on left */}
-
       <Grid2 size={{ xs: 12, md: 6 }}>
         {bestBlog && (
           <Card sx={{ maxWidth: "100%" }}>

src/features/authSlice.tsx

@@ -68,10 +68,7 @@ const authSlice = createSlice({
       state.token = "";
       state.currentUser = null;
     },
-    updateUserBlogsSuccess: (state, { payload }) => {
-      state.loading = false;
-      state.userBlogs = payload.data;
-    },
+
     getsingleUserSuccess: (state, { payload }) => {
       state.loading = false;
       state.singleUser = payload.data;
@@ -95,7 +92,7 @@ export const {
   fetchFail,
   updateSuccess,
   deleteSuccess,
-  updateUserBlogsSuccess,
+
   getsingleUserSuccess,
   forgotPasswordSuccess,
 } = authSlice.actions;

src/features/blogSlice.tsx

@@ -54,7 +54,7 @@ const blogSlice = createSlice({
     getBlogByUserIdSuccess: (state, { payload }) => {
       state.loading = false;
       state.error = false;
-      state.userBlogs = payload.data;
+      state[payload.endpoint] = payload.data;
     },
     setPage: (state, { payload }) => {
       state.currentPage = payload;

src/hooks/useBlogCall.tsx

@@ -8,7 +8,7 @@ import {
   getSingleBlogSuccess,
   getSingleCategorySuccess,
 } from "../features/blogSlice";
-import { updateUserBlogsSuccess } from "../features/authSlice";
+
 import { RootState } from "../app/store";
 import { toastError, toastSuccess } from "../helpers/ToastNotify";
 import { useNavigate } from "react-router-dom";
@@ -20,11 +20,25 @@ const useBlogCall = () => {
   const { token } = useSelector((state: RootState) => state.auth);
   const dispatch = useDispatch();
 
-  const getBlogData = async (endpoint: string): Promise<void> => {
+  const getBlogData = async (
+    endpoint: string,
+    query?: string
+  ): Promise<void> => {
     dispatch(fetchStart());
     try {
-      const { data } = await axios(`${BASE_URL}${endpoint}`);
-      dispatch(getBlogSuccess({ endpoint, data }));
+      const url = query
+        ? `${BASE_URL}${endpoint}?${query}`
+        : `${BASE_URL}${endpoint}`;
+      const { data } = await axios(url, {
+        headers: {
+          Authorization: `Token ${token}`,
+        },
+      });
+      if (query?.includes("author=")) {
+        dispatch(getBlogByUserIdSuccess({ endpoint: "userBlogs", data }));
+      } else {
+        dispatch(getBlogSuccess({ endpoint, data }));
+      }
     } catch (error) {
       dispatch(fetchFail());
       console.error(error);
@@ -67,8 +81,7 @@ const useBlogCall = () => {
           Authorization: `Token ${token}`,
         },
       });
-      dispatch(getBlogByUserIdSuccess(data));
-      dispatch(updateUserBlogsSuccess(data));
+      dispatch(getBlogByUserIdSuccess({ endpoint: "userBlogs", data }));
     } catch (error) {
       dispatch(fetchFail());
       console.error(error);

src/pages/Blogs.tsx

@@ -55,8 +55,8 @@ const Blogs = () => {
           "&::-webkit-scrollbar": {
             display: "none", // Hide scrollbar for md and above
           },
-          "-ms-overflow-style": "none", // Hide scrollbar for Internet Explorer
-          "scrollbar-width": "none", // Hide scrollbar for Firefox
+          msOverflowStyle: "none", // Hide scrollbar for Internet Explorer
+          scrollbarWidth: "none", // Hide scrollbar for Firefox
         }}
       >
         {/* Blogs section: Display each blog card */}
@@ -90,8 +90,8 @@ const Blogs = () => {
           "&::-webkit-scrollbar": {
             display: "none", // Hide scrollbar for md and above
           },
-          "-ms-overflow-style": "none", // Hide scrollbar for Internet Explorer
-          "scrollbar-width": "none", // Hide scrollbar for Firefox
+          msOverflowStyle: "none", // Hide scrollbar for Internet Explorer
+          scrollbarWidth: "none", // Hide scrollbar for Firefox
         }}
       >
         {/* News section: Display news articles */}

src/pages/MyBlogs.tsx

@@ -6,33 +6,40 @@ import { Container, Grid2 } from "@mui/material";
 import MyBlogCard from "../components/MyBlogs/MyBlogCard";
 
 const MyBlog = () => {
-  const { getBlogByUserId } = useBlogCall();
+  const { getBlogData } = useBlogCall();
   const { currentUser } = useSelector((state: RootState) => state.auth);
-  const { userBlogs } = useSelector((state: RootState) => state.blog);
+  const { userBlogs } = useSelector((state: RootState) => state.auth);
 
+  // useEffect hook'unda currentUser değişkenini bağımlılıklar arasına ekledik
   useEffect(() => {
     if (currentUser && currentUser._id) {
-      getBlogByUserId(currentUser._id);
+      getBlogData("blogs", `author=${currentUser._id}`);
     }
   }, [currentUser]);
 
+  // console.log(userBlogs);
+
   return (
     <Container
       sx={{
         padding: "2rem 1rem",
       }}
     >
       <Grid2 container spacing={3} justifyContent="center">
-        {userBlogs.map((blog: BlogPost) => (
-          <Grid2
-            display="flex"
-            justifyContent="center"
-            key={blog._id}
-            size={{ xs: 12, md: 4, lg: 3 }}
-          >
-            <MyBlogCard blog={blog} />
-          </Grid2>
-        ))}
+        {userBlogs?.length > 0 ? (
+          userBlogs.map((blog: BlogPost) => (
+            <Grid2
+              display="flex"
+              justifyContent="center"
+              key={blog._id}
+              size={{ xs: 12, md: 4, lg: 3 }}
+            >
+              <MyBlogCard blog={blog} />
+            </Grid2>
+          ))
+        ) : (
+          <p>No blogs found</p>
+        )}
       </Grid2>
     </Container>
   );