update: chat filter and new chat

Technoculture · Sep 18, 2024 · a3ab82f · a3ab82f
1 parent 84d16d9
commit a3ab82f
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 23 deletions.
diff --git a/src/components/chatSidebar.tsx b/src/components/chatSidebar.tsx
@@ -7,7 +7,10 @@ import {
 } from "@/components/ui/sheet";
 import ChatCardWrapper from "./chatcardwrapper";
 import { Chat as ChatSchema } from "@/lib/db/schema";
-import { AlignLeftIcon } from "lucide-react";
+import { AlignLeftIcon, Building, User } from "lucide-react";
+import { Tabs, TabsList, TabsTrigger } from "./ui/tabs";
+import { useQueryState } from "next-usequerystate";
+import Startnewchatbutton from "./startnewchatbutton";
 
 type Props = {
   org_id: string;
@@ -22,25 +25,70 @@ export default function ChatSidebar({
   uid,
   initialData,
 }: Props) {
-  console.log("from chatsidebar", org_id, org_slug, uid, initialData);
   return (
     <Sheet>
       <SheetTrigger>
         <AlignLeftIcon className="text-gray-500" size={32} />
       </SheetTrigger>
       <SheetContent side={"left"}>
-        <SheetHeader>
-          <SheetTitle>Org Chats</SheetTitle>
+        <SheetHeader className="mt-4">
+          <SheetTitle>Chats</SheetTitle>
         </SheetHeader>
-        <div className="h-[calc(100dvh-100px)] overflow-y-auto scrollbar-hide">
-          <ChatCardWrapper
-            org_id={org_id}
-            org_slug={org_slug}
-            uid={uid}
-            initialData={initialData}
-          />
+        <div className="flex flex-col gap-y-4">
+          <OrgChatToggler orgId={org_id} orgSlug={org_slug} />
+          <div className="h-[calc(100dvh-200px)] overflow-y-auto scrollbar-hide ">
+            <ChatCardWrapper
+              org_id={org_id}
+              org_slug={org_slug}
+              uid={uid}
+              initialData={initialData}
+            />
+          </div>
         </div>
       </SheetContent>
     </Sheet>
   );
 }
+
+const OrgChatToggler = ({
+  orgId,
+  orgSlug,
+}: {
+  orgId: string;
+  orgSlug: string;
+}) => {
+  const [cards, setCards] = useQueryState("chats");
+  return (
+    <div className="flex flex-col gap-y-2 items-center">
+      <div>
+        <div className="">
+          <Tabs
+            className="mx-auto"
+            value={cards || "org"}
+            onValueChange={(val) => {
+              console.log("onvalchange", val);
+              setCards(val);
+            }}
+          >
+            <TabsList>
+              <TabsTrigger value="org" className="flex gap-2 items-center">
+                <Building className="h-4 w-4" />{" "}
+                <span className="hidden sm:inline">Org Chats</span>
+              </TabsTrigger>
+              <TabsTrigger value="me" className="flex gap-2 items-center">
+                <User className="h-4 w-4" />
+                <span className="hidden sm:inline">My Chats</span>
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </div>
+      </div>
+      <div className="self-start">
+        <Startnewchatbutton
+          org_id={orgId as string}
+          org_slug={orgSlug as string}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/room.tsx b/src/components/room.tsx
@@ -68,18 +68,6 @@ const RoomWrapper = (props: Props) => {
         {" "}
         <div className="flex space-between mb-2">
           <div className="flex items-center gap-2">
-            {/* <Button variant="outline" className="mr-2" asChild>
-              <Link
-                onClick={() => setShowLoading(true)}
-                href={`/dashboard/user`}
-              >
-                {showLoading ? (
-                  <CircleNotch className="w-4 h-4 animate-spin" />
-                ) : (
-                  <ArrowLeft className="h-4 w-4" />
-                )}
-              </Link>
-            </Button> */}
             <ChatSidebar
               org_id={props.orgId}
               org_slug={props.org_slug}