WIP

main.wasp

@@ -91,6 +91,7 @@ entity User {=psl
 
   externalAuthAssociations  SocialLogin[]
   chats    Chat[]
+  conversations    Conversation[]
 psl=}
 // relatedObject             RelatedObject[] - add in line 86
 entity SocialLogin {=psl
@@ -130,6 +131,8 @@ entity Conversation {=psl
     updatedAt                 DateTime        @updatedAt
     chat        Chat?    @relation(fields: [chatId], references: [id])
     chatId      Int?
+    user        User?    @relation(fields: [userId], references: [id])
+    userId      Int?
 psl=}
 
 

migrations/20231116051633_add_user_id_to_conversation_model/migration.sql

@@ -0,0 +1,5 @@
+-- AlterTable
+ALTER TABLE "Conversation" ADD COLUMN     "userId" INTEGER;
+
+-- AddForeignKey
+ALTER TABLE "Conversation" ADD CONSTRAINT "Conversation_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE SET NULL ON UPDATE CASCADE;

src/client/ChatPage.tsx

@@ -0,0 +1,42 @@
+import { useState, useEffect, useRef } from "react";
+
+import { useQuery } from "@wasp/queries";
+import getChats from "@wasp/queries/getChats";
+import type { Chat } from "@wasp/entities";
+
+import CreateNewChatBtn from "./components/CreateNewChat";
+import ChatsList from "./components/ChatList";
+import ConversationWrapper from "./components/ConversationWrapper";
+
+export default function ChatPage() {
+  let { data: chats, isLoading: isLoadingChats } = useQuery(getChats);
+
+  return (
+    <div className="relative z-0 flex h-full w-full overflow-hidden h-screen">
+      <div
+        id="default-sidebar"
+        className="md:w-[260px] flex-shrink-0 overflow-x-hidden dark bg-captn-dark-blue"
+        aria-label="Sidebar"
+      >
+        <div
+          style={{ borderRight: "1px solid #eae4d9" }}
+          className="border-x-captn-light-cream h-full px-3 py-4 overflow-y-auto bg-captn-dark-blue"
+        >
+          <CreateNewChatBtn />
+          <div className="flex-col flex-1 transition-opacity duration-500 -mr-2 pr-2 overflow-y-auto">
+            <ul className="py-5 space-y-2 font-medium">
+              {
+                // Todo: remove the below ignore comment
+                // @ts-ignore
+                chats && <ChatsList chats={chats} />
+              }
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div className="relative z-0 flex h-full w-full overflow-hidden h-screen">
+        <ConversationWrapper />
+      </div>
+    </div>
+  );
+}

src/client/components/ChatList.tsx

@@ -0,0 +1,36 @@
+import { Link } from "@wasp/router";
+import type { Chat } from "@wasp/entities";
+
+export default function ChatsList(chats: Chat[]) {
+  return (
+    <div>
+      {
+        // Todo: remove the below ignore comment
+        // @ts-ignore
+        chats.chats.map((chat, idx) => (
+          <Link key={chat.id} to="/chat/:id?" params={{ id: chat.id }}>
+            <li key={idx}>
+              <div className="flex items-center p-2 text-white hover:bg-captn-light-blue hover:text-captn-dark-blue group rounded-lg ">
+                <svg
+                  stroke="currentColor"
+                  fill="none"
+                  strokeWidth="2"
+                  viewBox="0 0 24 24"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="icon-sm"
+                  height="1em"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+                </svg>
+                <span className="ml-3">{chat.id}</span>
+              </div>
+            </li>
+          </Link>
+        ))
+      }
+    </div>
+  );
+}