Merge pull request #822 from crane-cloud/ft-enable-following

Feat: add user following functionality
crane-cloud · Jul 1, 2024 · bb7f130 · bb7f130
2 parents d789509 + 8b1c792
commit bb7f130
Show file tree

Hide file tree

Showing 6 changed files with 226 additions and 183 deletions.
diff --git a/src/components/ProfileAnalyticsCard/index.js b/src/components/ProfileAnalyticsCard/index.js
@@ -1,8 +1,8 @@
 import React from "react";
-import { PieChart, Pie, Cell, Tooltip } from "recharts";
-import moment from "moment";
+import { PieChart, Pie, Cell } from "recharts";
+// import moment from "moment";
 import styles from "./ProfileAnalyticsCard.module.css";
-import PrimaryButton from "../PrimaryButton";
+// import PrimaryButton from "../PrimaryButton";
 
 const COLORS = ["#8884d8", "#82ca9d", "#ffc658"];
 
@@ -22,8 +22,7 @@ const ProfileAnalytics = ({ user }) => {
     { name: "Follows", value: 1 },
     { name: "Followers", value: 7 },
   ];
-
-
+
   return (
     <section className="AdminCardArea">
       <div className="AdminUserProfileCard">

diff --git a/src/components/SmallerProfileCard/SmallerProfileCard.module.css b/src/components/SmallerProfileCard/SmallerProfileCard.module.css
@@ -4,6 +4,7 @@
   align-items: center;
   width: 20rem;
   border-radius: 10px;
+  min-height: 17rem;
   background-color: #ffffff;
   padding: 1.5rem 1rem;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

diff --git a/src/components/SmallerProfileCard/index.js b/src/components/SmallerProfileCard/index.js
@@ -1,50 +1,57 @@
-import React from 'react';
-import Avatar from '../Avatar';
-import moment from 'moment'; 
-import styles from './SmallerProfileCard.module.css' 
-import PrimaryButton from '../PrimaryButton';
+import React from "react";
+import Avatar from "../Avatar";
+import moment from "moment";
+import styles from "./SmallerProfileCard.module.css";
+import PrimaryButton from "../PrimaryButton";
+import Spinner from "../Spinner";
+
+const ProfileCardSmall = ({ user, loading, error, onFollowClick, userFollowLoading }) => {
 
-const ProfileCardSmall = ({ user }) => {
   return (
     <div className={styles.ProfileCard}>
-      <div className={styles.UserProfileInfoHeader}>
-        <Avatar
-          name={user.name}
-          className={styles.UserAvatarLarge}
-        />
-        <div className={styles.Identity}>
-          <div className={styles.IdentityName}>
-            {user.name}
-          </div>
-          <div className={styles.IdentityEmail}>{user.email}</div>
-          <div className={styles.Organization}>
-           Organization: <span>{user.organization || "Not Found"}</span>
-          </div>
-          <div className={styles.DateStyles}>
-        Joined:
-        <span className={styles.dateStyle}>
-          {moment(user.dateJoined).utc().format("ddd, MMMM DD, yyyy")}
-        </span>
-      </div>
-      <div className={styles.AdminProfileRowInfo}>
-        <div className={styles.AdminProfileRowItem}>
-          Following: {user.following}
-        </div>
-
-        <div className={styles.AdminProfileRowItem}>
-          Followers: {user.followers}
+      {loading ? (
+        <div className="AdminNoResourcesMessage">
+          <Spinner />
         </div>
-      </div>
+      ) : null}
+      {error ? (
+        <div className="AdminNoResourcesMessage">
+          No user information returned.
         </div>
-
-      </div>
-
-      <PrimaryButton
-          className={styles.FollowButton}
-          onClick={() => {}}
-        >
-          + Follow
-      </PrimaryButton>
+      ) : null}
+      {user && !loading && !error ? (
+        <>
+          <div className={styles.UserProfileInfoHeader}>
+            <Avatar name={user.name} className={styles.UserAvatarLarge} />
+            <div className={styles.Identity}>
+              <div className={styles.IdentityName}>{user.name}</div>
+              <div className={styles.IdentityEmail}>{user.email}</div>
+              <div className={styles.Organization}>
+                Organization: <span>{user.organisation || "Not Found"}</span>
+              </div>
+              <div className={styles.DateStyles}>
+                Joined:
+                <span className={styles.dateStyle}>
+                  {moment(user.dateJoined).utc().format("ddd, MMMM DD, yyyy")}
+                </span>
+              </div>
+              <div className={styles.AdminProfileRowInfo}>
+                <div className={styles.AdminProfileRowItem}>
+                  Following: {user.following_count}
+                </div>
+
+                <div className={styles.AdminProfileRowItem}>
+                  Followers: {user.follower_count}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <PrimaryButton className={styles.FollowButton} onClick={onFollowClick}>
+            {userFollowLoading? <Spinner/> : user.requesting_user_follows ?  "Unfollow" : "+ Follow" }
+          </PrimaryButton>
+        </>
+      ) : null}
     </div>
   );
 };

diff --git a/src/components/UserProfileProjectsComponent/index.js b/src/components/UserProfileProjectsComponent/index.js
@@ -1,31 +1,61 @@
 // Projects.jsx
-import React from 'react';
+import React from "react";
 import styles from "../../pages/UsersProfile/UserProfile.module.css";
 import { ReactComponent as RightArrowIcon } from "../../assets/images/blue-right-arrow.svg";
+import Spinner from "../Spinner";
 
-const UserFeedProjects = ({ projects }) => {
+const UserFeedProjects = ({
+  projects,
+  loading,
+  error,
+  onProjectFollowClick,
+  projectFollowLoading
+}) => {
   return (
     <section className={styles.ProfileProjectsSection}>
       <div className="SectionTitle">Projects</div>
-      <div className={styles.ProjectsContainer}>
-        {projects.slice(0, 12).map((project) => (
-          <div key={project.id} className={styles.FollowProjectCard}>
-            <div className={styles.ProjectName}>{project.name}</div>
-            <div className={styles.ProjectDescription}>
-              {project.description}
-            </div>
-            <button className={styles.FollowButtonProjects}>
-              <span style={{ fontWeight: 700, fontSize: "18px" }}>+</span> Follow
-            </button>
-          </div>
-        ))}
-      </div>
-      {projects.length > 12 && (
-        <div className={styles.ShowMoreProjectsContainer}>
-          <div className={styles.ShowMoreProjectsLink}>
-            Show More <RightArrowIcon />
-          </div>
+      {loading ? (
+        <div className={styles.NoResourcesMessage}>
+          <Spinner />
         </div>
+      ) : null}
+      {error ? (
+        <div className={styles.NoResourcesMessage}>
+          Failed to fetch user projects
+        </div>
+      ) : null}
+      {projects && projects?.length > 0 ? (
+        <>
+          <div className={styles.ProjectsContainer}>
+            {projects.slice(0, 12).map((project) => (
+              <div key={project.id} className={styles.FollowProjectCard}>
+                <div className={styles.ProjectName}>{project.name}</div>
+                <div className={styles.ProjectDescription}>
+                  {project.description}
+                </div>
+                <button
+                  className={styles.FollowButtonProjects}
+                  onClick={() => {
+                    onProjectFollowClick(project.id);
+                  }}
+                >
+                  {projectFollowLoading === project.id? <Spinner/> : project.is_following ?  "Unfollow" :  <><span style={{ fontWeight: 700, fontSize: "18px" }}>+</span>{" "}
+                  Follow</>}
+                </button>
+              </div>
+            ))}
+          </div>
+          {projects?.length > 12 && (
+            <div className={styles.ShowMoreProjectsContainer}>
+              <div className={styles.ShowMoreProjectsLink}>
+                Show More <RightArrowIcon />
+              </div>
+            </div>
+          )}
+        </>
+      ) : null}
+      {projects?.length < 1 && !error && !loading && (
+        <div className={styles.NoResourcesMessage}>User has no projects</div>
       )}
     </section>
   );

diff --git a/src/pages/UsersProfile/UserProfile.module.css b/src/pages/UsersProfile/UserProfile.module.css
@@ -318,6 +318,7 @@
     border: 1px solid transparent;
     padding: 1px 12px;
     border-radius: 0px;
+    min-width: 6.5rem;
     cursor: pointer;
 }
 
@@ -330,6 +331,7 @@
     margin-bottom: 3rem;
     position: relative;
     width: 100%;
+    min-height: 17rem;
 }
 .TopProjectsContainer{
    min-width: 80vh;