add state management for persistent sessionId

bettersg · Dec 27, 2024 · a2be624 · a2be624
1 parent 0b13b43
commit a2be624
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 4 deletions.
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -11,8 +11,7 @@ import { useState } from "react";
 import classes from "../components/main-layout/main-layout.module.css";
 import { useChat } from "./providers";
 export default function Home() {
-  const { schemes } = useChat();
-  const [sessionId, setSessionId] = useState<string>("");
+  const { schemes, sessionId, setSessionId } = useChat();
   const [isExpanded, setIsExpanded] = useState(false);
   return (
     <main className={classes.homePage}>

diff --git a/frontend/src/app/providers.tsx b/frontend/src/app/providers.tsx
@@ -19,6 +19,8 @@ export type Message = {
 type ChatContextType = {
   messages: Message[];
   setMessages: React.Dispatch<React.SetStateAction<Message[]>>;
+  sessionId: string;
+  setSessionId: React.Dispatch<React.SetStateAction<string>>;
   schemes: SearchResScheme[];
   setSchemes: React.Dispatch<React.SetStateAction<SearchResScheme[]>>;
 };
@@ -28,6 +30,7 @@ const ChatContext = createContext<ChatContextType | undefined>(undefined);
 export const ChatProvider = ({ children }: { children: ReactNode }) => {
   const [messages, setMessages] = useState<Message[]>([]);
   const [schemes, setSchemes] = useState<SearchResScheme[]>([]);
+  const [sessionId, setSessionId] = useState("");
   const [isInitialized, setIsInitialized] = useState(false);
 
   // Load data from localStorage on mount
@@ -36,6 +39,7 @@ export const ChatProvider = ({ children }: { children: ReactNode }) => {
       try {
         const storedSchemes = localStorage.getItem("schemes");
         const storedMessages = localStorage.getItem("userMessages");
+        const storedSessionId = localStorage.getItem("sessionID");
 
         if (storedSchemes) {
           const parsedSchemes = JSON.parse(storedSchemes);
@@ -45,7 +49,9 @@ export const ChatProvider = ({ children }: { children: ReactNode }) => {
           const parsedMessages = JSON.parse(storedMessages);
           setMessages(parsedMessages);
         }
-
+        if (storedSessionId) {
+          setSessionId(storedSessionId);
+        }
         setIsInitialized(true);
       } catch (error) {
         console.error("Error loading from localStorage:", error);
@@ -72,13 +78,25 @@ export const ChatProvider = ({ children }: { children: ReactNode }) => {
       }
     }
   }, [messages, isInitialized]);
+
+  useEffect(() => {
+    if (isInitialized && sessionId) {
+      try {
+        localStorage.setItem("sessionID", sessionId);
+      } catch (error) {
+        console.error("Error saving sessionId to localStorage:", error);
+      }
+    }
+  }, [sessionId, isInitialized]);
   return (
     <ChatContext.Provider
       value={{
         messages,
         setMessages,
         schemes,
         setSchemes,
+        sessionId,
+        setSessionId,
       }}
     >
       {children}

diff --git a/frontend/src/components/user-query/user-query.tsx b/frontend/src/components/user-query/user-query.tsx
@@ -6,14 +6,16 @@ import ResetQueryModal from "../reset-query-modal/reset-query-modal";
 import classes from "./user-query.module.css";
 
 export default function UserQuery() {
-  const { setSchemes, messages, setMessages } = useChat();
+  const { setSchemes, messages, setMessages, setSessionId } = useChat();
   const { isOpen, onOpen, onOpenChange } = useDisclosure();
   const firstMessage = messages[0].text;
   const handleReset = () => {
     localStorage.removeItem("schemes");
     localStorage.removeItem("userMessages");
+    localStorage.removeItem("sessionID");
     setSchemes([]);
     setMessages([]);
+    setSessionId("");
   };
 
   return (