Skip to content

Commit 6470319

Browse files
MartinBraquetMartinBraquet
committed
Add settings page
1 parent 4ca3f3c commit 6470319

File tree

6 files changed

+180
-249
lines changed

6 files changed

+180
-249
lines changed

‎web/components/nav/sidebar.tsx‎

Lines changed: 38 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,50 @@
1-
import {
2-
LogoutIcon,
3-
MoonIcon,
4-
SunIcon,
5-
LoginIcon,
6-
} from '@heroicons/react/outline'
1+
import {LoginIcon, LogoutIcon,} from '@heroicons/react/outline'
72
import clsx from 'clsx'
8-
import { buildArray } from 'common/util/array'
9-
import Router, { useRouter } from 'next/router'
10-
import { useUser } from 'web/hooks/use-user'
11-
import { firebaseLogin, firebaseLogout } from 'web/lib/firebase/users'
12-
import { withTracking } from 'web/lib/service/analytics'
13-
import { ProfileSummary } from './profile-summary'
14-
import { Item, SidebarItem } from './sidebar-item'
3+
import {buildArray} from 'common/util/array'
4+
import Router, {useRouter} from 'next/router'
5+
import {useUser} from 'web/hooks/use-user'
6+
import {firebaseLogout} from 'web/lib/firebase/users'
7+
import {withTracking} from 'web/lib/service/analytics'
8+
import {ProfileSummary} from './profile-summary'
9+
import {Item, SidebarItem} from './sidebar-item'
1510
import SiteLogo from '../site-logo'
16-
import { Button, ColorType, SizeType } from 'web/components/buttons/button'
11+
import {Button, ColorType, SizeType} from 'web/components/buttons/button'
1712
import {signupRedirect} from 'web/lib/util/signup'
18-
import { useProfile } from 'web/hooks/use-profile'
19-
import { useTheme } from 'web/hooks/use-theme'
13+
import {useProfile} from 'web/hooks/use-profile'
2014

