Merge branch 'main' of github.com:ismail-kharrobi/PongGame-WebApp int…

…o DEV-achievements
Wadie-ess · Nov 9, 2023 · 81e8438 · 81e8438
2 parents 9a0b501 + 745ea03
commit 81e8438
Show file tree

Hide file tree

Showing 34 changed files with 964 additions and 595 deletions.
diff --git a/backend/code/package-lock.json b/backend/code/package-lock.json
diff --git a/backend/code/package.json b/backend/code/package.json
@@ -15,7 +15,7 @@
     "start": "nest start",
     "start:dev": "npm run db:generate && nest start --watch",
     "start:debug": "nest start --debug --watch",
-    "start:prod": "node dist/main",
+    "start:prod": "node dist/src/main",
     "db:generate": "prisma generate",
     "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
     "test": "jest",
@@ -37,7 +37,7 @@
     "@nestjs/swagger": "^7.1.12",
     "@nestjs/throttler": "^5.0.0",
     "@nestjs/websockets": "^10.2.6",
-    "@prisma/client": "^5.2.0",
+    "@prisma/client": "^5.5.2",
     "@types/qrcode": "^1.5.4",
     "bcrypt": "^5.1.1",
     "bull": "^4.11.3",
@@ -51,7 +51,6 @@
     "passport": "^0.6.0",
     "passport-42": "^1.2.6",
     "passport-jwt": "^4.0.1",
-    "prisma": "^5.2.0",
     "qrcode": "^1.5.3",
     "reflect-metadata": "^0.1.13",
     "rxjs": "^7.8.1",

