From b47d3a6f39551dc2655d322ee2f30d2aa0844011 Mon Sep 17 00:00:00 2001
From: YoungHypo <haiboyang@smail.nju.edu.cn>
Date: Mon, 2 Dec 2024 17:44:36 -0800
Subject: [PATCH] Add Makefile to start proj

---
 .gitignore                             |  8 +++++++
 Makefile                               | 30 ++++++++++++++++++++++++++
 app/controllers/sessions_controller.rb |  2 +-
 docker-compose.yml                     | 13 +++++++++++
 react/docker-compose.yml               | 13 -----------
 react/src/app/home/page.tsx            |  1 -
 react/src/app/user/[id]/page.tsx       | 27 ++++++++++++++++-------
 react/src/components/post/PostCard.tsx |  2 ++
 react/src/services/auth.ts             |  3 +++
 9 files changed, 76 insertions(+), 23 deletions(-)
 create mode 100644 Makefile
 delete mode 100644 react/docker-compose.yml

diff --git a/.gitignore b/.gitignore
index 445508c..766c4ff 100644
--- a/.gitignore
+++ b/.gitignore
@@ -35,6 +35,14 @@
 /config/master.key
 
 node_modules/
+.next/
+.vercel/
+build/
+
+npm-cache/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
 
 .DS_Store
 
diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..f2815f7
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,30 @@
+.PHONY: build run run-detach start stop clean
+
+# build docker image
+build:
+	docker compose build web
+	cd react && docker compose build
+
+start:
+	docker compose up --detach db --remove-orphans
+	docker compose run web rails db:create db:migrate
+	docker compose up
+
+# run docker-compose
+run: bundle build start
+
+bundle:
+	docker run --rm -v $(PWD):/app -w /app ruby:3.2.2 bundle install
+	export DOCKER_DEFAULT_PLATFORM=linux/amd64
+
+# run docker-compose in detach mode
+run-detach: build
+	docker compose up -d
+
+# stop docker-compose
+stop:
+	docker compose down
+
+# clean docker image
+clean:
+	docker rmi mind-and-machine-ruby mind-and-machine-react
\ No newline at end of file
diff --git a/app/controllers/sessions_controller.rb b/app/controllers/sessions_controller.rb
index 9165a1d..d54e6d8 100644
--- a/app/controllers/sessions_controller.rb
+++ b/app/controllers/sessions_controller.rb
@@ -5,7 +5,7 @@ def create
       session[:user_id] = user.id
       render json: { 
         message: "login success",
-        user: { id: user.id, username: user.username }
+        user: { id: user.id, username: user.username, created_at: user.created_at }
       }
     else
       render json: { error: "username or password is incorrect" }, status: :unauthorized
diff --git a/docker-compose.yml b/docker-compose.yml
index 6dd5e47..da67641 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -15,3 +15,16 @@ services:
       - "3000:3000"
     volumes:
       - .:/app:delegated
