Merge pull request #118 from bettersg/117_align_home_page_dissapear_chat

117 align home page dissapear chat
bettersg · Dec 26, 2024 · 78878c2 · 78878c2
2 parents bddbb68 + 05cabd3
commit 78878c2
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 5 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,13 +30,16 @@ 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
   useEffect(() => {
     if (!isInitialized) {
       try {
         const storedSchemes = localStorage.getItem("schemes");
         const storedMessages = localStorage.getItem("userMessages");
+        const storedSessionId = localStorage.getItem("sessionID");
 
         if (storedSchemes) {
           const parsedSchemes = JSON.parse(storedSchemes);
@@ -44,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);
@@ -71,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/app/schemes/[schemeId]/page.tsx b/frontend/src/app/schemes/[schemeId]/page.tsx
@@ -1,5 +1,4 @@
 "use client";
-"use client";
 
 import {
   AdditionalInfoType,

diff --git 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
@@ -1,6 +1,9 @@
 .contentWrapper {
   padding: 0.5em 4em;
   margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   box-sizing: border-box;
 }
 

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 (