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

This commit is contained in:
en 2025-03-10 12:36:47 +00:00
parent c1a9475a89
commit afdc9449b1
6 changed files with 57 additions and 97 deletions

View File

@ -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'

View File

@ -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>

View File

@ -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'
)} )}

View File

@ -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>
)}
</> </>
) )
} }

View File

@ -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))

View File

@ -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 />