feat: user following functionality on users dashboard

src/components/FeaturedUsersSection/index.jsx

@@ -1,7 +1,6 @@
 import React, { useEffect } from "react";
 import styles from "./FeaturedUsersSection.module.css";
 import NewUserCard from "../NewUserCard";
-import PrimaryButton from "../PrimaryButton";
 import { useDispatch, useSelector } from "react-redux";
 import getUsersList from "../../redux/actions/users";
 import Spinner from "../Spinner";
@@ -32,22 +31,10 @@ const FeaturedUsersSection = () => {
       ) : (
         <>
           {users?.slice(0, 7).map((user, index) => (
-            <NewUserCard
-              key={index}
-              userID={user.id}
-              name={user.name}
-              organisation={user.organisation}
-              age={user.age}
-            />
+            <NewUserCard key={index} userID={user?.id} />
           ))}
         </>
       )}
-
-      {!isFetching && (
-        <PrimaryButton className={styles.viewMoreButton}>
-          View More
-        </PrimaryButton>
-      )}
     </div>
   );
 };

src/components/NewAppCard/NewAppCard.module.css

@@ -19,6 +19,7 @@
     font-size: 1em;
     font-weight: 600;
     margin: 0;
+    text-transform: capitalize;
     /* color: var(--primary-color); */
 }
 

src/components/NewProjectCard/NewProjectCard.module.css

@@ -26,6 +26,7 @@
     font-weight: 600;
     margin: 0;
     color: var(--primary-color);
+    text-transform: capitalize;
 }
 
 .title:hover {

src/components/NewUserCard/NewUserCard.module.css

@@ -45,6 +45,7 @@
     font-size: 16px;
     margin: 0;
     color: var(--primary-color);
+    text-transform: capitalize;
 }
 
 .title:hover {
@@ -109,6 +110,15 @@
     transition: background-color 0.3s ease;
 }
 
+.noActivity {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 10vh;
+    text-align: center;
+}
+
 @media (max-width: 768px) {
     .cardContent {
         justify-content: center;

src/components/NewUserCard/index.jsx

@@ -1,40 +1,114 @@
-import React from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import styles from "./NewUserCard.module.css";
 import { Link } from "react-router-dom/cjs/react-router-dom.min";
+import {
+  handleDeleteRequest,
+  handleGetRequest,
+  handlePostRequestWithOutDataObject,
+} from "../../apis/apis";
+import Spinner from "../Spinner";
+
+const NewUserCard = ({ userID }) => {
+  const [userDetails, setUserDetails] = useState({});
+  const [sectionLoad, setSectionLoad] = useState(false);
+  const [userFollowLoading, setUserFollowLoading] = useState(false);
+
+  const getUserDetails = useCallback(() => {
+    setSectionLoad(true);
+    handleGetRequest(`/users/${userID}`)
+      .then((response) => {
+        setUserDetails(response.data.data.user);
+        setSectionLoad(false);
+      })
+      .catch((error) => {
+        setSectionLoad(false);
+      });
+  }, [userID]);
+
+  useEffect(() => {
+    getUserDetails();
+  }, [getUserDetails, userFollowLoading]);
+
+  const onFollowClick = () => {
+    setUserFollowLoading(true);
+    if (userDetails?.requesting_user_follows) {
+      handleDeleteRequest(`users/${userDetails?.id}/following`, {})
+        .then(() => {
+          setSectionLoad(true);
+          setUserFollowLoading(false);
+        })
+        .catch((error) => {
+          setUserFollowLoading(false);
+        });
+    } else {
+      handlePostRequestWithOutDataObject(
+        {},
+        `users/${userDetails?.id}/following`
+      )
+        .then(() => {
+          setSectionLoad(true);
+          setUserFollowLoading(false);
+        })
+        .catch((error) => {
+          setUserFollowLoading(false);
+        });
+    }
+  };
 
-const NewUserCard = ({ userID, name, organisation, age }) => {
   return (
-    <div className={styles.userCard}>
-      <div className={styles.header}>
-        <div className={styles.userInfo}>
-          <h3 className={styles.title}>
-            <Link
-              to={{
-                pathname: `/profile/${userID}`,
-              }}
-              className={styles.linkBlue}
-            >
-              <strong>{name}</strong>
-            </Link>
-          </h3>
-        </div>
-        <div className={styles.followButtonArea}>
-          <button className={styles.followButton}>+ Follow</button>
+    <>
+      {sectionLoad ? (
+        <div className={styles.noActivity}>
+          <div className={styles.NoResourcesMessage}>
+            <div className={styles.SpinnerWrapper}>
+              <Spinner size="small" />
+            </div>
+          </div>
         </div>
-      </div>
-      <div className={styles.cardContent}>
-        <div className={styles.cardExtras}>
-          <div className={styles.cardSummary}>
-            {/* <div className={styles.statItem}>
-              <span>Organisation: {organisation}</span>
-            </div> */}
-            <div className={styles.statItem}>
-              <span>Joined {age}</span>
+      ) : (
+        <div className={styles.userCard}>
+          <div className={styles.header}>
+            <div className={styles.userInfo}>
+              <h3 className={styles.title}>
+                <Link
+                  to={{
+                    pathname: `/profile/${userDetails?.id}`,
+                  }}
+                  className={styles.linkBlue}
+                >
+                  <strong>{userDetails?.name?.toLowerCase()}</strong>
+                </Link>
+              </h3>
+            </div>
+            <div className={styles.followButtonArea}>
+              <button className={styles.followButton} onClick={onFollowClick}>
+                {userFollowLoading ? (
+                  <Spinner />
+                ) : userDetails?.requesting_user_follows ? (
+                  "Unfollow"
+                ) : (
+                  "+ Follow"
+                )}
+              </button>
+            </div>
+          </div>
+          <div className={styles.cardContent}>
+            <div className={styles.cardExtras}>
+              <div className={styles.cardSummary}>
+                <div className={styles.statItem}>
+                  <span>
+                    Organisation: {userDetails?.organisation ?? "Not Found"}
+                  </span>
+                </div>
+                <div className={styles.statItem}>
+                  <span>Joined {userDetails?.age}</span>
+                </div>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </div>
+      )}
+    </>
   );
 };
 

src/components/RecentActivitySection/index.jsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect } from "react";
 import styles from "./RecentActivitySection.module.css";
 import RecentActivityItem from "../RecentActivityItem";
-import PrimaryButton from "../PrimaryButton";
 import { ReactComponent as InfoSvg } from "../../assets/images/infosvg.svg";
 import { useDispatch, useSelector } from "react-redux";
 import getUserRecentActivities from "../../redux/actions/getUserRecentActivity";
@@ -40,7 +39,6 @@ const RecentActivitySection = () => {
     userRecentActivities();
   };
 
-
   return (
     <div className={styles.recentActivity}>
       <h2 className={styles.title}>Recent Activity</h2>