diff --git a/apps/user-profile/src/components/common/Icons/SVG/OutlinedIdeas.js b/apps/user-profile/src/components/common/Icons/SVG/OutlinedIdeas.js new file mode 100644 index 000000000..27029136f --- /dev/null +++ b/apps/user-profile/src/components/common/Icons/SVG/OutlinedIdeas.js @@ -0,0 +1,24 @@ +import React from 'react'; + +function OutlinedIdeas({ width, height, colorClass, svgClass }) { + return ( + + + + ); +} + +export default OutlinedIdeas; diff --git a/apps/user-profile/src/components/common/Icons/SVG/OutlinedOpportunities.js b/apps/user-profile/src/components/common/Icons/SVG/OutlinedOpportunities.js new file mode 100644 index 000000000..ec691d3c0 --- /dev/null +++ b/apps/user-profile/src/components/common/Icons/SVG/OutlinedOpportunities.js @@ -0,0 +1,24 @@ +import React from 'react'; + +function OutlinedOpportunities({ width, height, colorClass, svgClass }) { + return ( + + + + ); +} + +export default OutlinedOpportunities; diff --git a/apps/user-profile/src/components/common/Icons/SVG/OutlinedOverview.js b/apps/user-profile/src/components/common/Icons/SVG/OutlinedOverview.js new file mode 100644 index 000000000..2f7395915 --- /dev/null +++ b/apps/user-profile/src/components/common/Icons/SVG/OutlinedOverview.js @@ -0,0 +1,24 @@ +import React from 'react'; + +function OutlinedOverview({ width, height, colorClass, svgClass }) { + return ( + + + + ); +} + +export default OutlinedOverview; diff --git a/apps/user-profile/src/components/common/Icons/SVG/OutlinedProfiles.js b/apps/user-profile/src/components/common/Icons/SVG/OutlinedProfiles.js new file mode 100644 index 000000000..dc154e96a --- /dev/null +++ b/apps/user-profile/src/components/common/Icons/SVG/OutlinedProfiles.js @@ -0,0 +1,24 @@ +import React from 'react'; + +function OutlinedProfiles({ width, height, colorClass, svgClass }) { + return ( + + + + ); +} + +export default OutlinedProfiles; diff --git a/apps/user-profile/src/components/common/Icons/SVG/OutlinedProjects.js b/apps/user-profile/src/components/common/Icons/SVG/OutlinedProjects.js new file mode 100644 index 000000000..874a07460 --- /dev/null +++ b/apps/user-profile/src/components/common/Icons/SVG/OutlinedProjects.js @@ -0,0 +1,24 @@ +import React from 'react'; + +function OutlinedProjects({ width, height, colorClass, svgClass }) { + return ( + + + + ); +} + +export default OutlinedProjects; diff --git a/apps/user-profile/src/components/common/Icons/index.js b/apps/user-profile/src/components/common/Icons/index.js index 929d752f6..72a468686 100644 --- a/apps/user-profile/src/components/common/Icons/index.js +++ b/apps/user-profile/src/components/common/Icons/index.js @@ -7,3 +7,9 @@ export { default as OutlinedShapes } from './SVG/OutlinedShapes'; export { default as FilledRocketLogo } from './SVG/FilledRocketLogo'; export { default as FilledCross } from './SVG/FilledCross'; + +export { default as OutlinedOverview } from './SVG/OutlinedOverview'; +export { default as OutlinedProjects } from './SVG/OutlinedProjects'; +export { default as OutlinedProfiles } from './SVG/OutlinedProfiles'; +export { default as OutlinedIdeas } from './SVG/OutlinedIdeas'; +export { default as OutlinedOpportunities } from './SVG/OutlinedOpportunities'; 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..2caf9a24d 100644 --- a/apps/user-profile/src/components/modules/UserProfile/SideBar/SideBar.js +++ b/apps/user-profile/src/components/modules/UserProfile/SideBar/SideBar.js @@ -1,151 +1,151 @@ -import React, { useState } from 'react'; -import { useRouter } from 'next/router'; +import { Typography } from '@devlaunchers/components/components/atoms'; +import { useSidebarDataContext } from './../../../../context/SidebarDataContext'; +import { sidebarActions } from './../../../../state/actions'; +import { useUserDataContext } from '@devlaunchers/components/context/UserDataContext'; +import { Avatar, UserInfo } from './../SideBar/SidebarHeader'; +import { + OutlinedOverview, + OutlinedProjects, + OutlinedProfiles, + OutlinedIdeas, + OutlinedOpportunities, +} from './../../../common/Icons'; -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 SideBar() { + const { userData } = useUserDataContext(); + const { sidebarState, sidebarDispatch } = useSidebarDataContext(); -function Avatar({ src, alt }) { - return ( -
- {alt} -
- ); -} + if (!sidebarState) { + return null; + } -function UserInfo({ name, title }) { - return ( -
-
- {name} -
-
- {title} -
-
- ); -} + const { pages } = sidebarState; -export function NavItem({ icon, hoverIcon, label, href, isActive, onClick }) { - const [isHovered, setIsHovered] = useState(false); + const styling = { + li: 'flex py-3 pl-6 items-center gap-3 rounded-3xl', + text: 'text-white group-hover:text-black', + background: 'hover:bg-grayscale-200 hover:cursor-pointer', + active: { + background: 'bg-grayscale-100 hover:cursor-default', + text: 'text-black ', + }, + }; - return ( -
- 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' : ''}`} - > - - {label} - -
- ); -} + styling.overview = { + li: `group ${styling.li} ${ + pages.showOverview ? styling.active.background : styling.background + }`, + iconColor: `${ + pages.showOverview + ? 'stroke-black' + : 'stroke-grayscale-100 group-hover:stroke-black' + }`, + typography: `${pages.showOverview ? styling.active.text : styling.text}`, + }; -const Sidebar = ({ isPublic, profilePictureUrl, displayName, title }) => { - const router = useRouter(); - const routerPathname = router.pathname; + styling.projects = { + li: `group ${styling.li} ${ + pages.showProjects ? styling.active.background : styling.background + }`, + iconColor: `${ + pages.showProjects + ? 'stroke-black' + : 'stroke-grayscale-100 group-hover:stroke-black' + }`, + typography: `${pages.showProjects ? styling.active.text : styling.text}`, + }; - 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', - }, - ]; + styling.profiles = { + li: `group ${styling.li} ${ + pages.showProfiles ? styling.active.background : styling.background + }`, + iconColor: `${ + pages.showProfiles + ? 'stroke-black' + : 'stroke-grayscale-100 group-hover:stroke-black' + }`, + typography: `${pages.showProfiles ? styling.active.text : styling.text}`, + }; - if (isPublic) { - return null; - } + styling.ideas = { + li: `group ${styling.li} ${ + pages.showIdeas ? styling.active.background : styling.background + }`, + iconColor: `${ + pages.showIdeas + ? 'stroke-black' + : 'stroke-grayscale-100 group-hover:stroke-black' + }`, + typography: `${pages.showIdeas ? styling.active.text : styling.text}`, + }; + + styling.opportunities = { + li: `group ${styling.li} ${ + pages.showOpportunities ? styling.active.background : styling.background + }`, + iconColor: `${ + pages.showOpportunities + ? 'stroke-black' + : 'stroke-grayscale-100 group-hover:stroke-black' + }`, + typography: `${ + pages.showOpportunities ? styling.active.text : styling.text + }`, + }; + + const onOverviewClick = () => { + sidebarDispatch({ type: sidebarActions.SHOW_OVERVIEW_SETTING }); + }; + const onProjectsClick = () => { + sidebarDispatch({ type: sidebarActions.SHOW_PROJECTS_SETTING }); + }; + const onProfilesClick = () => { + sidebarDispatch({ type: sidebarActions.SHOW_PROFILES_SETTING }); + }; + const onIdeasClick = () => { + sidebarDispatch({ type: sidebarActions.SHOW_IDEAS_SETTING }); + }; + const onOpportunitiesClick = () => { + sidebarDispatch({ type: sidebarActions.SHOW_OPPORTUNITIES_SETTING }); + }; return ( -
-
+
+
- - + +
- -
- - -
Log out
- -
+
    +
  • + + + OVERVIEW + +
    • +
  • + + + PROJECTS + +
    • + {/*
  • + + PROFILES +
    • +
  • + + IDEAS +
    • +
  • + + OPPORTUNITIES +
    • */} +
); -}; +} -export default Sidebar; +export default SideBar; diff --git a/apps/user-profile/src/components/modules/UserProfile/SideBar/SidebarHeader/Avatar.js b/apps/user-profile/src/components/modules/UserProfile/SideBar/SidebarHeader/Avatar.js new file mode 100644 index 000000000..146d5d0b7 --- /dev/null +++ b/apps/user-profile/src/components/modules/UserProfile/SideBar/SidebarHeader/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/SideBar/SidebarHeader/UserInfo.js b/apps/user-profile/src/components/modules/UserProfile/SideBar/SidebarHeader/UserInfo.js new file mode 100644 index 000000000..1354efd0a --- /dev/null +++ b/apps/user-profile/src/components/modules/UserProfile/SideBar/SidebarHeader/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/SideBar/SidebarHeader/index.js b/apps/user-profile/src/components/modules/UserProfile/SideBar/SidebarHeader/index.js new file mode 100644 index 000000000..0ef50c139 --- /dev/null +++ b/apps/user-profile/src/components/modules/UserProfile/SideBar/SidebarHeader/index.js @@ -0,0 +1,2 @@ +export { default as Avatar } from './Avatar'; +export { default as UserInfo } from './UserInfo'; diff --git a/apps/user-profile/src/components/modules/UserProfile/UserProfile.js b/apps/user-profile/src/components/modules/UserProfile/UserProfile.js index a5714290e..affa3c874 100644 --- a/apps/user-profile/src/components/modules/UserProfile/UserProfile.js +++ b/apps/user-profile/src/components/modules/UserProfile/UserProfile.js @@ -10,6 +10,7 @@ import Overview from './Overview'; import EditProfileModal from './EditProfileModal'; import { EditProfileDataProvider } from './../../../context/EditProfileDataContext'; +import { useSidebarDataContext } from './../../../context/SidebarDataContext'; import Modal from './../../../components/common/Modal'; // State management component @@ -23,14 +24,14 @@ import Modal from './../../../components/common/Modal'; */ export default function UserProfile({ publicUserData, isPublic }) { const { userData, isAuthenticated } = useUserDataContext(); - + const { sidebarState, sidebarDispatch } = useSidebarDataContext(); 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(); @@ -143,27 +144,37 @@ export default function UserProfile({ publicUserData, isPublic }) { setLoading(userData?.id === -1 || publicUserData?.id === -1); }, [publicUserData, userData]); + if (!sidebarState) { + null; + } + const { pages } = sidebarState; + const showPages = () => { + if (pages.showOverview) { + return ; + } + // else if (pages.showProjects) { + // return ; + // } else if (pages.showProfiles) { + // return ; + // } else if (pages.showIdeas) { + // return ; + // } else if (pages.showOpportunities) { + // return ; + // } + else { + return ; + } + }; return loading ? ( ) : ( -
+
- +
- + {showPages()}
diff --git a/apps/user-profile/src/context/SidebarDataContext.js b/apps/user-profile/src/context/SidebarDataContext.js new file mode 100644 index 000000000..16ee8525d --- /dev/null +++ b/apps/user-profile/src/context/SidebarDataContext.js @@ -0,0 +1,18 @@ +import { useReducer } from 'react'; +import constate from 'constate'; +import { sidebarReducer } from './../state/reducers'; + +const useSidebarData = () => { + const [sidebarState, sidebarDispatch] = useReducer( + sidebarReducer.sidebarReducer, + sidebarReducer.sidebarInitialState + ); + return { + sidebarState, + sidebarDispatch, + }; +}; + +const [SidebarDataProvider, useSidebarDataContext] = constate(useSidebarData); + +export { SidebarDataProvider, useSidebarDataContext }; diff --git a/apps/user-profile/src/images/UserProfile/ideas.png b/apps/user-profile/src/images/UserProfile/ideas.png deleted file mode 100644 index cfb87d147..000000000 Binary files a/apps/user-profile/src/images/UserProfile/ideas.png and /dev/null differ diff --git a/apps/user-profile/src/images/UserProfile/naideas.png b/apps/user-profile/src/images/UserProfile/naideas.png deleted file mode 100644 index a9496e57a..000000000 Binary files a/apps/user-profile/src/images/UserProfile/naideas.png and /dev/null differ diff --git a/apps/user-profile/src/images/UserProfile/naopportunities.png b/apps/user-profile/src/images/UserProfile/naopportunities.png deleted file mode 100644 index 32c39115a..000000000 Binary files a/apps/user-profile/src/images/UserProfile/naopportunities.png and /dev/null differ diff --git a/apps/user-profile/src/images/UserProfile/naoverview.png b/apps/user-profile/src/images/UserProfile/naoverview.png deleted file mode 100644 index c4ab584b5..000000000 Binary files a/apps/user-profile/src/images/UserProfile/naoverview.png and /dev/null differ diff --git a/apps/user-profile/src/images/UserProfile/naprofiles.png b/apps/user-profile/src/images/UserProfile/naprofiles.png deleted file mode 100644 index a0b4c7f01..000000000 Binary files a/apps/user-profile/src/images/UserProfile/naprofiles.png and /dev/null differ diff --git a/apps/user-profile/src/images/UserProfile/naprojects.png b/apps/user-profile/src/images/UserProfile/naprojects.png deleted file mode 100644 index e8c3982bd..000000000 Binary files a/apps/user-profile/src/images/UserProfile/naprojects.png and /dev/null differ diff --git a/apps/user-profile/src/images/UserProfile/opportunities.png b/apps/user-profile/src/images/UserProfile/opportunities.png deleted file mode 100644 index f632e303c..000000000 Binary files a/apps/user-profile/src/images/UserProfile/opportunities.png and /dev/null differ diff --git a/apps/user-profile/src/images/UserProfile/overview.png b/apps/user-profile/src/images/UserProfile/overview.png deleted file mode 100644 index 693b4ef85..000000000 Binary files a/apps/user-profile/src/images/UserProfile/overview.png and /dev/null differ diff --git a/apps/user-profile/src/images/UserProfile/profiles.png b/apps/user-profile/src/images/UserProfile/profiles.png deleted file mode 100644 index ed97dffc3..000000000 Binary files a/apps/user-profile/src/images/UserProfile/profiles.png and /dev/null differ diff --git a/apps/user-profile/src/images/UserProfile/projects.png b/apps/user-profile/src/images/UserProfile/projects.png deleted file mode 100644 index 6db2b109c..000000000 Binary files a/apps/user-profile/src/images/UserProfile/projects.png and /dev/null differ diff --git a/apps/user-profile/src/pages/users/[userId].js b/apps/user-profile/src/pages/users/[userId].js index 364c56ec6..8e330cf0d 100644 --- a/apps/user-profile/src/pages/users/[userId].js +++ b/apps/user-profile/src/pages/users/[userId].js @@ -2,6 +2,7 @@ import React from 'react'; import axios from 'axios'; import UserProfile from '../../components/modules/UserProfile'; +import { SidebarDataProvider } from './../../context/SidebarDataContext'; export const getStaticPaths = async () => { return { @@ -33,7 +34,9 @@ export const getStaticProps = async (context) => { export default function UserProfilePage({ user }) { return (
- + + +
); } diff --git a/apps/user-profile/src/pages/users/me.js b/apps/user-profile/src/pages/users/me.js index 69310a9ca..2939abed7 100644 --- a/apps/user-profile/src/pages/users/me.js +++ b/apps/user-profile/src/pages/users/me.js @@ -13,6 +13,7 @@ import { UseOnboardingData, useOnboardingDataContext, } from '../../context/OnboardingDataContext'; +import { SidebarDataProvider } from './../../context/SidebarDataContext'; /** * @drescription This component renders the User Profile Component. @@ -64,7 +65,9 @@ export default function UserProfilePage(props) { }} /> )} - + + + ) : ( diff --git a/apps/user-profile/src/state/actions/index.js b/apps/user-profile/src/state/actions/index.js index f9978a66c..6551a1462 100644 --- a/apps/user-profile/src/state/actions/index.js +++ b/apps/user-profile/src/state/actions/index.js @@ -1,3 +1,4 @@ export * as onboardingActions from './onboardingActions'; export * as editProfileActions from './editProfileActions'; export * as userProfileActions from './userProfileActions'; +export * as sidebarActions from './sidebarActions'; diff --git a/apps/user-profile/src/state/actions/sidebarActions.js b/apps/user-profile/src/state/actions/sidebarActions.js new file mode 100644 index 000000000..6f93fffb3 --- /dev/null +++ b/apps/user-profile/src/state/actions/sidebarActions.js @@ -0,0 +1,27 @@ +const SHOW_OVERVIEW_SETTING = 'Show overview settings.'; +const HIDE_OVERVIEW_SETTING = 'Hide overview settings.'; + +const SHOW_PROJECTS_SETTING = 'Show projects settings.'; +const HIDE_PROJECTS_SETTING = 'Hide projects settings.'; + +const SHOW_PROFILES_SETTING = 'Show profiles settings.'; +const HIDE_PROFILES_SETTING = 'Hide profiles settings.'; + +const SHOW_IDEAS_SETTING = 'Show ideas settings.'; +const HIDE_IDEAS_SETTING = 'Hide ideas settings.'; + +const SHOW_OPPORTUNITIES_SETTING = 'Show opportunities settings.'; +const HIDE_OPPORTUNITIES_SETTING = 'Hide opportunities settings.'; + +export { + SHOW_OVERVIEW_SETTING, + HIDE_OVERVIEW_SETTING, + SHOW_PROJECTS_SETTING, + HIDE_PROJECTS_SETTING, + SHOW_PROFILES_SETTING, + HIDE_PROFILES_SETTING, + SHOW_IDEAS_SETTING, + HIDE_IDEAS_SETTING, + SHOW_OPPORTUNITIES_SETTING, + HIDE_OPPORTUNITIES_SETTING, +}; 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..ca3e09fe4 --- /dev/null +++ b/apps/user-profile/src/state/reducers/sidebarReducer.js @@ -0,0 +1,128 @@ +import { sidebarActions } from './../actions'; + +const sidebarInitialState = { + pages: { + showOverview: true, + showProjects: false, + }, +}; + +const sidebarReducer = (state, action) => { + switch (action.type) { + case sidebarActions.SHOW_OVERVIEW_SETTING: { + return { + ...state, + pages: { + ...state.pages, + showOverview: true, + showProjects: false, + showProfiles: false, + showIdeas: false, + showOpportunities: false, + }, + }; + } + case sidebarActions.HIDE_OVERVIEW_SETTING: { + return { + ...state, + pages: { + ...state.pages, + showOverview: false, + }, + }; + } + case sidebarActions.SHOW_PROJECTS_SETTING: { + return { + ...state, + pages: { + ...state.pages, + showOverview: false, + showProjects: true, + showProfiles: false, + showIdeas: false, + showOpportunities: false, + }, + }; + } + case sidebarActions.HIDE_PROJECTS_SETTING: { + return { + ...state, + pages: { + ...state.pages, + showProjects: false, + }, + }; + } + case sidebarActions.SHOW_PROFILES_SETTING: { + return { + ...state, + pages: { + ...state.pages, + showOverview: false, + showProjects: false, + showProfiles: true, + showIdeas: false, + showOpportunities: false, + }, + }; + } + case sidebarActions.HIDE_PROFILES_SETTING: { + return { + ...state, + pages: { + ...state.pages, + showProfiles: false, + }, + }; + } + case sidebarActions.SHOW_IDEAS_SETTING: { + return { + ...state, + pages: { + ...state.pages, + showOverview: false, + showProjects: false, + showProfiles: false, + showIdeas: true, + showOpportunities: false, + }, + }; + } + case sidebarActions.HIDE_IDEAS_SETTING: { + return { + ...state, + pages: { + ...state.pages, + showIdeas: false, + }, + }; + } + case sidebarActions.SHOW_OPPORTUNITIES_SETTING: { + return { + ...state, + pages: { + ...state.pages, + showOverview: false, + showProjects: false, + showProfiles: false, + showIdeas: false, + showOpportunities: true, + }, + }; + } + case sidebarActions.HIDE_OPPORTUNITIES_SETTING: { + return { + ...state, + pages: { + ...state.pages, + showOpportunities: false, + }, + }; + } + default: { + return state; + } + } +}; + +export { sidebarReducer, sidebarInitialState };