From c8c6ed046fe36cfb6eedae3ed2e9e775b94bedfe Mon Sep 17 00:00:00 2001
From: Juan Carlos Farah <juancarlos.farah@epfl.ch>
Date: Fri, 12 Apr 2024 16:43:56 +0200
Subject: [PATCH] feat: save chat in session storage

---
 .../interaction/ParticipantInteraction.tsx    | 14 ++++++-
 src/modules/message/MessagesPane.tsx          | 38 +++++++++++++++++--
 2 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/src/modules/interaction/ParticipantInteraction.tsx b/src/modules/interaction/ParticipantInteraction.tsx
index 50224ef..4db1808 100644
--- a/src/modules/interaction/ParticipantInteraction.tsx
+++ b/src/modules/interaction/ParticipantInteraction.tsx
@@ -118,8 +118,18 @@ const ParticipantInteraction = (): ReactElement => {
     updatedAt: new Date(),
   };
 
-  const [interaction, setInteraction] =
-    useState<Interaction>(defaultInteraction);
+  function load(key: string): Interaction {
+    const item = window.sessionStorage.getItem(key);
+    return item != null ? JSON.parse(item) : defaultInteraction;
+  }
+
+  const [interaction, setInteraction] = useState<Interaction>(
+    load('interaction'),
+  );
+
+  useEffect(() => {
+    window.sessionStorage.setItem('interaction', JSON.stringify(interaction));
+  }, [interaction]);
 
   useEffect(() => {
     const handleBeforeUnload = (event: BeforeUnloadEvent): string => {
diff --git a/src/modules/message/MessagesPane.tsx b/src/modules/message/MessagesPane.tsx
index 484eaae..565ad24 100644
--- a/src/modules/message/MessagesPane.tsx
+++ b/src/modules/message/MessagesPane.tsx
@@ -71,11 +71,43 @@ const MessagesPane = ({
   const { mutateAsync: postAppDataAsync } = mutations.usePostAppData();
   const { mutateAsync: postChatBot } = mutations.usePostChatBot();
 
+  function loadMessages(): Message[] {
+    const item = window.sessionStorage.getItem('messages');
+    return item != null ? JSON.parse(item) : [];
+  }
+
+  function loadExchange(): Exchange {
+    const item = window.sessionStorage.getItem('exchange');
+    return item != null ? JSON.parse(item) : defaultExchange;
+  }
+
+  function loadSentMessageCount(): number {
+    const item = window.sessionStorage.getItem('sentMessageCount');
+    return item != null ? parseInt(item, 10) : 0;
+  }
+
   const [status, setStatus] = useState<Status>(Status.Idle);
-  const [exchange, setExchange] = useState<Exchange>(defaultExchange);
-  const [messages, setMessages] = useState<Message[]>([]);
+  const [exchange, setExchange] = useState<Exchange>(loadExchange());
+  const [messages, setMessages] = useState<Message[]>(loadMessages());
   const [textAreaValue, setTextAreaValue] = useState('');
-  const [sentMessageCount, setSentMessageCount] = useState<number>(0);
+  const [sentMessageCount, setSentMessageCount] = useState<number>(
+    loadSentMessageCount(),
+  );
+
+  useEffect(() => {
+    window.sessionStorage.setItem('messages', JSON.stringify(messages));
+  }, [messages]);
+
+  useEffect(() => {
+    window.sessionStorage.setItem('exchange', JSON.stringify(exchange));
+  }, [exchange]);
+
+  useEffect(() => {
+    window.sessionStorage.setItem(
+      'sentMessageCount',
+      sentMessageCount.toString(),
+    );
+  }, [sentMessageCount]);
 
   useEffect(() => {
     const defaultMessages: Message[] = [