current duel detection & reconnection on home page mount

Author: Amirelkanov

src/entities/duel/api/duelApi.ts

@@ -18,7 +18,11 @@ export const duelApiSlice = apiSlice.injectEndpoints({
                       ]
                     : [{ type: "Duel", id: "LIST" }],
         }),
+        getCurrentDuel: builder.query<Duel, void>({
+            query: () => `/duels/current`,
+            providesTags: (result) => [{ type: "Duel", id: result?.id ?? "CURRENT" }],
+        }),
     }),
 });
 
-export const { useGetDuelQuery, useGetAllUserDuelsQuery } = duelApiSlice;
+export const { useGetDuelQuery, useGetAllUserDuelsQuery, useGetCurrentDuelQuery } = duelApiSlice;

src/entities/duel/index.ts

@@ -1,6 +1,6 @@
 export { duelApiSlice } from "./api/duelApi";
 
-export { useGetDuelQuery, useGetAllUserDuelsQuery } from "./api/duelApi";
+export { useGetDuelQuery, useGetAllUserDuelsQuery, useGetCurrentDuelQuery } from "./api/duelApi";
 
 export { DuelResult } from "./ui/DuelResult/DuelResult";
 export { DuelHistory } from "./ui/DuelHistory/DuelHistory";

src/entities/duel/ui/DuelResult/DuelResult.tsx

@@ -27,9 +27,9 @@ export const DuelResult = ({ winnerId, meId, otherId }: Props) => {
 
     return (
         <div className={styles.result}>
-            <span className={classMap[other]}>{other}</span>
-            <span>-</span>
             <span className={classMap[me]}>{me}</span>
+            <span>-</span>
+            <span className={classMap[other]}>{other}</span>
         </div>
     );
 };

src/features/duel-session/api/duelSessionApi.ts

@@ -10,6 +10,7 @@ import {
     resetDuelSession,
 } from "../model/duelSessionSlice";
 import { DuelMessage } from "../model/types";
+import { SSE_RETRY_TIMEOUT } from "../lib/const";
 
 // TODO: надо порефакторить будет я уже путаюсь
 export const duelSessionApiSlice = apiSlice.injectEndpoints({
@@ -75,37 +76,40 @@ export const duelSessionApiSlice = apiSlice.injectEndpoints({
                     };
 
                     const errorListener = async (event: MessageEvent) => {
-                        console.warn("SSE error:", event);
-                        console.log("Retrying SSE connection...");
+                        const sseReconnect = async () => {
+                            const state = getState() as RootState;
 
-                        const newAccessToken = await refreshAuthToken(
-                            getState() as RootState,
-                            dispatch,
-                        );
+                            if (state.duelSession.phase === "idle") return;
 
-                        if (newAccessToken) {
-                            eventSource.close();
+                            console.warn("SSE error:", event);
+                            console.log("Retrying SSE connection...");
 
-                            const currentState = getState() as RootState;
-                            const lastEventId = currentState.duelSession.lastEventId;
-                            const reconnectHeaders: Record<string, string> = {
-                                Authorization: `Bearer ${newAccessToken}`,
-                            };
+                            const newAccessToken = await refreshAuthToken(state, dispatch);
 
-                            if (lastEventId) {
-                                reconnectHeaders["Last-Event-ID"] = lastEventId;
-                            }
+                            if (newAccessToken) {
+                                eventSource.close();
 
-                            eventSource = new SSE(
-                                `${import.meta.env.VITE_BASE_URL}/duels/connect`,
-                                {
-                                    headers: reconnectHeaders,
-                                },
-                            );
-                            setupListeners();
+                                const currentState = getState() as RootState;
+                                const lastEventId = currentState.duelSession.lastEventId;
+                                const reconnectHeaders: Record<string, string> = {
+                                    Authorization: `Bearer ${newAccessToken}`,
+                                };
 
-                            console.log("SSE Connection re-established");
-                        }
+                                if (lastEventId) {
+                                    reconnectHeaders["Last-Event-ID"] = lastEventId;
+                                }
+
+                                eventSource = new SSE(
+                                    `${import.meta.env.VITE_BASE_URL}/duels/connect`,
+                                    {
+                                        headers: reconnectHeaders,
+                                    },
+                                );
+                                setupListeners();
+                            }
+                        };
+
+                        setTimeout(sseReconnect, SSE_RETRY_TIMEOUT);
                     };
 
                     const setupListeners = () => {

src/features/duel-session/lib/const.ts

@@ -0,0 +1 @@
+export const SSE_RETRY_TIMEOUT = 3000;

src/features/duel-session/model/duelSessionSlice.ts

@@ -1,6 +1,8 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 
+import { duelApiSlice } from "entities/duel";
 import { DuelSessionState, DuelSessionPhase } from "./types";
+import { restoreDuelSession } from "./thunks";
 
 const initialState: DuelSessionState = {
     activeDuelId: null,
@@ -37,6 +39,15 @@ const duelSessionSlice = createSlice({
             state.lastEventId = null;
         },
     },
+    extraReducers: (builder) => {
+        builder.addMatcher(
+            duelApiSlice.endpoints.getCurrentDuel.matchFulfilled,
+            (state, { payload }) => {
+                state.activeDuelId = payload.id;
+                restoreDuelSession(state.activeDuelId);
+            },
+        );
+    },
 });
 
 export const { setPhase, setActiveDuelId, setLastEventId, resetDuelSession } =

src/features/duel-session/ui/DuelSessionButton/DuelSessionButton.tsx

@@ -1,3 +1,4 @@
+import { useGetCurrentDuelQuery } from "entities/duel";
 import { setPhase } from "features/duel-session/model/duelSessionSlice";
 import { selectDuelSession } from "features/duel-session/model/selectors";
 import { DuelSessionPhase } from "features/duel-session/model/types";
@@ -11,6 +12,8 @@ export const DuelSessionButton = () => {
 
     const dispatch = useAppDispatch();
 
+    useGetCurrentDuelQuery();
+
     const { phase, activeDuelId } = useAppSelector(selectDuelSession);
     const prevPhaseRef = useRef<DuelSessionPhase>(phase);
 

src/features/duel-session/ui/DuelSessionManager/DuelSessionManager.tsx

@@ -15,7 +15,7 @@ export const DuelSessionManager = () => {
     const subscriptionRef = useRef<{ unsubscribe: () => void } | null>(null);
 
     useEffect(() => {
-        // If user logged in and  he has an active duel but phase is idle, try to restore session
+        // If user logged in and he has an active duel but phase is idle, try to restore session
         if (user && activeDuelId && phase === "idle") {
             dispatch(restoreDuelSession(activeDuelId));
         }