feat: reconnecting status

src/app/slices/ui.ts

@@ -3,7 +3,7 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { UploadFileData } from "@/hooks/useUploadFile";
 
 export type ListView = "item" | "grid";
-export type SSEStatus = "connecting" | "connected" | "disconnected";
+export type SSEStatus = "connecting" | "connected" | "disconnected" | "reconnecting";
 export interface UIState {
   SSEStatus: SSEStatus;
   online: boolean;
@@ -46,8 +46,9 @@ const uiSlice = createSlice({
   name: "ui",
   initialState,
   reducers: {
-    fillUI(state, action) {
-      return { ...initialState, ...action.payload };
+    fillUI(state, action: PayloadAction<Partial<UIState>>) {
+      const { SSEStatus, ready, online, ...rest } = action.payload;
+      return { ...state, ...rest };
     },
     setReady(state) {
       state.ready = true;

src/components/StreamStatus.tsx

@@ -1,12 +1,13 @@
 import { useAppSelector } from "@/app/store";
 import clsx from "clsx";
+// import { useEffect } from "react";
+// import { toast } from "react-hot-toast";
 import { shallowEqual } from "react-redux";
-// import React from "react";
 
-type Props = {};
-
-const StreamStatus = (props: Props) => {
+// type Props = {};
+const StreamStatus = () => {
   const status = useAppSelector((store) => store.ui.SSEStatus, shallowEqual);
+
   return (
     <aside className="fixed right-2 bottom-2">
       <div
@@ -14,6 +15,7 @@ const StreamStatus = (props: Props) => {
           "w-1 h-1 rounded-full",
           status === "connected" && "bg-green-500",
           status === "disconnected" && "bg-red-500",
+          status === "reconnecting" && "bg-blue-500",
           status === "connecting" && "bg-yellow-500"
         )}
       ></div>