feat: add persist middleware to store

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;

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}

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>

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>

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",
+    }
+  )
+);

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",
+    }
+  )
+);

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) => {