post vote server loading

src/app/(views)/r/[subredditId]/post/[postId]/page.tsx

@@ -1,22 +1,76 @@
+import { PostVoteServer } from '@/components/post-vote/post-vote-server'
+import { buttonVariants } from '@/components/ui/Button'
+import { db } from '@/lib/db'
 import { redis } from '@/lib/redis'
 import { CachedPost } from '@/types/redis'
-import React from 'react'
-
+import { Post, User, Vote } from '@prisma/client'
+import { ArrowBigDown, ArrowBigUp, Loader2 } from 'lucide-react'
+import { notFound } from 'next/navigation'
+import { Suspense } from 'react'
 
 interface PageProps {
     params: {
-        postId: {
-
-        }
+        postId: string
     }
 }
 
 export const dynamic = 'force-dynamic'
 export const fetchCache = 'force-no-store'
 
 export default async function PostPage({ params }: PageProps) {
-    const cachedPost = await redis.hgetall(`post:${params.postId}`) as  CachedPost
+    const cachedPost = await redis.hgetall(`post:${params.postId}`) as CachedPost
+
+    let post: (Post & {
+        votes: Vote[],
+        author: User
+    }) | null = null
+
+    if (!cachedPost) {
+        post = await db.post.findFirst({
+            where: {
+                id: params.postId,
+            },
+            include: {
+                votes: true,
+                author: true
+            }
+        })
+    }
+
+    if (!post && !cachedPost) return notFound()
+
     return (
-        <div>page</div>
+        <div>
+            <div className='h-full flex flex-col sm:flex-row items-center sm:items-start'>
+                <Suspense fallback={<PostVoteShell />}>
+                    <PostVoteServer
+                        postId={post?.id ?? cachedPost.id}
+                        getData={async () => {
+                            return db.post.findUnique({
+                                where: {
+                                    id: params.postId,
+                                },
+                                include: {
+                                    votes: true,
+                                    author: true
+                                }
+                            })
+                        }}
+                    />
+                </Suspense>
+            </div>
+        </div>
     )
 }
+
+function PostVoteShell() {
+    return <div className='flex items-center flex-col pr-6 w-20'>
+        <div className={buttonVariants({ variant: 'ghost' })}>
+            <ArrowBigUp className='h-5 w-5 text-zinc-900' />
+            <div className='text-center py-2 font-medium text-sm text-zinc-900'>
+                <Loader2 className='h-3 w-3 animate-spin' />
+            </div>
+            <ArrowBigDown className='h-5 w-5 text-zinc-900' />
+        </div>
+    </div>
+}

src/components/post-vote/post-vote-server.tsx

@@ -0,0 +1,55 @@
+import { getAuthSession } from "@/lib/auth";
+import { VoteType, Vote, User, Post } from "@prisma/client";
+import { PostVoteClient } from "./post-vote-client";
+
+interface PostVoteServerProps {
+    postId: string;
+    initialVotesAmount?: number;
+    initialVote?: VoteType | null;
+    getData: () => Promise<(Post & {
+        votes: Vote[],
+        author: User
+    }) | null>
+}
+
+// const wait = (ms: number) => new Promise((res) => setTimeout(res, ms))
+
+const PostVoteServer = async ({
+    postId,
+    initialVotesAmount,
+    initialVote,
+    getData
+}: PostVoteServerProps) => {
+    const session = await getAuthSession()
+
+    let _votesAmt: number = 0
+    let _currentVoteType: VoteType | null | undefined = undefined
+
+    if (getData) {
+        const post = await getData()
+
+        if (!post) {
+            return undefined
+        }
+
+        _votesAmt = post.votes.reduce((acc, vote) => {
+            if (vote.type === 'UP') return acc + 1
+            if (vote.type === 'DOWN') return acc - 1
+            return acc
+        }, 0)
+
+        _currentVoteType = post.votes.find(vote => vote.userId === session?.user.id)?.type
+    } else {
+        _votesAmt = initialVotesAmount!
+        _currentVoteType = initialVote
+
+    }
+
+    return <PostVoteClient
+        postId={postId}
+        initialVotesAmount={_votesAmt}
+        initialVote={_currentVoteType}
+    />
+}
+
+export { PostVoteServer }