fix(feed): allow visiting note directly

Fixes #248

src/layout/feed.tsx

@@ -1,11 +1,14 @@
 import { Profile } from 'components/ProfileSection'
 import { useAppSelector } from 'hooks'
-import { Navigate, Outlet } from 'react-router-dom'
+import { Navigate, Outlet, useParams } from 'react-router-dom'
 import { appRoutes } from 'routes'
 
 export const FeedLayout = () => {
+  const { note } = useParams()
   const userState = useAppSelector((state) => state.user)
-  if (!userState.user?.pubkey) return <Navigate to={appRoutes.home} />
+
+  // Exception for visiting notes directly
+  if (!userState.user?.pubkey && !note) return <Navigate to={appRoutes.home} />
 
   return (
     <div className='InnerBodyMain'>
@@ -16,11 +19,11 @@ export const FeedLayout = () => {
               <div className='IBMSMSplitMainFullSideFeedWrapper'>
                 <div className='IBMSMSplitMainFullSideFWSide'>
                   {userState.auth && userState.user?.pubkey && (
-                      <div className='IBMSMSplitMainSmallSideSecWrapper'>
-                        <div className='IBMSMSplitMainSmallSideSec'>
-                          <Profile pubkey={userState.user.pubkey as string} />
-                        </div>
+                    <div className='IBMSMSplitMainSmallSideSecWrapper'>
+                      <div className='IBMSMSplitMainSmallSideSec'>
+                        <Profile pubkey={userState.user.pubkey as string} />
                       </div>
+                    </div>
                   )}
                 </div>
                 <div className='IBMSMSplitMainFullSideFWMid'>
@@ -28,7 +31,9 @@ export const FeedLayout = () => {
                 </div>
                 <div className='IBMSMSplitMainFullSideFWSide'>
                   <div className='IBMSMSplitMainSmallSideSecWrapper'>
-                    <div className='IBMSMSplitMainSmallSideSecBox'><p>This is a box</p></div>
+                    <div className='IBMSMSplitMainSmallSideSecBox'>
+                      <p>This is a box</p>
+                    </div>
                   </div>
                 </div>
               </div>

src/pages/feed/loader.ts

@@ -1,6 +1,6 @@
 import { NDKUser } from '@nostr-dev-kit/ndk'
 import { NDKContextType } from 'contexts/NDKContext'
-import { redirect } from 'react-router-dom'
+import { LoaderFunctionArgs, redirect } from 'react-router-dom'
 import { appRoutes } from 'routes'
 import { store } from 'store'
 import { MuteLists } from 'types'
@@ -22,80 +22,95 @@ export interface FeedPageLoaderResult {
   followList: string[]
 }
 
-export const feedPageLoader = (ndkContext: NDKContextType) => async () => {
-  // Empty result
-  const result: FeedPageLoaderResult = {
-    muteLists: {
-      admin: {
-        authors: [],
-        replaceableEvents: []
+export const feedPageLoader =
+  (ndkContext: NDKContextType) =>
+  async ({ params }: LoaderFunctionArgs) => {
+    const { note } = params
+    // Empty result
+    const result: FeedPageLoaderResult = {
+      muteLists: {
+        admin: {
+          authors: [],
+          replaceableEvents: []
+        },
+        user: {
+          authors: [],
+          replaceableEvents: []
+        }
       },
-      user: {
-        authors: [],
-        replaceableEvents: []
-      }
-    },
-    nsfwList: [],
-    repostList: [],
-    followList: []
+      nsfwList: [],
+      repostList: [],
+      followList: []
+    }
+
+    // Get the current state
+    const userState = store.getState().user
+    const loggedInUserPubkey =
+      (userState?.user?.pubkey as string | undefined) || getFallbackPubkey()
+
+    // Exception for visiting notes directly
+    if (!loggedInUserPubkey && !note) return redirect(appRoutes.home)
+    const ndkUser = new NDKUser({ pubkey: loggedInUserPubkey })
+    ndkUser.ndk = ndkContext.ndk
+
+    const settled = await Promise.allSettled([
+      ndkContext.getMuteLists(loggedInUserPubkey),
+      getReportingSet(CurationSetIdentifiers.NSFW, ndkContext),
+      getReportingSet(CurationSetIdentifiers.Repost, ndkContext),
+      ndkUser.followSet()
+    ])
+
+    // Check the mutelist event result
+    const muteListResult = settled[0]
+    if (muteListResult.status === 'fulfilled' && muteListResult.value) {
+      result.muteLists = muteListResult.value
+    } else if (muteListResult.status === 'rejected') {
+      log(
+        true,
+        LogType.Error,
+        'Failed to fetch mutelist.',
+        muteListResult.reason
+      )
+    }
+
+    // Check the nsfwlist event result
+    const nsfwListResult = settled[1]
+    if (nsfwListResult.status === 'fulfilled' && nsfwListResult.value) {
+      result.nsfwList = nsfwListResult.value
+    } else if (nsfwListResult.status === 'rejected') {
+      log(
+        true,
+        LogType.Error,
+        'Failed to fetch nsfwlist.',
+        nsfwListResult.reason
+      )
+    }
+
+    // Check the repostlist event result
+    const repostListResult = settled[2]
+    if (repostListResult.status === 'fulfilled' && repostListResult.value) {
+      result.repostList = repostListResult.value
+    } else if (repostListResult.status === 'rejected') {
+      log(
+        true,
+        LogType.Error,
+        'Failed to fetch repost list.',
+        repostListResult.reason
+      )
+    }
+
+    // Check the followSet result
+    const followSetResult = settled[3]
+    if (followSetResult.status === 'fulfilled') {
+      result.followList = Array.from(followSetResult.value)
+    } else if (followSetResult.status === 'rejected') {
+      log(
+        true,
+        LogType.Error,
+        'Failed to fetch follow set.',
+        followSetResult.reason
+      )
+    }
+
+    return result
   }
-
-  // Get the current state
-  const userState = store.getState().user
-  const loggedInUserPubkey =
-    (userState?.user?.pubkey as string | undefined) || getFallbackPubkey()
-  if (!loggedInUserPubkey) return redirect(appRoutes.home)
-  const ndkUser = new NDKUser({ pubkey: loggedInUserPubkey })
-  ndkUser.ndk = ndkContext.ndk
-
-  const settled = await Promise.allSettled([
-    ndkContext.getMuteLists(loggedInUserPubkey),
-    getReportingSet(CurationSetIdentifiers.NSFW, ndkContext),
-    getReportingSet(CurationSetIdentifiers.Repost, ndkContext),
-    ndkUser.followSet()
-  ])
-
-  // Check the mutelist event result
-  const muteListResult = settled[0]
-  if (muteListResult.status === 'fulfilled' && muteListResult.value) {
-    result.muteLists = muteListResult.value
-  } else if (muteListResult.status === 'rejected') {
-    log(true, LogType.Error, 'Failed to fetch mutelist.', muteListResult.reason)
-  }
-
-  // Check the nsfwlist event result
-  const nsfwListResult = settled[1]
-  if (nsfwListResult.status === 'fulfilled' && nsfwListResult.value) {
-    result.nsfwList = nsfwListResult.value
-  } else if (nsfwListResult.status === 'rejected') {
-    log(true, LogType.Error, 'Failed to fetch nsfwlist.', nsfwListResult.reason)
-  }
-
-  // Check the repostlist event result
-  const repostListResult = settled[2]
-  if (repostListResult.status === 'fulfilled' && repostListResult.value) {
-    result.repostList = repostListResult.value
-  } else if (repostListResult.status === 'rejected') {
-    log(
-      true,
-      LogType.Error,
-      'Failed to fetch repost list.',
-      repostListResult.reason
-    )
-  }
-
-  // Check the followSet result
-  const followSetResult = settled[3]
-  if (followSetResult.status === 'fulfilled') {
-    result.followList = Array.from(followSetResult.value)
-  } else if (followSetResult.status === 'rejected') {
-    log(
-      true,
-      LogType.Error,
-      'Failed to fetch follow set.',
-      followSetResult.reason
-    )
-  }
-
-  return result
-}