Add Makefile to start proj

.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
 

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

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

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

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) {

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>

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});
       }

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() {