-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
11 changed files
with
231 additions
and
136 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -44,8 +44,8 @@ services : | |
| - backend | ||
| ports: | ||
| - 80:80 | ||
| - 3001:3001 | ||
| init: true | ||
| restart: always | ||
|
|
||
| volumes: | ||
| front: | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,43 @@ | ||
| import axios from 'axios' | ||
| export const api = axios.create({ | ||
| baseURL: `${process.env.REACT_APP_API_ENDPOINT}`, | ||
| timeout: 10000, | ||
| withCredentials:true, | ||
| headers: { | ||
| "Cache-Control": "no-cache", | ||
| 'Content-Type': 'application/json', | ||
|
|
||
| }, | ||
| }); | ||
| import axios from 'axios'; | ||
| import toast from 'react-hot-toast'; | ||
|
|
||
| const api = axios.create({ | ||
| baseURL: `${process.env.REACT_APP_API_ENDPOINT}`, | ||
| timeout: 10000, | ||
| withCredentials: true, | ||
| headers: { | ||
| "Cache-Control": "no-cache", | ||
| 'Content-Type': 'application/json', | ||
| }, | ||
| }); | ||
|
|
||
| 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 | ||
| } | ||
| } | ||
| else | ||
| { | ||
| toast.error(`${error.response.data.message}`) | ||
| } | ||
| return Promise.reject({ ...error }); | ||
| }; | ||
|
|
||
| api.interceptors.response.use( | ||
|
|
||
| (response) => response, | ||
| (error) => errorHandler(error) | ||
| ); | ||
|
|
||
| export default api; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import { useForm, SubmitHandler } from "react-hook-form" | ||
|
|
||
|
|
||
| type Inputs = { | ||
| Avatar: string | ||
| AvatarRequired: string | ||
| } | ||
|
|
||
|
|
||
| export const UploadAvatar = () => { | ||
| const { | ||
| register, | ||
| handleSubmit, | ||
| formState: { errors }, | ||
| } = useForm<Inputs>() | ||
| const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data) | ||
|
|
||
|
|
||
|
|
||
| return ( | ||
| <form onSubmit={handleSubmit(onSubmit)}> | ||
| <input type="file" {...register("Avatar")} /> | ||
|
|
||
|
|
||
| <input {...register("AvatarRequired", { required: true })} /> | ||
| {errors.AvatarRequired && <span>This field is required</span>} | ||
|
|
||
|
|
||
| <input type="submit" /> | ||
| </form> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,22 @@ | ||
|
|
||
| export const FirstLogin = () => | ||
| { | ||
| import { UploadAvatar } from "./UploadAvatar"; | ||
| export const FirstLogin = () => { | ||
| return ( | ||
| <div className="flex h-screen bg-base-100"> | ||
| <div className="h-12 w-12 "></div> | ||
| <> | ||
| <div className="absolute h-full w-full bg-black opacity-40 z-20"></div> | ||
|
|
||
| <div className="z-30 absolute h-[70vh] opacity-90 rounded-3xl w-[50vw] top-1/4 right-1/4 bg-base-100 shadow-2xl shadow-white border-4 border-white"> | ||
|
|
||
| <div className="flex flex-col p-10 gap-6 justify-center items-center content-center"> | ||
| <div> | ||
| Avatar | ||
| </div> | ||
| <UploadAvatar/> | ||
| </div> | ||
|
|
||
|
|
||
| </div> | ||
| </> | ||
|
|
||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,108 +1,120 @@ | ||
| import { Logo } from "./Assets/Logo"; | ||
| import { Alert } from "./Assets/Alert"; | ||
| import { Avatar } from "./Assets/Avatar"; | ||
| import { Search } from "./Assets/Search"; | ||
| import { Dash } from "./Assets/Dash"; | ||
| import { Game } from "./Assets/Game"; | ||
| import { Message } from "./Assets/Message"; | ||
| import { Profile } from "./Assets/Profile"; | ||
| import { Settings } from "./Assets/Settings"; | ||
| import { Out } from "./Assets/Out"; | ||
| import { FC, PropsWithChildren, useLayoutEffect } from "react"; | ||
| import { Outlet } from "react-router"; | ||
| import { matchRoutes, useLocation } from "react-router-dom"; | ||
| import { useUserStore } from "../../Stores/stores"; | ||
| import { useNavigate } from "react-router-dom"; | ||
| import { api } from "../../Api/base"; | ||
| const routes = [ | ||
| { path: "Profile/:id" }, | ||
| { path: "Settings" }, | ||
| { path: "Home" }, | ||
| { path: "Chat" }, | ||
| { path: "Play" }, | ||
| { path: "Pure" }, | ||
| { path: "Game" }, | ||
| ]; | ||
| import { Logo } from './Assets/Logo' | ||
| import { Alert } from './Assets/Alert' | ||
| import { Avatar } from './Assets/Avatar' | ||
| import { Search } from './Assets/Search' | ||
| import { Dash } from './Assets/Dash' | ||
| import { Game } from './Assets/Game' | ||
| import { Message } from './Assets/Message' | ||
| import { Profile } from './Assets/Profile' | ||
| import { Settings } from './Assets/Settings' | ||
| import { Out } from './Assets/Out' | ||
| import { FC,PropsWithChildren, useLayoutEffect } from 'react' | ||
| import { Outlet ,} from 'react-router' | ||
| import { matchRoutes, useLocation } from "react-router-dom" | ||
| import { useUserStore } from '../../Stores/stores' | ||
| import { useNavigate } from 'react-router-dom' | ||
| import api from '../../Api/base' | ||
| // import { FirstLogin } from '../FirstLogin' | ||
|
|
||
| const routes = [{ path: "Profile/:id" } , {path : "Settings"} , {path : "Home"}, {path:"Chat"} , {path:"Play"}, {path:"Pure"}, {path:"Game"}] | ||
| const HideBg = () => { | ||
| return ( | ||
| <div className='absolute h-screen bg-black opacity-20 blur-xl z-[1999]'> | ||
| </div> | ||
| ) | ||
| } | ||
| const useCurrentPath = () => { | ||
| const location = useLocation(); | ||
| const [{ route }]: any = matchRoutes(routes, location); | ||
| return route.path; | ||
| }; | ||
| const location = useLocation() | ||
| const [{route}] :any = matchRoutes(routes, location) | ||
| return route.path | ||
| } | ||
|
|
||
| export const Layout: FC<PropsWithChildren> = (): JSX.Element => { | ||
| const user = useUserStore(); | ||
| const navigate = useNavigate(); | ||
| useLayoutEffect(() => { | ||
| const log = async () => { | ||
| try { | ||
| await user.login(); | ||
| } catch (e) { | ||
| try { | ||
| await api.get("/auth/refresh"); | ||
| await user.login(); | ||
| } catch (e) { | ||
| navigate("/"); | ||
| user.logout(); | ||
| } | ||
| } | ||
| }; | ||
| log(); | ||
| export const Layout : FC<PropsWithChildren> = () : JSX.Element => | ||
| { | ||
| const user = useUserStore(); | ||
| const navigate = useNavigate(); | ||
|
|
||
| // eslint-disable-next-line | ||
| }, []); | ||
| const path: string = useCurrentPath(); | ||
| const obj = { x: "30", y: "20" }; | ||
| return ( | ||
| useLayoutEffect(() => { | ||
| const log = async() => { | ||
| try{ | ||
| await user.login() | ||
| } | ||
| catch(e) | ||
| { | ||
| try | ||
| { | ||
| await api.get("/auth/refresh") | ||
| await user.login() | ||
| }catch(e) | ||
| { | ||
| navigate("/") | ||
| user.logout() | ||
| } | ||
|
|
||
| } | ||
|
|
||
| } | ||
| log() | ||
| //eslint-disable-next-line | ||
| },[]) | ||
| const path : string = useCurrentPath() | ||
| const obj = {x:"30",y:"20"} | ||
| return ( | ||
| <> | ||
| {user.isLogged && ( | ||
| <div data-theme="mytheme" className=" h-screen "> | ||
| <div className=" flex flex-row w-screen h-[8vh] bg-base-200"> | ||
| <div className="flex justify-start items-center z-50 pl-1 sm:pl-2 h-full w-full"> | ||
| <Logo {...obj} /> | ||
| </div> | ||
| <div className="flex items-center justify-end pr-6 gap-6 h-full w-full"> | ||
| <Search /> | ||
| <Alert /> | ||
| <Avatar picture={`${user.picture.medium}`} /> | ||
| </div> | ||
| </div> | ||
| <div className="flex"> | ||
| <div className="sm:flex flex-col hidden justify-around items-stretch h-[92vh] bg-base-200 overflow-auto md:pt-10 sm:w-[11vw] md:w-[9vw] lg:w-[8vw] xl:w-[7vw] 2xl:w-[6vw] 3xl:w-[5vw]"> | ||
| <div className="flex flex-col pl-[1.4vw] justify-evenly content-start gap-y-10 pb-44 "> | ||
| <Dash selected={path === "Home" ? true : false} /> | ||
| <Game selected={path === "Play" ? true : false} /> | ||
| <Message selected={path === "Chat" ? true : false} /> | ||
| <Profile selected={path === "Profile/:id" ? true : false} /> | ||
| <Settings selected={path === "Settings" ? true : false} /> | ||
| </div> | ||
| <div className="flex flex-col pl-[1vw] justify-start"> | ||
| <Out /> | ||
| </div> | ||
| {/* { | ||
| !user.profileComplet && <FirstLogin/> | ||
| } */} | ||
| {user.isLogged && !user.profileComplet && <HideBg/>} | ||
| {user.isLogged && | ||
| <div data-theme="mytheme" className={`h-screen ${!user.profileComplet ? "":""}`}> | ||
|
|
||
| <div className=' flex flex-row w-screen h-[8vh] bg-base-200'> | ||
| <div className='flex justify-start items-center z-50 pl-1 sm:pl-2 h-full w-full'> | ||
| <Logo {...obj}/> | ||
| </div> | ||
| <div className='flex items-center justify-end pr-6 gap-6 h-full w-full'> | ||
| <Search/> | ||
| <Alert /> | ||
| <Avatar picture={`${user.picture.medium}`} /> | ||
| </div> | ||
| </div> | ||
| <div className=" h-[8vh] fixed bottom-0 sm:hidden btm-nav bg-base-200 flex justify-end z-50"> | ||
| <button className=""> | ||
| <Dash selected={path === "Home" ? true : false} /> | ||
| </button> | ||
| <button className=""> | ||
| <Game selected={path === "Play" ? true : false} /> | ||
| </button> | ||
| <button className=""> | ||
| <Message selected={path === "Chat" ? true : false} /> | ||
| </button> | ||
| <button className=""> | ||
| <Profile selected={path === "Profile/:id" ? true : false} /> | ||
| </button> | ||
| <button className=""> | ||
| <Settings selected={path === "Settings" ? true : false} /> | ||
| </button> | ||
| <div className='flex'> | ||
|
|
||
| <div className='sm:flex flex-col hidden justify-around items-stretch h-[92vh] bg-base-200 overflow-auto md:pt-10 sm:w-[11vw] md:w-[9vw] lg:w-[8vw] xl:w-[7vw] 2xl:w-[6vw] 3xl:w-[5vw]'> | ||
| <div className="flex flex-col pl-[1.4vw] justify-evenly content-start gap-y-10 pb-44 "> | ||
| <Dash selected={path === "Home" ? true : false}/> | ||
| <Game selected={path === "Play" ? true : false}/> | ||
| <Message selected={path === "Chat" ? true : false}/> | ||
| <Profile selected={path === "Profile/:id" ? true : false}/> | ||
| <Settings selected={path === "Settings" ? true : false}/> | ||
| </div> | ||
| <div className="flex flex-col pl-[1vw] justify-start"> | ||
| <Out/> | ||
| </div> | ||
| </div> | ||
| <div className="sm:-ml-4 sm:w-[92vw] xl:w-[96vw] md:w-[93.5vw] w-screen right-0 z-10 h-[84vh] sm:h-[92vh] bg-accent sm:rounded-tl-2xl"> | ||
| <Outlet /> | ||
| <div className=" h-[8vh] fixed bottom-0 sm:hidden btm-nav bg-base-200 flex justify-end z-50"> | ||
| <button className=""> | ||
| <Dash selected={path === "Home" ? true : false} /> | ||
| </button> | ||
| <button className=""> | ||
| <Game selected={path === "Play" ? true : false}/> | ||
| </button> | ||
| <button className=""> | ||
| <Message selected={path === "Chat" ? true : false}/> | ||
| </button> | ||
| <button className=""> | ||
| <Profile selected={path === "Profile/:id" ? true : false}/> | ||
| </button> | ||
| <button className=""> | ||
| <Settings selected={path === "Settings" ? true : false}/> | ||
| </button> | ||
| </div> | ||
| <div className='sm:-ml-4 sm:w-[92vw] xl:w-[96vw] md:w-[93.5vw] w-screen right-0 z-10 h-[84vh] sm:h-[92vh] bg-accent sm:rounded-tl-2xl'> | ||
| <Outlet/> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| )} | ||
| } | ||
| </> | ||
| ); | ||
| }; | ||
| ) | ||
| } |
Oops, something went wrong.