Added state structure #19

src/app/chat/[id]/page.tsx

@@ -1,49 +1,30 @@
 "use client";
 
-import { useRef, useState } from "react";
 import MessageBox from "@/components/MessageBox";
 import AppSidebar from "@/components/Sidebar";
-import { Message } from "@/types/types";
-import { UserProfile } from "@/hooks/get-user";
-import { StringMap } from "@/types/typeUtils";
 import { useParams } from "next/navigation";
-import { useMessages } from "@/hooks/use-messages";
+import useApp from "@/hooks/use-app";
 
 export default function DMs() {
   const { id } = useParams<{ id: string }>();
-  const wsRef = useRef<WebSocket | null>(null);
-  const messages = useMessages((s) => s.messages);
-  const addMessage = useMessages((s) => s.addMessage);
-  const [userList, setUserList] = useState<StringMap<UserProfile>>({});
-  const [user, setUser] = useState<UserProfile | undefined>();
-  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const app = useApp();
 
   return (
-    <AppSidebar
-      open={sidebarOpen}
-      setOpen={setSidebarOpen}
-      addMessage={addMessage}
-      wsRef={wsRef}
-      userList={userList}
-      setUserList={setUserList}
-      chatWith={id}
-      setUser={setUser}
-      messages={messages}
-    >
+    <AppSidebar app={app}>
       <MessageBox
-        toggleSidebar={() => setSidebarOpen(true)}
-        channelName={userList[id]?.display_name || id}
-        userList={userList}
-        setUserList={setUserList}
-        messages={messages
+        toggleSidebar={() => app.setSidebarOpen(true)}
+        channelName={app.profiles[id]?.display_name || id}
+        userList={app.profiles}
+        setUserList={app.setProfiles}
+        messages={app.messages
           .filter(
             (m) =>
-              (m.channel_id === id && m.from === user?.id) ||
-              (m.from === id && m.channel_id === user?.id)
+              (m.channel_id === id && m.from === app.profile?.id) ||
+              (m.from === id && m.channel_id === app.profile?.id)
           )
           .toReversed()}
         sendMessage={(message) => {
-          wsRef.current?.send(
+          app.node.current?.send(
             JSON.stringify({
               type: "send_message",
               params: {

src/app/chat/page.tsx

@@ -1,59 +1,20 @@
 "use client";
 
-import { useRef, useState } from "react";
 import AppSidebar from "@/components/Sidebar";
-import { UserProfile } from "@/hooks/get-user";
-import { StringMap } from "@/types/typeUtils";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import ProfilePicture from "@/components/ProfilePicture";
-import { Message } from "@/types/types";
-import { useMessages } from "@/hooks/use-messages";
+import useApp from "@/hooks/use-app";
 
 export default function Chat() {
-  const wsRef = useRef<WebSocket | null>(null);
-  const [userList, setUserList] = useState<StringMap<UserProfile>>({});
-  const messages = useMessages((s) => s.messages);
-  const addMessage = useMessages((s) => s.addMessage);
-  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const app = useApp();
 
   return (
-    <AppSidebar
-      open={sidebarOpen}
-      setOpen={setSidebarOpen}
-      wsRef={wsRef}
-      userList={userList}
-      setUserList={setUserList}
-      addMessage={addMessage}
-      messages={messages}
-    >
+    <AppSidebar app={app}>
       <Card className="bg-background w-full">
         <CardHeader>
           <CardTitle>Direct Messages</CardTitle>
         </CardHeader>
-        <CardContent>
-          {/* <DMItem name="Alice" status="online" avatar="" /> */}
-        </CardContent>
+        <CardContent></CardContent>
       </Card>
     </AppSidebar>
   );
 }
-
-function DMItem({
-  name,
-  avatar,
-  status,
-}: {
-  name: string;
-  avatar: string;
-  status: string;
-}) {
-  return (
-    <Card className="p-2 flex flex-row items-center gap-2 cursor-pointer hover:bg-accent">
-      <ProfilePicture name={name} url={avatar} />
-      <div className="flex flex-col">
-        <span className="text-sm font-medium">{name}</span>
-        <span className="text-xs text-muted-foreground">{status}</span>
-      </div>
-    </Card>
-  );
-}