refactor follow context (#21)

* refactor user-context

* refactor posts context

* fix: header mapping

* refactor bookmark and profile context

* refactor follow context

src/components/right-sidebar/RightSideBar.jsx

@@ -1,12 +1,22 @@
 import { useEffect } from "react";
 import { SearchIcon } from "assets";
 import classNames from "classnames";
-import { useFollow } from "context";
 import { useAsync } from "custom-hooks";
 import { Link } from "react-router-dom";
-import { useSelector } from "react-redux";
 import styles from "./RightSideBar.module.css";
 import { useTheme } from "@mui/material/styles";
+import { useDispatch, useSelector } from "react-redux";
+import { usePostFollowCallMutation } from "redux/api/userAPI";
+import { setFollowUsername } from "redux/features/user/userSlice";
+
+import {
+  Box,
+  List,
+  InputBase,
+  Typography,
+  useMediaQuery,
+  InputAdornment,
+} from "@mui/material";
 
 import {
   ROUTE_PROFILE,
@@ -22,21 +32,15 @@ import {
   LoadingCircularProgress,
 } from "components";
 
-import {
-  Box,
-  List,
-  InputBase,
-  Typography,
-  useMediaQuery,
-  InputAdornment,
-} from "@mui/material";
-
 export const RightSideBar = () => {
   const theme = useTheme();
   const matches = useMediaQuery(theme.breakpoints.down("lg"));
 
   const { api, propertyToGet } = API_TO_GET_UNFOLLOWED_USERS;
-  const { userUsername } = useSelector((state) => state.user);
+  const {
+    userUsername,
+    follow: { status: followStatus, username: followUsername },
+  } = useSelector((state) => state.user);
   const apiToCall = { api: `${api}/${userUsername}`, propertyToGet };
 
   const {
@@ -45,12 +49,11 @@ export const RightSideBar = () => {
     state: { status, data },
   } = useAsync(apiToCall);
 
-  const {
-    postFollowCall,
-    follow: { status: followStatus, username: followUsername },
-  } = useFollow();
+  const userSliceDispatch = useDispatch();
+  const [postFollowCall] = usePostFollowCallMutation();
 
   const handleFollowClick = (username) => {
+    userSliceDispatch(setFollowUsername(username));
     postFollowCall(username);
   };
 

src/custom-hooks/useBroadcastDetails.js

@@ -1,10 +1,15 @@
-import { useFollow } from "context";
 import { BroadcastBoxData } from "data";
-import { useSelector } from "react-redux";
 import { getTimeDurationToShow } from "utils";
 import { useEffect, useMemo, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { setFollowUsername } from "redux/features/user/userSlice";
 import { useDeleteBroadcastCallMutation } from "redux/api/postsAPI";
 
+import {
+  usePostFollowCallMutation,
+  usePostUnfollowCallMutation,
+} from "redux/api/userAPI";
+
 const { loggedUserBroadcastOptions, getNotLoggedUserBroadcastOptions } =
   BroadcastBoxData;
 
@@ -30,17 +35,15 @@ const { loggedUserBroadcastOptions, getNotLoggedUserBroadcastOptions } =
   }
  */
 export const useBroadcastDetails = ({ _id, username, createdAt, likedBy }) => {
-  const {
-    postFollowCall,
-    postUnfollowCall,
-    follow: { status: followStatus, username: followUsername },
-  } = useFollow();
-
   const {
     profile: { status, data },
+    follow: { status: followStatus, username: followUsername },
   } = useSelector((state) => state.user);
 
+  const dispatch = useDispatch();
   const [anchorEl, setAnchorEl] = useState(null);
+  const [postFollowCall] = usePostFollowCallMutation();
+  const [postUnfollowCall] = usePostUnfollowCallMutation();
   const [openReplyDialog, setOpenReplyDialog] = useState(false);
   const [timeDurationToShow, setTimeDurationToShow] = useState(
     getTimeDurationToShow(createdAt)
@@ -115,8 +118,14 @@ export const useBroadcastDetails = ({ _id, username, createdAt, likedBy }) => {
           ).map((option) => ({
             ...option,
             handleClick: isInLoggedUserFollowing
-              ? () => postUnfollowCall(username)
-              : () => postFollowCall(username),
+              ? () => {
+                  dispatch(setFollowUsername(username));
+                  postUnfollowCall(username);
+                }
+              : () => {
+                  dispatch(setFollowUsername(username));
+                  postFollowCall(username);
+                },
           })),
 
     // eslint-disable-next-line react-hooks/exhaustive-deps

src/index.js

@@ -1,16 +1,13 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 
-import { makeServer } from "./server";
-
-import { FollowProvider } from "context";
-
 import App from "./App";
 import { Provider } from "react-redux";
 import { store } from "redux/app/store";
 import { AppWrapper } from "./AppWrapper";
 import { BrowserRouter } from "react-router-dom";
 
+import { makeServer } from "./server";
 // Call make Server
 makeServer();
 
@@ -22,9 +19,7 @@ root.render(
     <BrowserRouter>
       <Provider store={store}>
         <AppWrapper>
-          <FollowProvider>
-            <App />
-          </FollowProvider>
+          <App />
         </AppWrapper>
       </Provider>
     </BrowserRouter>

src/pages/landing/Landing.jsx

@@ -1,8 +1,8 @@
 import { useState } from "react";
 import styles from "./Landing.module.css";
 import { logoPNG, thinkJPG } from "assets";
-import { useDocumentTitle } from "custom-hooks";
 import { Box, Grid, Typography } from "@mui/material";
+import { useDocumentTitle, useScrollToTop } from "custom-hooks";
 
 import {
   CustomButton,
@@ -12,6 +12,7 @@ import {
 } from "components";
 
 export const Landing = () => {
+  useScrollToTop();
   useDocumentTitle("Join today");
   const [openSignInDialog, setOpenSignInDialog] = useState(false);
   const [openSignUpDialog, setOpenSignUpDialog] = useState(false);

src/pages/profile/Profile.jsx

@@ -1,15 +1,25 @@
 import { ProfileData } from "data";
 import classNames from "classnames";
-import { useFollow } from "context";
 import styles from "./Profile.module.css";
-import { useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
 import { FilledAccountCircleIcon, LinkIcon } from "assets";
 import { sharedReducer, ACTION_TYPE_SUCCESS } from "reducer";
 import { useEffect, useMemo, useReducer, useState } from "react";
 import { isStatusLoading, API_TO_GET_USER_PROFILE } from "utils";
+import { setFollowUsername } from "redux/features/user/userSlice";
 import { useAsync, useDocumentTitle, useScrollToTop } from "custom-hooks";
 
+import {
+  Box,
+  Tab,
+  Link,
+  Tabs,
+  Avatar,
+  Button,
+  Typography,
+} from "@mui/material";
+
 import {
   NotFound,
   PageHeading,
@@ -21,32 +31,28 @@ import {
 } from "components";
 
 import {
-  Box,
-  Tab,
-  Link,
-  Tabs,
-  Avatar,
-  Button,
-  Typography,
-} from "@mui/material";
+  usePostFollowCallMutation,
+  usePostUnfollowCallMutation,
+} from "redux/api/userAPI";
 
 const { tabsOptions, getEmptyTabDataToShow } = ProfileData;
 
 export const Profile = () => {
-  const { username } = useParams();
-  const { userUsername } = useSelector((state) => state.user);
-  const { data: postsData } = useSelector((state) => state.posts);
-  const { profile: loggedUserData } = useSelector((state) => state.user);
-
   const {
-    postFollowCall,
-    postUnfollowCall,
+    userUsername,
+    profile: loggedUserData,
     follow: {
       data: followData,
       status: followStatus,
       username: followUsername,
     },
-  } = useFollow();
+  } = useSelector((state) => state.user);
+
+  const { username } = useParams();
+  const userSliceDispatch = useDispatch();
+  const [postFollowCall] = usePostFollowCallMutation();
+  const [postUnfollowCall] = usePostUnfollowCallMutation();
+  const { data: postsData } = useSelector((state) => state.posts);
 
   const { callAPI } = useAsync();
   const { api, propertyToGet } = API_TO_GET_USER_PROFILE;
@@ -170,8 +176,14 @@ export const Profile = () => {
   const onClickHandler = isProfileOfLoggedUser
     ? () => setOpenEditProfileDialog(true)
     : isLoggedUserFollowing
-    ? () => postUnfollowCall(data.username)
-    : () => postFollowCall(data.username);
+    ? () => {
+        userSliceDispatch(setFollowUsername(data.username));
+        postUnfollowCall(data.username);
+      }
+    : () => {
+        userSliceDispatch(setFollowUsername(data.username));
+        postFollowCall(data.username);
+      };
 
   return status === "error" ? (
     <NotFound

src/reducer/index.js

@@ -7,5 +7,4 @@ export * from "./constants/shared-action-type";
 export { sharedInitialReducerState } from "./constants/shared-initial-state";
 
 export { authReducer } from "./functions/authReducer";
-export { followReducer } from "./functions/followReducer";
 export { sharedReducer } from "./functions/sharedReducer";