Skip to content

Commit

Permalink
ADD:new routing system
Browse files Browse the repository at this point in the history
ADD:fetch checks
  • Loading branch information
ismail-kharrobi committed Sep 6, 2023
1 parent 3f5494d commit 9ef004d
Show file tree
Hide file tree
Showing 9 changed files with 144 additions and 58 deletions.
45 changes: 45 additions & 0 deletions frontend/code/src/Routes/ReactTouter.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { createBrowserRouter , RouterProvider } from "react-router-dom";
import { Login } from "../components/Login";
const router = createBrowserRouter([
{
path:"/",
element:<Login/>,
},
{
path:"/Home",
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/index")
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/404/")
return { Component: Error }},
},
])

export const AllRouters = () => {
return (
<RouterProvider router={router} />
)
}
6 changes: 3 additions & 3 deletions frontend/code/src/components/Layout/Assets/Avatar.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import avatart from '../images/avatar.jpg'
import { Link } from "react-router-dom";

import './style.css'
export const Avatar = () =>{
return (
<div className="avatar online dropdown hover:cursor-pointer">
<div tabIndex={0} className="w-10 sm:w-12 rounded-xl">
<div className="avatar myonline dropdown hover:cursor-pointer">
<div tabIndex={0} className="w-10 sm:w-12 rounded-full">
<img alt="profile " src={avatart} />
</div>
<ul tabIndex={0} className="dropdown-content z-50 right-0 top-10 menu p-2 shadow bg-base-100 rounded-box w-52">
Expand Down
2 changes: 1 addition & 1 deletion frontend/code/src/components/Layout/Assets/Profile.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import {Link} from 'react-router-dom'

export const Profile = () => {
return (
<Link to={"/Profile"}>
<Link to={"/Profile/1ea7e67fb3b0cf97"}>
<div className="h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center hover:cursor-pointer">
<svg width="19" height="24" viewBox="0 0 19 24" fill="#BDBDBD" xmlns="http://www.w3.org/2000/svg">
<path d="M9.3615 15.416C14.4385 15.416 18.723 16.241 18.723 19.4239C18.723 22.608 14.4104 23.4037 9.3615 23.4037C4.28566 23.4037 0 22.5788 0 19.3958C0 16.2117 4.31259 15.416 9.3615 15.416ZM9.3615 0C12.8008 0 15.5565 2.75465 15.5565 6.19152C15.5565 9.6284 12.8008 12.3842 9.3615 12.3842C5.92337 12.3842 3.16654 9.6284 3.16654 6.19152C3.16654 2.75465 5.92337 0 9.3615 0Z" fill="#BDBDBD"/>
Expand Down
16 changes: 16 additions & 0 deletions frontend/code/src/components/Layout/Assets/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
.avatar.myonline:before {
content: "";
position: absolute;
z-index: 10;
display: block;
border-radius: 9999px;
--tw-bg-opacity: 1;
background-color: hsl(var(--su) / var(--tw-bg-opacity));
outline-style: solid;
outline-width: 2px;
outline-color: hsl(var(--b1) / 1);
width: 25%;
height: 25%;
bottom: 0;
right: 0;
}
4 changes: 4 additions & 0 deletions frontend/code/src/components/Loading.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export const Loading = () => {
return (<span className="relative top-14 left-10 loading loading-bars loading-lg"></span>)

}
4 changes: 2 additions & 2 deletions frontend/code/src/components/Profile/History.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { Chart } from './assets/Chart'
import { Table } from './assets/Table'
export const History = () => {
export const History = (props:any) => {
return (
<div className='flex flex-col rounded-2xl justify-start items-start mt-6 sm:h-full h-full w-full bg-base-200 overflow-scroll no-scrollbar'>
<div className="flex justify-start items-start pl-2 pt-2 sm:pl-12 sm:pt-12 gap-x-4 py-4">
<Chart/> <span className='font-montserrat'>Matches History</span>

</div>
<Table />
<Table props={props}/>
</div>
)
}
51 changes: 36 additions & 15 deletions frontend/code/src/components/Profile/assets/Table.tsx
Original file line number Diff line number Diff line change
@@ -1,31 +1,52 @@
import { useState,useEffect } from 'react'
import { Link } from 'react-router-dom'
import { Loading } from '../../Loading';
import { useParams } from 'react-router-dom';
const Load = (size:any) => {
return (
<span className={`loading loading-ring loading-${size}`}></span>
)
}




export const Table = () =>
export const Table = (props:any) =>
{
const [users, setUsers] = useState<any | undefined>([])
const param = useParams();
const [users, setUsers] = useState<any | undefined>([]);
const [enemys , setEnemys] = useState<any | undefined>([]);
useEffect( () => {
setUsers([])
setEnemys([])
const fetchdata = async() =>{
for (let i = 0 ; i < 5 ; ++i)
{
for (let i = 0 ; i < 5 ; ++i){
let response = await fetch(`https://randomuser.me/api/`)
let data = await response.json()
if (data.results && data.results.length > 0) {
console.log(data)
const newUser = data.results[0];
newUser.seed = data.info.seed;
console.log(newUser)
setEnemys((oldUsers : any) => [...oldUsers, newUser]);
}
}
for (let i = 0 ; i < 5 ; ++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];
newUser.seed = data.info.seed;
console.log(newUser)
setUsers((oldUsers : any) => [...oldUsers, newUser]);
}
}
}
}
fetchdata().catch(console.error)
},[])
},[param])
return (
<div className=" no-scrollbar w-full ">
<table className="table w-full ">

<tbody className='flex flex-col justify-start items-center gap-y-2 md:gap-y-4'>
{users.map((x: any,index:number, elemetns: any) => (
{users.map((x: any ,index:number) => (
<tr
key={index}
className='bg-primary border-base-200 grow-0 rounded-xl w-11/12 flex justify-center md:justify-evenly px-1 items-center h-16 md:h-24'
Expand All @@ -39,14 +60,14 @@ export const Table = () =>
</td>
<td className='px-1 flex justify-center items-center md:gap-x-2 grow gap-y-1 w-auto'>
<div className=" flex justify-start items-center gap-x-2 md:gap-x-10 w-full">
<div className="flex justify-center items-center text-xs font-poppins font-medium w-20 md:w-28 text-neutral">{x.name.first}</div>
<img className='md:rounded-2xl rounded-xl h-8 md:h-12' src={x.picture.thumbnail} alt="Avatar Tailwind CSS Component" />
{x?.name?.first ? <div className="flex justify-center items-center text-xs font-poppins font-medium w-20 md:w-28 text-neutral">{x.name.first}</div> : <Loading/>}
{x?.seed ? <Link to={`/Profile/${x.seed}`}><img className='md:rounded-2xl rounded-xl h-8 md:h-12' src={x.picture.thumbnail} alt="Avatar Tailwind CSS Component" /> </Link> : <Loading/>}
<div className='flex flex-row items-center gap-x-1 justify-center w-16 md:w-20 h-6 rounded-r-3xl rounded-l-3xl bg-neutral text-accent font-poppins'>
<span className='font-poppins font-medium'>1</span><span className='font-poppins font-medium'> : </span><span className='font-poppins font-medium'>1</span>
</div>
<img className='md:rounded-2xl rounded-xl h-8 md:h-12' src={ users[Math.floor(users.length % (Math.random()* users.length - 1))].picture.thumbnail} alt="Avatar Tailwind CSS Component" />
<div className="flex justify-center items-center text-xs font-poppins font-medium w-20 md:w-28 text-neutral">{ elemetns[Math.floor(elemetns.length % (Math.random()* elemetns.length - 1))].name.first}</div>


{enemys[index]?.seed ? <Link to={`/Profile/${x.seed}`}><img className='md:rounded-2xl rounded-xl h-8 md:h-12' src={enemys[index].picture.thumbnail } alt="Avatar Tailwind CSS Component" /> </Link> : <Load props={"lg"}/>}
<div className="flex justify-center items-center text-xs font-poppins font-medium w-20 md:w-28 text-neutral">{enemys[index]?.name?.first ? enemys[index].name.first : <Load props={"sm"}/>} </div>
</div>
</td>
<td className='flex px-1 grow-0 justify-end items-center gap-x-1 w-auto'><div className='w-18 text-lime-400'> + 1</div></td>
Expand Down
29 changes: 24 additions & 5 deletions frontend/code/src/components/Profile/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,22 @@ import { Master } from './assets/Master'
import { Ultimate } from './assets/Ultimate'
import { History } from './History'
import Hero from './assets/Hero.gif'
import { useState , useEffect } from 'react'
import { useParams } from 'react-router-dom'
import { Loading } from '../Loading'
export const Profile = () =>{
const params = useParams()
const [user, setUser] = useState<null | any>(undefined);
useEffect(() => {
const fetchUser = async() => {
const response = await fetch(`https://randomuser.me/api?seed=${params.id}`)
const data = await response.json();
const collecteduser = data.results[0]
console.log(collecteduser)
setUser(collecteduser)
}
fetchUser();
},[params])
return (
<Layout>
<div className=" flex flex-col items-center h-full min-h-screen">
Expand All @@ -17,17 +32,21 @@ export const Profile = () =>{
<img className='flex-1 w-full h-full rounded-t-3xl' src={Hero} alt="bg hero" />
<Pong/>
<div className="avatar w-[10vw] absolute z-40 -bottom-4 sm:-bottom-6 md:-bottom-11 left-6 sm:left-12 ">
<div className="w-[13vw] xl:w-[8vw] rounded-full ring ring-neutral ring-offset-base-100 ring-offset-1">
<img src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" alt="profile avatar" />
<div className="w-[13vw] xl:w-[8vw] rounded-full ring ring-neutral flex justify-center items-center ring-offset-base-100 ring-offset-1">
{
user?.picture?.large ? <img src={user?.picture?.large} alt="profile avatar" />: <Loading/>
}

</div>
</div>
<div className='absolute top-0 bg-gray-300-80 opacity-40 object-contain h-full w-full rounded-t-3xl z-10'></div>


</div>
<div className='relative flex flex-col gap-y-2 sm:gap-y-0 pl-4 sm:pt-12 pt-6 text-neutral font-montserrat bg-base-200 justify-start items-start h-[35%] min-h-[30%] rounded-b-3xl w-[85vw] overflow-scroll no-scrollbar'>
<h6>Mark Zzzz</h6>
<div className="flex justify-center items-center gap-x-2">
{
user?.name?.first ? <h6>{user?.name?.first} </h6>: <Loading/>
} <div className="flex justify-center items-center gap-x-2">
<File/>
<span className='text-xs font-mono '>bio bla bla bla</span>
</div>
Expand All @@ -44,7 +63,7 @@ export const Profile = () =>{
</div>
</div>
<div className="relative flex w-[85vw] justify-center h-auto">
<History/>
<History props={params.id}/>
</div>
</div>
</Layout>
Expand Down
45 changes: 13 additions & 32 deletions frontend/code/src/index.tsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,17 @@
import './index.css';
import React from 'react';
import { Toaster } from 'react-hot-toast';
import { UserContextProvider } from './Context';
import ReactDOM from 'react-dom/client';
import './index.css';
import {Login} from './components/Login'
import {Main} from './components/Login/main'
import {Lobby} from './components/Lobby/index'
import {Error} from './components/404/index'
import {Profile} from './components/Profile'
import reportWebVitals from './reportWebVitals';
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Home } from './components/Home';
import { Play } from './components/Play';
import { Setting } from './components/Settings';
import { Toaster } from 'react-hot-toast';
import { UserContextProvider } from './Context';
import { AllRouters } from './Routes/ReactTouter';

const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
// <React.StrictMode>
<>
<Toaster
position="top-right"
reverseOrder={false}
Expand All @@ -26,25 +20,12 @@ root.render(
duration: 5000
}}
/>

<BrowserRouter>
<UserContextProvider>
<Routes>
<Route path="/" element={<Login />}></Route>
<Route path="/main" element={<Main/>}></Route>
<Route path="/lobby" element={<Lobby/>}></Route>
<Route path="/home" element={<Home/>}></Route>
<Route path="/profile" element={<Profile/>}></Route>
<Route path="/play" element={<Play/>}></Route>
<Route path="/Settings" element={<Setting/>}></Route>
<Route path="/*" element={<Error/>}></Route>
</Routes>
</UserContextProvider>
</BrowserRouter>
</React.StrictMode>
<UserContextProvider>
<AllRouters/>
</UserContextProvider>
</>
// </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

0 comments on commit 9ef004d

Please sign in to comment.