From 6231f287a006ea64cd5f6976fb0063d25681a786 Mon Sep 17 00:00:00 2001 From: ismail Date: Sat, 21 Oct 2023 10:10:19 +0100 Subject: [PATCH] ADD:RefreshT --- backend/code/src/main.ts | 4 +- docker-compose.yaml | 2 +- frontend/code/src/Api/base.tsx | 54 +++++++++++++++---- .../Components/FirstLogin/UploadAvatar.tsx | 32 +++++++++++ .../code/src/Components/FirstLogin/index.tsx | 21 ++++++-- frontend/code/src/Components/Game/index.tsx | 6 ++- frontend/code/src/Components/Layout/index.tsx | 23 ++++++-- .../src/Components/Settings/assets/Inputs.tsx | 23 ++++---- .../code/src/Components/Settings/index.tsx | 4 +- frontend/code/src/Stores/stores.ts | 6 ++- frontend/code/src/index.tsx | 7 ++- 11 files changed, 139 insertions(+), 43 deletions(-) create mode 100644 frontend/code/src/Components/FirstLogin/UploadAvatar.tsx diff --git a/backend/code/src/main.ts b/backend/code/src/main.ts index 9985380..4a603ab 100644 --- a/backend/code/src/main.ts +++ b/backend/code/src/main.ts @@ -16,8 +16,8 @@ async function bootstrap() { const corsOptions = { origin: [ 'http://localhost:3000', - 'http://142.93.161.63/', - 'http://164.92.243.105/', + 'http://142.93.161.63', + 'http://164.92.243.105', ], credentials: true, }; diff --git a/docker-compose.yaml b/docker-compose.yaml index 2a4c8c9..83e8ba5 100644 --- a/docker-compose.yaml +++ b/docker-compose.yaml @@ -44,8 +44,8 @@ services : - backend ports: - 80:80 - - 3001:3001 init: true + restart: always volumes: front: diff --git a/frontend/code/src/Api/base.tsx b/frontend/code/src/Api/base.tsx index 7b84c12..b11ff40 100644 --- a/frontend/code/src/Api/base.tsx +++ b/frontend/code/src/Api/base.tsx @@ -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', - - }, -}); \ No newline at end of file +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; diff --git a/frontend/code/src/Components/FirstLogin/UploadAvatar.tsx b/frontend/code/src/Components/FirstLogin/UploadAvatar.tsx new file mode 100644 index 0000000..8e5d31c --- /dev/null +++ b/frontend/code/src/Components/FirstLogin/UploadAvatar.tsx @@ -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() + const onSubmit: SubmitHandler = (data) => console.log(data) + + + + return ( +
+ + + + + {errors.AvatarRequired && This field is required} + + + +
+ ) +} \ No newline at end of file diff --git a/frontend/code/src/Components/FirstLogin/index.tsx b/frontend/code/src/Components/FirstLogin/index.tsx index 00696fe..c7709df 100644 --- a/frontend/code/src/Components/FirstLogin/index.tsx +++ b/frontend/code/src/Components/FirstLogin/index.tsx @@ -1,9 +1,22 @@ -export const FirstLogin = () => -{ +import { UploadAvatar } from "./UploadAvatar"; +export const FirstLogin = () => { return ( -
-
+ <> +
+ +
+ +
+
+ Avatar +
+ +
+ +
+ + ); } diff --git a/frontend/code/src/Components/Game/index.tsx b/frontend/code/src/Components/Game/index.tsx index bded340..840ce3c 100644 --- a/frontend/code/src/Components/Game/index.tsx +++ b/frontend/code/src/Components/Game/index.tsx @@ -47,6 +47,7 @@ export const Game = () => { // },[gameState.height, gameState.width]) + /* eslint-disable */ useEffect(() => { window.addEventListener('resize', () => { const divh = document.getElementById('Game')?.offsetHeight @@ -58,7 +59,8 @@ export const Game = () => { if(gameState.p1Score === 0 && gameState.p2Score === 0) { gameState.setBall({x:0.5 * gameState.width,y:0.5 * gameState.height,speed:0,cx:gameState.height /100,cy:gameState.height /100}) } - },) + // disable + },[]) useEffect(() => { const divh = document.getElementById('Game')?.offsetHeight @@ -100,7 +102,7 @@ export const Game = () => { },20); return () => clearInterval(oldinter) } - },[gameState.width , gameState.height , first , gameState]) + },[gameState.width , gameState.height]) console.log(gameState.lPaddle) return (
diff --git a/frontend/code/src/Components/Layout/index.tsx b/frontend/code/src/Components/Layout/index.tsx index 7d72bbc..c906065 100644 --- a/frontend/code/src/Components/Layout/index.tsx +++ b/frontend/code/src/Components/Layout/index.tsx @@ -13,9 +13,16 @@ 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 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 ( +
+
+ ) +} const useCurrentPath = () => { const location = useLocation() const [{route}] :any = matchRoutes(routes, location) @@ -26,6 +33,7 @@ export const Layout : FC = () : JSX.Element => { const user = useUserStore(); const navigate = useNavigate(); + useLayoutEffect(() => { const log = async() => { try{ @@ -47,13 +55,18 @@ export const Layout : FC = () : JSX.Element => } log() - }) + //eslint-disable-next-line + },[]) const path : string = useCurrentPath() const obj = {x:"30",y:"20"} return ( <> - {user.isLogged && -
+ {/* { + !user.profileComplet && + } */} + {user.isLogged && !user.profileComplet && } + {user.isLogged && +
diff --git a/frontend/code/src/Components/Settings/assets/Inputs.tsx b/frontend/code/src/Components/Settings/assets/Inputs.tsx index 86e6ff3..bab8789 100644 --- a/frontend/code/src/Components/Settings/assets/Inputs.tsx +++ b/frontend/code/src/Components/Settings/assets/Inputs.tsx @@ -5,7 +5,7 @@ import { useState } from 'react'; import { useForm } from 'react-hook-form'; import { useUserStore } from '../../../Stores/stores' import toast from 'react-hot-toast'; -import { api } from '../../../Api/base'; +import api from '../../../Api/base'; interface MyComponentProps { name: string; data:string; @@ -13,8 +13,8 @@ interface MyComponentProps { } const ERROR_MESSAGES = ["Field is required" , "Require min length of " , "Passed max length of"] - const getdata :any = async(data : any , payload : any) => { - try { + const postData :any = async(data : any , payload : any) : Promise => { + const key = payload; // Replace with your actual payload key const value = data[payload]; // Replace with your actual payload value @@ -22,15 +22,15 @@ interface MyComponentProps { [key]: value, }; - await api.post("/profile/me",{...ndata}) - - } catch (error) { - console.log(error) - } + const res = await api.post("/profile/me",{...ndata}) + console.log(res.data) + return res.data.message + } export const Inputs = (props:MyComponentProps) => { var payload = props.payload const user = useUserStore(); + //eslint-disable-next-line const { register, handleSubmit, reset, formState: {errors} } = useForm(); const handleError = (errors : any) => { if (errors[`${props.payload}`]?.type === "required") toast.error(`${props.name} ${ERROR_MESSAGES[0]} `); @@ -39,20 +39,18 @@ export const Inputs = (props:MyComponentProps) => { } const onSubmit = (data : any ) => { - console.log(data) toast.promise( - getdata(data, payload), + postData(data, payload), { loading: 'Saving...', success: {props.name} saved, - error: could not save, + error: could not save {this}, }, {className:"font-poppins font-bold relative top-[6vh] bg-base-100 text-white"} ) - console.log(errors) switch (props.name) { case "First name" : user.updateFirstName(data[`${props.payload}`]); @@ -67,7 +65,6 @@ export const Inputs = (props:MyComponentProps) => { break; } - console.log(`user from state after = ${user.name.first}`) }; const [input, setInput] = useState(false) diff --git a/frontend/code/src/Components/Settings/index.tsx b/frontend/code/src/Components/Settings/index.tsx index a2db1c0..5d6b48b 100644 --- a/frontend/code/src/Components/Settings/index.tsx +++ b/frontend/code/src/Components/Settings/index.tsx @@ -3,14 +3,14 @@ import { Edit } from "./assets/Edit"; import Newbie from "../Badges/Newbie.svg"; import Master from "../Badges/Master.svg"; import Ultimate from "../Badges/Ultimate.svg"; -import { api as axsios } from "../../Api/base"; +import api from "../../Api/base"; import toast from "react-hot-toast"; import { useState, useEffect } from "react"; import { Inputs } from "./assets/Inputs"; import { useUserStore } from "../../Stores/stores"; export const Setting = () => { const getdata: any = async () => { - const data: any = await axsios.get("/test"); + const data: any = await api.get("/test"); return data; }; diff --git a/frontend/code/src/Stores/stores.ts b/frontend/code/src/Stores/stores.ts index ec97bc4..0d60f97 100644 --- a/frontend/code/src/Stores/stores.ts +++ b/frontend/code/src/Stores/stores.ts @@ -1,6 +1,6 @@ import { create } from "zustand"; import { persist, createJSONStorage } from "zustand/middleware"; -import { api } from "../Api/base"; +import api from "../Api/base"; export type State = { isLogged: boolean; id: string; @@ -21,6 +21,7 @@ export type State = { banListIds: string[]; achivments: number[]; dmsIds: string[]; + profileComplet:boolean; history: | [ { @@ -79,6 +80,7 @@ export const useUserStore = create()( dmsIds: [], history: [], chatRoomsJoinedIds: [], + profileComplet:false, toggleTfa: (tfa) => set(() => ({ tfa: !tfa })), updateFirstName: (firstName) => set((state) => ({ @@ -103,7 +105,6 @@ export const useUserStore = create()( login: async () => { const res = await api.get("/profile/me"); - res.data.picture = null; const user_data = res.data; const userInitialValue :State= { @@ -129,6 +130,7 @@ export const useUserStore = create()( dmsIds: [], history: [], chatRoomsJoinedIds: [], + profileComplet:user_data.profileFinished, }; console.log(userInitialValue) set({ ...userInitialValue }); diff --git a/frontend/code/src/index.tsx b/frontend/code/src/index.tsx index 151b52a..1b7cbad 100644 --- a/frontend/code/src/index.tsx +++ b/frontend/code/src/index.tsx @@ -13,8 +13,13 @@ root.render( position="top-right" reverseOrder={false} toastOptions={{ + style:{ + background:"#7247c8", + color:"white" + + }, className: "relative top-[6vh] bg-base-100 text-white", - duration: 5000 + duration: 3000 }} />