Merge pull request #34 from ismail-kharrobi/DEV-PingChat

Dev ping chat

frontend/code/src/Components/Chat/Components/MessageHelpers.tsx

@@ -234,10 +234,10 @@ export const OnlineNowUsers = () => {
                   </div>
 
                   <div className="modal-action">
-                    {
+                  {
                       // eslint-disable-next-line
-                    }<a href="#" className="btn hover:bg-purple-500">
-                      {" "}
+                    }<a href="#" className="btn hover:bg-purple-500"> 
+                      {"Done "}
                     </a>
                   </div>
                 </div>

frontend/code/src/Components/Chat/Components/UserToUserChat.tsx

@@ -0,0 +1,28 @@
+import { useState } from "react";
+import { Conversation, UserPreviewCard } from "..";
+
+export const UserToUserChat = () => {
+  const [showUserPreview, setShowUserPreview] = useState(true);
+
+  const handleRemoveUserPreview = () => {
+    setShowUserPreview(!showUserPreview);
+  };
+  return (
+    <>
+      <div className="flex h-full divide-black divide-x-4">
+        <div
+          className={` ${
+            showUserPreview ? "w-8/12" : "w-full"
+          } overflow-hidden bg-gray-900`}
+        > 
+          <Conversation onRemoveUserPreview={handleRemoveUserPreview} />
+        </div>
+        <div className={` ${showUserPreview ? "w-4/12" : ""}  bg-[#1A1C26]`}>
+          {showUserPreview && (
+            <UserPreviewCard onRemoveUserPreview={handleRemoveUserPreview} />
+          )}
+        </div>
+      </div>
+    </>
+  );
+};

frontend/code/src/Components/Layout/index.tsx

@@ -14,7 +14,7 @@ import { matchRoutes, useLocation } from "react-router-dom"
 import { userContext , UserType } from '../../Context'
 import { useContext , useEffect } from 'react'
 
-const routes = [{ path: "Profile/:id" } , {path : "Settings"} , {path : "Home"}, {path:"Chat"} , {path:"Play"}]
+const routes = [{ path: "Profile/:id" } , {path : "Settings"} , {path : "Home"}, {path:"Chat"} , {path:"Play"}, {path:"Pure"}]
 
 const useCurrentPath = () => {
     const location = useLocation()

frontend/code/src/Routes/index.tsx

@@ -1,61 +1,81 @@
-import { createBrowserRouter  , RouterProvider } from "react-router-dom";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
 const router = createBrowserRouter([
-    {
-        path:"/",
-        lazy: async () => {let { Login } = await import("../Components/Login")
-        return { Component: Login }},
+  {
+    path: "/",
+    lazy: async () => {
+      let { Login } = await import("../Components/Login");
+      return { Component: Login };
     },
-    {
-        path:"/",
-        lazy: async () => {let { Layout } = await import("../Components/Layout")
-        return { Component: Layout }},
-        children:[
-            {
-                path:"Home",
-                // loader : async () => { return await dataLoader()}, it was expermintal it's good for multi compononet fetching but not good for only one because in case of multi  fetch it launches fetch paraller and not waiting  each compononet to laod
-                lazy: async () => {let { Home } = await import("../Components/Home")
-                return { Component: Home }},
-
-            },
-            {
-                path:"Play",
-                lazy: async () => {let { Play } = await import("../Components/Play")
-                return { Component: Play }},  
-            },
-            {
-                path:"Settings",
-                lazy: async () => {let { Setting } = await import("../Components/Settings")
-
-                return { Component: Setting }},  
-            },
-            {
-                path:"Lobby",
-                lazy: async () => {let { Lobby } = await import("../Components/Lobby")
-                return { Component: Lobby }},  
-            },
-            {
-                path:"Profile/:id",
-                lazy: async () => {let { Profile } = await import("../Components/Profile")
-                return { Component: Profile }},  
-            },
-            {
-                path:"Chat",
-                lazy: async () => {let { Chat } = await import("../Components/Chat")
-                return { Component: Chat }},
-
-            },
-        ]
+  },
+  {
+    path: "/",
+    lazy: async () => {
+      let { Layout } = await import("../Components/Layout");
+      return { Component: Layout };
     },
-    {
-        path:"*",
-        lazy: async () => {let { Error } = await import("../Components/Error")
-        return { Component: Error }},  
+    children: [
+      {
+        path: "Home",
+        // loader : async () => { return await dataLoader()}, it was expermintal it's good for multi compononet fetching but not good for only one because in case of multi  fetch it launches fetch paraller and not waiting  each compononet to laod
+        lazy: async () => {
+          let { Home } = await import("../Components/Home");
+          return { Component: Home };
+        },
+      },
+      {
+        path: "Play",
+        lazy: async () => {
+          let { Play } = await import("../Components/Play");
+          return { Component: Play };
+        },
+      },
+      {
+        path: "Settings",
+        lazy: async () => {
+          let { Setting } = await import("../Components/Settings");
+
+          return { Component: Setting };
+        },
+      },
+      {
+        path: "Lobby",
+        lazy: async () => {
+          let { Lobby } = await import("../Components/Lobby");
+          return { Component: Lobby };
+        },
+      },
+      {
+        path: "Profile/:id",
+        lazy: async () => {
+          let { Profile } = await import("../Components/Profile");
+          return { Component: Profile };
+        },
+      },
+      {
+        path: "Chat",
+        lazy: async () => {
+          let { Chat } = await import("../Components/Chat");
+          return { Component: Chat };
+        },
+      },
+      {
+        path: "Pure",
+        lazy: async () => {
+          let { UserToUserChat } = await import("../Components/Chat/Components/UserToUserChat");
+          return { Component: UserToUserChat };
+        },
+      },
+    ],
+  },
+  {
+    path: "*",
+    lazy: async () => {
+      let { Error } = await import("../Components/Error");
+      return { Component: Error };
     },
-    
-])
+  },
+]);
 
 export const AllRouters = () => {
-    return (
-        <RouterProvider router={router} />
-    )
-}
+  return <RouterProvider router={router} />;
+};