refactor(settings): remove base settings page, go directly to profile

src/components/AppBar/AppBar.tsx

@@ -181,7 +181,7 @@ export const AppBar = () => {
                       onClick={() => {
                         setAnchorElUser(null)
 
-                        navigate(appPrivateRoutes.settings)
+                        navigate(appPrivateRoutes.profileSettings)
                       }}
                       sx={{
                         justifyContent: 'center'

src/pages/profile/index.tsx

@@ -13,7 +13,7 @@ import { Footer } from '../../components/Footer/Footer'
 import { LoadingSpinner } from '../../components/LoadingSpinner'
 import { useAppSelector } from '../../hooks/store'
 
-import { getProfileSettingsRoute } from '../../routes'
+import { appPrivateRoutes } from '../../routes'
 
 import {
   getProfileUsername,
@@ -168,7 +168,7 @@ export const ProfilePage = () => {
               <Box className={styles.right}>
                 {isUsersOwnProfile && (
                   <IconButton
-                    onClick={() => navigate(getProfileSettingsRoute(pubkey))}
+                    onClick={() => navigate(appPrivateRoutes.profileSettings)}
                   >
                     <EditIcon />
                   </IconButton>

src/pages/settings/Settings.tsx

@@ -3,7 +3,7 @@ import RouterIcon from '@mui/icons-material/Router'
 import { Button } from '@mui/material'
 import { useAppSelector } from '../../hooks/store'
 import { NavLink, Outlet, To } from 'react-router-dom'
-import { appPrivateRoutes, getProfileSettingsRoute } from '../../routes'
+import { appPrivateRoutes } from '../../routes'
 import { Container } from '../../components/Container'
 import { Footer } from '../../components/Footer/Footer'
 import ExtensionIcon from '@mui/icons-material/Extension'
@@ -50,7 +50,7 @@ const Item = (to: To, icon: ReactNode, label: string) => {
 }
 
 export const SettingsLayout = () => {
-  const { usersPubkey, loginMethod } = useAppSelector((state) => state.auth)
+  const { loginMethod } = useAppSelector((state) => state.auth)
 
   return (
     <>
@@ -60,7 +60,7 @@ export const SettingsLayout = () => {
           <div>
             <aside className={styles.aside}>
               {Item(
-                getProfileSettingsRoute(usersPubkey!),
+                appPrivateRoutes.profileSettings,
                 <AccountCircleIcon />,
                 'Profile'
               )}

src/pages/settings/profile/index.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useRef, useState } from 'react'
-import { useParams } from 'react-router-dom'
 import { toast } from 'react-toastify'
 
 import { SmartToy } from '@mui/icons-material'
@@ -38,10 +37,8 @@ import styles from './style.module.scss'
 export const ProfileSettingsPage = () => {
   const dispatch: Dispatch = useAppDispatch()
 
-  const { npub } = useParams()
   const { ndk, findMetadata, publish } = useNDKContext()
 
-  const [pubkey, setPubkey] = useState<string>()
   const [userProfile, setUserProfile] = useState<NDKUserProfile | null>(null)
 
   const userRobotImage = useAppSelector((state) => state.user.robotImage)
@@ -52,27 +49,13 @@ export const ProfileSettingsPage = () => {
   )
 
   const [savingProfileMetadata, setSavingProfileMetadata] = useState(false)
-  const [isUsersOwnProfile, setIsUsersOwnProfile] = useState(false)
   const [isLoading, setIsLoading] = useState(true)
   const [loadingSpinnerDesc] = useState('Fetching metadata')
 
   const robotSet = useRef(1)
 
   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)
 
       setIsLoading(false)
@@ -80,8 +63,8 @@ export const ProfileSettingsPage = () => {
       return
     }
 
-    if (pubkey) {
+    if (usersPubkey) {
-      findMetadata(pubkey)
+      findMetadata(usersPubkey)
         .then((profile) => {
           setUserProfile(profile)
         })
@@ -92,7 +75,7 @@ export const ProfileSettingsPage = () => {
           setIsLoading(false)
         })
     }
-  }, [ndk, isUsersOwnProfile, currentUserProfile, pubkey, findMetadata])
+  }, [ndk, currentUserProfile, findMetadata, usersPubkey])
 
   const editItem = (
     key: keyof NDKUserProfile,
@@ -110,7 +93,6 @@ export const ProfileSettingsPage = () => {
         multiline={multiline}
         rows={rows}
         className={styles.textField}
-        disabled={!isUsersOwnProfile}
         InputProps={inputProps}
         onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
           const { value } = event.target
@@ -167,7 +149,7 @@ export const ProfileSettingsPage = () => {
       content: serializedProfile,
       created_at: unixNow(),
       kind: kinds.Metadata,
-      pubkey: pubkey!,
+      pubkey: usersPubkey!,
       tags: []
     }
 
@@ -212,7 +194,7 @@ export const ProfileSettingsPage = () => {
     robotSet.current++
     if (robotSet.current > 5) robotSet.current = 1
 
-    const robotAvatarLink = getRoboHashPicture(npub!, robotSet.current)
+    const robotAvatarLink = getRoboHashPicture(usersPubkey!, robotSet.current)
 
     setUserProfile((prev) => ({
       ...prev,
@@ -241,13 +223,9 @@ export const ProfileSettingsPage = () => {
    * @returns robohash image url
    */
   const getProfileImage = (profile: NDKUserProfile) => {
-    if (!isUsersOwnProfile) {
-      return profile.image || getRoboHashPicture(npub!)
-    }
-
     // userRobotImage is used only when visiting own profile
     // while kind 0 picture is not set
-    return profile.image || userRobotImage || getRoboHashPicture(npub!)
+    return profile.image || userRobotImage || getRoboHashPicture(usersPubkey!)
   }
 
   return (
@@ -285,7 +263,7 @@ export const ProfileSettingsPage = () => {
             >
               <img
                 onError={(event: React.SyntheticEvent<HTMLImageElement>) => {
-                  event.currentTarget.src = getRoboHashPicture(npub!)
+                  event.currentTarget.src = getRoboHashPicture(usersPubkey!)
                 }}
                 className={styles.img}
                 src={getProfileImage(userProfile)}
@@ -294,7 +272,7 @@ export const ProfileSettingsPage = () => {
             </ListItem>
 
             {editItem('image', 'Picture URL', undefined, undefined, {
-              endAdornment: isUsersOwnProfile ? robohashButton() : undefined
+              endAdornment: robohashButton()
             })}
 
             {editItem('name', 'Username')}
@@ -303,61 +281,48 @@ export const ProfileSettingsPage = () => {
             {editItem('lud16', 'Lightning Address (lud16)')}
             {editItem('about', 'About', true, 4)}
             {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>
         )}
       </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>
-      )}
     </>
   )
 }

src/routes/index.tsx

@@ -4,8 +4,7 @@ export const appPrivateRoutes = {
   homePage: '/',
   create: '/create',
   sign: '/sign',
-  settings: '/settings',
+  profileSettings: '/settings/profile',
-  profileSettings: '/settings/profile/:npub',
   relays: '/settings/relays',
   nostrLogin: '/settings/nostrLogin'
 }
@@ -23,6 +22,3 @@ export const appPublicRoutes = {
 
 export const getProfileRoute = (hexKey: string) =>
   appPublicRoutes.profile.replace(':npub', hexToNpub(hexKey))
-
-export const getProfileSettingsRoute = (hexKey: string) =>
-  appPrivateRoutes.profileSettings.replace(':npub', hexToNpub(hexKey))

src/routes/util.tsx

@@ -37,7 +37,7 @@ export function recursiveRouteRenderer<T>(
   return routes.map((route, index) =>
     renderConditionCallbackFn(route) ? (
       <Route
-        key={`${route.path}${index}`}
+        key={route.path ? `${route.path}${index}` : index}
         path={route.path}
         element={route.element}
       >
@@ -67,7 +67,7 @@ export const publicRoutes: PublicRouteProps[] = [
   }
 ]
 
-export const privateRoutes = [
+export const privateRoutes: CustomRouteProps<unknown>[] = [
   {
     path: appPrivateRoutes.homePage,
     element: (
@@ -93,7 +93,6 @@ export const privateRoutes = [
     )
   },
   {
-    path: appPrivateRoutes.settings,
     element: (
       <PrivateRoute>
         <SettingsLayout />