Merge pull request #44 from weiwang0305/docker

Docker compose working

client/Dockerfile

@@ -0,0 +1,31 @@
+# Base stage with common setup
+FROM node:18 as base
+WORKDIR /client
+COPY package*.json ./
+RUN npm install
+EXPOSE 3000
+
+# Builder stage for building the application
+FROM base as builder
+WORKDIR /client
+COPY . .
+RUN npm run build
+
+# Production stage
+FROM base as production
+WORKDIR /client
+ENV NODE_ENV=production
+RUN npm ci
+
+COPY --from=builder /client/.next ./.next
+COPY --from=builder /client/node_modules ./node_modules
+COPY --from=builder /client/package.json ./package.json
+COPY --from=builder /client/public ./public
+CMD npm start
+
+#Development stage
+FROM base as dev
+ENV NODE_ENV=development
+RUN npm install
+COPY . .
+CMD npm run dev

client/app/(auth)/login/page.tsx

@@ -1,6 +1,6 @@
-import { FormWrapper } from "@/components/form-wrapper";
+import { FormWrapper } from '@/components/form-wrapper';
 
 const LoginPage = () => {
-  return <FormWrapper formType="login" />;
+  return <FormWrapper formType='login' />;
 };
 export default LoginPage;

client/app/(protected)/(main)/(profile)/[username]/page.tsx

