From a2be6242b9e86fc547cd1adde16f41ddaba55db4 Mon Sep 17 00:00:00 2001
From: Elroy Chua <elroymx@gmail.com>
Date: Thu, 26 Dec 2024 09:26:13 +0800
Subject: [PATCH] add state management for persistent sessionId

---
 frontend/src/app/page.tsx                     |  3 +--
 frontend/src/app/providers.tsx                | 20 ++++++++++++++++++-
 .../src/components/user-query/user-query.tsx  |  4 +++-
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index d822624..5eea69e 100644
--- 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
index 211410a..21bfc3c 100644
--- 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,6 +78,16 @@ 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={{
@@ -79,6 +95,8 @@ export const ChatProvider = ({ children }: { children: ReactNode }) => {
         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
index a00fb9f..b066927 100644
--- 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 (