fix(client): added rootUserProfileDetail reducer & action type

fixing #109
roman-ojha · Jun 24, 2022 · 2791482 · 2791482
1 parent 9261074
commit 2791482
Show file tree

Hide file tree

Showing 7 changed files with 126 additions and 18 deletions.
diff --git a/client/src/routes/RoutingMainPage.jsx → client/src/routes/RoutingMainPage.tsx b/client/src/routes/RoutingMainPage.jsx → client/src/routes/RoutingMainPage.tsx
diff --git a/client/src/routes/RoutingProfilePage.jsx → client/src/routes/RoutingProfilePage.tsx b/client/src/routes/RoutingProfilePage.jsx → client/src/routes/RoutingProfilePage.tsx
@@ -15,14 +15,19 @@ const RoutingProfilePage = (props) => {
         if (location.pathname.includes("/u/profile")) {
           const selectedLinkElement = document.getElementsByClassName(
             "MainPage_SideBar_Link"
-          )[4];
-          selectedLinkElement.firstElementChild.style.backgroundColor =
-            "var(--primary-color-point-7)";
-          document.getElementsByClassName(
-            "MainPage_SideBar_Menu_Logo"
-          )[4].style.color = "var(--primary-color-point-7)";
-          selectedLinkElement.firstElementChild.nextElementSibling.nextElementSibling.style.color =
-            "var(--primary-color-point-7)";
+          )[4] as HTMLElement;
+          (
+            selectedLinkElement.firstElementChild! as HTMLElement
+          ).style.backgroundColor = "var(--primary-color-point-7)";
+          (
+            document.getElementsByClassName(
+              "MainPage_SideBar_Menu_Logo"
+            )[4] as HTMLElement
+          ).style.color = "var(--primary-color-point-7)";
+          (
+            selectedLinkElement.firstElementChild!.nextElementSibling!
+              .nextElementSibling! as HTMLElement
+          ).style.color = "var(--primary-color-point-7)";
         }
       } catch (err) {}
     };
@@ -33,13 +38,18 @@ const RoutingProfilePage = (props) => {
           const selectedLinkElement = document.getElementsByClassName(
             "MainPage_SideBar_Link"
           )[4];
-          selectedLinkElement.firstElementChild.style.backgroundColor =
-            "transparent";
-          document.getElementsByClassName(
-            "MainPage_SideBar_Menu_Logo"
-          )[4].style.color = "var(--lower-opacity-font-color)";
-          selectedLinkElement.firstElementChild.nextElementSibling.nextElementSibling.style.color =
-            "var(--lower-opacity-font-color)";
+          (
+            selectedLinkElement.firstElementChild! as HTMLElement
+          ).style.backgroundColor = "transparent";
+          (
+            document.getElementsByClassName(
+              "MainPage_SideBar_Menu_Logo"
+            )[4] as HTMLElement
+          ).style.color = "var(--lower-opacity-font-color)";
+          (
+            selectedLinkElement.firstElementChild!.nextElementSibling!
+              .nextElementSibling! as HTMLElement
+          ).style.color = "var(--lower-opacity-font-color)";
         }
       } catch (err) {}
     };

