[Feat] link the front-end with the backend for online and offline status

app/front-end/next.config.mjs

@@ -2,14 +2,14 @@
 const nextConfig = {
     // productionBrowserSourceMaps: false, // Disable source maps in development
     // optimizeFonts: false, // Disable font optimization
-    minify: true,
+    // minify: true,
     images: {
         domains: ['cdn.cloudflare.steamstatic.com', 'ddragon.leagueoflegends.com'],
     },
-    eslint: 
-    {
+    eslint: {
         ignoreDuringBuilds: true,
     },
+    reactStrictMode: false,
 };
 
 export default nextConfig;

app/front-end/src/app/dashboard/layout.tsx

@@ -1,14 +1,17 @@
 'use client';
 import MainContainer from "../../components/mainContainer";
 import AuthChecker from "../../components/authChecker";
+import { WebSocketProvider } from '@/components/webSocket'
 import React from 'react';
 
 export default function DashboardLayout({ children }: { children: React.ReactNode }) {
   return (
     <AuthChecker>
-      <MainContainer>
-          {children}
-      </MainContainer>
+      <WebSocketProvider>
+        <MainContainer>
+            {children}
+        </MainContainer>
+      </WebSocketProvider>
     </AuthChecker>
   );
 }

app/front-end/src/app/dashboard/page.tsx

@@ -82,7 +82,7 @@ export default function Dashboard() {
                 console.error('An unexpected error happened:', error);
                 }
             } else {
-                console.log('Access token is undefined or falsy');
+                console.log('Access token is undefined or false');
             }
             };
         fetchData();

app/front-end/src/components/mainContainer.tsx

@@ -1,16 +1,24 @@
 'use client'
 import { FaAngleLeft } from "react-icons/fa";
 import Offcanvas from 'react-bootstrap/Offcanvas';
-import React, { useState } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import SideBar from "./sideBar";
 import RightBar from './rightBar';
 import SrightBar from "./srightBar";
 import Togglebar from './toggleBar';
 import styles from './styles/mainContainer.module.css'
 import Image from 'next/image'
 import InviteFriend from "./inviteFriend";
