feat: added a setting page
This commit is contained in:
parent
ba1219b790
commit
e82023f105
@ -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}
|
||||||
|
85
src/pages/settings/Settings.tsx
Normal file
85
src/pages/settings/Settings.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
@ -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()
|
@ -1,4 +1,4 @@
|
|||||||
@import '../../colors.scss';
|
@import '../../../colors.scss';
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
margin-top: 25px;
|
margin-top: 25px;
|
@ -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 />
|
||||||
|
Loading…
Reference in New Issue
Block a user