fix(client): added eslint validation on all UI element

roman-ojha · Jun 7, 2022 · ad4ecbf · ad4ecbf
1 parent 835e00f
commit ad4ecbf
Show file tree

Hide file tree

Showing 35 changed files with 230 additions and 217 deletions.
diff --git a/client/src/components/CommentBox.jsx b/client/src/components/CommentBox.jsx
@@ -50,7 +50,7 @@ const ReturnCommentContent = () => {
           );
         }
       });
-  }, []);
+  }, [dispatch]);
 
   const comment = async () => {
     try {
@@ -223,6 +223,7 @@ const ReturnCommentContent = () => {
                   `/u/profile/${userProfileDetailStore.userID}/posts`
                 );
               }}
+              alt=""
             />
             <input
               className="CommentBox_Input_Field"

diff --git a/client/src/components/FollowedBy.jsx b/client/src/components/FollowedBy.jsx
@@ -233,6 +233,8 @@ const FollowedBy = () => {
           ) {
             if (index < 2) {
               return <FollowedUser key={index} userInformation={user} />;
+            } else {
+              return "";
             }
           } else if (
             mainPageMessageOnOffState ||
@@ -241,7 +243,11 @@ const FollowedBy = () => {
           ) {
             if (index < 1) {
               return <FollowedUser key={index} userInformation={user} />;
+            } else {
+              return "";
             }
+          } else {
+            return "";
           }
         })}
       </>

diff --git a/client/src/components/IndexPage/LoadingScreen.jsx b/client/src/components/IndexPage/LoadingScreen.jsx
@@ -10,7 +10,7 @@ const LoadingScreen = () => {
           Welcome To {constant.applicationName}
         </h1>
         <div className="LoadingScreen_Container">
-          <img className="LoadingScreen_App_Icon" src={AppIcon} />
+          <img className="LoadingScreen_App_Icon" src={AppIcon} alt="App" />
           <div className="LoadingScreen_Loading_Div">
             <div className="LoadingScreen_Loading_Left_Part"></div>
             <div className="LoadingScreen_Loading_Right_Part"></div>

diff --git a/client/src/components/MainPageStoryComp/MainPageStory.jsx b/client/src/components/MainPageStoryComp/MainPageStory.jsx
@@ -27,6 +27,8 @@ const MainPageStory = () => {
                   index={index}
                 />
               );
+            } else {
+              return "";
             }
           } else if (index <= 6) {
             return (
@@ -36,6 +38,8 @@ const MainPageStory = () => {
                 index={index}
               />
             );
+          } else {
+            return "";
           }
         })}
       </section>

diff --git a/client/src/components/MessageBox/InnerUserMessageBox.jsx b/client/src/components/MessageBox/InnerUserMessageBox.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { useSelector, useDispatch } from "react-redux";
 import CloseIcon from "@mui/icons-material/Close";
 import User_Profile_Icon from "../../assets/svg/User_profile_Icon.svg";

diff --git a/client/src/components/MessageBox/MessagesList.jsx b/client/src/components/MessageBox/MessagesList.jsx
@@ -53,6 +53,8 @@ const MessagesList = () => {
                   key={index}
                 />
               );
+            } else {
+              return "";
             }
           })}
         </div>

