Navbar using state management

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

@@ -1,149 +1,71 @@
-import React, { useState } from 'react';
+import React, { useEffect } from 'react';
 import { useRouter } from 'next/router';
+import {
+  useSidebarState,
+  useSidebarDispatch,
+} from './../../../../context/SidebarContext';
+import { useUserDataContext } from '@devlaunchers/components/context/UserDataContext';
+import { Avatar, UserInfo, NavItem } from './../SideBarComponents';
 
-const images = require.context(
-  './../../../../images/UserProfile',
-  false,
-  /\.(png|jpe?g|svg)$/
-);
-const getImage = (name) => {
-  const image = images(`./${name}`);
-  console.log(`Image loaded: ${name} -> ${image}`);
-  return image;
-};
-
-function Avatar({ src, alt }) {
-  return (
-    <div className="flex justify-center items-center rounded-full overflow-hidden w-16 h-16">
-      <img
-        loading="lazy"
-        src={src}
-        alt={alt}
-        className="w-full h-full object-cover"
-      />
-    </div>
-  );
-}
-
-function UserInfo({ name, title }) {
-  return (
-    <div className="flex flex-col items-center">
-      <div className="text-sky-300 text-xl font-normal font-['Oswald'] leading-normal tracking-wide">
-        {name}
-      </div>
-      <div className="text-zinc-100 text-sm font-normal font-['Nunito Sans'] leading-tight">
-        {title}
-      </div>
-    </div>
-  );
-}
-
-export function NavItem({ icon, hoverIcon, label, href, isActive, onClick }) {
-  const [isHovered, setIsHovered] = useState(false);
+const Sidebar = () => {
+  const { userData } = useUserDataContext();
+  const state = useSidebarState();
+  const dispatch = useSidebarDispatch();
+  const router = useRouter();
+  const { tab } = router.query;
 
-  return (
-    <div className="flex w-full">
-      <a
-        href={href}
-        onClick={onClick}
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
-        className={`flex items-center w-full py-2 px-6 rounded-full transition-colors duration-200 ${
-          isActive ? 'text-black bg-white' : 'text-white bg-black'
-        } ${isHovered ? 'hover:bg-white hover:text-black' : ''}`}
-      >
-        <img
-          loading="lazy"
-          src={isHovered ? hoverIcon : icon}
-          alt=""
-          className="w-5 h-5 mr-3"
-        />
-        <span>{label}</span>
-      </a>
-    </div>
-  );
-}
+  useEffect(() => {
+    if (tab) {
+      dispatch({ type: 'SET_ACTIVE_TAB', payload: tab });
+    }
+  }, [tab]);
 
-const Sidebar = ({ isPublic, profilePictureUrl, displayName, title }) => {
-  const router = useRouter();
-  const routerPathname = router.pathname;
+  const handleTabClick = (tab) => {
+    dispatch({ type: 'SET_ACTIVE_TAB', payload: tab });
+    router.push(
+      {
+        pathname: router.pathname,
+        query: { tab },
+      },
+      undefined,
+      { shallow: true }
+    );
+  };
 
   const navItems = [
     {
-      icon: getImage('overview.png'),
-      hoverIcon: getImage('naoverview.png'),
+      iconColor: '#000000',
+      hoverIconColor: '#FFFFFF',
       label: 'Overview',
-      href: '/UserProjects',
-    },
-    {
-      icon: getImage('projects.png'),
-      hoverIcon: getImage('naprojects.png'),
-      label: 'Projects',
-      href: '/UserProjects',
-    },
-    {
-      icon: getImage('profiles.png'),
-      hoverIcon: getImage('naprofiles.png'),
-      label: 'Profiles',
-      href: '/UserProfiles',
-    },
-    {
-      icon: getImage('ideas.png'),
-      hoverIcon: getImage('naideas.png'),
-      label: 'Ideas',
-      href: '/UserIdeas',
-    },
-    {
-      icon: getImage('opportunities.png'),
-      hoverIcon: getImage('naopportunities.png'),
-      label: 'Opportunities',
-      href: '/UserOpportunities',
+      tab: 'overview',
     },
+    // Uncomment and add more nav items as needed
+    // { iconColor: '#000000', hoverIconColor: '#FFFFFF', label: 'Projects', tab: 'projects' },
+    // { iconColor: '#000000', hoverIconColor: '#FFFFFF', label: 'Ideas', tab: 'ideas' },
+    // { iconColor: '#000000', hoverIconColor: '#FFFFFF', label: 'Opportunities', tab: 'opportunities' },
   ];
 
-  if (isPublic) {
-    return null;
-  }
-
   return (
-    <div className="flex flex-col gap-5 pt-6 text-white border-r-2 bg-black border-black border-solid shadow-sm bg-zinc-900 max-w-[288px]">
-      <div className="flex flex-col gap-5 w-full">
+    <div className="flex flex-col gap-5 pt-6 text-white border-r-2 bg-black border-black h-full border-solid shadow-sm bg-zinc-900 max-w-[288px]">
+      <div className="flex flex-col gap-5 w-full ">
         <div className="flex gap-3 self-start ml-8">
-          <Avatar src={profilePictureUrl} alt="Profile avatar" />
-          <UserInfo name={displayName} title="Software Engineer" />
+          <Avatar src={userData.profilePictureUrl} alt="Profile avatar" />
+          <UserInfo name={userData.name} />
         </div>
         <div className="gap-0 mt-5 w-full border border-solid bg-zinc-700 border-zinc-700 min-h-[1px]" />
       </div>
       <nav className="flex flex-col items-center gap-3 w-full text-base font-light tracking-wider text-white uppercase">
-        {navItems.map((item, index) => (
+        {navItems.map(({ iconColor, hoverIconColor, label, tab }) => (
           <NavItem
-            key={index}
-            icon={item.hoverIcon}
-            hoverIcon={item.icon}
-            label={item.label}
-            href={item.href}
-            isActive={routerPathname === item.href}
-            onClick={(e) => {
-              e.preventDefault();
-              router.push(item.href);
-            }}
+            key={tab}
+            iconColor={iconColor}
+            hoverIconColor={hoverIconColor}
+            label={label}
+            isActive={state.activeTab === tab}
+            onClick={() => handleTabClick(tab)}
           />
         ))}
       </nav>
-      <div className="flex flex-col gap-0 items-center justify-center px-7 py-6 mt-auto w-full text-base font-light tracking-wider text-center uppercase border-t border-solid border-zinc-700 text-zinc-100">
-        <a
-          href="/logout"
-          className="flex gap-2.5 px-6 py-3 shadow-sm rounded-full hover:bg-zinc-800"
-        >
-          <img
-            loading="lazy"
-            src="/icons/logout.svg"
-            alt=""
-            className="w-5 h-5"
-          />
-          <div>Log out</div>
-        </a>
-      </div>
     </div>
   );
 };

apps/user-profile/src/components/modules/UserProfile/SideBarComponents/Avatar.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Avatar = ({ src, alt }) => {
+  return (
+    <div className="flex justify-center items-center rounded-full overflow-hidden w-10 h-10">
+      <img src={src} alt={alt} className="w-10 h-10 object-cover" />
+    </div>
+  );
+};
+
+export default Avatar;

apps/user-profile/src/components/modules/UserProfile/SideBarComponents/NavItem.js

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import SideNavBarIcon from '../../../../images/UserProfile/SVG/SideNavBarIcon';
+
+const NavItem = ({ iconColor, hoverIconColor, label, isActive, onClick }) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <div className="flex w-full">
+      <a
+        onClick={onClick}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        className={`flex items-center w-full py-2 px-6 rounded-full transition-colors duration-200 cursor-pointer ${
+          isActive ? 'text-black bg-white' : 'text-white bg-black'
+        } ${isHovered || isActive ? 'hover:bg-white hover:text-black' : ''}`}
+      >
+        <SideNavBarIcon
+          iconName={label}
+          color={iconColor}
+          hoverColor={hoverIconColor}
+          isHovered={isHovered || isActive}
+          className="w-5 h-5 mr-3"
+        />
+        <span>{label}</span>
+      </a>
+    </div>
+  );
+};
+
+export default NavItem;

apps/user-profile/src/components/modules/UserProfile/SideBarComponents/UserInfo.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const UserInfo = ({ name }) => {
+  return (
+    <div className="flex flex-col items-center">
+      <div className="text-sky-blue text-md font-normal font-['Oswald'] leading-normal tracking-wide">
+        {name}
+      </div>
+    </div>
+  );
+};
+
+export default UserInfo;

apps/user-profile/src/components/modules/UserProfile/SideBarComponents/index.js

@@ -0,0 +1,3 @@
+export { default as Avatar } from './Avatar';
+export { default as UserInfo } from './UserInfo';
+export { default as NavItem } from './NavItem';

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

@@ -8,8 +8,10 @@ import { useUserDataContext } from '@devlaunchers/components/context/UserDataCon
 import SideBar from './SideBar';
 import Overview from './Overview';
 import EditProfileModal from './EditProfileModal';
-import Modal from './../../../components/common/Modal'
+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,
@@ -22,14 +24,15 @@ import { editProfileDataContext } from '../../../context/EditProfileDataContext'
 export default function UserProfile({ publicUserData, isPublic }) {
   const { userData, isAuthenticated } = useUserDataContext();
   const { editProfileState } = editProfileDataContext();
+  const state = useSidebarState();
 
   const [loading, setLoading] = useState(true);
-  const [opportunities, setOpportunities] = React.useState([]);
-  const [myProjects, setMyProjects] = React.useState([]);
-  const [projects, setProjects] = React.useState([]);
-  const [ideas, setIdeas] = React.useState([]);
-  const [people, setPeople] = React.useState([]);
-  const [interests, setInterests] = React.useState([]);
+  const [opportunities, setOpportunities] = useState([]);
+  const [myProjects, setMyProjects] = useState([]);
+  const [projects, setProjects] = useState([]);
+  const [ideas, setIdeas] = useState([]);
+  const [people, setPeople] = useState([]);
+  const [interests, setInterests] = useState([]);
 
   // If user hasn't set a username, redirect them to the signup form
   const router = useRouter();
@@ -142,26 +145,32 @@ export default function UserProfile({ publicUserData, isPublic }) {
     setLoading(userData?.id === -1 || publicUserData?.id === -1);
   }, [publicUserData, userData]);
 
+  const renderContent = () => {
+    switch (state.activeTab) {
+      case 'overview':
+        return <Overview />;
+      case 'projects':
+        return <UserProjects myProjects={myProjects} />;
+      case 'profiles':
+        return <People people={people} />;
+      case 'ideas':
+        return <RecommendedIdeas ideas={ideas} />;
+      case 'opportunities':
+        return <Opportunities opportunities={opportunities} />;
+      default:
+        return <Overview />;
+    }
+  };
+
   return loading ? (
     <Loader />
   ) : (
-    <div className="flex flex-row bg-[#f9f9f9] h-screen">
+    <div className="flex flex-row bg-[#f9f9f9]">
       <div className="w-72">
-        <SideBar
-          isPublic={isPublic}
-          profilePictureUrl={
-            isPublic
-              ? publicUserData?.profile?.profilePictureUrl
-              : userData.profilePictureUrl
-          }
-          displayName={
-            isPublic ? publicUserData?.profile?.displayName : userData.name
-          }
-          title={isPublic ? publicUserData?.profile?.bio : userData.bio}
-        />
+        <SideBar />
       </div>
-      <div className="px-20 pb-20">
-        <Overview />
+      <div className="px-20 pb-20 w-full">
+        {renderContent()}
         {editProfileState.showEditProfileModal ? <EditProfileModal /> : null}
       </div>
     </div>

apps/user-profile/src/context/SidebarContext.js

@@ -0,0 +1,30 @@
+import React, { useReducer, useContext, createContext } from 'react';
+
+const SidebarStateContext = createContext();
+const SidebarDispatchContext = createContext();
+
+const sidebarReducer = (state, action) => {
+  switch (action.type) {
+    case 'SET_ACTIVE_TAB':
+      return { ...state, activeTab: action.payload };
+    default:
+      return state;
+  }
+};
+
+export const SidebarProvider = ({ children }) => {
+  const [state, dispatch] = useReducer(sidebarReducer, {
+    activeTab: 'overview',
+  });
+
+  return (
+    <SidebarStateContext.Provider value={state}>
+      <SidebarDispatchContext.Provider value={dispatch}>
+        {children}
+      </SidebarDispatchContext.Provider>
+    </SidebarStateContext.Provider>
+  );
+};
+
+export const useSidebarState = () => useContext(SidebarStateContext);
+export const useSidebarDispatch = () => useContext(SidebarDispatchContext);