From 0f88de5ae84d0b7a03b371eb9f4e2c2146a0ba01 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Thu, 16 Mar 2023 23:04:29 +0800
Subject: [PATCH] feat: add persist middleware to store

---
 components/ChatView/MessageView.tsx |  4 +--
 components/ChatView/Sidebar.tsx     | 11 ++++++---
 components/ChatView/index.tsx       | 16 +++++++++---
 pages/index.tsx                     |  2 +-
 store/chat.ts                       | 38 +++++++++++++++++------------
 store/message.ts                    | 18 ++++++++++----
 store/user.ts                       |  2 +-
 7 files changed, 61 insertions(+), 30 deletions(-)

diff --git a/components/ChatView/MessageView.tsx b/components/ChatView/MessageView.tsx
index 13d5490..f21765e 100644
--- a/components/ChatView/MessageView.tsx
+++ b/components/ChatView/MessageView.tsx
@@ -7,7 +7,7 @@ interface Props {
   message: Message;
 }
 
-const Message = (props: Props) => {
+const MessageView = (props: Props) => {
   const message = props.message;
   const userStore = useUserStore();
   const currentUser = userStore.currentUser;
@@ -27,4 +27,4 @@ const Message = (props: Props) => {
   );
 };
 
-export default Message;
+export default MessageView;
diff --git a/components/ChatView/Sidebar.tsx b/components/ChatView/Sidebar.tsx
index 43de73d..bca01d2 100644
--- a/components/ChatView/Sidebar.tsx
+++ b/components/ChatView/Sidebar.tsx
@@ -1,10 +1,15 @@
+import { useEffect, useState } from "react";
 import { useChatStore, useUserStore } from "../../store";
-import { User } from "../../types";
+import { Chat, User } from "../../types";
 
 const Sidebar = () => {
   const userStore = useUserStore();
   const chatStore = useChatStore();
-  const currentChatUserId = chatStore.currentChat.userId;
+  const [currentChat, setCurrentChat] = useState<Chat | null>(null);
+
+  useEffect(() => {
+    setCurrentChat(chatStore.currentChat);
+  }, [chatStore.currentChat]);
 
   const handleAssistantClick = (user: User) => {
     for (const chat of chatStore.chatList) {
@@ -23,7 +28,7 @@ const Sidebar = () => {
         {userStore.assistantList.map((assistant) => (
           <div
             className={`w-full py-2 px-3 rounded-md mb-2 cursor-pointer hover:opacity-80 hover:bg-gray-100 ${
-              currentChatUserId === assistant.id && "shadow bg-gray-100 font-medium"
+              currentChat?.userId === assistant.id && "shadow bg-gray-100 font-medium"
             }`}
             onClick={() => handleAssistantClick(assistant)}
             key={assistant.id}
diff --git a/components/ChatView/index.tsx b/components/ChatView/index.tsx
index 140d3a1..9e4195b 100644
--- a/components/ChatView/index.tsx
+++ b/components/ChatView/index.tsx
@@ -1,4 +1,6 @@
+import { useEffect, useState } from "react";
 import { useChatStore, useMessageStore, useUserStore } from "../../store";
+import { Chat, Message } from "../../types";
 import MessageView from "./MessageView";
 import Sidebar from "./Sidebar";
 import MessageTextarea from "./MessageTextarea";
@@ -7,15 +9,23 @@ const ChatView = () => {
   const chatStore = useChatStore();
   const userStore = useUserStore();
   const messageStore = useMessageStore();
-  const currentChat = chatStore.currentChat;
+  const [messageList, setMessageList] = useState<Message[]>([]);
+  const [currentChat, setCurrentChat] = useState<Chat | null>(null);
   const chatTitle = currentChat ? userStore.getAssistantById(currentChat.userId)?.name : "No chat";
-  const messageList = messageStore.messageList.filter((message) => message.chatId === currentChat?.id);
+
+  useEffect(() => {
+    setCurrentChat(chatStore.currentChat);
+  }, [chatStore.currentChat]);
+
+  useEffect(() => {
+    setMessageList(messageStore.messageList.filter((message) => message.chatId === currentChat?.id));
+  }, [currentChat?.id, messageStore.messageList]);
 
   return (
     <div className="relative w-full max-w-full h-full rounded-md flex flex-row justify-start items-start">
       <Sidebar />
       <main className="relative grow w-auto h-full max-h-full flex flex-col justify-start items-start overflow-y-auto bg-gray-100">
-        <p className="sticky top-0 w-full text-center py-4 border-b bg-white">{chatTitle}</p>
+        <div className="sticky top-0 w-full text-center py-4 border-b bg-white">{chatTitle}</div>
         <div className="p-2 w-full h-auto grow max-w-3xl py-1 px-4 mx-auto">
           {messageList.length === 0 ? <></> : messageList.map((message) => <MessageView key={message.id} message={message} />)}
         </div>
diff --git a/pages/index.tsx b/pages/index.tsx
index 4b459bc..9d086f4 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -17,7 +17,7 @@ const HomePage: NextPage = () => {
           <h1 className="text-5xl font-extrabold sm:text-6xl">ChatDBA</h1>
           <div className="grid grid-cols-1 mt-8">
             <Link className="flex max-w-xs flex-col rounded-xl bg-gray-800 p-4 px-6 text-white hover:opacity-80" href="/chat">
-              <h3 className="text-xl font-medium">Chat →</h3>
+              <span className="text-xl font-medium">Chat →</span>
             </Link>
           </div>
         </div>
diff --git a/store/chat.ts b/store/chat.ts
index 650bfb2..987dea1 100644
--- a/store/chat.ts
+++ b/store/chat.ts
@@ -1,4 +1,5 @@
 import { create } from "zustand";
+import { persist } from "zustand/middleware";
 import { Chat, User } from "../types";
 import { generateUUID } from "../utils";
 
@@ -14,18 +15,25 @@ interface ChatState {
   setCurrentChat: (chat: Chat) => void;
 }
 
-export const useChatStore = create<ChatState>((set) => ({
-  chatList: [],
-  currentChat: defaultChat,
-  createChat: (user: User) => {
-    const chat = {
-      id: generateUUID(),
-      userId: user.id,
-    };
-    set((state) => ({
-      chatList: [...state.chatList, chat],
-      currentChat: chat,
-    }));
-  },
-  setCurrentChat: (chat: Chat) => set(() => ({ currentChat: chat })),
-}));
+export const useChatStore = create<ChatState>()(
+  persist(
+    (set) => ({
+      chatList: [defaultChat],
+      currentChat: defaultChat,
+      createChat: (user: User) => {
+        const chat = {
+          id: generateUUID(),
+          userId: user.id,
+        };
+        set((state) => ({
+          chatList: [...state.chatList, chat],
+          currentChat: chat,
+        }));
+      },
+      setCurrentChat: (chat: Chat) => set(() => ({ currentChat: chat })),
+    }),
+    {
+      name: "chat-storage",
+    }
+  )
+);
diff --git a/store/message.ts b/store/message.ts
index 1820d7e..dd70ccb 100644
--- a/store/message.ts
+++ b/store/message.ts
@@ -1,4 +1,5 @@
 import { create } from "zustand";
+import { persist } from "zustand/middleware";
 import { Message } from "../types";
 
 interface MessageState {
@@ -7,8 +8,15 @@ interface MessageState {
   addMessage: (message: Message) => void;
 }
 
-export const useMessageStore = create<MessageState>((set, get) => ({
-  messageList: [],
-  getState: () => get(),
-  addMessage: (message: Message) => set((state) => ({ messageList: [...state.messageList, message] })),
-}));
+export const useMessageStore = create<MessageState>()(
+  persist(
+    (set, get) => ({
+      messageList: [],
+      getState: () => get(),
+      addMessage: (message: Message) => set((state) => ({ messageList: [...state.messageList, message] })),
+    }),
+    {
+      name: "message-storage",
+    }
+  )
+);
diff --git a/store/user.ts b/store/user.ts
index 72d1e61..e2552f6 100644
--- a/store/user.ts
+++ b/store/user.ts
@@ -33,7 +33,7 @@ interface UserState {
   getAssistantById: (id: string) => User | undefined;
 }
 
-export const useUserStore = create<UserState>((set) => ({
+export const useUserStore = create<UserState>()(() => ({
   assistantList: assistantList,
   currentUser: localUser,
   getAssistantById: (id: Id) => {