+  react:
+    build: ./react
+    ports:
+      - "8000:8000"
+    environment:
+      - NODE_ENV=development
+    volumes:
+      - .:/react
+      - /react/node_modules
+    restart: always
+    depends_on:
+      - db
+      - web
diff --git a/react/docker-compose.yml b/react/docker-compose.yml
deleted file mode 100644
index 5b8a197..0000000
--- a/react/docker-compose.yml
+++ /dev/null
@@ -1,13 +0,0 @@
-version: '3.8'
-
-services:
-  web:
-    build: .
-    ports:
-      - "8000:8000"
-    environment:
-      - NODE_ENV=development
-    volumes:
-      - .:/app
-      - /app/node_modules
-    restart: always 
\ No newline at end of file
diff --git a/react/src/app/home/page.tsx b/react/src/app/home/page.tsx
index 389066a..2d8b502 100644
--- a/react/src/app/home/page.tsx
+++ b/react/src/app/home/page.tsx
@@ -18,7 +18,6 @@ const HomePage = () => {
   const fetchPosts = async () => {
     try {
       const data = await postService.getPosts();
-      console.log('Posts data:', data);
       setPosts(data);
     } catch (err: unknown) {
       if (err instanceof AxiosError) {
diff --git a/react/src/app/user/[id]/page.tsx b/react/src/app/user/[id]/page.tsx
index 87ebefb..3f0dbda 100644
--- a/react/src/app/user/[id]/page.tsx
+++ b/react/src/app/user/[id]/page.tsx
@@ -23,8 +23,12 @@ const UserProfilePage = () => {
   const [joinedDate, setJoinedDate] = useState<string | null>(null);
 
   useEffect(() => {
-    const currentId = localStorage.getItem('userId');
+    const currentId = parseInt(localStorage.getItem('userId') || '0');
     setCurrentUserId(currentId);
+    const cuurentUserName = localStorage.getItem('username');
+    setUsername(cuurentUserName);
+    const joinedAt = localStorage.getItem('joined_at');
+    setJoinedDate(joinedAt);
 
     if (id) {
       fetchUserData(id as number);
@@ -38,12 +42,19 @@ const UserProfilePage = () => {
         postService.getUserPosts(userId),
         postService.getLikedPosts(userId)
       ]);
-      setUserPosts(posts);
-      setLikedPosts(liked);
-      if (posts.length > 0) {
-        setUsername(posts[0].user.username);
-        setJoinedDate(posts[0].user.created_at);
-      }
+      
+      const postsWithIntLikes = posts.map(post => ({
+        ...post,
+        likes: post.likes.map(like => parseInt(like))
+      }));
+      
+      const likedWithIntLikes = liked.map(post => ({
+        ...post,
+        likes: post.likes.map(like => parseInt(like))
+      }));
+
+      setUserPosts(postsWithIntLikes);
+      setLikedPosts(likedWithIntLikes);
     } catch (err: any) {
       setError('Failed to fetch user data');
       console.error('Error fetching user data:', err);
@@ -84,7 +95,7 @@ const UserProfilePage = () => {
             <UserCircleIcon className="w-20 h-20 text-gray-400" />
             <div>
               <h1 className="text-2xl font-bold">{username}</h1>
-              {joinedDate && (
+              {joinedDate && !isNaN(new Date(joinedDate).getTime()) && (
                 <div className="flex items-center text-gray-500 mt-2">
                   <CalendarIcon className="w-5 h-5 mr-2" />
                   <span>
diff --git a/react/src/components/post/PostCard.tsx b/react/src/components/post/PostCard.tsx
index 8194770..931eaa5 100644
--- a/react/src/components/post/PostCard.tsx
+++ b/react/src/components/post/PostCard.tsx
@@ -32,10 +32,12 @@ const PostCard = ({ post, onUpdate, onDelete, currentUserId }: PostCardProps) =>
     try {
       if (!likedUserIds.includes(currentUserId)) {
         const data = await postService.likePost(post.id);
+        data.likes = data.likes.map(like => parseInt(like));
         setLikedUserIds(data.likes);
         onUpdate?.({...post, likes: data.likes});
       } else {
         const data = await postService.unlikePost(post.id);
+        data.likes = data.likes.map(like => parseInt(like));
         setLikedUserIds(data.likes);
         onUpdate?.({...post, likes: data.likes});
       }
diff --git a/react/src/services/auth.ts b/react/src/services/auth.ts
index 3cfd046..346a5e0 100644
--- a/react/src/services/auth.ts
+++ b/react/src/services/auth.ts
@@ -28,6 +28,8 @@ export const authService = {
       if (response.data.user && response.data.user.id) {
         localStorage.setItem('userId', response.data.user.id);
         localStorage.setItem('username', response.data.user.username);
+        localStorage.setItem('joined_at', response.data.user.created_at);
+        console.log('joined_at', response.data.user.created_at);
       }
 
       return response.data;
@@ -52,6 +54,7 @@ export const authService = {
   logout() {
     localStorage.removeItem('userId');
     localStorage.removeItem('username');
+    localStorage.removeItem('joined_at');
   },
 
   getCurrentUser() {