Merge pull request #116 from social-tw/fix/post-id

[Fix] Post id
social-tw · Sep 29, 2023 · 401316b · 401316b
2 parents 32f4230 + 8f7b6cf
commit 401316b
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 83 deletions.
diff --git a/packages/frontend/src/components/Post.tsx b/packages/frontend/src/components/Post.tsx
@@ -32,42 +32,50 @@ export default function ({
         ? publishedTime.format('YYYY/MM/DD')
         : publishedTime.fromNow()
 
+    const postInfo = (
+        <div className="space-y-3">
+            <header className="flex items-center gap-4">
+                <div className="border-2 border-white rounded-full">
+                    <Avatar
+                        size={20}
+                        name={epochKey}
+                        variant="beam"
+                        colors={[
+                            '#92A1C6',
+                            '#146A7C',
+                            '#F0AB3D',
+                            '#C271B4',
+                            '#C20D90',
+                        ]}
+                    />
+                </div>
+                <div className="text-xs font-medium tracking-wide text-black/80">
+                    {publishedLabel}
+                </div>
+            </header>
+            <section className="text-sm font-medium tracking-wider text-black/90">
+                {compact ? (
+                    <LinesEllipsis
+                        text={content}
+                        maxLine="4"
+                        ellipsis="..."
+                        component="p"
+                    />
+                ) : (
+                    <p>{content}</p>
+                )}
+            </section>
+        </div>
+    )
+
     return (
         <article className="flex bg-white/90 rounded-xl shadow-base">
-            <div className="p-4 space-y-3">
-                <header className="flex items-center gap-4">
-                    <div className="border-2 border-white rounded-full">
-                        <Avatar
-                            size={20}
-                            name={epochKey}
-                            variant="beam"
-                            colors={[
-                                '#92A1C6',
-                                '#146A7C',
-                                '#F0AB3D',
-                                '#C271B4',
-                                '#C20D90',
-                            ]}
-                        />
-                    </div>
-                    <div className="text-xs font-medium tracking-wide text-black/80">
-                        {publishedLabel}
-                    </div>
-                </header>
-                <section className="text-sm font-medium tracking-wider text-black/90">
-                    {compact ? (
-                        <Link to={`/posts/${id}`}>
-                            <LinesEllipsis
-                                text={content}
-                                maxLine="4"
-                                ellipsis="..."
-                                component="p"
-                            />
-                        </Link>
-                    ) : (
-                        <p>{content}</p>
-                    )}
-                </section>
+            <div className="flex-1 p-4 space-y-3">
+                {compact ? (
+                    <Link to={`/posts/${id}`}>{postInfo}</Link>
+                ) : (
+                    postInfo
+                )}
                 {!compact && imageUrl && (
                     <section className="hidden rounded-xl shadow-base">
                         <img className="w-full" src={imageUrl} alt="image" />

diff --git a/packages/frontend/src/index.tsx b/packages/frontend/src/index.tsx
@@ -2,9 +2,8 @@ import './styles/main.css'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { createRoot } from 'react-dom/client'
-import { Toaster } from 'react-hot-toast'
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
-import { LoadingProvider } from './contexts/LoadingContext'
+import { UserProvider } from './contexts/User'
 import AppLayout from './layouts/AppLayout'
 import BaseLayout from './layouts/BaseLayout'
 import OnboardingLayout from './layouts/OnboardingLayout'
@@ -13,7 +12,6 @@ import Login from './pages/Login'
 import PostCreate from './pages/PostCreate'
 import PostDetail from './pages/PostDetail'
 import PostList from './pages/PostList'
-import { UserProvider } from './contexts/User'
 import Profile from './pages/Profile'
 
 dayjs.extend(relativeTime)
@@ -42,7 +40,7 @@ const router = createBrowserRouter([
                         element: <PostList />,
                     },
                     {
-                        path: 'posts/:postId',
+                        path: 'posts/:id',
                         element: <PostDetail />,
                     },
                     {

diff --git a/packages/frontend/src/pages/PostDetail.tsx b/packages/frontend/src/pages/PostDetail.tsx
@@ -1,8 +1,12 @@
 import clsx from 'clsx'
+import { useEffect, useState } from 'react'
+import { useParams } from 'react-router-dom'
 import { useMediaQuery } from '@uidotdev/usehooks'
 import Post from '../components/Post'
+import { SERVER } from '../config'
 
-const post = {
+import type { PostInfo } from '../types'
+const demoPost = {
     id: '1',
     epochKey: 'epochKey-1',
     publishedAt: new Date(),
@@ -14,8 +18,35 @@ const post = {
 }
 
 export default function PostDetail() {
+    const { id } = useParams()
+    const [post, setPost] = useState<PostInfo>()
+
+    useEffect(() => {
+        async function loadPost() {
+            const response = await fetch(`${SERVER}/api/post/${id}`)
+            const post = await response.json()
+
+            setPost({
+                id: post._id,
+                epochKey: post.epochKey,
+                content: post.content,
+                publishedAt: post.publishedAt,
+                commentCount: post.commentCount,
+                upCount: post.upCount,
+                downCount: post.downCount,
+            })
+        }
+        if (id?.includes('demo')) {
+            setPost(demoPost)
+        } else {
+            loadPost()
+        }
+    }, [id])
+
     const isSmallDevice = useMediaQuery('only screen and (max-width : 768px)')
 
+    if (!post) return null
+
     return (
         <div className={clsx(isSmallDevice && 'divide-y divide-neutral-600')}>
             <section className="py-6">

diff --git a/packages/frontend/src/pages/PostList.tsx b/packages/frontend/src/pages/PostList.tsx
@@ -10,19 +10,11 @@ import { SERVER } from '../config'
 import { useUser } from '../contexts/User'
 import usePosts from '../hooks/usePosts'
 
-interface Post {
-    id: string
-    epochKey: string
-    content: string
-    publishedAt: Date
-    commentCount: number
-    upCount: number
-    downCount: number
-}
+import type { PostInfo } from '../types'
 
 const examplePosts = [
     {
-        id: '1',
+        id: 'demo-1',
         epochKey: 'epochKey-1',
         publishedAt: new Date(),
         content:
@@ -32,7 +24,7 @@ const examplePosts = [
         downCount: 0,
     },
     {
-        id: '2',
+        id: 'demo-2',
         epochKey: 'epochKey-2',
         publishedAt: new Date(),
         content:
@@ -42,7 +34,7 @@ const examplePosts = [
         downCount: 0,
     },
     {
-        id: '3',
+        id: 'demo-3',
         epochKey: 'epochKey-3',
         publishedAt: new Date(),
         content:
@@ -51,42 +43,12 @@ const examplePosts = [
         upCount: 0,
         downCount: 0,
     },
-    {
-        id: '4',
-        epochKey: 'epochKey-4',
-        publishedAt: new Date(),
-        content:
-            '剛剛和一群好友一起參加了一場令人驚喜的音樂會！我們聽到了一位非常出色的音樂家演奏，他的技巧和激情真是讓人難以置信。音樂會的現場氣氛也非常棒，大家都在跟著節奏搖擺，沉浸在美妙的音樂中。音樂總是有種神奇的力量，它能夠觸動人心，帶給我們情緒的共鳴。這次音樂會真的讓我重新燃起對音樂的熱愛，我想以後會更積極地參加各種音樂活動。如果你也喜歡音樂，不妨多花時間去欣賞和體驗。',
-        commentCount: 0,
-        upCount: 0,
-        downCount: 0,
-    },
-    {
-        id: '5',
-        epochKey: 'epochKey-5',
-        publishedAt: new Date(),
-        content:
-            '剛剛和一群好友一起參加了一場令人驚喜的音樂會！我們聽到了一位非常出色的音樂家演奏，他的技巧和激情真是讓人難以置信。音樂會的現場氣氛也非常棒，大家都在跟著節奏搖擺，沉浸在美妙的音樂中。音樂總是有種神奇的力量，它能夠觸動人心，帶給我們情緒的共鳴。這次音樂會真的讓我重新燃起對音樂的熱愛，我想以後會更積極地參加各種音樂活動。如果你也喜歡音樂，不妨多花時間去欣賞和體驗。',
-        commentCount: 0,
-        upCount: 0,
-        downCount: 0,
-    },
-    {
-        id: '6',
-        epochKey: 'epochKey-6',
-        publishedAt: new Date(),
-        content:
-            '剛剛和一群好友一起參加了一場令人驚喜的音樂會！我們聽到了一位非常出色的音樂家演奏，他的技巧和激情真是讓人難以置信。音樂會的現場氣氛也非常棒，大家都在跟著節奏搖擺，沉浸在美妙的音樂中。音樂總是有種神奇的力量，它能夠觸動人心，帶給我們情緒的共鳴。這次音樂會真的讓我重新燃起對音樂的熱愛，我想以後會更積極地參加各種音樂活動。如果你也喜歡音樂，不妨多花時間去欣賞和體驗。',
-        commentCount: 0,
-        upCount: 0,
-        downCount: 0,
-    },
 ]
 
 export default function PostList() {
     const errorDialog = useRef<HTMLDialogElement>(null)
     const { isLogin, signupStatus } = useUser()
-    const [posts, setPosts] = useState<Post[]>([])
+    const [posts, setPosts] = useState<PostInfo[]>([])
     const [isShow, setIsShow] = useState(false)
     const location = useLocation()
 
@@ -102,7 +64,16 @@ export default function PostList() {
 
     const loadPosts = useCallback(async () => {
         const response = await fetch(`${SERVER}/api/post`)
-        const posts = await response.json()
+        const postsJson = await response.json()
+        const posts = postsJson.map((post: any) => ({
+            id: post._id,
+            epochKey: post.epochKey,
+            content: post.content,
+            publishedAt: post.publishedAt,
+            commentCount: post.commentCount,
+            upCount: post.upCount,
+            downCount: post.downCount,
+        }))
 
         setPosts([...posts, ...examplePosts])
     }, [])

diff --git a/packages/frontend/src/types/index.ts b/packages/frontend/src/types/index.ts
@@ -0,0 +1,9 @@
+export interface PostInfo {
+    id: string
+    epochKey: string
+    content: string
+    publishedAt: Date
+    commentCount: number
+    upCount: number
+    downCount: number
+}
diff --git a/packages/relay/src/routes/post.ts b/packages/relay/src/routes/post.ts
@@ -7,6 +7,7 @@ import { APP_ADDRESS, LOAD_POST_COUNT } from '../config'
 import { errorHandler } from '../middleware'
 import TransactionManager from '../singletons/TransactionManager'
 import { UnirepSocialSynchronizer } from '../synchornizer'
+
 import type { Helia } from '@helia/interface'
 
 export default (
@@ -28,6 +29,13 @@ export default (
             await createPost(req, res, db, synchronizer, helia)
         })
     )
+
+    app.get(
+        '/api/post/:id',
+        errorHandler(async (req, res, next) => {
+            await fetchSinglePost(req, res, db)
+        })
+    )
 }
 
 async function fetchPosts(req, res, db: DB) {
@@ -128,3 +136,25 @@ async function createPost(
         res.status(500).json({ error })
     }
 }
+
+async function fetchSinglePost(req, res, db: DB) {
+    try {
+        const id = req.params.id
+        if (!id) {
+            res.status(400).json({ error: 'id is undefined' })
+        }
+
+        const post = await db.findOne('Post', {
+            where: {
+                _id: id,
+            },
+        })
+        if (!post) {
+            res.status(404).json({ error: `post is not found: ${id}` })
+        }
+
+        res.json(post)
+    } catch (error: any) {
+        res.status(500).json({ error })
+    }
+}
diff --git a/packages/relay/src/synchornizer.ts b/packages/relay/src/synchornizer.ts
@@ -49,6 +49,7 @@ export class UnirepSocialSynchronizer extends Synchronizer {
                 transactionHash,
             },
         })
+        if (!findPost) return
 
         const epochKey = BigInt(event.topics[1]).toString(10)
         const postId = BigInt(event.topics[2]).toString()