diff --git a/apps/user-profile/src/components/common/BubbleList/BubbleList.js b/apps/user-profile/src/components/common/BubbleList/BubbleList.js index eb7330951..6b86228b9 100644 --- a/apps/user-profile/src/components/common/BubbleList/BubbleList.js +++ b/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
{list.map((item) => { + // Map through the list, only render a bubble if the item is truthy return item ? (
{item}
- ) : null; + ) : null; // Skip rendering if the item is falsy })}
); diff --git a/apps/user-profile/src/components/modules/UserProfile/Overview/Interests/Interests.js b/apps/user-profile/src/components/modules/UserProfile/Overview/Interests/Interests.js index b500003a8..f1c51307a 100644 --- a/apps/user-profile/src/components/modules/UserProfile/Overview/Interests/Interests.js +++ b/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 ( {filteredInterestList?.length > 0 ? ( + // If there are interests after filtering, display them in a BubbleList component. ) : ( - - No interests selected... - + // If no interests are available, show a fallback message. + No interests selected... )} ); diff --git a/apps/user-profile/src/components/modules/UserProfile/Overview/Overview.js b/apps/user-profile/src/components/modules/UserProfile/Overview/Overview.js index 5b9613f5d..80a14ebef 100644 --- a/apps/user-profile/src/components/modules/UserProfile/Overview/Overview.js +++ b/apps/user-profile/src/components/modules/UserProfile/Overview/Overview.js @@ -13,7 +13,7 @@ function Overview() {
- +
diff --git a/apps/user-profile/src/components/modules/UserProfile/Overview/Skills/Skills.js b/apps/user-profile/src/components/modules/UserProfile/Overview/Skills/Skills.js index bdbfef47f..49ee3ffd4 100644 --- a/apps/user-profile/src/components/modules/UserProfile/Overview/Skills/Skills.js +++ b/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 ( - - {'Coming soon...'} - + {filteredSkills?.length > 0 ? ( + // If there are skills after filtering, display them in a BubbleList component. + + ) : ( + // If no skills are available, show a fallback message. + + No skills selected... + + )} ); } diff --git a/packages/UI/src/context/UserDataContext.js b/packages/UI/src/context/UserDataContext.js index 800f0bf0d..a74754553 100644 --- a/packages/UI/src/context/UserDataContext.js +++ b/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,