From 96479d0af4bac61ed98240940c7f0f3f5f892a17 Mon Sep 17 00:00:00 2001 From: neelutiwari Date: Sun, 30 Jun 2024 19:24:29 -0500 Subject: [PATCH 1/8] Side nav bar changes --- .../modules/UserProfile/SideBar/SideBar.js | 128 +++++------ .../modules/UserProfile/UserProfile.js | 208 +++++++----------- .../src/context/SidebarContext.js | 30 +++ apps/user-profile/src/pages/_app.js | 49 +++-- apps/user-profile/src/state/reducers/index.js | 1 + .../src/state/reducers/sidebarReducer.js | 12 + 6 files changed, 207 insertions(+), 221 deletions(-) create mode 100644 apps/user-profile/src/context/SidebarContext.js create mode 100644 apps/user-profile/src/state/reducers/sidebarReducer.js diff --git a/apps/user-profile/src/components/modules/UserProfile/SideBar/SideBar.js b/apps/user-profile/src/components/modules/UserProfile/SideBar/SideBar.js index bdef89cb0..4412a5b92 100644 --- a/apps/user-profile/src/components/modules/UserProfile/SideBar/SideBar.js +++ b/apps/user-profile/src/components/modules/UserProfile/SideBar/SideBar.js @@ -1,11 +1,17 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { useRouter } from 'next/router'; +import { + useSidebarState, + useSidebarDispatch, +} from './../../../../context/SidebarContext'; +import { useUserDataContext } from '@devlaunchers/components/context/UserDataContext'; const images = require.context( './../../../../images/UserProfile', false, /\.(png|jpe?g|svg)$/ ); + const getImage = (name) => { const image = images(`./${name}`); console.log(`Image loaded: ${name} -> ${image}`); @@ -14,47 +20,42 @@ const getImage = (name) => { function Avatar({ src, alt }) { return ( -
+
{alt}
); } -function UserInfo({ name, title }) { +function UserInfo({ name }) { return (
-
+
{name}
-
- {title} -
); } -export function NavItem({ icon, hoverIcon, label, href, isActive, onClick }) { +export function NavItem({ icon, hoverIcon, label, isActive, onClick }) { const [isHovered, setIsHovered] = useState(false); return (
setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} - className={`flex items-center w-full py-2 px-6 rounded-full transition-colors duration-200 ${ + 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 ? 'hover:bg-white hover:text-black' : ''}`} + } ${isHovered || isActive ? 'hover:bg-white hover:text-black' : ''}`} > @@ -64,86 +65,65 @@ export function NavItem({ icon, hoverIcon, label, href, isActive, onClick }) { ); } -const Sidebar = ({ isPublic, profilePictureUrl, displayName, title }) => { +const Sidebar = () => { + const { userData } = useUserDataContext(); + const state = useSidebarState(); + const dispatch = useSidebarDispatch(); const router = useRouter(); - const routerPathname = router.pathname; + const { tab } = router.query; + + useEffect(() => { + if (tab) { + dispatch({ type: 'SET_ACTIVE_TAB', payload: tab }); + } + }, [tab]); + + 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'), 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', }, + // { icon: getImage('projects.png'), hoverIcon: getImage('naprojects.png'), label: 'Projects', tab: 'projects' }, + // { icon: getImage('profiles.png'), hoverIcon: getImage('naprofiles.png'), label: 'Profiles', tab: 'profiles' }, + // { icon: getImage('ideas.png'), hoverIcon: getImage('naideas.png'), label: 'Ideas', tab: 'ideas' }, + // { icon: getImage('opportunities.png'), hoverIcon: getImage('naopportunities.png'), label: 'Opportunities', tab: 'opportunities' }, ]; - if (isPublic) { - return null; - } - return ( -
-
+
+ ); }; diff --git a/apps/user-profile/src/components/modules/UserProfile/UserProfile.js b/apps/user-profile/src/components/modules/UserProfile/UserProfile.js index d01510d71..4ef3df536 100644 --- a/apps/user-profile/src/components/modules/UserProfile/UserProfile.js +++ b/apps/user-profile/src/components/modules/UserProfile/UserProfile.js @@ -1,167 +1,127 @@ 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'; 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'; -// 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 {*} - */ +import { useSidebarState } from '../../../context/SidebarContext'; + 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(); - React.useEffect(() => { + + useEffect(() => { if (isAuthenticated && userData.name === '') router.push('/signup'); }, [isAuthenticated]); - // Start Projects/Opportunities - React.useEffect(() => { - getProjectData(); + useEffect(() => { + const fetchData = async () => { + await getProjectData(); + await getIdeaData(); + await getPeopleData(); + }; + fetchData(); }, []); + useEffect(() => { + setLoading(userData?.id === -1 || publicUserData?.id === -1); + }, [publicUserData, userData]); + const getProjectData = async () => { - await axios(`${process.env.NEXT_PUBLIC_STRAPI_URL}/projects`) - .then(({ data }) => { - if (data) { - setProjects(data); - const tempOpportunities = []; - data.map((project) => { - project.opportunities.map((opportunity) => { + 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) => { opportunity.project = project; tempOpportunities.push(opportunity); }); - }); - setOpportunities(tempOpportunities); - } - }) - .catch(() => { - console.error('Could not fetch project data'); - }); + } + }); + setOpportunities(tempOpportunities); + } + } catch (error) { + console.error('Could not fetch project data', error); + } }; - // 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 () => { - await axios(`${process.env.NEXT_PUBLIC_STRAPI_URL}/idea-cards`) - .then(({ data }) => { - if (data) { - setIdeas(data); - } - }) - .catch(() => { - console.error('Could not fetch idea data'); - }); + 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); + } }; - // End Ideas - // Start People - React.useEffect(() => { - getPeopleData().catch(() => { - console.error(`Could not fetch People's data`); - }); - }, []); const getPeopleData = async () => { - 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) => - ( + 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 ( await axios(`${process.env.NEXT_PUBLIC_STRAPI_URL}/users/${userId}`) - ).data - ) - ); - - setPeople(usersData); + ).data; + }) + ); + setPeople(usersData); + } catch (error) { + console.error(`Could not fetch People's data`, error); + } }; - // 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'); - }); + const renderContent = () => { + switch (state.activeTab) { + case 'overview': + return ; + case 'projects': + return ; + case 'profiles': + return ; + case 'ideas': + return ; + case 'opportunities': + return ; + default: + return ; + } }; - // End Interests - - useEffect(() => { - setLoading(userData?.id === -1 || publicUserData?.id === -1); - }, [publicUserData, userData]); return loading ? ( ) : ( -
+
- +
-
- +
+ {renderContent()} {editProfileState.showEditProfileModal ? : null}
diff --git a/apps/user-profile/src/context/SidebarContext.js b/apps/user-profile/src/context/SidebarContext.js new file mode 100644 index 000000000..6722027b5 --- /dev/null +++ b/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 ( + + + {children} + + + ); +}; + +export const useSidebarState = () => useContext(SidebarStateContext); +export const useSidebarDispatch = () => useContext(SidebarDispatchContext); diff --git a/apps/user-profile/src/pages/_app.js b/apps/user-profile/src/pages/_app.js index 8cdbffe54..4e31fd4c5 100644 --- a/apps/user-profile/src/pages/_app.js +++ b/apps/user-profile/src/pages/_app.js @@ -16,6 +16,7 @@ import { UserDataProvider } from '@devlaunchers/components/context/UserDataConte import { LazyMotion, domAnimation } from 'framer-motion'; import { OnboardingDataProvider } from './../context/OnboardingDataContext'; import { EditProfileDataProvider } from '../context/EditProfileDataContext'; +import { SidebarProvider } from '../context/SidebarContext'; const hashRedirect = (router) => { // Strip out hash from url (if any) so we can transition from HashRouter to BrowserRouter @@ -52,31 +53,33 @@ function MyApp(props) { - - -
- - - + + + +
+ + + -
- +
+ +
+ {/* */} + + {props.children} + + {/* {props.children} */}
- {/* */} - - {props.children} - - {/* {props.children} */} -
- + + diff --git a/apps/user-profile/src/state/reducers/index.js b/apps/user-profile/src/state/reducers/index.js index f97bc0cde..44bed8f93 100644 --- a/apps/user-profile/src/state/reducers/index.js +++ b/apps/user-profile/src/state/reducers/index.js @@ -1,3 +1,4 @@ export * as onboardingReducer from './onboardingReducer'; export * as editProfileReducer from './editProfileReducer'; export * as userProfileReducer from './userProfileReducer'; +export * as sidebarReducer from './sidebarReducer'; diff --git a/apps/user-profile/src/state/reducers/sidebarReducer.js b/apps/user-profile/src/state/reducers/sidebarReducer.js new file mode 100644 index 000000000..617dbca41 --- /dev/null +++ b/apps/user-profile/src/state/reducers/sidebarReducer.js @@ -0,0 +1,12 @@ +export const initialSideNavbarState = { + activeTab: 'overview', +}; + +export const sidebarReducer = (state, action) => { + switch (action.type) { + case 'SET_ACTIVE_TAB': + return { ...state, activeTab: action.payload }; + default: + return state; + } +}; From e98a51cb47169897d8dc99d52b164c8086ef6ed4 Mon Sep 17 00:00:00 2001 From: neelutiwari Date: Sun, 30 Jun 2024 19:36:09 -0500 Subject: [PATCH 2/8] user profile changes --- .../modules/UserProfile/UserProfile.js | 159 ++++++++++++------ 1 file changed, 104 insertions(+), 55 deletions(-) diff --git a/apps/user-profile/src/components/modules/UserProfile/UserProfile.js b/apps/user-profile/src/components/modules/UserProfile/UserProfile.js index 4ef3df536..a310fe24a 100644 --- 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) { From 74a306f5ba113901483a9458a3fa5baf205cf54a Mon Sep 17 00:00:00 2001 From: neelutiwari Date: Tue, 2 Jul 2024 09:40:47 -0500 Subject: [PATCH 3/8] refactor --- .../modules/UserProfile/SideBar/SideBar.js | 51 ++----------------- .../UserProfile/SideBarComponents/Avatar.js | 11 ++++ .../UserProfile/SideBarComponents/NavItem.js | 27 ++++++++++ .../UserProfile/SideBarComponents/UserInfo.js | 13 +++++ .../UserProfile/SideBarComponents/index.js | 3 ++ 5 files changed, 57 insertions(+), 48 deletions(-) create mode 100644 apps/user-profile/src/components/modules/UserProfile/SideBarComponents/Avatar.js create mode 100644 apps/user-profile/src/components/modules/UserProfile/SideBarComponents/NavItem.js create mode 100644 apps/user-profile/src/components/modules/UserProfile/SideBarComponents/UserInfo.js create mode 100644 apps/user-profile/src/components/modules/UserProfile/SideBarComponents/index.js diff --git a/apps/user-profile/src/components/modules/UserProfile/SideBar/SideBar.js b/apps/user-profile/src/components/modules/UserProfile/SideBar/SideBar.js index 4412a5b92..e5a94ec2f 100644 --- a/apps/user-profile/src/components/modules/UserProfile/SideBar/SideBar.js +++ b/apps/user-profile/src/components/modules/UserProfile/SideBar/SideBar.js @@ -1,10 +1,11 @@ -import React, { useEffect, 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', @@ -18,53 +19,6 @@ const getImage = (name) => { return image; }; -function Avatar({ src, alt }) { - return ( -
- {alt} -
- ); -} - -function UserInfo({ name }) { - return ( -
-
- {name} -
-
- ); -} - -export function NavItem({ icon, hoverIcon, label, isActive, onClick }) { - const [isHovered, setIsHovered] = useState(false); - - return ( - - ); -} - const Sidebar = () => { const { userData } = useUserDataContext(); const state = useSidebarState(); @@ -97,6 +51,7 @@ const Sidebar = () => { label: 'Overview', tab: 'overview', }, + // Uncomment and add more nav items as needed // { icon: getImage('projects.png'), hoverIcon: getImage('naprojects.png'), label: 'Projects', tab: 'projects' }, // { icon: getImage('profiles.png'), hoverIcon: getImage('naprofiles.png'), label: 'Profiles', tab: 'profiles' }, // { icon: getImage('ideas.png'), hoverIcon: getImage('naideas.png'), label: 'Ideas', tab: 'ideas' }, diff --git a/apps/user-profile/src/components/modules/UserProfile/SideBarComponents/Avatar.js b/apps/user-profile/src/components/modules/UserProfile/SideBarComponents/Avatar.js new file mode 100644 index 000000000..146d5d0b7 --- /dev/null +++ b/apps/user-profile/src/components/modules/UserProfile/SideBarComponents/Avatar.js @@ -0,0 +1,11 @@ +import React from 'react'; + +const Avatar = ({ src, alt }) => { + return ( +
+ {alt} +
+ ); +}; + +export default Avatar; diff --git a/apps/user-profile/src/components/modules/UserProfile/SideBarComponents/NavItem.js b/apps/user-profile/src/components/modules/UserProfile/SideBarComponents/NavItem.js new file mode 100644 index 000000000..256b68638 --- /dev/null +++ b/apps/user-profile/src/components/modules/UserProfile/SideBarComponents/NavItem.js @@ -0,0 +1,27 @@ +import React, { useState } from 'react'; + +const NavItem = ({ icon, hoverIcon, label, isActive, onClick }) => { + const [isHovered, setIsHovered] = useState(false); + + return ( + + ); +}; + +export default NavItem; diff --git a/apps/user-profile/src/components/modules/UserProfile/SideBarComponents/UserInfo.js b/apps/user-profile/src/components/modules/UserProfile/SideBarComponents/UserInfo.js new file mode 100644 index 000000000..afa59ff4f --- /dev/null +++ b/apps/user-profile/src/components/modules/UserProfile/SideBarComponents/UserInfo.js @@ -0,0 +1,13 @@ +import React from 'react'; + +const UserInfo = ({ name }) => { + return ( +
+
+ {name} +
+
+ ); +}; + +export default UserInfo; diff --git a/apps/user-profile/src/components/modules/UserProfile/SideBarComponents/index.js b/apps/user-profile/src/components/modules/UserProfile/SideBarComponents/index.js new file mode 100644 index 000000000..e94c76738 --- /dev/null +++ b/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'; From 0190257335c693f27a8f2c7cd8f253f86cae58ac Mon Sep 17 00:00:00 2001 From: neelutiwari Date: Tue, 2 Jul 2024 16:11:41 -0500 Subject: [PATCH 4/8] icon changes png to svg --- .../modules/UserProfile/SideBar/SideBar.js | 29 +++------- .../UserProfile/SideBarComponents/NavItem.js | 10 ++-- .../SideBarComponents/SideNavBarIcon.js | 51 ++++++++++++++++++ .../src/images/UserProfile/Vector.svg | 3 ++ .../src/images/UserProfile/clipboard.svg | 5 ++ .../src/images/UserProfile/ideas.png | Bin 325 -> 0 bytes .../src/images/UserProfile/naideas.png | Bin 305 -> 0 bytes .../images/UserProfile/naopportunities.png | Bin 366 -> 0 bytes .../src/images/UserProfile/naoverview.png | Bin 361 -> 0 bytes .../src/images/UserProfile/naprofiles.png | Bin 411 -> 0 bytes .../src/images/UserProfile/naprojects.png | Bin 321 -> 0 bytes .../src/images/UserProfile/opportunities.png | Bin 368 -> 0 bytes .../src/images/UserProfile/overview.png | Bin 350 -> 0 bytes .../src/images/UserProfile/profiles.png | Bin 381 -> 0 bytes .../src/images/UserProfile/projects.png | Bin 275 -> 0 bytes .../src/images/UserProfile/star.svg | 5 ++ .../src/images/UserProfile/user.svg | 3 ++ .../src/images/UserProfile/users.svg | 5 ++ 18 files changed, 86 insertions(+), 25 deletions(-) create mode 100644 apps/user-profile/src/components/modules/UserProfile/SideBarComponents/SideNavBarIcon.js create mode 100644 apps/user-profile/src/images/UserProfile/Vector.svg create mode 100644 apps/user-profile/src/images/UserProfile/clipboard.svg delete mode 100644 apps/user-profile/src/images/UserProfile/ideas.png delete mode 100644 apps/user-profile/src/images/UserProfile/naideas.png delete mode 100644 apps/user-profile/src/images/UserProfile/naopportunities.png delete mode 100644 apps/user-profile/src/images/UserProfile/naoverview.png delete mode 100644 apps/user-profile/src/images/UserProfile/naprofiles.png delete mode 100644 apps/user-profile/src/images/UserProfile/naprojects.png delete mode 100644 apps/user-profile/src/images/UserProfile/opportunities.png delete mode 100644 apps/user-profile/src/images/UserProfile/overview.png delete mode 100644 apps/user-profile/src/images/UserProfile/profiles.png delete mode 100644 apps/user-profile/src/images/UserProfile/projects.png create mode 100644 apps/user-profile/src/images/UserProfile/star.svg create mode 100644 apps/user-profile/src/images/UserProfile/user.svg create mode 100644 apps/user-profile/src/images/UserProfile/users.svg diff --git a/apps/user-profile/src/components/modules/UserProfile/SideBar/SideBar.js b/apps/user-profile/src/components/modules/UserProfile/SideBar/SideBar.js index e5a94ec2f..7863efb6c 100644 --- a/apps/user-profile/src/components/modules/UserProfile/SideBar/SideBar.js +++ b/apps/user-profile/src/components/modules/UserProfile/SideBar/SideBar.js @@ -7,18 +7,6 @@ import { 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; -}; - const Sidebar = () => { const { userData } = useUserDataContext(); const state = useSidebarState(); @@ -46,16 +34,15 @@ const Sidebar = () => { const navItems = [ { - icon: getImage('overview.png'), - hoverIcon: getImage('naoverview.png'), + iconColor: '#000000', + hoverIconColor: '#FFFFFF', label: 'Overview', tab: 'overview', }, // Uncomment and add more nav items as needed - // { icon: getImage('projects.png'), hoverIcon: getImage('naprojects.png'), label: 'Projects', tab: 'projects' }, - // { icon: getImage('profiles.png'), hoverIcon: getImage('naprofiles.png'), label: 'Profiles', tab: 'profiles' }, - // { icon: getImage('ideas.png'), hoverIcon: getImage('naideas.png'), label: 'Ideas', tab: 'ideas' }, - // { icon: getImage('opportunities.png'), hoverIcon: getImage('naopportunities.png'), label: 'Opportunities', tab: 'opportunities' }, + // { iconColor: '#000000', hoverIconColor: '#FFFFFF', label: 'Projects', tab: 'projects' }, + // { iconColor: '#000000', hoverIconColor: '#FFFFFF', label: 'Ideas', tab: 'ideas' }, + // { iconColor: '#000000', hoverIconColor: '#FFFFFF', label: 'Opportunities', tab: 'opportunities' }, ]; return ( @@ -68,11 +55,11 @@ const Sidebar = () => {