feat : TickerContext for updating data when action commited

app/contexts/TickerContext.tsx

@@ -0,0 +1,57 @@
+import React, { createContext, useContext, ReactNode, useReducer } from "react";
+
+type TickerType = {
+  ticker: number;
+};
+
+const TickerContext = createContext<TickerType | undefined>(undefined);
+
+type TickerActionType = {
+  type: "UPDATE_TICKER";
+};
+
+const TickerDispatchContext = createContext<
+  React.Dispatch<TickerActionType> | undefined
+>(undefined);
+
+const TickerReducer = (state: TickerType, action: TickerActionType) => {
+  switch (action.type) {
+    case "UPDATE_TICKER":
+      return { ticker: state.ticker + 1 };
+    default:
+      throw new Error(`Unhandled action type: ${action.type} in TickerReducer`);
+  }
+};
+
+type TickerProviderProps = {
+  children: ReactNode;
+};
+
+export const TickerProvider = ({ children }: TickerProviderProps) => {
+  const [state, dispatch] = useReducer(TickerReducer, {
+    ticker: 0,
+  });
+  return (
+    <TickerContext.Provider value={state}>
+      <TickerDispatchContext.Provider value={dispatch}>
+        {children}
+      </TickerDispatchContext.Provider>
+    </TickerContext.Provider>
+  );
+};
+
+export const useTicker = () => {
+  const context = useContext(TickerContext);
+  if (context === undefined) {
+    throw new Error("useTicker must be used within a TickerProvider");
+  }
+  return context;
+};
+
+export const useTickerDispatch = () => {
+  const context = useContext(TickerDispatchContext);
+  if (context === undefined) {
+    throw new Error("useTickerDispatch must be used within a TickerProvider");
+  }
+  return context;
+};

app/routes/_procted+/students+/$lectureId+/Table.tsx

@@ -25,11 +25,13 @@ import { UserEntity } from "~/types/APIResponse";
 import { resetPassword } from "~/API/user";
 import { mapRoleToString } from "~/util";
 import toast from "react-hot-toast";
+import { useTicker, useTickerDispatch } from "~/contexts/TickerContext";
 
 const TableHeader = () => {
   const navigate = useNavigate();
   const auth = useAuth();
   const lectureData = useLectureData();
+  const tickerDispatch = useTickerDispatch();
   const dispatchLectureData = useLectureDataDispatch();
   const [lectureListLoading, setLectureListLoading] = useState(true);
   const [lectureList, setLectureList] = useState<Lecture[]>([]);
@@ -224,18 +226,20 @@ const TableHeader = () => {
         isOpen={isUserAddModalOpen}
         onClose={() => {
           setIsUserAddModalOpen(false);
+          tickerDispatch({ type: "UPDATE_TICKER" });
         }}
       />
     </div>
   );
 };
 
 const Table = () => {
-  const auth = useAuth();
   const [isLoading, setIsLoading] = useState(false);
   const [users, setUsers] = useState<UserEntity[]>([]);
   const params = useParams();
   const lectureId = params.lectureId!;
+  const auth = useAuth();
+  const ticker = useTicker();
 
   useEffect(() => {
     async function getData() {
@@ -248,7 +252,7 @@ const Table = () => {
       }
     }
     getData();
-  }, [isLoading, params.lectureId]);
+  }, [isLoading, params.lectureId, ticker]);
 
   function responseDataToMap(res: UserEntity[]) {
     const ret: Map<string, ReactNode>[] = [];

app/routes/_procted+/students+/$lectureId+/index.tsx

@@ -4,6 +4,7 @@ import styles from "./index.module.css";
 import { useEffect } from "react";
 import toast from "react-hot-toast";
 import { MetaFunction, useNavigate } from "@remix-run/react";
+import { TickerProvider } from "~/contexts/TickerContext";
 
 const Wrapper = () => {
   const auth = useAuth();
@@ -15,9 +16,11 @@ const Wrapper = () => {
     }
   }, []);
   return (
-    <div className={styles.container}>
-      <Table />
-    </div>
+    <TickerProvider>
+      <div className={styles.container}>
+        <Table />
+      </div>
+    </TickerProvider>
   );
 };