diff --git a/client/src/routes/RoutingUserPage.jsx b/client/src/routes/RoutingUserPage.jsx
@@ -28,7 +28,7 @@ const RoutingUserPage = () => {
         <Route exact path="/u/message" component={Message} />
         <Route exact path="/u/setting" component={Setting} />
         <Route path="/u/profile/:userID" component={Profile} />
-        <Route exact page="/u/stories" component={Stories} />
+        <Route exact path="/u/stories" component={Stories} />
         <Route
           path="*"
           component={() => {

diff --git a/client/src/services/redux-reducer/global/rootUserProfileDetail/action.ts b/client/src/services/redux-reducer/global/rootUserProfileDetail/action.ts
@@ -0,0 +1,33 @@
+import { RootUserProfileDetailActionTypes } from "./types";
+
+export interface SetRootUserProfileDetailAction {
+  type: RootUserProfileDetailActionTypes.SET_ROOT_USER_PROFILE_DETAIL;
+  payload: any;
+}
+
+export interface ChangeRootUserProfilePicture {
+  type: RootUserProfileDetailActionTypes.CHANGE_ROOT_USER_PROFILE_PICTURE;
+  payload: any;
+}
+
+export interface ChangeRootUserUserID {
+  type: RootUserProfileDetailActionTypes.CHANGE_ROOT_USER_USER_ID;
+  payload: any;
+}
+
+export interface ChangeRootUserName {
+  type: RootUserProfileDetailActionTypes.CHANGE_ROOT_USERNAME;
+  payload: any;
+}
+
+export interface setRootUserPostData {
+  type: RootUserProfileDetailActionTypes.CHANGE_ROOT_USER_POST_DATA;
+  payload: any;
+}
+
+export type RootUserProfileDetailAction =
+  | SetRootUserProfileDetailAction
+  | ChangeRootUserProfilePicture
+  | ChangeRootUserUserID
+  | ChangeRootUserName
+  | setRootUserPostData;
diff --git a/client/src/services/redux-reducer/global/rootUserProfileDetail/reducer.ts b/client/src/services/redux-reducer/global/rootUserProfileDetail/reducer.ts
@@ -0,0 +1,48 @@
+import {
+  RootUserProfileDetailState,
+  RootUserProfileDetailActionTypes,
+} from "./types";
+import { RootUserProfileDetailAction } from "./action";
+
+const initialState = {
+  fetchedPostData: false,
+};
+// this store the detail of Root User
+
+const rootUserProfileDetailReducer = (
+  state: RootUserProfileDetailState = initialState,
+  action: RootUserProfileDetailAction
+) => {
+  switch (action.type) {
+    case RootUserProfileDetailActionTypes.SET_ROOT_USER_PROFILE_DETAIL:
+      return {
+        ...state,
+        ...action.payload,
+      };
+    case RootUserProfileDetailActionTypes.CHANGE_ROOT_USER_PROFILE_PICTURE:
+      return {
+        ...state,
+        picture: action.payload,
+      };
+    case RootUserProfileDetailActionTypes.CHANGE_ROOT_USER_USER_ID:
+      return {
+        ...state,
+        userID: action.payload,
+      };
+    case RootUserProfileDetailActionTypes.CHANGE_ROOT_USERNAME:
+      return {
+        ...state,
+        name: action.payload,
+      };
+    case RootUserProfileDetailActionTypes.CHANGE_ROOT_USER_POST_DATA:
+      return {
+        ...state,
+        fetchedPostData: action.payload.fetchedPostData,
+        posts: action.payload.posts,
+      };
+    default:
+      return state;
+  }
+};
+
+export default rootUserProfileDetailReducer;
diff --git a/client/src/services/redux-reducer/global/rootUserProfileDetail/types.ts b/client/src/services/redux-reducer/global/rootUserProfileDetail/types.ts
@@ -0,0 +1,11 @@
+export interface RootUserProfileDetailState {
+  fetchedPostData: boolean;
+}
+
+export enum RootUserProfileDetailActionTypes {
+  SET_ROOT_USER_PROFILE_DETAIL = "setRootUserProfileDetail",
+  CHANGE_ROOT_USER_PROFILE_PICTURE = "changeRootUserProfilePicture",
+  CHANGE_ROOT_USER_USER_ID = "changeRootUserUserID",
+  CHANGE_ROOT_USERNAME = "changeRootUserName",
+  CHANGE_ROOT_USER_POST_DATA = "setRootUserPostData",
+}
diff --git a/client/src/services/redux-reducer/index.js b/client/src/services/redux-reducer/index.js
@@ -1,8 +1,9 @@
 import { combineReducers } from "redux";
+// Javascript
+import setUserProfileDetailReducer from "./global/UserProfileDetailReducer";
 import changeMainPageMessageView from "./components/messageBox/mainPageMessageOnOff";
 import setUserPostResponseData from "./page/home/UserPostResponseData";
 import homePageUserPostFieldDataReducer from "./page/home/homePageUserPostFieldData";
-import setUserProfileDetailReducer from "./global/UserProfileDetailReducer";
 import setUserProfilePostReducer from "./page/profile/UserProfilePostReducer";
 import profilePageDataReducer from "./page/profile/profilePageDataReducer";
 import setFollowedUserPostDataReducer from "./page/home/FollowedUserPostDataReducer";
@@ -25,12 +26,15 @@ import videoPageDataReducer from "./page/video";
 import rootUserFriends from "./global/rootUserFriends";
 import rootUserProfileDataState from "./page/profile/rootUserProfileDataState";
 import displayEmojiPicker from "./page/home/displayEmojiPicker";
+// Typescript
+import userProfileDetailReducer from "./global/rootUserProfileDetail/reducer";
 
 const rootReducers = combineReducers({
+  // Javascript
+  setUserProfileDetailReducer,
   changeMainPageMessageView,
   setUserPostResponseData,
   homePageUserPostFieldDataReducer,
-  setUserProfileDetailReducer,
   setUserProfilePostReducer,
   profilePageDataReducer,
   setFollowedUserPostDataReducer,
@@ -53,6 +57,8 @@ const rootReducers = combineReducers({
   rootUserFriends,
   rootUserProfileDataState,
   displayEmojiPicker,
+  // Typescript
+  userProfileDetailReducer,
 });
 
 export default rootReducers;