user profile changes

dev-launchers · Jul 1, 2024 · e98a51c · e98a51c
1 parent 96479d0
commit e98a51c
Showing 1 changed file with 104 additions and 55 deletions.
diff --git a/apps/user-profile/src/components/modules/UserProfile/UserProfile.js b/apps/user-profile/src/components/modules/UserProfile/UserProfile.js
@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from 'react';
+import 'react-tabs/style/react-tabs.css';
 import axios from 'axios';
 import { useRouter } from 'next/router';
+
 import Loader from './../../common/Loader';
 import { useUserDataContext } from '@devlaunchers/components/context/UserDataContext';
 import SideBar from './SideBar';
@@ -10,10 +12,20 @@ import Modal from './../../../components/common/Modal';
 import { editProfileDataContext } from '../../../context/EditProfileDataContext';
 import { useSidebarState } from '../../../context/SidebarContext';
 
+// State management component
+/**
+ * This component has been broken down into two,
+ * 1. State management component (UserProfile) – initialising states, getting data from backeend.
+ * 2. The view component (UserProfileView) – rendering the UI elements.
+ * @export
+ * @param {*} { publicUserData, isPublic }
+ * @return {*}
+ */
 export default function UserProfile({ publicUserData, isPublic }) {
   const { userData, isAuthenticated } = useUserDataContext();
   const { editProfileState } = editProfileDataContext();
   const state = useSidebarState();
+
   const [loading, setLoading] = useState(true);
   const [opportunities, setOpportunities] = useState([]);
   const [myProjects, setMyProjects] = useState([]);
@@ -22,79 +34,116 @@ export default function UserProfile({ publicUserData, isPublic }) {
   const [people, setPeople] = useState([]);
   const [interests, setInterests] = useState([]);
 
+  // If user hasn't set a username, redirect them to the signup form
   const router = useRouter();
-
-  useEffect(() => {
+  React.useEffect(() => {
     if (isAuthenticated && userData.name === '') router.push('/signup');
   }, [isAuthenticated]);
 
-  useEffect(() => {
-    const fetchData = async () => {
-      await getProjectData();
-      await getIdeaData();
-      await getPeopleData();
-    };
-    fetchData();
+  // Start Projects/Opportunities
+  React.useEffect(() => {
+    getProjectData();
   }, []);
 
-  useEffect(() => {
-    setLoading(userData?.id === -1 || publicUserData?.id === -1);
-  }, [publicUserData, userData]);
-
   const getProjectData = async () => {
-    try {
-      const { data } = await axios(
-        `${process.env.NEXT_PUBLIC_STRAPI_URL}/projects`
-      );
-      if (data) {
-        setProjects(data);
-        const tempOpportunities = [];
-        data.forEach((project) => {
-          if (project.opportunities) {
-            project.opportunities.forEach((opportunity) => {
+    await axios(`${process.env.NEXT_PUBLIC_STRAPI_URL}/projects`)
+      .then(({ data }) => {
+        if (data) {
+          setProjects(data);
+          const tempOpportunities = [];
+          data.map((project) => {
+            project.opportunities.map((opportunity) => {
               opportunity.project = project;
               tempOpportunities.push(opportunity);
             });
-          }
-        });
-        setOpportunities(tempOpportunities);
-      }
-    } catch (error) {
-      console.error('Could not fetch project data', error);
-    }
+          });
+          setOpportunities(tempOpportunities);
+        }
+      })
+      .catch(() => {
+        console.error('Could not fetch project data');
+      });
   };
 
+  // React.useEffect(() => {
+  //   const myProjects = [];
+  //   projects.map((project) => {
+  //     [...project.team.leaders, ...project.team.members].map((member) => {
+  //       if (member.id == userData.id) myProjects.push(project);
+  //     });
+  //   });
+  //   setMyProjects(myProjects);
+  // }, [projects, userData]);
+  // End Projects/Opportunities
+
+  // Start Ideas
+  React.useEffect(() => {
+    getIdeaData();
+  }, []);
   const getIdeaData = async () => {
-    try {
-      const { data } = await axios(
-        `${process.env.NEXT_PUBLIC_STRAPI_URL}/idea-cards`
-      );
-      if (data) setIdeas(data);
-    } catch (error) {
-      console.error('Could not fetch idea data', error);
-    }
+    await axios(`${process.env.NEXT_PUBLIC_STRAPI_URL}/idea-cards`)
+      .then(({ data }) => {
+        if (data) {
+          setIdeas(data);
+        }
+      })
+      .catch(() => {
+        console.error('Could not fetch idea data');
+      });
   };
+  // End Ideas
 
+  // Start People
+  React.useEffect(() => {
+    getPeopleData().catch(() => {
+      console.error(`Could not fetch People's data`);
+    });
+  }, []);
   const getPeopleData = async () => {
-    try {
-      const userCount = (
-        await axios(`${process.env.NEXT_PUBLIC_STRAPI_URL}/users/count`)
-      ).data;
-      let randomUserIds = Array.from({ length: 6 }, () =>
-        parseInt(Math.random() * userCount)
-      );
-      let usersData = await Promise.all(
-        randomUserIds.map(async (userId) => {
-          return (
+    const userCount = (
+      await axios(`${process.env.NEXT_PUBLIC_STRAPI_URL}/users/count`)
+    ).data;
+    let randomUserIds = [
+      parseInt(Math.random() * userCount),
+      parseInt(Math.random() * userCount),
+      parseInt(Math.random() * userCount),
+      parseInt(Math.random() * userCount),
+      parseInt(Math.random() * userCount),
+      parseInt(Math.random() * userCount),
+    ];
+
+    let usersData = await Promise.all(
+      randomUserIds.map(
+        async (userId) =>
+          (
             await axios(`${process.env.NEXT_PUBLIC_STRAPI_URL}/users/${userId}`)
-          ).data;
-        })
-      );
-      setPeople(usersData);
-    } catch (error) {
-      console.error(`Could not fetch People's data`, error);
-    }
+          ).data
+      )
+    );
+
+    setPeople(usersData);
+  };
+  // End People
+
+  // Start Interests
+  React.useEffect(() => {
+    getInterests();
+  }, []);
+
+  const getInterests = async () => {
+    await axios(`${process.env.NEXT_PUBLIC_STRAPI_URL}/interests`)
+      .then(({ data }) => {
+        data && setInterests(data);
+      })
+      .catch(() => {
+        console.error('Could not fetch interest data');
+      });
   };
+  // End Interests
+
+  useEffect(() => {
+    setLoading(userData?.id === -1 || publicUserData?.id === -1);
+  }, [publicUserData, userData]);
 
   const renderContent = () => {
     switch (state.activeTab) {