diff --git a/backend/code/src/main.ts b/backend/code/src/main.ts
@@ -15,6 +15,7 @@ async function bootstrap() {
   const app = await NestFactory.create(AppModule);
   const corsOptions = {
     origin: [
+      'http://localhost:9000',
       'http://localhost:3000',
       'http://142.93.161.63',
       'http://164.92.243.105',

diff --git a/backend/code/src/messages/messages.service.ts b/backend/code/src/messages/messages.service.ts
@@ -144,6 +144,12 @@ export class MessagesService {
         author: {
           select: {
             avatar: true,
+            Username: true,
+          },
+        },
+        room: {
+          select: {
+            type: true,
           },
         },
       },

diff --git a/docker-compose.yaml b/docker-compose.yaml
@@ -29,6 +29,9 @@ services :
     depends_on: 
       - database
     restart: always
+    ports:
+      - 3001:3001
+      - 3004:3004
     init : true
 
   nginx :

diff --git a/frontend/code/src/Api/base.tsx b/frontend/code/src/Api/base.tsx
@@ -1,5 +1,10 @@
 import axios from "axios";
-
+// import { useNavigate } from 'react-router-dom';
+// import { useUserStore } from "../Stores/stores";
+// const useNavigateCustom = () => {
+//   const navigate = useNavigate();
+//   return navigate;
+// };
 const api = axios.create({
   baseURL: `${process.env.REACT_APP_API_ENDPOINT}`,
   timeout: 10000,
@@ -10,27 +15,26 @@ const api = axios.create({
   },
 });
 
-let refreshAttempted = false;
-
-const errorHandler = async (error: any) => {
-  if (error.response.status === 401) {
-    if (!refreshAttempted) {
-      try {
-        refreshAttempted = true;
-        await api.get("auth/refresh");
-        return api.request(error.config);
-      } catch (refreshError) {}
-    } else {
-      refreshAttempted = false;
+  let refreshAttempted = false;
+
+  const errorHandler = async (error: any) => {
+
+    if (error?.response?.status === 401) {
+      if (!refreshAttempted) {
+        try {
+          refreshAttempted = true;
+          await api.get("auth/refresh");
+          return api.request(error.config);
+        } catch (refreshError) {}
+      } else {
+        refreshAttempted = false;
+      }
     }
-  }
-
-  return Promise.reject({ ...error });
-};
-
-api.interceptors.response.use(
-  (response) => response,
-  (error) => errorHandler(error)
-);
-
-export default api;
+    return Promise.reject(error);
+  };
+  api.interceptors.response.use(
+    (response) => response,
+    (error) => errorHandler(error)
+  );
+
+  export default api;
diff --git a/frontend/code/src/Components/Chat/Components/Conversation.tsx b/frontend/code/src/Components/Chat/Components/Conversation.tsx
@@ -22,7 +22,7 @@ import {
 
 import { useUserStore } from "../../../Stores/stores";
 import { formatTime } from "./tools/utils";
-import { socket } from "../Services/SocketsServices";
+import { useSocketStore } from "../Services/SocketsServices";
 
 export interface ChatPaceHolderProps {
   username: string;
@@ -32,6 +32,7 @@ export interface ChatPaceHolderProps {
   isRead: boolean;
   userImage: string;
   id: string;
+  secondUserId: string;
 }
 
 export const CurrentUserMessage = ({
@@ -91,7 +92,7 @@ export const ConversationHeader: React.FC<ConversationProps> = ({
   const LayoutState = useModalStore((state) => state);
   const ChatState = useChatStore((state) => state);
   const SelectedChat = useChatStore((state) => state.selectedChatID);
-
+  
   const currentUser = useChatStore((state) => state.currentDmUser);
   const selectedChatType = useChatStore((state) => state.selectedChatType);
 
@@ -100,11 +101,35 @@ export const ConversationHeader: React.FC<ConversationProps> = ({
   const toggleChatRooms = useChatStore((state) => state.toggleChatRooms);
 
   const [isModalOpen, setIsModalOpen] = useState(false);
-
+  const [isOnline, SetOnline] = useState(false);
+  const sockerStore = useSocketStore();
   const handleConfirmation = () => {
     setIsModalOpen(false);
   };
 
+  useEffect(() => {
+    SetOnline(false);
+    const handleOnline = (userId: string) => {
+      currentUser.secondUserId === userId && SetOnline(true);
+      console.log(currentUser.id);
+
+      console.log("user online", userId);
+    };
+    const handleOffline = (userId: string) => {
+      currentUser.id === userId && SetOnline(false);
+      console.log("user offline", userId);
+    };
+
+    sockerStore.socket.on("friendOffline", handleOffline);
+    sockerStore.socket.on("friendOnline", handleOnline);
+
+    return () => {
+      sockerStore.socket.off("friendOffline", handleOffline);
+      sockerStore.socket.off("friendOnline", handleOnline);
+    };
+    // eslint-disable-next-line
+  }, [ChatState.selectedChatID]);
+
   return (
     <>
       <div className="flex flex-row justify-between bg-[#1A1C26] p-3 border-b-2  border-black  ">
@@ -129,14 +154,18 @@ export const ConversationHeader: React.FC<ConversationProps> = ({
           <div className="flex flex-col pl-2 ">
             <p className="text-white font-poppins text-base font-medium leading-normal">
               {selectedChatType === ChatType.Chat
-                ? currentUser?.firstname
+                ? currentUser?.name
                 : currentRoom?.isOwner
                 ? currentRoom.name + " ♚"
                 : currentRoom?.name}
             </p>
             {selectedChatType === ChatType.Chat ? (
-              <p className="text-green-500 font-poppins text-sm font-medium leading-normal">
-                online
+              <p
+                className={`${
+                  isOnline ? "text-green-500" : "text-red-500"
+                } font-poppins text-sm font-medium leading-normal`}
+              >
+                {isOnline ? "online" : "offline"}
               </p>
             ) : (
               <p className="text-gray-500 font-poppins text-sm font-medium leading-normal">
@@ -274,15 +303,14 @@ export const Conversation: React.FC<ConversationProps> = ({
 }) => {
   const chatState = useChatStore((state) => state);
   const messageContainerRef = useRef<HTMLDivElement>(null);
-
+  const socketStore = useSocketStore();
   const scrollToBottom = () => {
     if (messageContainerRef.current) {
       const container = messageContainerRef.current;
       container.scrollTop = container.scrollHeight;
     }
   };
 
-  const currentUser = useUserStore((state) => state);
   const [inputValue, setInputValue] = useState("");
   const [FailToSendMessage, setFail] = useState(false);
   const [IsLoading, setLoading] = useState(true);
@@ -322,7 +350,7 @@ export const Conversation: React.FC<ConversationProps> = ({
         scrollToBottom();
       }
     };
-    socket.on("message", handleMessage);
+    socketStore.socket.on("message", handleMessage);
 
     const fetch = async () => {
       setLoading(true);
@@ -361,7 +389,7 @@ export const Conversation: React.FC<ConversationProps> = ({
       scrollToBottom();
     });
     return () => {
-      socket.off("message", handleMessage);
+      socketStore.socket.off("message", handleMessage);
     };
     // eslint-disable-next-line
   }, [chatState.selectedChatID]);
@@ -375,21 +403,6 @@ export const Conversation: React.FC<ConversationProps> = ({
         toast.error("you are not authorized to send messages in this room");
         chatState.setMessageAsFailed(res?.data.id);
       } else {
-        // for debug
-        if (chatState.selectedChatType === ChatType.Chat) {
-          const message: Message = {
-            id: res.data.id,
-            avatar: {
-              thumbnail: currentUser.picture.thumbnail,
-              medium: currentUser.picture.medium,
-              large: currentUser.picture.large,
-            },
-            senderId: currentUser.id,
-            message: res.data.content,
-            time: res.data.time,
-          };
-          chatState.pushMessage(message);
-        }
       }
     });
   };
@@ -411,8 +424,8 @@ export const Conversation: React.FC<ConversationProps> = ({
           (chatState.currentMessages?.length as number) > 0 ? (
             chatState.currentMessages?.map((message) => (
               <CurrentUserMessage
-                isFailed={message.isFailed}
                 key={message.id}
+                isFailed={message.isFailed}
                 avatar={message.avatar}
                 message={message.message}
                 time={message.time}