feat(component): renders the users selected skills using the bubbleli…

…st component

Add implementation to render the users selected skills in the over view page. Also improved
commenting in other components.

1707

apps/user-profile/src/components/common/BubbleList/BubbleList.js

@@ -1,16 +1,28 @@
 import { Typography } from '@devlaunchers/components/components/atoms';
 
-function BubbleList({ list, bubbleColorClass = 'bg-white' }) {
+/**
+ * @description BubbleList Component
+ * Renders a list of items as styled "bubble" elements.
+ *
+ * @param {Object} props - The component props.
+ * @param {Array} props.list - The array of items to be displayed as bubbles.
+ * @param {string} [props.colorClass='bg-white'] - Optional CSS class for the background color of each bubble.
+ */
+
+function BubbleList({ list, colorClass = 'bg-white' }) {
   return (
+    // Container div with flex layout, gap between items, and wrapping for better layout on smaller screens
     <div className="flex gap-4 flex-wrap">
       {list.map((item) => {
+        // Map through the list, only render a bubble if the item is truthy
         return item ? (
           <div
-            className={`flex justify-center items-center h-10 px-4 rounded-3xl shadow-lg ${bubbleColorClass}`}
+            // Bubble styling with dynamic color class, shadow, and rounded corners
+            className={`flex justify-center items-center h-10 px-4 rounded-3xl shadow-lg ${colorClass}`}
           >
             <Typography type="p">{item}</Typography>
           </div>
-        ) : null;
+        ) : null; // Skip rendering if the item is falsy
       })}
     </div>
   );

apps/user-profile/src/components/modules/UserProfile/Overview/Interests/Interests.js

@@ -2,21 +2,40 @@ import Card from './../../../../common/Card';
 import { Typography } from '@devlaunchers/components/components/atoms';
 import BubbleList from './../../../../common/BubbleList';
 
+/**
+ * The `Interests` component displays a list of user interests in a styled card.
+ * - It accepts an array of interest objects, filters out those without a valid `interest` property,
+ *   and extracts the `interest` values into a list of strings.
+ * - If valid interests exist, they are displayed using the `BubbleList` component.
+ * - If no interests are selected, a fallback message is shown to inform the user.
+ *
+ * @component
+ * @param {Object} props - React component props.
+ * @param {Array} props.interestList - Array of interest objects. Each object should have an `interest` property.
+ * @returns {JSX.Element} A styled card containing a list of interests or a fallback message.
+ */
+
 function Interests({ interestList }) {
-  // filters interestList (removes empty/null values),
-  // and transforms array of objects [{},{}] to array of strings ['a','b']
+  /**
+   * Filters and transforms the interestList array:
+   * 1. Filters out objects where the `interest` property is empty, null, or undefined.
+   * 2. Transforms/maps array of objects [{},{}] to array of strings ['a','b'].
+   *
+   * @param {Array} interestList - Array of interest objects. Each object should have an `interest` property.
+   * @returns {Array} filteredInterestList - Array of non-empty interest strings.
+   */
   const filteredInterestList = interestList
-    .filter((interestObj) => Boolean(interestObj?.interest))
-    .map((interestObj) => interestObj.interest);
+    .filter((interestObj) => Boolean(interestObj?.interest)) // Ensure `interest` is truthy.
+    .map((interestObj) => interestObj.interest); // Extract the `interest` value.
 
   return (
     <Card title="Interests">
       {filteredInterestList?.length > 0 ? (
+        // If there are interests after filtering, display them in a BubbleList component.
         <BubbleList list={filteredInterestList} />
       ) : (
-        <Typography className="text-grayscale-500" type="p">
-          No interests selected...
-        </Typography>
+        // If no interests are available, show a fallback message.
+        <Typography type="p">No interests selected...</Typography>
       )}
     </Card>
   );

apps/user-profile/src/components/modules/UserProfile/Overview/Overview.js

@@ -13,7 +13,7 @@ function Overview() {
         <ProfileHeader />
         <div className="flex gap-9">
           <Bio bio={userData?.bio} />
-          <Skills />
+          <Skills skills={userData.skills} />
         </div>
         <Interests interestList={userData.interests} />
       </div>

apps/user-profile/src/components/modules/UserProfile/Overview/Skills/Skills.js

@@ -1,12 +1,48 @@
 import Card from './../../../../common/Card';
 import { Typography } from '@devlaunchers/components/components/atoms';
+import BubbleList from './../../../../common/BubbleList';
+
+/**
+ * The `Skills` component displays a list of user skills in a styled card format.
+ * - It accepts an array of skill objects, filters out those without a valid `interest` property,
+ *   and extracts the `interest` values into a list of strings.
+ * - If valid skills exist, they are displayed using the `BubbleList` component with a custom background color.
+ * - If no skills are selected, a fallback message is shown to inform the user.
+ *
+ * @component
+ * @param {Object} props - React component props.
+ * @param {Array} props.skills - Array of skill objects. Each object should have an `interest` property.
+ * @returns {JSX.Element} A styled card containing a list of skills or a fallback message.
+ * @note In the backend, the interest table in strapi holds the different values/interest.
+ * The backend mapped those interest, to create the skills field. hence why there is a `interest` property instead of `skill`,
+ * in `skillObj.interest`. Speak with chung-ting if you need more information on this.
+ */
+
+function Skills({ skills }) {
+  /**
+   * Filters and transforms the skills array:
+   * 1. Filters out objects where the `interest` property is empty, null, or undefined.
+   * 2. Transforms/maps array of objects [{},{}] to array of strings ['a','b'].
+   *
+   *
+   * @param {Array} skills - Array of skill objects. Each object should have an `interest` property.
+   * @returns {Array} filteredSkills - Array of non-empty skill strings.
+   */
+  const filteredSkills = skills
+    .filter((skillObj) => Boolean(skillObj?.interest)) // Ensure `interest` is truthy.
+    .map((skillObj) => skillObj.interest); // Extract the `interest` value.
 
-function Skills() {
   return (
     <Card title="Skills">
-      <Typography className="text-grayscale-500" type="p">
-        {'Coming soon...'}
-      </Typography>
+      {filteredSkills?.length > 0 ? (
+        // If there are skills after filtering, display them in a BubbleList component.
+        <BubbleList list={filteredSkills} colorClass="bg-jupiter-300" />
+      ) : (
+        // If no skills are available, show a fallback message.
+        <Typography className="text-grayscale-500" type="p">
+          No skills selected...
+        </Typography>
+      )}
     </Card>
   );
 }

packages/UI/src/context/UserDataContext.js

@@ -47,6 +47,7 @@ function useUserDataHook() {
           bio: currentUser.profile.bio,
           profilePictureUrl: currentUser.profile.profilePictureUrl,
           socialMediaLinks: currentUser.profile.socialMediaLinks,
+          skills: currentUser.skills,
           interests: currentUser.interests,
           projects: currentUser.projects,
           idea_cards: currentUser.idea_cards,