2115
export default function Sidebar(props: {
2216
className?: string
2317
isMobile?: boolean
2418
navigationOptions: Item[]
2519
}) {
26-
const { className, isMobile } = props
20+
const {className, isMobile} = props
2721
const router = useRouter()
2822
const currentPage = router.pathname
2923

3024
const user = useUser()
3125
const profile = useProfile()
3226

33-
const { theme, setTheme } = useTheme()
34-
35-
const toggleTheme = () => {
36-
setTheme(theme === 'auto' ? 'dark' : theme === 'dark' ? 'light' : 'auto')
37-
}
3827
const navOptions = props.navigationOptions
3928

40-
const bottomNavOptions = bottomNav(!!user, theme, toggleTheme)
29+
const bottomNavOptions = bottomNav(!!user)
4130

4231
return (
4332
<nav
4433
aria-label="Sidebar"
4534
className={clsx('flex h-screen flex-col h-full max-h-screen overflow-y-auto', className)}
4635
>
47-
<SiteLogo />
36+
<SiteLogo/>
4837

49-
{user === undefined && <div className="h-[56px]" />}
38+
{user === undefined && <div className="h-[56px]"/>}
5039

51-
{user && !isMobile && <ProfileSummary user={user} className="mb-3" />}
40+
{user && !isMobile && <ProfileSummary user={user} className="mb-3"/>}
5241

5342
<div className="mb-4 flex flex-col gap-1">
5443
{navOptions.map((item) => (
55-
<SidebarItem key={item.name} item={item} currentPage={currentPage} />
44+
<SidebarItem key={item.name} item={item} currentPage={currentPage}/>
5645
))}
5746

58-
{user === null && <SignUpButton className="mt-4" text="Sign up" />}
47+
{user === null && <SignUpButton className="mt-4" text="Sign up"/>}
5948
{/*{user === null && <SignUpAsMatchmaker className="mt-2" />}*/}
6049

6150
{user && profile === null && (
@@ -66,7 +55,7 @@ export default function Sidebar(props: {
6655
</div>
6756
<div className="mb-6 mt-auto flex flex-col gap-1">
6857
{bottomNavOptions.map((item) => (
69-
<SidebarItem key={item.name} item={item} currentPage={currentPage} />
58+
<SidebarItem key={item.name} item={item} currentPage={currentPage}/>
7059
))}
7160
</div>
7261
</nav>
@@ -82,39 +71,10 @@ const logout = async () => {
8271

8372
const bottomNav = (
8473
loggedIn: boolean,
85-
theme: 'light' | 'dark' | 'auto' | 'loading',
86-
toggleTheme: () => void
8774
) =>
8875
buildArray<Item>(
89-
{
90-
name: theme ?? 'auto',
91-
children:
92-
theme === 'light' ? (
93-
'Light'
94-
) : theme === 'dark' ? (
95-
'Dark'
96-
) : (
97-
<>
98-
<span className="hidden dark:inline">Dark</span>
99-
<span className="inline dark:hidden">Light</span> (auto)
100-
</>
101-
),
102-
icon: ({ className, ...props }) => (
103-
<>
104-
<MoonIcon
105-
className={clsx(className, 'hidden dark:block')}
106-
{...props}
107-
/>
108-
<SunIcon
109-
className={clsx(className, 'block dark:hidden')}
110-
{...props}
111-
/>
112-
</>
113-
),
114-
onClick: toggleTheme,
115-
},
116-
!loggedIn && { name: 'Sign in', icon: LoginIcon, href: '/signin' },
117-
loggedIn && { name: 'Sign out', icon: LogoutIcon, onClick: logout }
76+
!loggedIn && {name: 'Sign in', icon: LoginIcon, href: '/signin'},
77+
loggedIn && {name: 'Sign out', icon: LogoutIcon, onClick: logout}
11878
)
11979

12080
export const SignUpButton = (props: {
@@ -123,7 +83,7 @@ export const SignUpButton = (props: {
12383
color?: ColorType
12484
size?: SizeType
12585
}) => {
126-
const { className, text, color, size } = props
86+
const {className, text, color, size} = props
12787

12888
return (
12989
<Button
@@ -137,20 +97,20 @@ export const SignUpButton = (props: {
13797
)
13898
}
13999

140-
export const SignUpAsMatchmaker = (props: {
141-
className?: string
142-
size?: SizeType
143-
}) => {
144-
const { className, size } = props
145-
146-
return (
147-
<Button
148-
color={'indigo-outline'}
149-
size={size ?? 'md'}
150-
onClick={firebaseLogin}
151-
className={clsx('w-full', className)}
152-
>
153-
Sign up as matchmaker
154-
</Button>
155-
)
156-
}
100+
// export const SignUpAsMatchmaker = (props: {
101+
// className?: string
102+
// size?: SizeType
103+
// }) => {
104+
// const {className, size} = props
105+
//
106+
// return (
107+
// <Button
108+
// color={'indigo-outline'}
109+
// size={size ?? 'md'}
110+
// onClick={firebaseLogin}
111+
// className={clsx('w-full', className)}
112+
// >
113+
// Sign up as matchmaker
114+
// </Button>
115+
// )
116+
// }

‎web/components/page-base.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {HomeIcon, NewspaperIcon, QuestionMarkCircleIcon} from '@heroicons/react/outline'
22
import {
3+
CogIcon,
34
GlobeAltIcon,
45
HomeIcon as SolidHomeIcon,
56
LinkIcon,
@@ -118,6 +119,7 @@ const Organization = {name: 'Organization', href: '/organization', icon: GlobeAl
118119
const Vote = {name: 'Vote', href: '/vote', icon: MdThumbUp};
119120
const Contact = {name: 'Contact', href: '/contact', icon: FaEnvelope};
120121
const News = {name: "What's new", href: '/news', icon: NewspaperIcon};
122+
const Settings = {name: "Settings", href: '/settings', icon: CogIcon};
121123

122124
const base = [
123125
About,
@@ -144,7 +146,7 @@ function getBottomNavigation(user: User, profile: Profile | null | undefined) {
144146
icon: (props) => (
145147
<PrivateMessagesIcon bubbleClassName={'-mr-5'} solid {...props} />
146148
),
147-
}
149+
},
148150
)
149151
}
150152

@@ -160,6 +162,7 @@ const getDesktopNavigation = (user: User | null | undefined) => {
160162
ProfilesHome,
161163
Notifs,
162164
Messages,
165+
Settings,
163166
...base,
164167
)
165168

@@ -170,6 +173,7 @@ const getDesktopNavigation = (user: User | null | undefined) => {
170173

171174
const getMobileSidebar = (_toggleModal: () => void) => {
172175
return buildArray(
176+
Settings,
173177
...base,
174178
)
175179
}

‎web/components/profile/profile-header.tsx‎

Lines changed: 2 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import {DotsHorizontalIcon, EyeIcon, LockClosedIcon, PencilIcon} from '@heroicons/react/outline'
22
import clsx from 'clsx'
33
import Router from 'next/router'
4-
import router from 'next/router'
54
import Link from 'next/link'
65
import {User, UserActivity} from 'common/user'
76
import {Button} from 'web/components/buttons/button'
@@ -20,7 +19,6 @@ import {linkClass} from 'web/components/widgets/site-link'
2019
import {updateProfile} from 'web/lib/api'
2120
import {useState} from 'react'
2221
import {VisibilityConfirmationModal} from './visibility-confirmation-modal'
23-
import {deleteAccount} from "web/lib/util/delete";
2422
import toast from "react-hot-toast";
2523
import {StarButton} from "web/components/widgets/star-button";
2624
import {disableProfile} from "web/lib/util/disable";
@@ -57,7 +55,8 @@ export default function ProfileHeader(props: {
5755
<Row className={clsx('flex-wrap justify-between gap-2 py-1')}>
5856
<Row className="items-center gap-1">
5957
<Col className="gap-1">
60-
{currentUser && isCurrentUser && disabled && <div className="text-red-500">You disabled your profile, so no one else can access it.</div>}
58+
{currentUser && isCurrentUser && disabled &&
59+
<div className="text-red-500">You disabled your profile, so no one else can access it.</div>}
6160
<Row className="items-center gap-1 text-xl">
6261
{!isCurrentUser && <OnlineIcon last_online_time={userActivity?.last_online_time}/>}
6362
<span>
@@ -110,34 +109,6 @@ export default function ProfileHeader(props: {
110109
),
111110
onClick: () => setShowVisibilityModal(true),
112111
},
113-
{
114-
name: 'Delete profile',
115-
icon: null,
116-
onClick: async () => {
117-
const confirmed = confirm(
118-
'Are you sure you want to delete your profile? This cannot be undone.'
119-
)
120-
if (confirmed) {
121-
toast
122-
.promise(deleteAccount(user.username), {
123-
loading: 'Deleting account...',
124-
success: () => {
125-
router.push('/')
126-
return 'Your account has been deleted.'
127-
},
128-
error: () => {
129-
return 'Failed to delete account.'
130-
},
131-
})
132-
.then(() => {
133-
// return true
134-
})
135-
.catch(() => {
136-
// return false
137-
})
138-
}
139-
},
140-
},
141112
{
142113
name: disabled ? 'Enable profile' : 'Disable profile',
143114
icon: null,

‎web/components/theme-icon.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import {MoonIcon, SunIcon} from "@heroicons/react/outline"
2+
import clsx from "clsx"
3+
import {useTheme} from "web/hooks/use-theme"
4+
import {Row} from "web/components/layout/row";
5+
6+
export default function ThemeIcon(props: {
7+
className?: string
8+
}) {
9+
const {className} = props
10+
const {theme, setTheme} = useTheme()
11+
12+
const toggleTheme = () => {
13+
setTheme(theme === 'auto' ? 'dark' : theme === 'dark' ? 'light' : 'auto')
14+
}
15+
const children = theme === 'light' ? (
16+
'Light'
17+
) : theme === 'dark' ? (
18+
'Dark'
19+
) : (
20+
<>
21+
<span className="hidden dark:inline">Dark</span>
22+
<span className="inline dark:hidden">Light</span> (auto)
23+
</>
24+
)
25+
const icon = <>
26+
<MoonIcon className={clsx(className, 'hidden dark:block')}/>
27+
<SunIcon className={clsx(className, 'block dark:hidden')}/>
28+
</>
29+
return <button onClick={toggleTheme}>
30+
<Row className="items-center gap-1 border-2 border-gray-500 rounded-full p-1 max-w-fit mx-2">
31+
{icon}
32+
{children}
33+
</Row>
34+
</button>
35+
}
36+
37+
38+

‎web/pages/notifications.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {useGroupedNotifications} from 'web/hooks/use-notifications'
1313
import {usePrivateUser, useUser} from 'web/hooks/use-user'
1414
import {api} from 'web/lib/api'
1515
import {useRedirectIfSignedOut} from "web/hooks/use-redirect-if-signed-out";
16+
import {NotificationSettings} from "web/components/notifications";
1617

1718
export default function NotificationsPage() {
1819
useRedirectIfSignedOut()
@@ -23,6 +24,7 @@ export default function NotificationsPage() {
2324
<UncontrolledTabs
2425
tabs={[
2526
{title: 'Notifications', content: <NotificationsContent/>},
27+
{title: 'Settings', content: <NotificationSettings/>},
2628
]}
2729
trackingName={'notifications page'}
2830
/>

0 commit comments

Comments
 (0)