@@ -51,20 +51,6 @@ export default function UserProfile({
 
   // get the profileId from session if it is the users profile, or search params if someone else
 
-  const fetchProfileInfo = async () => {
-    const response = await fetch(
-      `http://localhost:8080/users/info?user=${params.username}`
-    );
-    const json = await response.json();
-    console.log('fetchProfileInfo: ', json);
-    setDisplayName(json.data[0].display_name);
-    setProfileId(json.data[0].id);
-    setDescription(json.data[0].description || '');
-    setAvatarUrl(json.data[0].profile_avatar);
-    setFollowers(json.followers);
-    setFollowing(json.following);
-    setLoading(false);
-  };
   //! Might not need this
   // after updating info, get the new session which includes updated username in meta data and update the session context for use in sidebar
   const getCurrentSession = async () => {
@@ -74,9 +60,23 @@ export default function UserProfile({
     console.log(session);
     setUserSession(session);
   };
-
   // on render and after updates cause router.push, fetch the profile info and the updated session
   useEffect(() => {
+    const fetchProfileInfo = async () => {
+      const response = await fetch(
+        `http://localhost:8080/users/info?user=${params.username}`
+      );
+      const json = await response.json();
+      console.log('fetchProfileInfo: ', json);
+      setDisplayName(json.data[0].display_name);
+      setProfileId(json.data[0].id);
+      setDescription(json.data[0].description || '');
+      setAvatarUrl(json.data[0].profile_avatar);
+      setFollowers(json.followers);
+      setFollowing(json.following);
+      setLoading(false);
+    };
+
     fetchProfileInfo();
     getCurrentSession();
   }, []);
@@ -153,7 +153,6 @@ export default function UserProfile({
     router.push(`/${params.username}/${chatId}`);
   };
 
-  // console.log('avatar url', avatarUrl);
   return loading ? null : (
     <div className='w-full flex flex-col items-center'>
       <form

client/app/(protected)/(main)/explore/page.tsx

@@ -1,9 +1,9 @@
-import { MainFeed } from "@/components/main-feed";
+import { MainFeed } from '@/components/main-feed';
 
 export default function Explore() {
   return (
-    <div className="w-full flex flex-col">
-      <MainFeed type="explore" id="" />
+    <div className='w-full flex flex-col'>
+      <MainFeed type='explore' />
     </div>
   );
 }

client/components/avatar.tsx

@@ -1,22 +1,22 @@
-import Image from "next/image";
-import { FaUserCircle } from "react-icons/fa";
+import Image from 'next/image';
+import { FaUserCircle } from 'react-icons/fa';
 
 export const Avatar = ({
   url,
   type,
 }: {
   url: string | null | undefined;
-  type: "profile" | "feed" | "search";
+  type: 'profile' | 'feed' | 'search';
 }) => {
   let size: number;
   switch (type) {
-    case "profile":
+    case 'profile':
       size = 200;
       break;
-    case "feed":
+    case 'feed':
       size = 35;
       break;
-    case "search":
+    case 'search':
       size = 35;
       break;
     default:
@@ -29,15 +29,15 @@ export const Avatar = ({
       {url ? (
         <Image
           src={url}
-          alt="Profile Picture"
-          style={{ borderRadius: "50%" }}
+          alt='Profile Picture'
+          style={{ borderRadius: '50%' }}
           fill
         />
       ) : (
         <FaUserCircle
           size={size}
-          color="#8A8D91"
-          className={type === "profile" ? "absolute inset-0" : ""}
+          color='#8A8D91'
+          className={type === 'profile' ? 'absolute inset-0' : ''}
         />
       )}
     </div>

client/components/chat-room.tsx

@@ -1,9 +1,10 @@
-"use client";
-import { useContext, useEffect, useState } from "react";
-import { socket } from "@/socket";
-import { SessionContext } from "@/app/(protected)/layout";
-import { getTimeDifferenceInMinutes } from "@/utils";
-import { Message } from "./message";
+'use client';
+import { useContext, useEffect, useState } from 'react';
+import { socket } from '@/socket';
+import { SessionContext } from '@/app/(protected)/layout';
+import { getTimeDifferenceInMinutes } from '@/utils';
+import { Message } from './message';
+import type { Socket } from 'socket.io-client';
 
 interface ChatRoomProps {
   chatId: string;
@@ -18,17 +19,20 @@ interface MessageType {
 }
 
 export const ChatRoom = ({ chatId }: ChatRoomProps) => {
-  const [message, setMessage] = useState<string>("");
+  const [message, setMessage] = useState<string>('');
   const [allMessages, setAllMessages] = useState<MessageType[]>([]);
   const { userSession } = useContext(SessionContext);
 
   useEffect(() => {
     const handleMessageReceive = (data: any) => {
       setAllMessages((prev) => [...prev, data]);
     };
-    socket.on("receive_message", handleMessageReceive);
-    return () => socket.off("receive_message", handleMessageReceive);
-  }, [socket]);
+    socket.on('receive_message', handleMessageReceive);
+    return () => {
+      socket.off('receive_message', handleMessageReceive);
+      socket.disconnect();
+    };
+  }, [allMessages]);
 
   useEffect(() => {
     const getIntialMessages = async () => {
@@ -39,37 +43,37 @@ export const ChatRoom = ({ chatId }: ChatRoomProps) => {
       setAllMessages(result.messages);
     };
     getIntialMessages();
-  }, []);
+  }, [chatId]);
 
   const handleSendMessage = async (e: React.ChangeEvent<HTMLFormElement>) => {
     e.preventDefault();
-    if (message !== "") {
+    if (message !== '') {
       const messageData = {
         chat_id: chatId,
         content: message,
         display_name: userSession?.user.user_metadata.display_name,
         sender_id: userSession?.user.id,
         created_at: new Date(),
       };
-      console.log("emit");
-      await socket.emit("send_message", messageData);
-      await fetch("http://localhost:8080/messages/send", {
-        method: "POST",
+      console.log('emit');
+      await socket.emit('send_message', messageData);
+      await fetch('http://localhost:8080/messages/send', {
+        method: 'POST',
         headers: {
-          "Content-Type": "application/json",
+          'Content-Type': 'application/json',
         },
         body: JSON.stringify({
           chat_id: chatId,
           sender_id: userSession?.user.id,
           content: message,
         }),
       });
-      setMessage("");
+      setMessage('');
     }
   };
-
+  console.log('ewiruaoiweuroiasejfoajsdiojfah');
   return (
-    <div className="text-text-white bg-surface m-4 p-4 h-full w-full flex flex-col">
+    <div className='text-text-white bg-surface m-4 p-4 h-full w-full flex flex-col'>
       <div>
         {allMessages.map((message, index) => {
           return (
@@ -79,19 +83,19 @@ export const ChatRoom = ({ chatId }: ChatRoomProps) => {
               display_name={message.display_name}
               created_at={getTimeDifferenceInMinutes(`${message.created_at}`)}
               type={
-                message.sender_id === userSession?.user.id ? "sent" : "received"
+                message.sender_id === userSession?.user.id ? 'sent' : 'received'
               }
             />
           );
         })}
       </div>
       <form onSubmit={handleSendMessage}>
         <input
-          type="text"
+          type='text'
           value={message}
           onChange={(e) => setMessage(e.target.value)}
         />
-        <button type="submit">Send</button>
+        <button type='submit'>Send</button>
       </form>
     </div>
   );

client/components/follow-button.tsx

@@ -1,7 +1,7 @@
-"use client";
+'use client';
 
-import { useEffect, useState, useContext } from "react";
-import { SessionContext } from "@/app/(protected)/layout";
+import { useEffect, useState, useContext } from 'react';
+import { SessionContext } from '@/app/(protected)/layout';
 
 interface FollowButtonProps {
   followed_id: string;
@@ -18,15 +18,6 @@ export const FollowButton = ({
 
   const { userSession } = useContext(SessionContext);
 
-  const fetchIsFollowing = async () => {
-    const response = await fetch(
-      `http://localhost:8080/users/isfollowing?follower=${userSession?.user.id}&followed=${followed_id}`
-    );
-    const json = await response.json();
-    setIsFollowing(json.data);
-    setLoading(false);
-  };
-
   // on click, send the follower, followed and wether or not to follow or unfollow to the backend, update state to reflect
   const fetchToggleFollow = async (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
@@ -44,19 +35,27 @@ export const FollowButton = ({
 
   // on render determine if user is following
   useEffect(() => {
+    const fetchIsFollowing = async () => {
+      const response = await fetch(
+        `http://localhost:8080/users/isfollowing?follower=${userSession?.user.id}&followed=${followed_id}`
+      );
+      const json = await response.json();
+      setIsFollowing(json.data);
+      setLoading(false);
+    };
     fetchIsFollowing();
-  }, []);
+  }, [followed_id, userSession?.user.id]);
 
   return (
     <>
       {loading ? (
-        <div className="bg-green-700 hover:bg-green-800 rounded-lg transition duration-300 w-[100px] h-[32px]"></div>
+        <div className='bg-green-700 hover:bg-green-800 rounded-lg transition duration-300 w-[100px] h-[32px]'></div>
       ) : (
         <button
           onClick={fetchToggleFollow}
-          className=" text-white bg-green-700 hover:bg-green-800 font-medium rounded-lg text-sm transition duration-300 w-[100px] h-[32px]"
+          className=' text-white bg-green-700 hover:bg-green-800 font-medium rounded-lg text-sm transition duration-300 w-[100px] h-[32px]'
         >
-          {isFollowing ? "Following" : "Follow"}
+          {isFollowing ? 'Following' : 'Follow'}
         </button>
       )}
     </>