diff --git a/client/src/components/MessageBox/MessagesListSingleMessage.jsx b/client/src/components/MessageBox/MessagesListSingleMessage.jsx
@@ -37,7 +37,7 @@ const MessagesListSingleMessage = (props) => {
         withCredentials: true,
       });
       if (resMessage.status !== 200) {
-        const error = await resMessage.data;
+        // const error = await resMessage.data;
       } else {
         const resData = await resMessage.data;
         // after getting message we will store that message into redux

diff --git a/client/src/components/MessageBox/SingleMessage.jsx b/client/src/components/MessageBox/SingleMessage.jsx
@@ -6,6 +6,7 @@ const SingleMessage = (props) => {
   const userProfileDetailStore = useSelector(
     (state) => state.setUserProfileDetailReducer
   );
+  console.log(props.MessageInfo);
   return (
     <>
       <div
@@ -22,7 +23,7 @@ const SingleMessage = (props) => {
         {props.MessageInfo.senderId === userProfileDetailStore.id ? (
           ""
         ) : (
-          <img src={props.picture ? props.picture : User_Profile_Icon} />
+          <img src={props.picture ? props.picture : User_Profile_Icon} alt="" />
         )}
         <div
           className="MessageBox_Inner_SingleMessage"

diff --git a/client/src/components/MessagePage/InnerUserMessage.jsx b/client/src/components/MessagePage/InnerUserMessage.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { useSelector, useDispatch } from "react-redux";
 import CloseIcon from "@mui/icons-material/Close";
 import User_Profile_Icon from "../../assets/svg/User_profile_Icon.svg";

diff --git a/client/src/components/MessagePage/MessagesList.jsx b/client/src/components/MessagePage/MessagesList.jsx
@@ -12,32 +12,31 @@ const MessagesList = () => {
   const [showLoadingSpinner, setShowLoadingSpinner] = useState(false);
   const messageList = useSelector((state) => state.messageListReducer);
 
-  const getUserMessages = async () => {
-    try {
-      setShowLoadingSpinner(true);
-      const resMessage = await messageApi.getUserMessages();
-      const resMessageData = await resMessage.data;
-      if (resMessage.status === 200 && resMessageData.success) {
-        dispatch(messageListAction(resMessageData.messages));
-      } else {
-        toastError("Error While fetching Messages");
-      }
-      setShowLoadingSpinner(false);
-    } catch (err) {
-      if (err.response) {
-        if (err.response.data.success === false) {
-          toastError(err.response.data.msg);
+  useEffect(() => {
+    const getUserMessages = async () => {
+      try {
+        setShowLoadingSpinner(true);
+        const resMessage = await messageApi.getUserMessages();
+        const resMessageData = await resMessage.data;
+        if (resMessage.status === 200 && resMessageData.success) {
+          dispatch(messageListAction(resMessageData.messages));
+        } else {
+          toastError("Error While fetching Messages");
+        }
+        setShowLoadingSpinner(false);
+      } catch (err) {
+        if (err.response) {
+          if (err.response.data.success === false) {
+            toastError(err.response.data.msg);
+          }
+        } else {
+          toastError("Some Problem Occur, Please Try again later!!!");
         }
-      } else {
-        toastError("Some Problem Occur, Please Try again later!!!");
+        setShowLoadingSpinner(false);
       }
-      setShowLoadingSpinner(false);
-    }
-  };
-
-  useEffect(() => {
+    };
     getUserMessages();
-  }, []);
+  }, [dispatch]);
 
   // Styling Loading Spinner
   const loadingContainerSpinnerStyle = {
@@ -105,6 +104,8 @@ const MessagesList = () => {
                     key={index}
                   />
                 );
+              } else {
+                return "";
               }
             })
           )}

diff --git a/client/src/components/MessagePage/MessagesListSingleMessage.jsx b/client/src/components/MessagePage/MessagesListSingleMessage.jsx
@@ -38,7 +38,7 @@ const MessageListSingleMessage = (props) => {
         withCredentials: true,
       });
       if (resMessage.status !== 200) {
-        const error = await resMessage.data;
+        // const error = await resMessage.data;
       } else {
         const resData = await resMessage.data;
         // after getting message we will store that message into redux

diff --git a/client/src/components/MessagePage/SingleMessage.jsx b/client/src/components/MessagePage/SingleMessage.jsx
@@ -22,7 +22,7 @@ const SingleMessage = (props) => {
         {props.MessageInfo.senderId === userProfileDetailStore.id ? (
           ""
         ) : (
-          <img src={props.picture ? props.picture : User_Profile_Icon} />
+          <img src={props.picture ? props.picture : User_Profile_Icon} alt="" />
         )}
         <div
           className="MessageBox_Inner_SingleMessage"

diff --git a/client/src/components/NotificationBox.jsx b/client/src/components/NotificationBox.jsx
@@ -75,6 +75,7 @@ const NotificationBox = () => {
                       >
                         <img
                           src={data.picture ? data.picture : User_Profile_Icon}
+                          alt=""
                         />
                         <p>{data.userID + " Started following you"}</p>
                       </div>

diff --git a/client/src/components/PostBox/CommentField.jsx b/client/src/components/PostBox/CommentField.jsx
@@ -93,6 +93,7 @@ const CommentField = (props) => {
             }
             history.push(`/u/profile/${userProfileDetailStore.userID}/posts`);
           }}
+          alt=""
         />
         <input
           className="UserPostFeed_CommentBox_Input_Field"

diff --git a/client/src/components/PostBox/CommentedUser.jsx b/client/src/components/PostBox/CommentedUser.jsx
@@ -81,6 +81,7 @@ const CommentedUser = (props) => {
         })
       );
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [commentBoxStore.commented]);
 
   return (

diff --git a/client/src/components/ProfileAlbums.jsx b/client/src/components/ProfileAlbums.jsx
@@ -51,6 +51,7 @@ const ProfileAlbums = (props) => {
                   <a
                     href={post.picture === undefined ? "" : post.picture.url}
                     target="_blank"
+                    rel="noreferrer"
                   >
                     <img
                       src={post.picture === undefined ? "" : post.picture.url}
@@ -60,6 +61,8 @@ const ProfileAlbums = (props) => {
                   </a>
                 </div>
               );
+            } else {
+              return "";
             }
           })}
         </div>

diff --git a/client/src/components/ProfileFriends.jsx b/client/src/components/ProfileFriends.jsx
@@ -46,79 +46,78 @@ const ProfileFriends = () => {
     animation: "loadingSpinner 1s linear infinite",
   };
 