+import { WebSocketContext } from "./webSocket";
 
 
+interface Friend {
+	id: number;
+	username: string;
+	image_url: string;
+	connected: boolean;
+}
+
 export default function MainContainer({ children }: { children: React.ReactNode }) {
   const [show, setShow] = useState<boolean>(false);
   const [showSide, setShowSide] = useState<boolean>(false);
@@ -19,6 +27,29 @@ export default function MainContainer({ children }: { children: React.ReactNode
   const toggleShow = () => setShow((s) => !s);
   const handleToggle = () => setShowSide(false);
   const showToggle = () => setShowSide(true);
+  const { socket } = useContext(WebSocketContext) || {};
+  const [friendsfetched, setFriendsFetched] = useState<Friend[]>([]);
+
+  useEffect(() => {
+      if (socket) {
+          socket.onmessage = (event) => {
+              const data = JSON.parse(event.data);
+              console.log("DATA TYPE :" + data.type);
+              switch (data.type) {
+              case 'user_connected':
+                  console.log("id :" + data.id + " | user :" + data.user + " | image :" + data.image_url);
+                  setFriendsFetched((prevData) => [...prevData, { id: data.id, username: data.user, image_url: data.image_url, connected: true }]);
+                  break;
+
+              case 'user_disconnected':
+                  console.log("id :" + data.id + " | user :" + data.user);
+                  setFriendsFetched((prevData) => prevData.filter((friend) => friend.id !== data.id));
+                  break;
+              }
+          };
+      }
+  }, [socket]);
+
   return (
       <div className="container-fluid p-0 vh-100" style={{backgroundColor: '#000000', overflow: 'hidden'}}>
       <div className="row">
@@ -49,11 +80,11 @@ export default function MainContainer({ children }: { children: React.ReactNode
               <div className='col-1 vh-100 d-flex justify-content-end align-items-center text-center' style={{backgroundColor: '#000000'}}>
                 <div className={`${styles.drag_class} pt-3 pb-3`} style={{backgroundColor: '#161625', borderRadius: '15px 0 0 15px', cursor: 'pointer'}} onClick={toggleShow}>
                   <FaAngleLeft  color="#FFEBEB" size='1.2em'/>
-                  <RightBar setfriendModal={() => setFriendModal(true)} show={show} setShow={setShow} handleClose={handleClose} toggleShow={toggleShow}/>
+                  <RightBar friends_data={friendsfetched} setfriendModal={() => setFriendModal(true)} show={show} setShow={setShow} handleClose={handleClose} toggleShow={toggleShow}/>
                 </div>
               </div>
               <div className='col-11'>
-                <SrightBar setfriendModal={() => setFriendModal(true)} toggleShow={toggleShow}/>
+                <SrightBar friends_data={friendsfetched} setfriendModal={() => setFriendModal(true)} toggleShow={toggleShow}/>
               </div>
               <InviteFriend show={friendModal} close={() => setFriendModal(false)}/>
             </div>

app/front-end/src/components/rightBar.tsx

@@ -6,15 +6,14 @@ import { ImUserPlus } from "react-icons/im";
 import Player from "./Player";
 import Notification from "./Notification";
 import Offcanvas from 'react-bootstrap/Offcanvas';
-import friends from './friends.json';
-import React, { forwardRef, useState, useEffect } from 'react';
+import React, { forwardRef, useState } from 'react';
 import styles from './styles/rightBar.module.css';
 import Image from 'next/image';
 import Cookies from 'js-cookie';
 
-
 interface Props
 {
+    friends_data: any;
     show?: boolean;
     setShow: (show: boolean) => void;
     handleClose: () => void;
@@ -29,7 +28,7 @@ interface CustomToggleProps {
 
 interface Friend {
 	id: number;
-	nickname: string;
+	username: string;
 	image_url: string;
 	connected: boolean;
 }
@@ -44,46 +43,14 @@ const CustomToggle = forwardRef<HTMLDivElement, CustomToggleProps>(
 
 CustomToggle.displayName = 'CustomToggle';
 
-export default function RightBar({setShow, show, handleClose, toggleShow, setfriendModal} : Props) {
-
-    // Zikos Socket
-
-    // ma3reftch 3lach useeffect katexecute joj mrat tanchouf blanha
-    useEffect(() => 
-    {
-        // logic limchit bih howa les pages kamlin aykon fih right bar donc une fois katrandra had right ye3ni 
-        // mktrendra chi haja fiha rghitbar tankono 3arfin bli rah t autentifia 
-        // hna une fois kthel right bar rah 3ndi fbase de donne connected 
-        const access = Cookies.get('access')
-        // had socket anrdoha gloabal using use context 
-        const socket = new WebSocket(`ws://localhost:8000/ws/user-status?token=${access}`);
+export default function RightBar({friends_data, setShow, show, handleClose, toggleShow, setfriendModal} : Props) {
 
-        socket.onopen = () => {
-            console.log('WebSocket connection opened [Rijal]');
-        };
-
-        socket.onmessage = (event) => {
-            const data = JSON.parse(event.data);
-            console.log("DATA TYPE :" + data.type);
-            switch (data.type) {
-                //in this case khaso ytzad fright bar
-                case 'user_connected':
-                    console.log("id :" + data.id + " | user :" + data.user + " | image :" + data.image_url);
-                    break;
-
-                //in this case khaso yt7yad fright bar
-                case 'user_disconnected':
-                    console.log("id :" + data.id + " | user :" + data.user);
-                    break;
-            }
-        };
-    }, []);
 
     // Othman Logic
     const [searchTerm, setSearchTerm] = useState<string>('');
-
-    const filteredFriends = friends
-    .filter((friend: Friend) => friend.nickname.toLowerCase().startsWith(searchTerm.toLowerCase()))
+    console.log(friends_data)
+    const filteredFriends = friends_data
+    .filter((friend: Friend) => friend.username.toLowerCase().startsWith(searchTerm.toLowerCase()))
     .sort((usr1: Friend, usr2: Friend) => {
       if (usr1.connected && !usr2.connected) {
         return -1;
@@ -96,7 +63,7 @@ export default function RightBar({setShow, show, handleClose, toggleShow, setfri
     .map((user: Friend, index: number) => (
       <Player
         key={index}
-        nickname={user.nickname}
+        nickname={user.username}
         id={user.id}
         image={user.image_url}
         isConnected={user.connected}

app/front-end/src/components/srightBar.tsx

@@ -6,13 +6,19 @@ import { ImUserPlus } from "react-icons/im";
 import styles from './styles/srightBar.module.css'
 import Splayer from "./Splayer";
 import Notification from "./Notification";
-import friends from './friends.json';
 import React, { forwardRef } from 'react';
 import Image from 'next/image'
 
+interface Friend {
+	id: number;
+	username: string;
+	image_url: string;
+	connected: boolean;
+}
 
 interface Props
 {
+    friends_data : any;
     toggleShow: () => void;
     setfriendModal: () => void;
 }
@@ -32,9 +38,10 @@ const CustomToggle = forwardRef<HTMLDivElement, CustomToggleProps>(
 
 CustomToggle.displayName = 'CustomToggle';
 
-export default function SrightBar({toggleShow, setfriendModal} : Props) {
+export default function SrightBar({toggleShow, setfriendModal, friends_data} : Props) {
 
-    const friendsData = friends.sort((usr1, usr2) => {
+    console.log(friends_data);
+    const data = friends_data.sort((usr1: any, usr2: any) => {
         if (usr1.connected && !usr2.connected) {
             return -1;
         }
@@ -46,8 +53,8 @@ export default function SrightBar({toggleShow, setfriendModal} : Props) {
         return usr1.id - usr2.id;
     })
     // .slice(0, 5)
-    .map((user, index) => 
-        <Splayer key={index} nickname={user.nickname} id={user.id} image={user.image_url} isConnected={user.connected}/>
+    .map((user: Friend, index: number) => 
+        <Splayer key={index} nickname={user.username} id={user.id} image={user.image_url} isConnected={user.connected}/>
     );
 
 
@@ -81,7 +88,7 @@ export default function SrightBar({toggleShow, setfriendModal} : Props) {
                          </div>
                 </div>
                 <div className=" mb-2 flex-grow-1 text-center" style={{ overflowY: 'auto', width: '91%' }}>
-                    {friendsData}
+                    {data}
                 </div>
                 <div className="flex-grow-3 row-inline d-flex justify-content-center text-center" style={{width: '91%'}}>
                     <div className={`col-6 ${styles.search_inpt1} my-1 p-2 mx-2 text-center`} style={{cursor: "pointer"}} onClick={setfriendModal}>

app/front-end/src/components/webSocket.tsx

@@ -0,0 +1,37 @@
+import React, { createContext, useEffect, useState, ReactNode } from 'react';
+import Cookies from 'js-cookie';
+
+interface WebSocketContextValue {
+  socket: WebSocket | null;
+}
+
+export const WebSocketContext = createContext<WebSocketContextValue | null>(null);
+
+interface WebSocketProviderProps {
+  children: ReactNode;
+}
+
+export const WebSocketProvider: React.FC<WebSocketProviderProps> = ({ children }) => {
+  const [socket, setSocket] = useState<WebSocket | null>(null);
+
+  useEffect(() => {
+    const access = Cookies.get('access');
+    const newSocket = new WebSocket(`ws://localhost:8000/ws/user-status?token=${access}`);
+
+    newSocket.onopen = () => {
+      console.log('WebSocket connection opened');
+    };
+
+    setSocket(newSocket);
+
+    return () => {
+      newSocket.close();
+    };
+  }, []);
+
+  return (
+    <WebSocketContext.Provider value={{ socket }}>
+      {children}
+    </WebSocketContext.Provider>
+  );
+};