ui to see feeds from different users

packages/client/app/components/PostFeed.tsx

···
 export default function PostFeed({ feed }: { feed: FeedItem[] }) {
   return (
     <ul className="divide-accent-content">
+      {feed.length === 0 ? (
+        <li className="p-4">
+          <p className="text-center">No posts here</p>
+        </li>
+      ) : null}
       {feed.map((post) => (
         <li
           key={post.uri}

packages/client/app/lib/post.server.ts

···
   parse,
   parseCanonicalResourceUri,
   type Did,
+  type Handle,
   type ResourceUri
 } from '@atcute/lexicons'
 import { createKeyClient, getServiceAgent, getSessionAgent } from './xrpcClient'
···
   visibility: (string & {}) | 'followers' | 'mentioned' | 'public'
 }
 
-export async function getFeed(request: Request) {
+export async function getFeed(request: Request, handle?: Handle) {
   const serviceDid =
     `did:web:${encodeURIComponent(new URL(env.API_URL).host)}` as const
   const session = await getOAuthSession(request)
   const serverClient = await getServiceAgent(session, serviceDid)
   const keyClient = createKeyClient(session)
+  let did = session.did as Did
+  if (handle) {
+    const foundDid = await handleToDid(handle)
+    if (foundDid) {
+      did = foundDid
+    }
+  }
 
   const { feed } = await ok(
     serverClient.get('app.wafrn.content.getFeed', {
-      params: { did: session.did }
+      params: { did }
     })
   )
 
···
   const didDoc = await idResolver.did.resolveAtprotoData(did)
   return didDoc.handle
 }
+
+async function handleToDid(handle: Handle) {
+  const did = await idResolver.handle.resolve(handle)
+  return did as Did | undefined
+}

packages/client/app/routes/_index.tsx

···
 import { useRootData } from '@www/lib/useRootData'
 import { Link } from 'react-router'
-import type { Route } from './+types/_index'
-import { getFeed } from '@www/lib/post.server'
-import { useLoaderData } from 'react-router'
-import PostFeed from '@www/components/PostFeed'
 
 export function meta() {
   return [
     { title: 'New React Router App' },
     { name: 'description', content: 'Welcome to React Router!' }
   ]
-}
-
-export async function loader({ request }: Route.LoaderArgs) {
-  try {
-    const feed = await getFeed(request)
-    return { feed }
-  } catch (err) {
-    console.error(err)
-    return { feed: [] }
-  }
 }
 
 export default function Home() {
   const { user } = useRootData()
-  const { feed } = useLoaderData<typeof loader>()
-  console.log('client feed: ', feed)
 
   return (
     <div className="p-4 max-w-3xl mx-auto">
···
           </Link>
         )}
       </p>
-      <PostFeed feed={feed} />
+      <p>
+        <Link className="btn btn-link" to="/user/blt.pds.djara.dev">
+          See posts from @blt.pds.djara.dev
+        </Link>
+      </p>
+      <p>
+        <Link className="btn btn-link" to="/user/user2.pds.djara.dev">
+          See posts from @user2.pds.djara.dev
+        </Link>
+      </p>
     </div>
   )
 }

packages/client/app/routes/user.$handle.tsx

···
+import type { Route } from './+types/user.$handle'
+import { getFeed } from '@www/lib/post.server'
+import type { Handle } from '@atcute/lexicons'
+import { useLoaderData } from 'react-router'
+import PostFeed from '@www/components/PostFeed'
+
+export async function loader({ request, params }: Route.LoaderArgs) {
+  const feed = await getFeed(request, params.handle as Handle)
+  return { feed }
+}
+
+export default function UserPage() {
+  const { feed } = useLoaderData<typeof loader>()
+
+  return (
+    <div>
+      <PostFeed feed={feed} />
+    </div>
+  )
+}