From 1add959bb60dcd4b5d1c721d35cb99ff8487dd9b Mon Sep 17 00:00:00 2001 From: ismail Date: Mon, 6 Nov 2023 21:27:49 +0100 Subject: [PATCH 1/2] SAVE --- backend/code/package.json | 2 +- backend/code/src/main.ts | 1 + docker-compose.yaml | 3 ++ frontend/code/src/Api/base.tsx | 52 ++++++++++--------- frontend/code/src/Components/Login/index.tsx | 10 +++- .../code/src/Components/Profile/index.tsx | 8 ++- .../src/Components/Settings/assets/Inputs.tsx | 18 +++++-- frontend/code/src/Stores/stores.ts | 2 + nginx/default.conf | 12 ++++- 9 files changed, 75 insertions(+), 33 deletions(-) diff --git a/backend/code/package.json b/backend/code/package.json index f001d34..c396818 100644 --- a/backend/code/package.json +++ b/backend/code/package.json @@ -15,7 +15,7 @@ "start": "nest start", "start:dev": "npm run db:generate && nest start --watch", "start:debug": "nest start --debug --watch", - "start:prod": "node dist/main", + "start:prod": "node dist/src/main", "db:generate": "prisma generate", "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix", "test": "jest", diff --git a/backend/code/src/main.ts b/backend/code/src/main.ts index dc8821c..cda0fda 100644 --- a/backend/code/src/main.ts +++ b/backend/code/src/main.ts @@ -15,6 +15,7 @@ async function bootstrap() { const app = await NestFactory.create(AppModule); const corsOptions = { origin: [ + 'http://localhost:9000', 'http://localhost:3000', 'http://142.93.161.63', 'http://164.92.243.105', diff --git a/docker-compose.yaml b/docker-compose.yaml index 83e8ba5..db2a003 100644 --- a/docker-compose.yaml +++ b/docker-compose.yaml @@ -29,6 +29,9 @@ services : depends_on: - database restart: always + ports: + - 3001:3001 + - 3004:3004 init : true nginx : diff --git a/frontend/code/src/Api/base.tsx b/frontend/code/src/Api/base.tsx index 195a861..b336672 100644 --- a/frontend/code/src/Api/base.tsx +++ b/frontend/code/src/Api/base.tsx @@ -1,5 +1,10 @@ import axios from "axios"; - +import { useNavigate } from 'react-router-dom'; +import { useUserStore } from "../Stores/stores"; +const useNavigateCustom = () => { + const navigate = useNavigate(); + return navigate; +}; const api = axios.create({ baseURL: `${process.env.REACT_APP_API_ENDPOINT}`, timeout: 10000, @@ -10,27 +15,26 @@ const api = axios.create({ }, }); -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; + 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; + } } - } - - return Promise.reject({ ...error }); -}; - -api.interceptors.response.use( - (response) => response, - (error) => errorHandler(error) -); - -export default api; + return Promise.reject(error); + }; + api.interceptors.response.use( + (response) => response, + (error) => errorHandler(error) + ); + + export default api; diff --git a/frontend/code/src/Components/Login/index.tsx b/frontend/code/src/Components/Login/index.tsx index 9ac892b..1e2be22 100644 --- a/frontend/code/src/Components/Login/index.tsx +++ b/frontend/code/src/Components/Login/index.tsx @@ -22,8 +22,14 @@ export const Login = () => const loggedin = await userStore.login(); if (loggedin) navigate("/home") - } catch (error) { - + } catch (error:any) { + if (error.response && error.response.status === 401) { + // This is a 401 error; you can choose to handle it silently + console.log("hit") + } else { + // Handle other errors + console.error(error); + } } } check() diff --git a/frontend/code/src/Components/Profile/index.tsx b/frontend/code/src/Components/Profile/index.tsx index f9cdfd6..2c64cb1 100644 --- a/frontend/code/src/Components/Profile/index.tsx +++ b/frontend/code/src/Components/Profile/index.tsx @@ -14,6 +14,7 @@ import { useUserStore } from '../../Stores/stores' import { VscChromeClose , VscAdd , VscCheck , VscComment} from "react-icons/vsc"; import api from '../../Api/base' import toast from 'react-hot-toast' +import { AxiosError } from 'axios' type FRIENDSHIP = 'none' | 'friend' | 'sent' | 'recive' | 'blocked' | undefined; export const Profile = () =>{ const user = useUserStore(); @@ -35,8 +36,11 @@ export const Profile = () =>{ res.data.friendship.length > 0 && !res.data.friendship[0].accepted && res.data.friendship[0].fromId !== user.id && setStatus('recive') console.log(res.data) } catch (error) { - - navigate("/NotFound") + if (error instanceof AxiosError) + { + if (error?.response?.status !== 401) + navigate("/NotFound") + } } } if (params.id !== user.id || params.id !== "me") diff --git a/frontend/code/src/Components/Settings/assets/Inputs.tsx b/frontend/code/src/Components/Settings/assets/Inputs.tsx index bab8789..f20ce7e 100644 --- a/frontend/code/src/Components/Settings/assets/Inputs.tsx +++ b/frontend/code/src/Components/Settings/assets/Inputs.tsx @@ -33,10 +33,11 @@ export const Inputs = (props:MyComponentProps) => { //eslint-disable-next-line const { register, handleSubmit, reset, formState: {errors} } = useForm(); const handleError = (errors : any) => { + console.log(errors) if (errors[`${props.payload}`]?.type === "required") toast.error(`${props.name} ${ERROR_MESSAGES[0]} `); if (errors[`${props.payload}`]?.type === "minLength") toast.error(`${props.name} ${ERROR_MESSAGES[1]} 4`); if (errors[`${props.payload}`]?.type === "maxLength")toast.error(`${props.name} ${ERROR_MESSAGES[2]} 50 `); - + if (errors[`email`].type === "pattern")toast.error(`${errors['email'].message}`); } const onSubmit = (data : any ) => { toast.promise( @@ -103,8 +104,19 @@ export const Inputs = (props:MyComponentProps) => {
- - + { + props.name === "Email" ? ( + + ): + ( + + + ) + }
{!input && ()( // console.log(userInitialValue) set({ ...userInitialValue }); return userInitialValue.isLogged + + }, logout: () => { set({},true); diff --git a/nginx/default.conf b/nginx/default.conf index 9aa26ed..780d28b 100644 --- a/nginx/default.conf +++ b/nginx/default.conf @@ -38,4 +38,14 @@ server { proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } -} \ No newline at end of file + location /socket.io/ { + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header Host $host; + + proxy_pass http://backend:3001; + + proxy_http_version 1.1; + proxy_set_header Upgrade $http_upgrade; + proxy_set_header Connection "upgrade"; + } +} From 04d9bc12e1f55bc2ee577b4bde6a79c4e752b88c Mon Sep 17 00:00:00 2001 From: ismail Date: Thu, 9 Nov 2023 18:52:23 +0100 Subject: [PATCH 2/2] SAVE --- backend/code/src/messages/messages.service.ts | 6 +++++ .../Chat/Components/Conversation.tsx | 10 ++++----- .../Chat/Services/SocketsServices.ts | 18 ++++++++++----- frontend/code/src/Components/Layout/index.tsx | 13 ++++++----- frontend/code/src/Components/Play/index.tsx | 22 +++++++++++++++---- 5 files changed, 49 insertions(+), 20 deletions(-) diff --git a/backend/code/src/messages/messages.service.ts b/backend/code/src/messages/messages.service.ts index ac901b1..5eb8503 100644 --- a/backend/code/src/messages/messages.service.ts +++ b/backend/code/src/messages/messages.service.ts @@ -137,6 +137,12 @@ export class MessagesService { author: { select: { avatar: true, + Username: true, + }, + }, + room: { + select: { + type: true, }, }, }, diff --git a/frontend/code/src/Components/Chat/Components/Conversation.tsx b/frontend/code/src/Components/Chat/Components/Conversation.tsx index 7e5916a..a4954a9 100644 --- a/frontend/code/src/Components/Chat/Components/Conversation.tsx +++ b/frontend/code/src/Components/Chat/Components/Conversation.tsx @@ -22,7 +22,7 @@ import { import { useUserStore } from "../../../Stores/stores"; import { formatTime } from "./tools/utils"; -import { socket } from "../Services/SocketsServices"; +import { useSocketStore } from "../Services/SocketsServices"; export interface ChatPaceHolderProps { username: string; @@ -91,7 +91,7 @@ export const ConversationHeader: React.FC = ({ const LayoutState = useModalStore((state) => state); const ChatState = useChatStore((state) => state); const SelectedChat = useChatStore((state) => state.selectedChatID); - + const currentUser = useChatStore((state) => state.currentDmUser); const selectedChatType = useChatStore((state) => state.selectedChatType); @@ -274,7 +274,7 @@ export const Conversation: React.FC = ({ }) => { const chatState = useChatStore((state) => state); const messageContainerRef = useRef(null); - + const socketStore = useSocketStore(); const scrollToBottom = () => { if (messageContainerRef.current) { const container = messageContainerRef.current; @@ -322,7 +322,7 @@ export const Conversation: React.FC = ({ scrollToBottom(); } }; - socket.on("message", handleMessage); + socketStore.socket.on("message", handleMessage); const fetch = async () => { setLoading(true); @@ -361,7 +361,7 @@ export const Conversation: React.FC = ({ scrollToBottom(); }); return () => { - socket.off("message", handleMessage); + socketStore.socket.off("message", handleMessage); }; // eslint-disable-next-line }, [chatState.selectedChatID]); diff --git a/frontend/code/src/Components/Chat/Services/SocketsServices.ts b/frontend/code/src/Components/Chat/Services/SocketsServices.ts index 4c1e0d9..610cd91 100644 --- a/frontend/code/src/Components/Chat/Services/SocketsServices.ts +++ b/frontend/code/src/Components/Chat/Services/SocketsServices.ts @@ -1,7 +1,15 @@ -import { io } from 'socket.io-client'; +import { io } from 'socket.io-client'; +import { create } from 'zustand' +export const useSocketStore:any = create((set:any) => ({ + socket:null, + setSocket : () => { + const s = io("http://localhost:3004", { + transports: ['websocket'], + withCredentials: true, + }); + set(() => ({socket:s})) + return s; + } + })) -export const socket = io("http://localhost:3004", { - transports: ['websocket'], - withCredentials: true, - }); \ No newline at end of file diff --git a/frontend/code/src/Components/Layout/index.tsx b/frontend/code/src/Components/Layout/index.tsx index 1ffe6c5..ce43d01 100644 --- a/frontend/code/src/Components/Layout/index.tsx +++ b/frontend/code/src/Components/Layout/index.tsx @@ -8,13 +8,13 @@ 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 { FC, PropsWithChildren, useEffect, 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 { FirstLogin } from "../FirstLogin"; -import { socket } from "../Chat/Services/SocketsServices"; +import { useSocketStore } from "../Chat/Services/SocketsServices"; import toast from "react-hot-toast"; const routes = [ @@ -41,6 +41,7 @@ export const Layout: FC = (): JSX.Element => { const user = useUserStore(); const navigate = useNavigate(); + const socketStore = useSocketStore(); useLayoutEffect(() => { const log = async () => { @@ -57,9 +58,9 @@ export const Layout: FC = (): JSX.Element => { }; - - socket.on("connect", onConnect); - socket.on("message",(msg) => { + socketStore.socket = socketStore.setSocket(); + socketStore.socket.on("connect", onConnect); + socketStore.socket.on("message",(msg:any) => { toast.custom((t) => (
= (): JSX.Element => { }) log(); return () => { - socket.off("connect", onConnect); + socketStore.socket.off("connect", onConnect); }; //eslint-disable-next-line }, []); diff --git a/frontend/code/src/Components/Play/index.tsx b/frontend/code/src/Components/Play/index.tsx index 098ae54..c2332c2 100644 --- a/frontend/code/src/Components/Play/index.tsx +++ b/frontend/code/src/Components/Play/index.tsx @@ -2,17 +2,31 @@ import { VsUser } from './assets/VsUser' import { VsBot } from './assets/VsBot' import { Watch } from './assets/Watch' import { Link } from 'react-router-dom' +import { useSocketStore } from '../Chat/Services/SocketsServices' +import api from '../../Api/base' +import toast from 'react-hot-toast' export const Play = () => { + const socketStore = useSocketStore(); + const subscribeToGame = async() => { + // socketStore.socket.emit + try { + const res = await api.post("/game/start"); + console.log("res") + console.log(res.data) + } catch (error) { + toast.error("can not start game") + } + } return( <>
-
-
+
+ {/*
*/} -
+ {/*

OR

-
+
*/}
)