Merge pull request #30 from TeamSynergyy/29/feat

29/feat

package.json

@@ -19,7 +19,6 @@
     "@mantine/form": "6.0.21",
     "@mantine/hooks": "6.0.21",
     "@reduxjs/toolkit": "^1.9.7",
-    "@stomp/stompjs": "^7.0.0",
     "@tabler/icons-react": "^2.39.0",
     "axios": "^1.5.1",
     "clsx": "^2.0.0",
@@ -33,6 +32,7 @@
     "react-kakao-maps-sdk": "^1.1.21",
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.16.0",
+    "socket.io-client": "^4.7.5",
     "vite-plugin-svgr": "^2.4.0"
   },
   "devDependencies": {

src/App.tsx

@@ -31,13 +31,13 @@ import RecentProject from "pages/RecentProject";
 import Search from "pages/Search";
 import PostDetail from "pages/PostDetail";
 import Following from "pages/Following";
-import OauthRedirect from "pages/OauthRedirect";
 import ProjectNotice from "components/project/ProjectNotice";
 import ProjectSchedule from "components/project/ProjectSchedule";
 import ProjectPeerRating from "components/project/ProjectPeerRating";
 import ProjectTaskBoard from "components/project/task/ProjectTaskBoard";
 
 import { Welcome } from "pages/Welcome";
+import SignUpAuthCode from "pages/SignUpAuthCode";
 
 const PrivateRoutes = () => {
   const dispatch = useDispatch();
@@ -86,7 +86,7 @@ export default function App() {
 
           <Route path="/welcome" element={<Welcome />} />
           <Route path="/auth" element={<Auth />} />
-          <Route path="/oauth/redirect" element={<OauthRedirect />} />
+          <Route path="/auth/code" element={<SignUpAuthCode />} />
           <Route path="/home/recent" element={<Layout />}>
             <Route path="post" element={<RecentPost />} />
             <Route path="project" element={<RecentProject />} />

src/app/SocketContext.tsx

@@ -0,0 +1,37 @@
+import { createContext, useEffect, useRef } from "react";
+import io, { Socket } from "socket.io-client";
+import { useDispatch, useSelector } from "react-redux";
+import { messageReceived } from "app/socketSlice";
+import { api } from "./api";
+import { selectCurrentToken } from "./authSlice";
+
+export const SocketContext = createContext<Socket | null>(null);
+
+export const SocketProvider = ({ children }: { children: JSX.Element }) => {
+  const dispatch = useDispatch();
+  const token = useSelector(selectCurrentToken);
+  const { data: chatRooms } = api.useGetMyChatRoomsQuery(null);
+  const socketRef = useRef<Socket | null>(null);
+
+  useEffect(() => {
+    if (!socketRef.current) {
+      socketRef.current = io(import.meta.env.VITE_WEBSOCKET_URL, {
+        query: { token },
+      });
+    }
+
+    socketRef.current.on("message", (topic, message) => {
+      dispatch(messageReceived({ topic, body: message }));
+    });
+
+    return () => {
+      socketRef.current?.disconnect();
+    };
+  }, [token, dispatch, chatRooms]);
+
+  return (
+    <SocketContext.Provider value={socketRef.current}>
+      {children}
+    </SocketContext.Provider>
+  );
+};

src/app/api.ts

@@ -35,46 +35,46 @@ const baseQuery = fetchBaseQuery({
   },
 });
 
-const baseQueryWithReauth = async (
-  args: string | FetchArgs,
-  api: BaseQueryApi,
-  extraOptions: object
-) => {
-  let result = await baseQuery(args, api, extraOptions);
-  if (result.error && result.error.status === 401) {
-    const state = api.getState() as RootState;
-    console.log("state", state);
-    const token = state.auth.token;
-    console.log("token", token);
-    const refreshResult: {
-      header: { code: number; message: string };
-      body: { token: string };
-    } = await axios.get(
-      import.meta.env.VITE_API_URL + "/api/v1/auth/reissue-with-accesstoken",
-      {
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-      }
-    );
-
-    if (refreshResult.body?.token) {
-      const newAccessToken = refreshResult.body.token;
-      api.dispatch(setAccessToken(newAccessToken));
-      result = await baseQuery(args, api, extraOptions);
-    }
-
-    if (refreshResult.header?.code === 400) {
-      console.log(refreshResult);
-      // window.location.href = "/auth";
-    }
-  }
-
-  return result;
-};
+// const baseQueryWithReauth = async (
+//   args: string | FetchArgs,
+//   api: BaseQueryApi,
+//   extraOptions: object
+// ) => {
+//   let result = await baseQuery(args, api, extraOptions);
+//   if (result.error && result.error.status === 401) {
+//     const state = api.getState() as RootState;
+//     console.log("state", state);
+//     const token = state.auth.token;
+//     console.log("token", token);
+//     const refreshResult: {
+//       header: { code: number; message: string };
+//       body: { token: string };
+//     } = await axios.get(
+//       import.meta.env.VITE_API_URL + "/api/v1/auth/reissue-with-accesstoken",
+//       {
+//         headers: {
+//           Authorization: `Bearer ${token}`,
+//         },
+//       }
+//     );
+
+//     if (refreshResult.body?.token) {
+//       const newAccessToken = refreshResult.body.token;
+//       api.dispatch(setAccessToken(newAccessToken));
+//       result = await baseQuery(args, api, extraOptions);
+//     }
+
+//     if (refreshResult.header?.code === 400) {
+//       console.log(refreshResult);
+//       // window.location.href = "/auth";
+//     }
+//   }
+
+//   return result;
+// };
 
 export const api = createApi({
-  baseQuery: baseQueryWithReauth,
+  baseQuery,
   tagTypes: [
     "MyInfo",
     "Post",

src/app/stompSlice.ts → src/app/socketSlice.ts

@@ -5,16 +5,16 @@ interface Message {
   body: string;
 }
 
-interface StompState {
+interface SocketState {
   messages: Message[];
 }
 
-const initialState: StompState = {
+const initialState: SocketState = {
   messages: [],
 };
 
-export const stompSlice = createSlice({
-  name: "stomp",
+export const socketSlice = createSlice({
+  name: "socket",
   initialState,
   reducers: {
     messageReceived: (state, action: PayloadAction<Message>) => {
@@ -23,6 +23,6 @@ export const stompSlice = createSlice({
   },
 });
 
-export const { messageReceived } = stompSlice.actions;
+export const { messageReceived } = socketSlice.actions;
 
-export default stompSlice.reducer;
+export default socketSlice.reducer;