From 625375d4b23afcfad4748ef65934ca835f9d0dfe Mon Sep 17 00:00:00 2001 From: Elroy Chua Date: Mon, 16 Dec 2024 10:03:18 +0800 Subject: [PATCH 1/3] fix localstorage state management --- frontend/src/app/providers.tsx | 1 + frontend/src/app/schemes/[schemeId]/page.tsx | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/providers.tsx b/frontend/src/app/providers.tsx index 29b2f52..211410a 100644 --- a/frontend/src/app/providers.tsx +++ b/frontend/src/app/providers.tsx @@ -30,6 +30,7 @@ export const ChatProvider = ({ children }: { children: ReactNode }) => { const [schemes, setSchemes] = useState([]); const [isInitialized, setIsInitialized] = useState(false); + // Load data from localStorage on mount useEffect(() => { if (!isInitialized) { try { diff --git a/frontend/src/app/schemes/[schemeId]/page.tsx b/frontend/src/app/schemes/[schemeId]/page.tsx index 77f3965..5e0857e 100644 --- a/frontend/src/app/schemes/[schemeId]/page.tsx +++ b/frontend/src/app/schemes/[schemeId]/page.tsx @@ -1,5 +1,4 @@ "use client"; -"use client"; import { AdditionalInfoType, From 34f029dfda371577a35941cbe8eec8c4553dc63f Mon Sep 17 00:00:00 2001 From: Elroy Chua Date: Tue, 24 Dec 2024 15:18:46 +0800 Subject: [PATCH 2/3] fixed state management for chatbar; refined contentWrapper css --- frontend/src/components/chat-bar/chat-bar.tsx | 1 + frontend/src/components/main-layout/main-layout.module.css | 3 +++ 2 files changed, 4 insertions(+) diff --git a/frontend/src/components/chat-bar/chat-bar.tsx b/frontend/src/components/chat-bar/chat-bar.tsx index e5b9c7a..d5f3ec4 100644 --- a/frontend/src/components/chat-bar/chat-bar.tsx +++ b/frontend/src/components/chat-bar/chat-bar.tsx @@ -20,6 +20,7 @@ export default function ChatBar({ if (userInput.trim()) { handleUserInput(userInput); } + setUserInput(""); }; const handleSetInput = (input: string) => { diff --git a/frontend/src/components/main-layout/main-layout.module.css b/frontend/src/components/main-layout/main-layout.module.css index 20faea0..9484821 100644 --- a/frontend/src/components/main-layout/main-layout.module.css +++ b/frontend/src/components/main-layout/main-layout.module.css @@ -1,6 +1,9 @@ .contentWrapper { padding: 0.5em 4em; margin: 0 auto; + display: flex; + flex-direction: column; + align-items: center; box-sizing: border-box; } From 05cabd31ec3fab7c1b58dfa34ac812e5d218dec5 Mon Sep 17 00:00:00 2001 From: Elroy Chua Date: Thu, 26 Dec 2024 09:26:13 +0800 Subject: [PATCH 3/3] 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(""); + const { schemes, sessionId, setSessionId } = useChat(); const [isExpanded, setIsExpanded] = useState(false); return (
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>; + sessionId: string; + setSessionId: React.Dispatch>; schemes: SearchResScheme[]; setSchemes: React.Dispatch>; }; @@ -28,6 +30,7 @@ const ChatContext = createContext(undefined); export const ChatProvider = ({ children }: { children: ReactNode }) => { const [messages, setMessages] = useState([]); const [schemes, setSchemes] = useState([]); + 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 ( { 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 (