-  const getUserFriends = async () => {
-    try {
-      const res = await UserApi.getFriends(profilePageData.id);
-      const data = await res.data;
-      if (res.status === 200 && data.success) {
-        dispatch(setProfilePageFriends(data.friends));
-        setUserDetails({
-          fetchedData: true,
-          user: data.friends,
-        });
-      } else {
-        toastError("Some Error Occur While Fetching Friends Data");
-      }
-    } catch (err) {
-      if (err.response) {
-        if (err.response.data.success === false) {
-          toastError(err.response.data.msg);
+  useEffect(() => {
+    const getUserFriends = async () => {
+      try {
+        const res = await UserApi.getFriends(profilePageData.id);
+        const data = await res.data;
+        if (res.status === 200 && data.success) {
+          dispatch(setProfilePageFriends(data.friends));
+          setUserDetails({
+            fetchedData: true,
+            user: data.friends,
+          });
+        } else {
+          toastError("Some Error Occur While Fetching Friends Data");
+        }
+      } catch (err) {
+        if (err.response) {
+          if (err.response.data.success === false) {
+            toastError(err.response.data.msg);
+          }
+        } else {
+          toastError("Some Problem Occur, Please Try again later!!!");
         }
-      } else {
-        toastError("Some Problem Occur, Please Try again later!!!");
       }
-    }
-  };
+    };
 
-  const getUserFollowings = async () => {
-    try {
-      const res = await UserApi.getFollowings(profilePageData.id);
-      const data = await res.data;
-      if (res.status === 200 && data.success) {
-        dispatch(setProfilePageFollowings(data.friends));
-        setUserDetails({
-          fetchedData: true,
-          user: data.friends,
-        });
-      } else {
-        toastError("Some Error Occur While Fetching Friends Data");
-      }
-    } catch (err) {
-      if (err.response) {
-        if (err.response.data.success === false) {
-          toastError(err.response.data.msg);
+    const getUserFollowings = async () => {
+      try {
+        const res = await UserApi.getFollowings(profilePageData.id);
+        const data = await res.data;
+        if (res.status === 200 && data.success) {
+          dispatch(setProfilePageFollowings(data.friends));
+          setUserDetails({
+            fetchedData: true,
+            user: data.friends,
+          });
+        } else {
+          toastError("Some Error Occur While Fetching Friends Data");
+        }
+      } catch (err) {
+        if (err.response) {
+          if (err.response.data.success === false) {
+            toastError(err.response.data.msg);
+          }
+        } else {
+          toastError("Some Problem Occur, Please Try again later!!!");
         }
-      } else {
-        toastError("Some Problem Occur, Please Try again later!!!");
       }
-    }
-  };
+    };
 
-  const getUserFollowers = async () => {
-    try {
-      const res = await UserApi.getFollowers(profilePageData.id);
-      const data = await res.data;
-      if (res.status === 200 && data.success) {
-        dispatch(setProfilePageFollowers(data.friends));
-        setUserDetails({
-          fetchedData: true,
-          user: data.friends,
-        });
-      } else {
-        toastError("Some Error Occur While Fetching Friends Data");
-      }
-    } catch (err) {
-      if (err.response) {
-        if (err.response.data.success === false) {
-          toastError(err.response.data.msg);
+    const getUserFollowers = async () => {
+      try {
+        const res = await UserApi.getFollowers(profilePageData.id);
+        const data = await res.data;
+        if (res.status === 200 && data.success) {
+          dispatch(setProfilePageFollowers(data.friends));
+          setUserDetails({
+            fetchedData: true,
+            user: data.friends,
+          });
+        } else {
+          toastError("Some Error Occur While Fetching Friends Data");
+        }
+      } catch (err) {
+        if (err.response) {
+          if (err.response.data.success === false) {
+            toastError(err.response.data.msg);
+          }
+        } else {
+          toastError("Some Problem Occur, Please Try again later!!!");
         }
-      } else {
-        toastError("Some Problem Occur, Please Try again later!!!");
       }
-    }
-  };
-
-  useEffect(() => {
+    };
     if (location.pathname.includes("/friends")) {
       setUserDetails({
         fetchedData: false,
@@ -138,7 +137,7 @@ const ProfileFriends = () => {
       });
       getUserFollowers();
     }
-  }, [location.pathname]);
+  }, [dispatch, location.pathname, profilePageData.id]);
 
   return (
     <>

diff --git a/client/src/components/ProfilePage/UserInfo.jsx b/client/src/components/ProfilePage/UserInfo.jsx
@@ -139,7 +139,7 @@ const UserInfo = () => {
         withCredentials: true,
       });
       if (resMessage.status !== 200) {
-        const error = await resMessage.data;
+        // const error = await resMessage.data;
       } else {
         const resData = await resMessage.data;
         // after getting message we will store that message into redux