refactor(settings): remove base settings page, go directly to profile
All checks were successful
Open PR on Staging / audit_and_check (pull_request) Successful in 51s
All checks were successful
Open PR on Staging / audit_and_check (pull_request) Successful in 51s
This commit is contained in:
parent
c1a9475a89
commit
afdc9449b1
@ -181,7 +181,7 @@ export const AppBar = () => {
|
|||||||
onClick={() => {
|
onClick={() => {
|
||||||
setAnchorElUser(null)
|
setAnchorElUser(null)
|
||||||
|
|
||||||
navigate(appPrivateRoutes.settings)
|
navigate(appPrivateRoutes.profileSettings)
|
||||||
}}
|
}}
|
||||||
sx={{
|
sx={{
|
||||||
justifyContent: 'center'
|
justifyContent: 'center'
|
||||||
|
@ -13,7 +13,7 @@ import { Footer } from '../../components/Footer/Footer'
|
|||||||
import { LoadingSpinner } from '../../components/LoadingSpinner'
|
import { LoadingSpinner } from '../../components/LoadingSpinner'
|
||||||
import { useAppSelector } from '../../hooks/store'
|
import { useAppSelector } from '../../hooks/store'
|
||||||
|
|
||||||
import { getProfileSettingsRoute } from '../../routes'
|
import { appPrivateRoutes } from '../../routes'
|
||||||
|
|
||||||
import {
|
import {
|
||||||
getProfileUsername,
|
getProfileUsername,
|
||||||
@ -168,7 +168,7 @@ export const ProfilePage = () => {
|
|||||||
<Box className={styles.right}>
|
<Box className={styles.right}>
|
||||||
{isUsersOwnProfile && (
|
{isUsersOwnProfile && (
|
||||||
<IconButton
|
<IconButton
|
||||||
onClick={() => navigate(getProfileSettingsRoute(pubkey))}
|
onClick={() => navigate(appPrivateRoutes.profileSettings)}
|
||||||
>
|
>
|
||||||
<EditIcon />
|
<EditIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
|
@ -3,7 +3,7 @@ import RouterIcon from '@mui/icons-material/Router'
|
|||||||
import { Button } from '@mui/material'
|
import { Button } from '@mui/material'
|
||||||
import { useAppSelector } from '../../hooks/store'
|
import { useAppSelector } from '../../hooks/store'
|
||||||
import { NavLink, Outlet, To } from 'react-router-dom'
|
import { NavLink, Outlet, To } from 'react-router-dom'
|
||||||
import { appPrivateRoutes, getProfileSettingsRoute } from '../../routes'
|
import { appPrivateRoutes } from '../../routes'
|
||||||
import { Container } from '../../components/Container'
|
import { Container } from '../../components/Container'
|
||||||
import { Footer } from '../../components/Footer/Footer'
|
import { Footer } from '../../components/Footer/Footer'
|
||||||
import ExtensionIcon from '@mui/icons-material/Extension'
|
import ExtensionIcon from '@mui/icons-material/Extension'
|
||||||
@ -50,7 +50,7 @@ const Item = (to: To, icon: ReactNode, label: string) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const SettingsLayout = () => {
|
export const SettingsLayout = () => {
|
||||||
const { usersPubkey, loginMethod } = useAppSelector((state) => state.auth)
|
const { loginMethod } = useAppSelector((state) => state.auth)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -60,7 +60,7 @@ export const SettingsLayout = () => {
|
|||||||
<div>
|
<div>
|
||||||
<aside className={styles.aside}>
|
<aside className={styles.aside}>
|
||||||
{Item(
|
{Item(
|
||||||
getProfileSettingsRoute(usersPubkey!),
|
appPrivateRoutes.profileSettings,
|
||||||
<AccountCircleIcon />,
|
<AccountCircleIcon />,
|
||||||
'Profile'
|
'Profile'
|
||||||
)}
|
)}
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import React, { useEffect, useRef, useState } from 'react'
|
import React, { useEffect, useRef, useState } from 'react'
|
||||||
import { useParams } from 'react-router-dom'
|
|
||||||
import { toast } from 'react-toastify'
|
import { toast } from 'react-toastify'
|
||||||
|
|
||||||
import { SmartToy } from '@mui/icons-material'
|
import { SmartToy } from '@mui/icons-material'
|
||||||
@ -38,10 +37,8 @@ import styles from './style.module.scss'
|
|||||||
export const ProfileSettingsPage = () => {
|
export const ProfileSettingsPage = () => {
|
||||||
const dispatch: Dispatch = useAppDispatch()
|
const dispatch: Dispatch = useAppDispatch()
|
||||||
|
|
||||||
const { npub } = useParams()
|
|
||||||
const { ndk, findMetadata, publish } = useNDKContext()
|
const { ndk, findMetadata, publish } = useNDKContext()
|
||||||
|
|
||||||
const [pubkey, setPubkey] = useState<string>()
|
|
||||||
const [userProfile, setUserProfile] = useState<NDKUserProfile | null>(null)
|
const [userProfile, setUserProfile] = useState<NDKUserProfile | null>(null)
|
||||||
|
|
||||||
const userRobotImage = useAppSelector((state) => state.user.robotImage)
|
const userRobotImage = useAppSelector((state) => state.user.robotImage)
|
||||||
@ -52,27 +49,13 @@ export const ProfileSettingsPage = () => {
|
|||||||
)
|
)
|
||||||
|
|
||||||
const [savingProfileMetadata, setSavingProfileMetadata] = useState(false)
|
const [savingProfileMetadata, setSavingProfileMetadata] = useState(false)
|
||||||
const [isUsersOwnProfile, setIsUsersOwnProfile] = useState(false)
|
|
||||||
const [isLoading, setIsLoading] = useState(true)
|
const [isLoading, setIsLoading] = useState(true)
|
||||||
const [loadingSpinnerDesc] = useState('Fetching metadata')
|
const [loadingSpinnerDesc] = useState('Fetching metadata')
|
||||||
|
|
||||||
const robotSet = useRef(1)
|
const robotSet = useRef(1)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (npub) {
|
if (usersPubkey && currentUserProfile) {
|
||||||
try {
|
|
||||||
const hexPubkey = nip19.decode(npub).data as string
|
|
||||||
setPubkey(hexPubkey)
|
|
||||||
|
|
||||||
if (hexPubkey === usersPubkey) setIsUsersOwnProfile(true)
|
|
||||||
} catch (error) {
|
|
||||||
toast.error('Error occurred in decoding npub' + error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [npub, usersPubkey])
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (isUsersOwnProfile && currentUserProfile) {
|
|
||||||
setUserProfile(currentUserProfile)
|
setUserProfile(currentUserProfile)
|
||||||
|
|
||||||
setIsLoading(false)
|
setIsLoading(false)
|
||||||
@ -80,8 +63,8 @@ export const ProfileSettingsPage = () => {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (pubkey) {
|
if (usersPubkey) {
|
||||||
findMetadata(pubkey)
|
findMetadata(usersPubkey)
|
||||||
.then((profile) => {
|
.then((profile) => {
|
||||||
setUserProfile(profile)
|
setUserProfile(profile)
|
||||||
})
|
})
|
||||||
@ -92,7 +75,7 @@ export const ProfileSettingsPage = () => {
|
|||||||
setIsLoading(false)
|
setIsLoading(false)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}, [ndk, isUsersOwnProfile, currentUserProfile, pubkey, findMetadata])
|
}, [ndk, currentUserProfile, findMetadata, usersPubkey])
|
||||||
|
|
||||||
const editItem = (
|
const editItem = (
|
||||||
key: keyof NDKUserProfile,
|
key: keyof NDKUserProfile,
|
||||||
@ -110,7 +93,6 @@ export const ProfileSettingsPage = () => {
|
|||||||
multiline={multiline}
|
multiline={multiline}
|
||||||
rows={rows}
|
rows={rows}
|
||||||
className={styles.textField}
|
className={styles.textField}
|
||||||
disabled={!isUsersOwnProfile}
|
|
||||||
InputProps={inputProps}
|
InputProps={inputProps}
|
||||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
const { value } = event.target
|
const { value } = event.target
|
||||||
@ -167,7 +149,7 @@ export const ProfileSettingsPage = () => {
|
|||||||
content: serializedProfile,
|
content: serializedProfile,
|
||||||
created_at: unixNow(),
|
created_at: unixNow(),
|
||||||
kind: kinds.Metadata,
|
kind: kinds.Metadata,
|
||||||
pubkey: pubkey!,
|
pubkey: usersPubkey!,
|
||||||
tags: []
|
tags: []
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -212,7 +194,7 @@ export const ProfileSettingsPage = () => {
|
|||||||
robotSet.current++
|
robotSet.current++
|
||||||
if (robotSet.current > 5) robotSet.current = 1
|
if (robotSet.current > 5) robotSet.current = 1
|
||||||
|
|
||||||
const robotAvatarLink = getRoboHashPicture(npub!, robotSet.current)
|
const robotAvatarLink = getRoboHashPicture(usersPubkey!, robotSet.current)
|
||||||
|
|
||||||
setUserProfile((prev) => ({
|
setUserProfile((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
@ -241,13 +223,9 @@ export const ProfileSettingsPage = () => {
|
|||||||
* @returns robohash image url
|
* @returns robohash image url
|
||||||
*/
|
*/
|
||||||
const getProfileImage = (profile: NDKUserProfile) => {
|
const getProfileImage = (profile: NDKUserProfile) => {
|
||||||
if (!isUsersOwnProfile) {
|
|
||||||
return profile.image || getRoboHashPicture(npub!)
|
|
||||||
}
|
|
||||||
|
|
||||||
// userRobotImage is used only when visiting own profile
|
// userRobotImage is used only when visiting own profile
|
||||||
// while kind 0 picture is not set
|
// while kind 0 picture is not set
|
||||||
return profile.image || userRobotImage || getRoboHashPicture(npub!)
|
return profile.image || userRobotImage || getRoboHashPicture(usersPubkey!)
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -285,7 +263,7 @@ export const ProfileSettingsPage = () => {
|
|||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
onError={(event: React.SyntheticEvent<HTMLImageElement>) => {
|
onError={(event: React.SyntheticEvent<HTMLImageElement>) => {
|
||||||
event.currentTarget.src = getRoboHashPicture(npub!)
|
event.currentTarget.src = getRoboHashPicture(usersPubkey!)
|
||||||
}}
|
}}
|
||||||
className={styles.img}
|
className={styles.img}
|
||||||
src={getProfileImage(userProfile)}
|
src={getProfileImage(userProfile)}
|
||||||
@ -294,7 +272,7 @@ export const ProfileSettingsPage = () => {
|
|||||||
</ListItem>
|
</ListItem>
|
||||||
|
|
||||||
{editItem('image', 'Picture URL', undefined, undefined, {
|
{editItem('image', 'Picture URL', undefined, undefined, {
|
||||||
endAdornment: isUsersOwnProfile ? robohashButton() : undefined
|
endAdornment: robohashButton()
|
||||||
})}
|
})}
|
||||||
|
|
||||||
{editItem('name', 'Username')}
|
{editItem('name', 'Username')}
|
||||||
@ -303,61 +281,48 @@ export const ProfileSettingsPage = () => {
|
|||||||
{editItem('lud16', 'Lightning Address (lud16)')}
|
{editItem('lud16', 'Lightning Address (lud16)')}
|
||||||
{editItem('about', 'About', true, 4)}
|
{editItem('about', 'About', true, 4)}
|
||||||
{editItem('website', 'Website')}
|
{editItem('website', 'Website')}
|
||||||
{isUsersOwnProfile && (
|
{usersPubkey &&
|
||||||
<>
|
copyItem(nip19.npubEncode(usersPubkey), 'Public Key')}
|
||||||
{usersPubkey &&
|
{loginMethod === LoginMethod.privateKey &&
|
||||||
copyItem(nip19.npubEncode(usersPubkey), 'Public Key')}
|
keys &&
|
||||||
|
keys.private &&
|
||||||
{loginMethod === LoginMethod.privateKey &&
|
copyItem(
|
||||||
keys &&
|
'••••••••••••••••••••••••••••••••••••••••••••••••••',
|
||||||
keys.private &&
|
'Private Key',
|
||||||
copyItem(
|
keys.private
|
||||||
'••••••••••••••••••••••••••••••••••••••••••••••••••',
|
)}
|
||||||
'Private Key',
|
{loginMethod === LoginMethod.nostrLogin &&
|
||||||
keys.private
|
nostrLoginAuthMethod === NostrLoginAuthMethod.Local && (
|
||||||
)}
|
<ListItem
|
||||||
</>
|
sx={{ marginTop: 1 }}
|
||||||
)}
|
onClick={() => {
|
||||||
{isUsersOwnProfile && (
|
launchNostrLoginDialog('import')
|
||||||
<>
|
}}
|
||||||
{loginMethod === LoginMethod.nostrLogin &&
|
>
|
||||||
nostrLoginAuthMethod === NostrLoginAuthMethod.Local && (
|
<TextField
|
||||||
<ListItem
|
label="Private Key (nostr-login)"
|
||||||
sx={{ marginTop: 1 }}
|
defaultValue="••••••••••••••••••••••••••••••••••••••••••••••••••"
|
||||||
onClick={() => {
|
size="small"
|
||||||
launchNostrLoginDialog('import')
|
className={styles.textField}
|
||||||
}}
|
disabled
|
||||||
>
|
type={'password'}
|
||||||
<TextField
|
InputProps={{
|
||||||
label="Private Key (nostr-login)"
|
endAdornment: <LaunchIcon className={styles.copyItem} />
|
||||||
defaultValue="••••••••••••••••••••••••••••••••••••••••••••••••••"
|
}}
|
||||||
size="small"
|
/>
|
||||||
className={styles.textField}
|
</ListItem>
|
||||||
disabled
|
)}
|
||||||
type={'password'}
|
|
||||||
InputProps={{
|
|
||||||
endAdornment: (
|
|
||||||
<LaunchIcon className={styles.copyItem} />
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</ListItem>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</List>
|
</List>
|
||||||
{isUsersOwnProfile && (
|
<LoadingButton
|
||||||
<LoadingButton
|
sx={{ maxWidth: '300px', alignSelf: 'center', width: '100%' }}
|
||||||
sx={{ maxWidth: '300px', alignSelf: 'center', width: '100%' }}
|
loading={savingProfileMetadata}
|
||||||
loading={savingProfileMetadata}
|
variant="contained"
|
||||||
variant="contained"
|
onClick={handleSaveMetadata}
|
||||||
onClick={handleSaveMetadata}
|
>
|
||||||
>
|
PUBLISH CHANGES
|
||||||
PUBLISH CHANGES
|
</LoadingButton>
|
||||||
</LoadingButton>
|
|
||||||
)}
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -4,8 +4,7 @@ export const appPrivateRoutes = {
|
|||||||
homePage: '/',
|
homePage: '/',
|
||||||
create: '/create',
|
create: '/create',
|
||||||
sign: '/sign',
|
sign: '/sign',
|
||||||
settings: '/settings',
|
profileSettings: '/settings/profile',
|
||||||
profileSettings: '/settings/profile/:npub',
|
|
||||||
relays: '/settings/relays',
|
relays: '/settings/relays',
|
||||||
nostrLogin: '/settings/nostrLogin'
|
nostrLogin: '/settings/nostrLogin'
|
||||||
}
|
}
|
||||||
@ -23,6 +22,3 @@ export const appPublicRoutes = {
|
|||||||
|
|
||||||
export const getProfileRoute = (hexKey: string) =>
|
export const getProfileRoute = (hexKey: string) =>
|
||||||
appPublicRoutes.profile.replace(':npub', hexToNpub(hexKey))
|
appPublicRoutes.profile.replace(':npub', hexToNpub(hexKey))
|
||||||
|
|
||||||
export const getProfileSettingsRoute = (hexKey: string) =>
|
|
||||||
appPrivateRoutes.profileSettings.replace(':npub', hexToNpub(hexKey))
|
|
||||||
|
@ -37,7 +37,7 @@ export function recursiveRouteRenderer<T>(
|
|||||||
return routes.map((route, index) =>
|
return routes.map((route, index) =>
|
||||||
renderConditionCallbackFn(route) ? (
|
renderConditionCallbackFn(route) ? (
|
||||||
<Route
|
<Route
|
||||||
key={`${route.path}${index}`}
|
key={route.path ? `${route.path}${index}` : index}
|
||||||
path={route.path}
|
path={route.path}
|
||||||
element={route.element}
|
element={route.element}
|
||||||
>
|
>
|
||||||
@ -67,7 +67,7 @@ export const publicRoutes: PublicRouteProps[] = [
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
export const privateRoutes = [
|
export const privateRoutes: CustomRouteProps<unknown>[] = [
|
||||||
{
|
{
|
||||||
path: appPrivateRoutes.homePage,
|
path: appPrivateRoutes.homePage,
|
||||||
element: (
|
element: (
|
||||||
@ -93,7 +93,6 @@ export const privateRoutes = [
|
|||||||
)
|
)
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: appPrivateRoutes.settings,
|
|
||||||
element: (
|
element: (
|
||||||
<PrivateRoute>
|
<PrivateRoute>
|
||||||
<SettingsLayout />
|
<SettingsLayout />
|
||||||
|
Loading…
x
Reference in New Issue
Block a user