src/App.tsx

@@ -1,6 +1,5 @@
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import HomePage from './app/feed/pages/HomePage.tsx'
-import PostPage from './app/feed/pages/PostPage.tsx'
 import SignupPage from './app/auth/pages/SignupPage.tsx'
 import LoginPage from './app/auth/pages/LoginPage.tsx'
 import LogoutPage from './app/auth/pages/LogoutPage.tsx'
@@ -23,10 +22,6 @@ export default function App() {
             path={'/'}
             element={<HomePage postsService={postService} mediaService={mediaService} />}
           />
-          <Route
-            path={'/p/:postId'}
-            element={<PostPage postsService={postService} />}
-          />
           <Route path="/login" element={<LoginPage authService={authService} />} />
           <Route path="/logout" element={<LogoutPage authService={authService} />} />
           <Route path="/signup/:code?" element={<SignupPage authService={authService} />} />

src/app/feed/components/PostItem.tsx

@@ -1,15 +1,13 @@
 import { Post, PostMedia } from '../posts/posts.ts'
 import { useEffect, useState } from 'react'
-import { Link } from 'react-router-dom'
 
 interface PostItemProps {
   post: Post
   addReaction: (emoji: string) => void
   clearReaction: (emoji: string) => void
-  hideViewButton?: boolean
 }
 
-export default function PostItem({ post, addReaction, clearReaction, hideViewButton = false }: PostItemProps) {
+export default function PostItem({ post, addReaction, clearReaction }: PostItemProps) {
   const formattedDate = post.createdAt.toLocaleString('en-US', {
     year: 'numeric',
     month: 'short',
@@ -33,14 +31,6 @@ export default function PostItem({ post, addReaction, clearReaction, hideViewBut
     <article className={`w-full p-4 ${opacity} transition-opacity duration-500`} key={post.postId}>
       <div className="text-sm text-gray-500 mb-3">
         <span className="text-gray-400 mr-2">@{post.authorName}</span>• {formattedDate}
-        {!hideViewButton && (
-          <>
-            {' • '}
-            <Link to={`/p/${post.postId}`} className="ml-2 text-primary-400 hover:underline">
-              View
-            </Link>
-          </>
-        )}
       </div>
 
       <div className="text-gray-800 mb-4 whitespace-pre-wrap">{post.content}</div>
@@ -109,7 +99,7 @@ function PostReactionButton({ emoji, didReact, onClick, count }: PostReactionBut
     <button
       key={emoji}
       onClick={onClick}
-      className={`flex items-center px-2 py-1 rounded-full border cursor-pointer ${
+      className={`flex items-center px-2 py-1 rounded-full border ${
         didReact ? 'bg-gray-100 border-gray-400' : 'bg-white border-gray-200'
       } hover:bg-gray-100 transition-colors`}
     >

src/app/feed/pages/PostPage.tsx

@@ -1,127 +0,0 @@
-import { useEffect, useState } from 'react'
-import { useNavigate, useParams } from 'react-router-dom'
-import { Post } from '../posts/posts.ts'
-import { PostsService } from '../posts/postsService.ts'
-import SingleColumnLayout from '../../../layouts/SingleColumnLayout.tsx'
-import NavBar from '../../../components/NavBar.tsx'
-import AuthNavButtons from '../../auth/components/AuthNavButtons.tsx'
-import PostItem from '../components/PostItem.tsx'
-
-interface PostPageProps {
-  postsService: PostsService
-}
-
-export default function PostPage({ postsService }: PostPageProps) {
-  const { postId } = useParams<{ postId: string }>()
-  const navigate = useNavigate()
-  const [post, setPost] = useState<Post | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-
-  useEffect(() => {
-    const fetchPost = async () => {
-      if (!postId) {
-        setError('Post ID is required')
-        setLoading(false)
-        return
-      }
-
-      try {
-        // Load posts and find the one with matching ID
-        const { posts } = await postsService.loadPublicFeed(null, 100)
-        const foundPost = posts.find(p => p.postId === postId)
-
-        if (foundPost) {
-          setPost(foundPost)
-        } else {
-          setError('Post not found')
-        }
-      } catch (e: unknown) {
-        setError((e as Error).message)
-      } finally {
-        setLoading(false)
-      }
-    }
-
-    fetchPost()
-  }, [postId, postsService])
-
-  const onAddReaction = async (emoji: string) => {
-    if (!post) return
-
-    await postsService.addReaction(post.postId, emoji)
-
-    setPost(prevPost => {
-      if (!prevPost) return null
-
-      const updatedReactions = [...prevPost.reactions]
-      const theReaction = updatedReactions.find(r => r.emoji === emoji)
-
-      if (theReaction) {
-        theReaction.count++
-        theReaction.didReact = true
-      } else {
-        updatedReactions.push({ emoji, count: 1, didReact: true })
-      }
-
-      return {
-        ...prevPost,
-        reactions: updatedReactions
-      }
-    })
-  }
-
-  const onClearReaction = async (emoji: string) => {
-    if (!post) return
-
-    await postsService.removeReaction(post.postId, emoji)
-
-    setPost(prevPost => {
-      if (!prevPost) return null
-
-      const updatedReactions = [...prevPost.reactions]
-      const theReaction = updatedReactions.find(r => r.emoji === emoji)
-
-      if (theReaction) {
-        theReaction.count = Math.max(theReaction.count - 1, 0)
-        theReaction.didReact = false
-      }
-
-      return {
-        ...prevPost,
-        reactions: updatedReactions
-      }
-    })
-  }
-
-  return (
-    <SingleColumnLayout
-      navbar={
-        <NavBar>
-          <AuthNavButtons />
-        </NavBar>
-      }
-    >
-      <main className="w-full max-w-3xl mx-auto">
-        {loading && <div className="text-center py-8">Loading...</div>}
-
-        {error && (
-          <div className="text-center py-8 text-red-500">
-            Error: {error}
-          </div>
-        )}
-
-        {post && (
-          <div className="w-full">
-            <PostItem
-              post={post}
-              addReaction={onAddReaction}
-              clearReaction={onClearReaction}
-              hideViewButton={true}
-            />
-          </div>
-        )}
-      </main>
-    </SingleColumnLayout>
-  )
-}