FIX:react-router prevent layout re render

ADD:current route icon highligh FIX:Layout in big screens
Wadie-ess · Sep 10, 2023 · a80f5ec · a80f5ec
1 parent 78d8d4b
commit a80f5ec
Show file tree

Hide file tree

Showing 33 changed files with 1,678 additions and 3,133 deletions.
diff --git a/backend/Dockerfile.dev b/backend/Dockerfile.dev
@@ -2,10 +2,10 @@ FROM node:20
 
 WORKDIR /app
 
-COPY code/package.json .
+COPY ./code/package.json .
 
 RUN npm install 
 
-COPY /code . 
+COPY ./code . 
 
 CMD ["sh", "-c","npx prisma migrate dev --name init &  npx prisma studio & npm run start:dev"]
diff --git a/frontend/code/package-lock.json b/frontend/code/package-lock.json
diff --git a/frontend/code/package.json b/frontend/code/package.json
@@ -48,4 +48,4 @@
     "react-router-dom": "^6.14.2",
     "tailwindcss": "^3.3.3"
   }
-}
+}
diff --git a/frontend/code/src/ReactRouter.tsx b/frontend/code/src/ReactRouter.tsx
@@ -0,0 +1,55 @@
+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 { 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:"*",
+        lazy: async () => {let { Error } = await import("./Components/Error")
+        return { Component: Error }},  
+    },
+
+])
+
+export const AllRouters = () => {
+    return (
+        <RouterProvider router={router} />
+    )
+}
diff --git a/frontend/code/src/Routes/ReactTouter.tsx b/frontend/code/src/Routes/ReactTouter.tsx
diff --git a/.../code/src/components/404/assest/Error.gif → ...ode/src/components/Error/assest/Error.gif b/.../code/src/components/404/assest/Error.gif → ...ode/src/components/Error/assest/Error.gif
diff --git a/...d/code/src/components/404/assest/Font.tsx → ...code/src/components/Error/assest/Font.tsx b/...d/code/src/components/404/assest/Font.tsx → ...code/src/components/Error/assest/Font.tsx
diff --git a/...d/code/src/components/404/assest/font.svg → ...code/src/components/Error/assest/font.svg b/...d/code/src/components/404/assest/font.svg → ...code/src/components/Error/assest/font.svg
diff --git a/frontend/code/src/components/404/index.tsx → frontend/code/src/components/Error/index.tsx b/frontend/code/src/components/404/index.tsx → frontend/code/src/components/Error/index.tsx
diff --git a/frontend/code/src/components/Home/assets/Button.tsx b/frontend/code/src/components/Home/assets/Button.tsx
@@ -3,8 +3,8 @@ import  toast from 'react-hot-toast';
 
 export const Button = () => {
     return (
-        <div onClick={() => {toast.error("Waiting Opponenet")}} className="mystyle transition duration-500 hover:-translate-y-1 hover:scale-110 ease-in-out hover:cursor-pointer hover:fill-primary flex absolute justify-center items-center left-[36%] sm:left-[41.4%] top-[66%] sm:top-3/4   w-[27vw] sm:w-[17.5vw]">
-            <span className=" absolute text-white font-montserrat text-[1.4vw]">PLAY NOW</span>
+        <div onClick={() => {toast.success("Waiting Opponenet")}} className="mystyle transition duration-500 hover:-translate-y-1 hover:scale-110 ease-in-out hover:cursor-pointer hover:fill-primary flex absolute justify-center items-center left-[36%] sm:left-[41.4%] top-[66%] sm:top-3/4   w-[27vw] sm:w-[17.5vw]">
+            <span className=" absolute text-white font-montserrat text-[1.4vw] xl:text-[0.8vw]">PLAY NOW</span>
             <svg width="211" height="57" viewBox="0 0 211 57" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <rect className="" x="0.84375" width="209.158" height="57" rx="6" fill="url(#paint0_linear_377_5387)"/>
 

diff --git a/frontend/code/src/components/Home/assets/Hero.png b/frontend/code/src/components/Home/assets/Hero.png
diff --git a/frontend/code/src/components/Home/assets/Table.tsx b/frontend/code/src/components/Home/assets/Table.tsx
@@ -2,12 +2,29 @@ import { Trophy } from './Trophy'
 import { useState,useEffect } from 'react'
 import { Daimond } from './Daimond'
 import { Loading } from '../../Loading'
+// import { useLoaderData } from 'react-router'
 
+// export const dataLoader = async() => {
+
+//     var users :any[] = [];
+//     for (let i = 0 ; i < 10 ; ++i)
+//     {
+//       let response = await fetch(`https://randomuser.me/api/`)
+//       let data  = await response.json()
+//       if (data.results && data.results.length > 0) {
+//           const newUser = data.results[0];
+//           users.push(newUser)
+//       }
+//     }
+//        return users;
+
 
-
+// }
 export const Table = () =>
 {
     const [users, setUsers] = useState<any | undefined>([])
+    // const users : any = useLoaderData();
+
     const [loading , setLoading] = useState<boolean>(true)
     useEffect( ()  => {
       const fetchdata = async() =>{
@@ -18,13 +35,13 @@ export const Table = () =>
               if (data.results && data.results.length > 0) {
                   const newUser = data.results[0];
                   setUsers((oldUsers : any) => [...oldUsers, newUser]);
-                  console.log(newUser)
               }
             }
             setLoading(false)
       }
       fetchdata().catch(console.error)  
     },[])
+
     return (
         <div className="overflow-x-auto no-scrollbar w-full">
           <table className="table w-full">
@@ -36,10 +53,10 @@ export const Table = () =>
               </tr>
             </thead>
             <tbody className='flex flex-col justify-between items-center gap-2 sm:gap-4'>
-              {!loading && users.map((x: any, index: number) => (
+              { !loading && users.map((x: any, index: number) => (
                 <tr
                   key={index}
-                  className='bg-accent border-base-200 rounded-xl w-11/12 flex justify-between sm:justify-between px-4 h-16 xl:h-20 sm:px-10 items-center'
+                  className='bg-accent  border-base-200 rounded-xl w-11/12 flex justify-between sm:justify-between px-4 h-16 xl:h-20 sm:px-10 items-center'
                 >
                   <td>
                     <div className="flex items-center space-x-3">

diff --git a/frontend/code/src/components/Home/assets/css/style.css b/frontend/code/src/components/Home/assets/css/style.css
@@ -2,4 +2,5 @@
 .mystyle:hover {
     transition-duration: 300ms;
     fill: hsl(var(--p) / 1);
-}  
+}  
+
diff --git a/frontend/code/src/components/Home/index.tsx b/frontend/code/src/components/Home/index.tsx
@@ -1,15 +1,16 @@
 import { FC } from 'react'
-import {Layout} from '../Layout/'
 import { Button } from './assets/Button'
-import  Hero  from './assets/Hero.png'
 import { LeaderBoard } from './LeaderBoard'
 import { Link } from 'react-router-dom'
+import herosvg from './assets/Hero.png'
 export const Home : FC = () : JSX.Element =>{
+
     return (
-        <Layout>
+        <>
+
             <div className="flex flex-col items-center h-screen w-full sm:gap-y-8 gap-y-1">
                 <div className='flex justify-center relative items-start pt-6 h-2/6 max-h-48 sm:max-h-96 w-[90vw] sm:h-3/4 sm:w-[85vw]'>
-                    <img className='object-fit h-full w-full ' src={Hero} alt="bg hero" />
+                    <img className='w-full h-full object-cover object-top rounded-3xl' alt='leaderboard hero' src={herosvg} />
                     <Link to={"/Play"}><Button/></Link>
                 </div>
                 <div className='flex justify-center relative items-start pt-6 h-3/6 w-[90vw] sm:h-3/4 sm:w-[85vw]'>
@@ -18,7 +19,8 @@ export const Home : FC = () : JSX.Element =>{
                 </div>
 
             </div>
+        </>
 
-        </Layout>
+
     )
 }
diff --git a/frontend/code/src/components/Layout/Assets/Alert.tsx b/frontend/code/src/components/Layout/Assets/Alert.tsx
@@ -1,12 +1,22 @@
-import React from "react"
 
 export const Alert = () => { 
+
     return (
-        <div className="hover:cursor-pointer">
-        <svg className="flex justify-center items-center w-10 sm:w-12 hover:cursor-pointer" width="62" height="62" viewBox="0 0 62 62" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <>
+        <div className="hover:cursor-pointer dropdown">
+
+        <div tabIndex={0} className="dropdown-content z-[60] card card-compact w-64 p-2 shadow bg-base-200 text-primary-content relative -left-44 -bottom-32">
+            <div className="card-body">
+            <h3 className="card-title text-neutral">Notifacitions</h3>
+            <p>frend request</p>
+            </div>
+        </div>
+        <label tabIndex={0} className=""><svg className="flex justify-center items-center w-10 sm:w-12 hover:cursor-pointer" width="62" height="62" viewBox="0 0 62 62" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect width="62" height="62" rx="20" fill="black"/>
         <path d="M27.9189 40.1081C28.5314 39.9785 32.2636 39.9785 32.8761 40.1081C33.3997 40.229 33.966 40.5116 33.966 41.1286C33.9355 41.716 33.5909 42.2367 33.1148 42.5674C32.4974 43.0487 31.7729 43.3535 31.0155 43.4633C30.5966 43.5176 30.185 43.5188 29.7807 43.4633C29.0221 43.3535 28.2976 43.0487 27.6814 42.5662C27.2041 42.2367 26.8594 41.716 26.829 41.1286C26.829 40.5116 27.3952 40.229 27.9189 40.1081ZM30.4698 19C33.0185 19 35.6219 20.2093 37.1684 22.2158C38.1718 23.5078 38.6321 24.7986 38.6321 26.8051V27.327C38.6321 28.8658 39.0388 29.7728 39.9338 30.818C40.6121 31.588 40.8288 32.5765 40.8288 33.6488C40.8288 34.7199 40.4769 35.7367 39.7719 36.5623C38.8488 37.552 37.5471 38.1838 36.2186 38.2936C34.2934 38.4577 32.367 38.5959 30.415 38.5959C28.4618 38.5959 26.5366 38.5132 24.6114 38.2936C23.2817 38.1838 21.98 37.552 21.0582 36.5623C20.3531 35.7367 20 34.7199 20 33.6488C20 32.5765 20.218 31.588 20.895 30.818C21.818 29.7728 22.198 28.8658 22.198 27.327V26.8051C22.198 24.7443 22.7118 23.3967 23.77 22.0776C25.3433 20.1538 27.8652 19 30.3602 19H30.4698Z" fill="#8F8F8F"/>
         </svg>
+        </label>
         </div>
+        </>
     )
 }
diff --git a/frontend/code/src/components/Layout/Assets/Avatar.tsx b/frontend/code/src/components/Layout/Assets/Avatar.tsx
@@ -9,7 +9,7 @@ export const Avatar = () =>{
         </div>
         <ul tabIndex={0} className="dropdown-content z-50 right-0 top-10 menu p-2  shadow bg-base-100 rounded-box w-52">
             <li className="hover:bg-primary hover:rounded-xl transform duration-500"><div>Settings</div></li>
-            <Link to={"/Profile"}><li className="hover:bg-primary hover:rounded-xl transform duration-500"><div>Profile</div></li></Link>
+            <Link to={"Profile"}><li className="hover:bg-primary hover:rounded-xl transform duration-500"><div>Profile</div></li></Link>
         </ul>
         </div>
 

diff --git a/frontend/code/src/components/Layout/Assets/Dash.tsx b/frontend/code/src/components/Layout/Assets/Dash.tsx
@@ -1,8 +1,8 @@
 import { Link } from 'react-router-dom'
-export const Dash =  () => {
+export const Dash =  ({selected} : boolean | any) => {
     return (
-        <Link to={"/Home"}>
-            <div className="h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center hover:cursor-pointer">
+        <Link to={"Home"}>
+            <div className={`h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center hover:cursor-pointer ${selected && 'bg-secondary'}`}>
                 <svg  width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <rect  x="4" y="4" width="6" height="7" rx="1" stroke="#BDBDBD" strokeWidth="2" strokeLinejoin="round"/>
                 <rect x="4" y="15" width="6" height="5" rx="1" stroke="#BDBDBD" strokeWidth="2" strokeLinejoin="round"/>

diff --git a/frontend/code/src/components/Layout/Assets/Game.tsx b/frontend/code/src/components/Layout/Assets/Game.tsx
@@ -1,6 +1,6 @@
-export const Game = () => {
+export const Game = ({selected} : boolean | any) => {
     return (
-        <div className="h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center hover:cursor-pointer">
+        <div className={`h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center hover:cursor-pointer ${selected && 'bg-secondary'}`}>
             <svg   width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M7.79142 0C8.29642 0 8.69321 0.401326 8.69321 0.885278C8.69321 1.23939 8.9938 1.52268 9.35452 1.52268H10.5449C12.3605 1.53448 13.8394 2.98634 13.8514 4.7569V4.98117C14.9937 4.98117 16.1359 5.00477 17.2902 5.01658C21.4625 5.01658 24.5045 7.99111 24.5045 12.0988V17.3751C24.5045 21.4828 21.4625 24.4573 17.2902 24.4573C15.6189 24.4927 13.9476 24.5045 12.2643 24.5045C10.5809 24.5045 8.88559 24.4927 7.21428 24.4573C3.04202 24.4573 0 21.4828 0 17.3751V12.0988C0 7.99111 3.04202 5.01658 7.2263 5.01658C8.80142 4.99297 10.4126 4.96936 12.0478 4.96936V4.7687C12.0478 3.95424 11.3625 3.29324 10.5449 3.29324H9.35452C7.99583 3.29324 6.88964 2.20729 6.88964 0.885278C6.88964 0.401326 7.29845 0 7.79142 0ZM8.68118 11.7211C8.17618 11.7211 7.7794 12.1224 7.7794 12.6064V13.8458H6.50488C6.0119 13.8458 5.60309 14.2471 5.60309 14.731C5.60309 15.2268 6.0119 15.6163 6.50488 15.6163H7.7794V16.8675C7.7794 17.3515 8.17618 17.7528 8.68118 17.7528C9.17416 17.7528 9.58297 17.3515 9.58297 16.8675V15.6163H10.8455C11.3384 15.6163 11.7473 15.2268 11.7473 14.731C11.7473 14.2471 11.3384 13.8458 10.8455 13.8458H9.58297V12.6064C9.58297 12.1224 9.17416 11.7211 8.68118 11.7211ZM18.1319 15.9114H18.0117C17.5054 15.9114 17.1099 16.3127 17.1099 16.7967C17.1099 17.2924 17.5054 17.682 18.0117 17.682H18.1319C18.6249 17.682 19.0337 17.2924 19.0337 16.7967C19.0337 16.3127 18.6249 15.9114 18.1319 15.9114ZM16.0758 11.8509H15.9556C15.4506 11.8509 15.0538 12.2523 15.0538 12.7362C15.0538 13.232 15.4506 13.6215 15.9556 13.6215H16.0758C16.5688 13.6215 16.9776 13.232 16.9776 12.7362C16.9776 12.2523 16.5688 11.8509 16.0758 11.8509Z" fill="#BDBDBD"/>
             </svg>

diff --git a/frontend/code/src/components/Layout/Assets/Logo.tsx b/frontend/code/src/components/Layout/Assets/Logo.tsx
@@ -5,9 +5,9 @@ type sizes = {
 }
 export const Logo = ({x,y}:sizes ) => {
     return (
-        <Link to={"/Home"}>
+        <Link to={"Home"}>
             <div className="hover:cursor-pointer">
-                <svg className={`sm:w-${x}  w-${y} hover:fill-primary  hover:cursor-pointer`} width="95" height="51" viewBox="0 0 95 51" fill="none" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+                <svg className={`sm:w-${x}  w-${y} xl:w-20 xl:h-20 xl:pl-2 hover:fill-primary  hover:cursor-pointer`} width="95" height="51" viewBox="0 0 95 51" fill="none" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
                 <path d="M33.203 31.5552C29.731 31.5316 26.8972 34.3197 26.8735 37.7827C26.8498 41.2458 29.6452 44.0722 33.1172 44.0959C36.5892 44.1195 39.423 41.3313 39.4467 37.8683C39.4704 34.4053 36.675 31.5788 33.203 31.5552Z" fill="white"/>
                 <path d="M23.7568 49.8316L25.2388 50.844L29.9719 43.9511L28.49 42.9387L23.7568 49.8316Z" fill="white"/>
                 <path d="M3.98999 28.56V10.9558H7.58099L7.72181 13.765L7.0177 13.5543C7.12723 13.0705 7.44017 12.6179 7.95652 12.1965C8.48852 11.7751 9.16134 11.4318 9.97499 11.1665C10.7886 10.8855 11.6805 10.7451 12.6506 10.7451C13.9806 10.7451 15.1463 11.0182 16.1478 11.5644C17.1648 12.1107 17.9472 12.8676 18.4948 13.8352C19.0581 14.7872 19.3398 15.9031 19.3398 17.1828C19.3398 18.4469 19.0581 19.5628 18.4948 20.5304C17.9315 21.498 17.1413 22.2549 16.1243 22.8012C15.1072 23.3474 13.9337 23.6205 12.6037 23.6205C11.6336 23.6205 10.7417 23.48 9.92805 23.1991C9.1144 22.9026 8.44158 22.528 7.90958 22.0754C7.37758 21.6073 7.04899 21.1391 6.92381 20.6709L7.79223 20.3431V28.56H3.98999ZM11.6883 20.4602C12.4863 20.4602 13.1826 20.3275 13.7772 20.0622C14.3718 19.7813 14.8334 19.3989 15.162 18.9151C15.4906 18.4157 15.6549 17.8383 15.6549 17.1828C15.6549 16.5273 15.4906 15.9577 15.162 15.4739C14.8491 14.9745 14.3875 14.5921 13.7772 14.3268C13.1826 14.0459 12.4863 13.9054 11.6883 13.9054C10.8747 13.9054 10.1628 14.0459 9.55252 14.3268C8.95793 14.6077 8.49634 14.9979 8.16776 15.4973C7.83917 15.9811 7.67487 16.5429 7.67487 17.1828C7.67487 17.8383 7.83917 18.4157 8.16776 18.9151C8.49634 19.3989 8.95793 19.7813 9.55252 20.0622C10.1628 20.3275 10.8747 20.4602 11.6883 20.4602ZM46.1088 23.4098V10.9792H49.6763L49.8172 14.1863L48.8079 14.4204C49.0583 13.765 49.4338 13.1641 49.9345 12.6179C50.4509 12.056 51.1002 11.6034 51.8826 11.2601C52.6649 10.9012 53.5333 10.7217 54.4878 10.7217C55.6613 10.7217 56.6471 10.948 57.4451 11.4006C58.2431 11.8532 58.8455 12.4774 59.2523 13.2734C59.6748 14.0693 59.886 14.9745 59.886 15.9889V23.4098H56.1307V16.6912C56.1307 16.1294 56.0056 15.6377 55.7552 15.2164C55.5049 14.7794 55.1606 14.4516 54.7225 14.2332C54.2844 13.9991 53.7759 13.882 53.1969 13.882C52.6649 13.882 52.1955 13.9756 51.7887 14.1629C51.3819 14.3346 51.0298 14.5687 50.7325 14.8652C50.4509 15.1461 50.2396 15.4505 50.0988 15.7782C49.958 16.1059 49.8876 16.4337 49.8876 16.7614V23.4098H48.0099C47.431 23.4098 46.9772 23.4098 46.6486 23.4098C46.3357 23.4098 46.1557 23.4098 46.1088 23.4098ZM79.1294 28.7941C77.7212 28.7941 76.4616 28.638 75.3506 28.3259C74.2397 28.0137 73.34 27.6392 72.6515 27.2022L73.9424 24.4867C74.2866 24.6427 74.6856 24.8144 75.1394 25.0017C75.6088 25.189 76.133 25.345 76.7119 25.4699C77.2909 25.6103 77.9324 25.6806 78.6365 25.6806C79.4658 25.6806 80.1778 25.5323 80.7723 25.2358C81.3669 24.9393 81.8207 24.5023 82.1336 23.9248C82.4622 23.363 82.6265 22.6529 82.6265 21.7945V20.3899L83.3541 20.507C83.2289 21.0064 82.8847 21.4746 82.3214 21.9116C81.7738 22.333 81.0696 22.6763 80.2091 22.9416C79.3641 23.1913 78.4488 23.3162 77.463 23.3162C76.1643 23.3162 75.0142 23.0587 74.0128 22.5436C73.0114 22.0286 72.2291 21.3029 71.6658 20.3665C71.1181 19.4301 70.8443 18.3533 70.8443 17.136C70.8443 15.8718 71.1338 14.7638 71.7127 13.8118C72.3073 12.8442 73.1209 12.0873 74.1536 11.541C75.1863 10.9948 76.3677 10.7217 77.6977 10.7217C78.0889 10.7217 78.527 10.7685 79.0121 10.8621C79.5128 10.9402 80.0135 11.065 80.5142 11.2367C81.0305 11.3928 81.5078 11.5878 81.9459 11.8219C82.384 12.0404 82.7361 12.3057 83.0021 12.6179C83.2837 12.93 83.4402 13.2577 83.4715 13.6011L82.6969 13.7884L82.8378 10.9792H86.4053V21.7243C86.4053 22.8948 86.2097 23.9248 85.8185 24.8144C85.443 25.704 84.9188 26.4453 84.246 27.0383C83.5888 27.6314 82.8221 28.0684 81.9459 28.3493C81.0696 28.6458 80.1308 28.7941 79.1294 28.7941ZM78.7539 20.4134C79.5832 20.4134 80.2873 20.2807 80.8662 20.0154C81.4608 19.7345 81.9224 19.3521 82.251 18.8683C82.5796 18.3689 82.7439 17.7993 82.7439 17.1594C82.7439 16.5039 82.5796 15.9343 82.251 15.4505C81.9224 14.9667 81.4608 14.5843 80.8662 14.3034C80.2873 14.0225 79.5832 13.882 78.7539 13.882C77.9246 13.882 77.1892 14.0225 76.5476 14.3034C75.9218 14.5843 75.4367 14.9667 75.0925 15.4505C74.7482 15.9343 74.5761 16.5039 74.5761 17.1594C74.5761 17.7993 74.7482 18.3689 75.0925 18.8683C75.4367 19.3521 75.9218 19.7345 76.5476 20.0154C77.1892 20.2807 77.9246 20.4134 78.7539 20.4134Z" fill="white"/>