Skip to content

Commit 3232c9d

Browse files
alexanmtzalexanmtz
committed
side menu as a hook
1 parent 245b535 commit 3232c9d

5 files changed

Lines changed: 159 additions & 162 deletions

File tree

‎frontend/src/components/design-library/molecules/heroes/secondary-hero/secondary-hero.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const SecondaryHero = ({ image, animation, title, items }: SecondaryHeroProps) =
3939
{items.map((item, index) => (
4040
<>
4141
<ListItemTop>
42-
<ListItemIcon>{item.icon}</ListItemIcon>
42+
<ListItemIcon style={{marginRight: 10}}>{item.icon}</ListItemIcon>
4343
<ListItemText primary={item.primaryText} secondary={item.secondaryText} />
4444
</ListItemTop>
4545
{index < items.length - 1 && <Divider />}

‎frontend/src/components/design-library/molecules/menus/side-menu/side-menu-items.styles.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
import { ListItemText, MenuItem } from '@mui/material'
22
import { styled } from '@mui/material/styles'
33

4-
export const MenuListStyled = styled('div')<{ compact?: boolean }>(({ theme, compact }) => ({
4+
export const MenuListStyled = styled(ListItemText)<{ compact?: boolean }>(({ theme, compact }) => ({
55
display: 'flex',
66
flexDirection: 'column',
77
alignItems: compact ? 'center' : 'flex-start',
8-
flexGrow: 1
8+
flexGrow: 1,
9+
'& .MuiListItemText-primary': {
10+
fontSize: 11
11+
}
912
}))
1013

1114
export const MenuItemStyled = styled(MenuItem)(({ theme }) => ({

‎frontend/src/components/design-library/organisms/layouts/sidebar-layouts/profile-sidebar-layout/profile-sidebar-layout.tsx‎

Lines changed: 4 additions & 152 deletions
Original file line numberDiff line numberDiff line change
@@ -1,161 +1,13 @@
1-
import React, { useState, useEffect } from 'react'
2-
import { FormattedMessage } from 'react-intl'
3-
import { useHistory } from 'react-router-dom'
4-
import {
5-
Dashboard as DashboardIcon,
6-
AccountBalanceWallet as WalletIcon,
7-
LibraryBooks,
8-
Payment as PaymentIcon,
9-
CardMembership as PaymentRequestsIcon,
10-
SwapHoriz as PayoutIcon,
11-
Public as ExploreIcon,
12-
AssignmentTurnedIn as ClaimIcon
13-
} from '@mui/icons-material'
14-
import useUserTypes from '../../../../../../hooks/use-user-types'
1+
import React from 'react'
2+
import useProfileSidebarMenu from '../../../../../../hooks/use-profile-sidebar-menu'
153
import { SideMenu } from '../../../../molecules/menus/side-menu/side-menu'
164

175
const ProfileSidebar = ({ user }) => {
18-
const [selected, setSelected] = useState(0)
19-
const history = useHistory()
20-
const { isContributor, isMaintainer, isFunding, completed } = useUserTypes({ user })
21-
22-
useEffect(() => {
23-
const path = history.location.pathname
24-
if (path.includes('/profile/explore')) {
25-
setSelected(2)
26-
} else if (
27-
path.includes('/profile/task') ||
28-
path.includes('/profile/projects') ||
29-
path.includes('/profile/organizations')
30-
) {
31-
setSelected(1)
32-
} else if (path.includes('/profile/payments')) {
33-
setSelected(3)
34-
} else if (path.includes('/profile/payment-requests')) {
35-
setSelected(4)
36-
} else if (path.includes('/profile/wallets')) {
37-
setSelected(5)
38-
} else if (path.includes('/profile/claims')) {
39-
setSelected(6)
40-
} else if (path.includes('/profile/payouts')) {
41-
setSelected(7)
42-
} else {
43-
setSelected(null)
44-
}
45-
}, [history.location.pathname])
6+
const { completed, menuItems } = useProfileSidebarMenu({ user })
467

478
return (
489
<div>
49-
<SideMenu
50-
completed={completed}
51-
menuItems={[
52-
{
53-
items: [
54-
{
55-
include: true,
56-
onClick: () => history.push('/profile'),
57-
icon: <DashboardIcon />,
58-
label: (
59-
<FormattedMessage
60-
id="account.profile.sidemenu.home.link.label"
61-
defaultMessage="Dashboard"
62-
/>
63-
),
64-
selected: selected === 0
65-
}
66-
]
67-
},
68-
{
69-
category: (
70-
<FormattedMessage id="account.profile.sidemenu.issues" defaultMessage="Issues" />
71-
),
72-
items: [
73-
{
74-
include: isContributor || isMaintainer || isFunding,
75-
onClick: () => history.push('/profile/tasks'),
76-
icon: <LibraryBooks />,
77-
label: (
78-
<FormattedMessage
79-
id="account.profile.sidemenu.issues.network"
80-
defaultMessage="My issues"
81-
/>
82-
),
83-
selected: selected === 1
84-
},
85-
{
86-
include: isContributor || isFunding,
87-
onClick: () => history.push('/profile/explore'),
88-
icon: <ExploreIcon />,
89-
label: (
90-
<FormattedMessage
91-
id="account.profile.sidemenu.issues.explore"
92-
defaultMessage="Explore issues"
93-
/>
94-
),
95-
selected: selected === 2
96-
}
97-
]
98-
},
99-
{
100-
category: (
101-
<FormattedMessage
102-
id="account.profile.sidemenu.section.bounties"
103-
defaultMessage="Bounties"
104-
/>
105-
),
106-
items: [
107-
{
108-
include: isFunding || isMaintainer,
109-
onClick: () => history.push('/profile/payments'),
110-
icon: <PaymentIcon />,
111-
label: (
112-
<FormattedMessage id="account.profile.payments.list" defaultMessage="Payments" />
113-
),
114-
selected: selected === 3
115-
},
116-
{
117-
include: isContributor,
118-
onClick: () => history.push('/profile/payment-requests'),
119-
icon: <PaymentRequestsIcon />,
120-
label: (
121-
<FormattedMessage
122-
id="account.profile.paymentRequests.list"
123-
defaultMessage="Payment Requests"
124-
/>
125-
),
126-
selected: selected === 4
127-
},
128-
{
129-
include: isFunding || isMaintainer,
130-
onClick: () => history.push('/profile/wallets'),
131-
icon: <WalletIcon />,
132-
label: (
133-
<FormattedMessage id="account.profile.wallet.list" defaultMessage="Wallets" />
134-
),
135-
selected: selected === 5
136-
},
137-
{
138-
include: isContributor,
139-
onClick: () => history.push('/profile/claims'),
140-
icon: <ClaimIcon />,
141-
label: (
142-
<FormattedMessage id="account.profile.claims.list" defaultMessage="Claims" />
143-
),
144-
selected: selected === 6
145-
},
146-
{
147-
include: isContributor,
148-
onClick: () => history.push('/profile/payouts'),
149-
icon: <PayoutIcon />,
150-
label: (
151-
<FormattedMessage id="account.profile.payout.list" defaultMessage="Payouts" />
152-
),
153-
selected: selected === 7
154-
}
155-
]
156-
}
157-
]}
158-
/>
10+
<SideMenu completed={completed} menuItems={menuItems} />
15911
</div>
16012
)
16113
}

‎frontend/src/hooks/use-profile-sidebar-menu.tsx‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
import React, { useEffect, useState } from 'react'
2+
import { FormattedMessage } from 'react-intl'
3+
import { useHistory } from 'react-router-dom'
4+
import {
5+
Dashboard as DashboardIcon,
6+
AccountBalanceWallet as WalletIcon,
7+
LibraryBooks,
8+
Payment as PaymentIcon,
9+
CardMembership as PaymentRequestsIcon,
10+
SwapHoriz as PayoutIcon,
11+
Public as ExploreIcon,
12+
AssignmentTurnedIn as ClaimIcon
13+
} from '@mui/icons-material'
14+
import useUserTypes from './use-user-types'
15+
16+
const useProfileSidebarMenu = ({ user }) => {
17+
const [selected, setSelected] = useState(0)
18+
const history = useHistory()
19+
const { isContributor, isMaintainer, isFunding, completed } = useUserTypes({ user })
20+
21+
useEffect(() => {
22+
const path = history.location.pathname
23+
if (path.includes('/profile/explore')) {
24+
setSelected(2)
25+
} else if (
26+
path.includes('/profile/task') ||
27+
path.includes('/profile/projects') ||
28+
path.includes('/profile/organizations')
29+
) {
30+
setSelected(1)
31+
} else if (path.includes('/profile/payments')) {
32+
setSelected(3)
33+
} else if (path.includes('/profile/payment-requests')) {
34+
setSelected(4)
35+
} else if (path.includes('/profile/wallets')) {
36+
setSelected(5)
37+
} else if (path.includes('/profile/claims')) {
38+
setSelected(6)
39+
} else if (path.includes('/profile/payouts')) {
40+
setSelected(7)
41+
} else {
42+
setSelected(null)
43+
}
44+
}, [history.location.pathname])
45+
46+
const menuItems = [
47+
{
48+
items: [
49+
{
50+
include: true,
51+
onClick: () => history.push('/profile'),
52+
icon: <DashboardIcon />,
53+
label: (
54+
<FormattedMessage
55+
id="account.profile.sidemenu.home.link.label"
56+
defaultMessage="Dashboard"
57+
/>
58+
),
59+
selected: selected === 0
60+
}
61+
]
62+
},
63+
{
64+
category: (
65+
<FormattedMessage id="account.profile.sidemenu.issues" defaultMessage="Issues" />
66+
),
67+
items: [
68+
{
69+
include: isContributor || isMaintainer || isFunding,
70+
onClick: () => history.push('/profile/tasks'),
71+
icon: <LibraryBooks />,
72+
label: (
73+
<FormattedMessage
74+
id="account.profile.sidemenu.issues.network"
75+
defaultMessage="My issues"
76+
/>
77+
),
78+
selected: selected === 1
79+
},
80+
{
81+
include: isContributor || isFunding,
82+
onClick: () => history.push('/profile/explore'),
83+
icon: <ExploreIcon />,
84+
label: (
85+
<FormattedMessage
86+
id="account.profile.sidemenu.issues.explore"
87+
defaultMessage="Explore issues"
88+
/>
89+
),
90+
selected: selected === 2
91+
}
92+
]
93+
},
94+
{
95+
category: (
96+
<FormattedMessage
97+
id="account.profile.sidemenu.section.bounties"
98+
defaultMessage="Bounties"
99+
/>
100+
),
101+
items: [
102+
{
103+
include: isFunding || isMaintainer,
104+
onClick: () => history.push('/profile/payments'),
105+
icon: <PaymentIcon />,
106+
label: <FormattedMessage id="account.profile.payments.list" defaultMessage="Payments" />,
107+
selected: selected === 3
108+
},
109+
{
110+
include: isContributor,
111+
onClick: () => history.push('/profile/payment-requests'),
112+
icon: <PaymentRequestsIcon />,
113+
label: (
114+
<FormattedMessage
115+
id="account.profile.paymentRequests.list"
116+
defaultMessage="Payment Requests"
117+
/>
118+
),
119+
selected: selected === 4
120+
},
121+
{
122+
include: isFunding || isMaintainer,
123+
onClick: () => history.push('/profile/wallets'),
124+
icon: <WalletIcon />,
125+
label: <FormattedMessage id="account.profile.wallet.list" defaultMessage="Wallets" />,
126+
selected: selected === 5
127+
},
128+
{
129+
include: isContributor,
130+
onClick: () => history.push('/profile/claims'),
131+
icon: <ClaimIcon />,
132+
label: <FormattedMessage id="account.profile.claims.list" defaultMessage="Claims" />,
133+
selected: selected === 6
134+
},
135+
{
136+
include: isContributor,
137+
onClick: () => history.push('/profile/payouts'),
138+
icon: <PayoutIcon />,
139+
label: <FormattedMessage id="account.profile.payout.list" defaultMessage="Payouts" />,
140+
selected: selected === 7
141+
}
142+
]
143+
}
144+
]
145+
146+
return { completed, menuItems, selected }
147+
}
148+
149+
export default useProfileSidebarMenu

‎frontend/src/styleguide/styles/palette.js‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -138,13 +138,6 @@ const Palette = {
138138
}
139139
}
140140
},
141-
MuiListItemText: {
142-
styleOverrides: {
143-
primary: {
144-
fontSize: 11
145-
}
146-
}
147-
},
148141
MuiListItemIcon: {
149142
styleOverrides: {
150143
root: {

0 commit comments

Comments
 (0)