feat: added a setting page

This commit is contained in:
SwiftHawk 2024-05-31 08:57:43 +05:00
parent ba1219b790
commit e82023f105
5 changed files with 128 additions and 38 deletions

View File

@ -177,13 +177,13 @@ export const AppBar = () => {
onClick={() => { onClick={() => {
setAnchorElUser(null) setAnchorElUser(null)
navigate(appPrivateRoutes.relays) navigate(appPrivateRoutes.settings)
}} }}
sx={{ sx={{
justifyContent: 'center' justifyContent: 'center'
}} }}
> >
Relays Settings
</MenuItem> </MenuItem>
<Link <Link
to={appPublicRoutes.source} to={appPublicRoutes.source}

View File

@ -0,0 +1,85 @@
import AccountCircleIcon from '@mui/icons-material/AccountCircle'
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
import RouterIcon from '@mui/icons-material/Router'
import { useTheme } from '@mui/material'
import List from '@mui/material/List'
import ListItemButton from '@mui/material/ListItemButton'
import ListItemIcon from '@mui/material/ListItemIcon'
import ListItemText from '@mui/material/ListItemText'
import ListSubheader from '@mui/material/ListSubheader'
import { useSelector } from 'react-redux'
import { useNavigate } from 'react-router-dom'
import { appPrivateRoutes, getProfileSettingsRoute } from '../../routes'
import { State } from '../../store/rootReducer'
export const SettingsPage = () => {
const theme = useTheme()
const navigate = useNavigate()
const usersPubkey = useSelector((state: State) => state.auth.usersPubkey)
const listItem = (label: string, disabled = false) => {
return (
<>
<ListItemText
primary={label}
sx={{
color: theme.palette.text.primary
}}
/>
{!disabled && (
<ArrowForwardIosIcon
style={{
color: theme.palette.action.active,
marginRight: -10
}}
/>
)}
</>
)
}
return (
<List
sx={{
width: '100%',
bgcolor: 'background.paper',
marginTop: 2
}}
subheader={
<ListSubheader
sx={{
fontSize: '1.5rem',
borderBottom: '0.5px solid',
paddingBottom: 2,
paddingTop: 2
}}
>
Settings
</ListSubheader>
}
>
<ListItemButton
onClick={() => {
navigate(getProfileSettingsRoute(usersPubkey!))
}}
>
<ListItemIcon>
<AccountCircleIcon />
</ListItemIcon>
{listItem('Profile')}
</ListItemButton>
<ListItemButton
onClick={() => {
navigate(appPrivateRoutes.relays)
}}
>
<ListItemIcon>
<RouterIcon />
</ListItemIcon>
{listItem('Relays')}
</ListItemButton>
</List>
)
}

View File

@ -1,37 +1,36 @@
import { useEffect, useState } from 'react' import ContentCopyIcon from '@mui/icons-material/ContentCopy'
import { Box, List, ListItem, TextField } from '@mui/material' import ElectricBoltIcon from '@mui/icons-material/ElectricBolt'
import RouterIcon from '@mui/icons-material/Router' import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
import styles from './style.module.scss' import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'
import Switch from '@mui/material/Switch'
import ListItemText from '@mui/material/ListItemText'
import Divider from '@mui/material/Divider'
import { NostrController } from '../../controllers'
import {
RelayMap,
RelayInfoObject,
RelayFee,
RelayConnectionState
} from '../../types'
import LogoutIcon from '@mui/icons-material/Logout' import LogoutIcon from '@mui/icons-material/Logout'
import { useAppSelector, useAppDispatch } from '../../hooks' import RouterIcon from '@mui/icons-material/Router'
import { import { Box, List, ListItem, TextField, Tooltip } from '@mui/material'
compareObjects, import Button from '@mui/material/Button'
shorten, import Divider from '@mui/material/Divider'
hexToNpub, import InputAdornment from '@mui/material/InputAdornment'
capitalizeFirstLetter import ListItemText from '@mui/material/ListItemText'
} from '../../utils' import Switch from '@mui/material/Switch'
import { useEffect, useState } from 'react'
import { toast } from 'react-toastify'
import { NostrController } from '../../../controllers'
import { useAppDispatch, useAppSelector } from '../../../hooks'
import { import {
setRelayMapAction, setRelayMapAction,
setRelayMapUpdatedAction setRelayMapUpdatedAction
} from '../../store/actions' } from '../../../store/actions'
import { toast } from 'react-toastify' import {
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown' RelayConnectionState,
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp' RelayFee,
import ContentCopyIcon from '@mui/icons-material/ContentCopy' RelayInfoObject,
import ElectricBoltIcon from '@mui/icons-material/ElectricBolt' RelayMap
import { Tooltip } from '@mui/material' } from '../../../types'
import InputAdornment from '@mui/material/InputAdornment' import {
import Button from '@mui/material/Button' capitalizeFirstLetter,
compareObjects,
hexToNpub,
shorten
} from '../../../utils'
import styles from './style.module.scss'
export const RelaysPage = () => { export const RelaysPage = () => {
const nostrController = NostrController.getInstance() const nostrController = NostrController.getInstance()

View File

@ -1,4 +1,4 @@
@import '../../colors.scss'; @import '../../../colors.scss';
.container { .container {
margin-top: 25px; margin-top: 25px;

View File

@ -1,21 +1,23 @@
import { HomePage } from '../pages/home'
import { CreatePage } from '../pages/create' import { CreatePage } from '../pages/create'
import { HomePage } from '../pages/home'
import { LandingPage } from '../pages/landing/LandingPage' import { LandingPage } from '../pages/landing/LandingPage'
import { Login } from '../pages/login' import { Login } from '../pages/login'
import { ProfilePage } from '../pages/profile' import { ProfilePage } from '../pages/profile'
import { hexToNpub } from '../utils' import { SettingsPage } from '../pages/settings/Settings'
import { ProfileSettingsPage } from '../pages/settings/profile'
import { RelaysPage } from '../pages/settings/relays'
import { SignPage } from '../pages/sign' import { SignPage } from '../pages/sign'
import { VerifyPage } from '../pages/verify' import { VerifyPage } from '../pages/verify'
import { ProfileSettingsPage } from '../pages/settings/profile' import { hexToNpub } from '../utils'
import { RelaysPage } from '../pages/relays'
export const appPrivateRoutes = { export const appPrivateRoutes = {
homePage: '/', homePage: '/',
create: '/create', create: '/create',
sign: '/sign', sign: '/sign',
verify: '/verify', verify: '/verify',
settings: '/settings',
profileSettings: '/settings/profile/:npub', profileSettings: '/settings/profile/:npub',
relays: '/relays' relays: '/settings/relays'
} }
export const appPublicRoutes = { export const appPublicRoutes = {
@ -65,6 +67,10 @@ export const privateRoutes = [
path: appPrivateRoutes.verify, path: appPrivateRoutes.verify,
element: <VerifyPage /> element: <VerifyPage />
}, },
{
path: appPrivateRoutes.settings,
element: <SettingsPage />
},
{ {
path: appPrivateRoutes.profileSettings, path: appPrivateRoutes.profileSettings,
element: <ProfileSettingsPage /> element: <ProfileSettingsPage />