fix(fe): fetch data + docker build

Author: hyuse202

spez-frontend/.babelrc

@@ -0,0 +1,24 @@
+# Use an official Node.js runtime as a parent image
+FROM node:20-alpine
+
+# Set the working directory in the container
+WORKDIR /src/app
+
+# Copy package.json and package-lock.json to the container
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application code to the container
+COPY . .
+
+# Build the Next.js app
+RUN npm run build
+
+# Expose the port the app runs on
+EXPOSE 3000
+
+# Start the Next.js application
+CMD ["npm", "run", "start"]
+

spez-frontend/Dockerfile

@@ -10,16 +10,14 @@
     "test": "jest"
   },
   "dependencies": {
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.1",
     "axios": "^1.7.7",
     "html-react-parser": "^5.1.18",
-    "jest": "^29.7.0",
     "js-cookie": "^3.0.5",
     "next": "14.2.15",
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.3.0",
+    "sharp": "^0.33.5",
     "suneditor": "^2.47.0",
     "suneditor-react": "^3.6.1"
   },

spez-frontend/jest.config.js

@@ -10,22 +10,30 @@ import { GoTrash } from "react-icons/go";
 import { IPost, IComment } from "@/types";
 import LikeButton from "@/components/LikeButton";
 import svLike from "@/services/svLike";
+import { useEffect, useState } from "react";
 type Props = {
   params: { id: string };
 };
-// interface getILike{
-//   like: number
-// }
-export default async function Post({ params }: Props) {
+export default function Post({ params }: Props) {
+  const [info, setInfo] = useState<IPost>()
+  const [likes, setLikes] = useState<number | null>(null)
+  const [comment, setComments] = useState<IComment[] | undefined>()
   const id: string = params.id;
   const { getPost, delPost } = svPost();
   const {getComment} = svCmt();
   const {getLike} = svLike()
-  const info: IPost = await getPost(id);
-  const likes: number = await getLike(id);
-  console.log(likes)
-  const comment: IComment[] = await getComment(id);
-  const author_url = "/user/" + info.author.id;
+  useEffect(() => {
+    async function fetching () {
+      let res = await getPost(id);
+      setInfo(res)
+      res = await getLike(id);
+      setLikes(res);
+      res = await getComment(id);
+      setComments(res);
+    }
+    fetching()
+  }, [])
+  const author_url = "/user/" + info?.author.id;
   const handleDelPost = async () => {
     let token: string | null = null
     if (typeof window !== 'undefined')
@@ -40,22 +48,22 @@ export default async function Post({ params }: Props) {
           <div className="pl-10 flex flex-row justify-between">
             <div className="w-auto">
 
-            <Link href={author_url} className="font-semibold"> {info.author.username}</Link>
-            {"     "} {getRelativeTime(info.created_at)}
+            <Link href={author_url} className="font-semibold"> {info?.author.username}</Link>
+            {"     "} { info?.created_at? getRelativeTime(info?.created_at) : null }
             </div>
             <button onClick={handleDelPost} className="mr-8 text-red-600 text-semibold"> <GoTrash /></button>
           </div>
-          <div className="pl-2 text-2xl font-bold">{info.title}</div>
-          <div className="p-2">{Parser(info.content)}</div>
+          <div className="pl-2 text-2xl font-bold">{info?.title}</div>
+          <div className="p-2">{ info?.content ? Parser(info?.content) : null}</div>
           <div className="flex flex-row">
               <LikeButton initialLikes={likes} post_id={id} />
-            <div className="w-auto mt-[0.35rem] ml-5 border-2 rounded-full px-2 border-black">Phản hồi: {comment.length}</div>
+            <div className="w-auto mt-[0.35rem] ml-5 border-2 rounded-full px-2 border-black">Phản hồi: {comment?.length}</div>
           </div> 
           <CmtForm postId={id} />
         </div>
         <div className="border-2 border-slate-950 p-2 text-black rounded shadow h-full w-1/2 space-y-5">
         <a className="font-bold text-2xl">Bình Loạn</a>
-          {comment.map((element: IComment) => (
+          {comment?.map((element: IComment) => (
             <Comment
               key={element.id}
                 id = {element.id}

spez-frontend/package.json

@@ -1,15 +1,16 @@
 // components/LikeButton.tsx
+"use client"
 import React, { useState } from "react";
 import Image from "next/image";
 import EagleEmoji from "../../public/eagle_emoji.png";
 import svLike from "@/services/svLike";
 interface LikeButtonProps {
-  initialLikes: number;
+  initialLikes: number | null;
   post_id: string
 }
 
 const  LikeButton: React.FC<LikeButtonProps> = ({ initialLikes, post_id }) => {
-  const [likes, setLikes] = useState<number>(initialLikes);
+  const [likes, setLikes] = useState<number | null>(initialLikes);
   const [liked, setLiked] = useState(false);
   const {postLike, delLike} = svLike()
 
@@ -21,7 +22,7 @@ const  LikeButton: React.FC<LikeButtonProps> = ({ initialLikes, post_id }) => {
       const response = liked? await postLike(post_id, token) : await delLike(post_id, token);
       if (response.status == 201 || response.status == 204) {
         setLiked(!liked);
-        setLikes((prev) => (liked ? prev - 1 : prev + 1));
+        setLikes((prev) => (prev ?  (liked? (prev - 1) : (prev + 1)) : null ))
       }
 
     } catch (error) {

spez-frontend/src/app/post/[id]/page.tsx

@@ -1,30 +1,35 @@
-import svPost from "@/services/svPost"
+"use client";
+import svPost from "@/services/svPost";
 import Post from "./Post";
 import { IPost } from "@/types";
-export default async function NewsFeed() {
-    const {getAllPost} =  svPost();
-    const AllPost = await getAllPost();
-    return (
-        <>
-            <div className="w-full h-screen p-8">
-                <div className=" flex flex-col items-center gap-8">
-
-                {
-                    AllPost?.map((post: IPost) => (
-                        <Post
-                        key={post.id}
-                        id = {post.id}
-                        title = {post.title}
-                        content = {post.content}
-                        author = {post.author}
-                        created_at = {post.created_at}
-                        updated_at= {post.updated_at}
-                        />
-                    )
-                    )
-                }
-                </div>
-            </div>
-        </>
-    )
-}
+import { useEffect, useState } from "react";
+export default function NewsFeed() {
+  const [AllPost, setAllPost] = useState<IPost[] | null>();
+  const { getAllPost } = svPost();
+  useEffect(() => {
+    async function fetching() {
+      const res = await getAllPost();
+      setAllPost(res);
+    }
+    fetching();
+  });
+  return (
+    <>
+      <div className="w-full h-screen p-8">
+        <div className=" flex flex-col items-center gap-8">
+          {AllPost?.map((post: IPost) => (
+            <Post
+              key={post.id}
+              id={post.id}
+              title={post.title}
+              content={post.content}
+              author={post.author}
+              created_at={post.created_at}
+              updated_at={post.updated_at}
+            />
+          ))}
+        </div>
+      </div>
+    </>
+  );
+}