Merge pull request #78 from FleetAdmiralJakob/frontend-chats

Label to component and frontend profile

convex/_generated/api.d.ts

@@ -4,7 +4,7 @@
  *
  * THIS CODE IS AUTOMATICALLY GENERATED.
  *
- * Generated by convex@1.11.1.
+ * Generated by convex@1.11.2.
  * To regenerate, run `npx convex dev`.
  * @module
  */

convex/_generated/api.js

@@ -4,7 +4,7 @@
  *
  * THIS CODE IS AUTOMATICALLY GENERATED.
  *
- * Generated by convex@1.11.1.
+ * Generated by convex@1.11.2.
  * To regenerate, run `npx convex dev`.
  * @module
  */

convex/_generated/dataModel.d.ts

@@ -4,7 +4,7 @@
  *
  * THIS CODE IS AUTOMATICALLY GENERATED.
  *
- * Generated by convex@1.11.1.
+ * Generated by convex@1.11.2.
  * To regenerate, run `npx convex dev`.
  * @module
  */

convex/_generated/server.d.ts

@@ -4,7 +4,7 @@
  *
  * THIS CODE IS AUTOMATICALLY GENERATED.
  *
- * Generated by convex@1.11.1.
+ * Generated by convex@1.11.2.
  * To regenerate, run `npx convex dev`.
  * @module
  */

convex/_generated/server.js

@@ -4,7 +4,7 @@
  *
  * THIS CODE IS AUTOMATICALLY GENERATED.
  *
- * Generated by convex@1.11.1.
+ * Generated by convex@1.11.2.
  * To regenerate, run `npx convex dev`.
  * @module
  */

src/app/page.tsx

@@ -1,8 +1,7 @@
 import { currentUser, SignOutButton } from "@clerk/nextjs";
 import PublicHomepage from "~/app/public-homepage";
 import { AddUserDialog } from "~/components/homepage/add-user-dialog";
-import { Chats } from "~/components/homepage/chat-overview";
-import Search from "~/components/homepage/search";
+import Chats from "~/components/homepage/chat-overview";
 import Navbar from "~/components/navbar";
 
 export default async function HomePage() {
@@ -19,7 +18,6 @@ export default async function HomePage() {
             Current User: {user.username} <br /> <SignOutButton />
           </p>{" "}
           <br />
-          <Search />
           <Chats />
         </div>
         <Navbar />

src/app/profile/page.tsx

@@ -1,11 +1,79 @@
 import Navbar from "~/components/navbar";
+import { Lock, NotebookText } from "lucide-react";
+import { SendHorizontal } from "lucide-react";
+import { Bell } from "lucide-react";
+import { Settings } from "lucide-react";
+import { UsersRound } from "lucide-react";
+import { currentUser } from "@clerk/nextjs";
+import { Avatar, AvatarFallback } from "~/components/ui/avatar";
+import Link from "next/link";
+
+interface settingsCard {
+  title: string;
+  icon: JSX.Element;
+}
+
+const settings: settingsCard[] = [
+  { title: "Account", icon: <Lock /> },
+  { title: "Chats", icon: <SendHorizontal /> },
+  { title: "Notification", icon: <Bell /> },
+  { title: "Settings", icon: <Settings /> },
+  { title: "Contributors", icon: <UsersRound /> },
+];
+
+export default async function Profile() {
+  const user = await currentUser();
+  const username = user?.username;
 
-const Profile = () => {
   return (
-    <div>
+    <div className="h-screen">
+      <div className=" flex h-full flex-col items-center justify-around lg:pl-24">
+        <div className="flex flex-col items-center">
+          <p className=" my-10 mt-16 text-xl font-bold sm:text-2xl xl:hidden">
+            Profile
+          </p>
+
+          <div className="flex xl:mt-14">
+            <p className=" text-sm">
+              <Avatar className="h-12 w-12 text-white ">
+                <AvatarFallback>
+                  {username ? username.substring(0, 2).toUpperCase() : "Y"}
+                </AvatarFallback>
+              </Avatar>
+            </p>
+            <p
+              className="ml-4 text-sm
+            xl:mt-2 xl:text-lg"
+            >
+              {user?.lastName && user.firstName ? (
+                <div>
+                  {user.firstName} {user?.lastName} /{" "}
+                  <br className="xl:hidden" /> {user.username}
+                </div>
+              ) : (
+                <div className="xl:mt-4">{user?.username}</div>
+              )}
+            </p>
+          </div>
+        </div>
+        <div className="mb-20 mt-10 w-full pb-24 sm:mb-32 lg:w-2/3 xl:w-1/3">
+          {settings.map((item) => {
+            return (
+              <Link
+                key={item.title}
+                href={`/profile/${item.title.toLowerCase()}`}
+                className="flex w-full cursor-pointer border-t-2 border-input p-7 text-xl sm:text-2xl lg:mt-6 lg:rounded-xl lg:border-0 lg:bg-input xl:text-xl"
+              >
+                <p className="mr-5 rounded-3xl bg-accent p-3 text-white">
+                  {item.icon}
+                </p>
+                <p className="pt-3">{item.title}</p>
+              </Link>
+            );
+          })}
+        </div>
+      </div>
       <Navbar />
     </div>
   );
-};
-
-export default Profile;
+}

src/app/profile/settings/page.tsx

@@ -0,0 +1,11 @@
+import Navbar from "~/components/navbar";
+
+const SettingsPage = () => {
+  return (
+    <div>
+      <Navbar />
+    </div>
+  );
+};
+
+export default SettingsPage;

src/app/todo/page.tsx

@@ -2,7 +2,10 @@ import Navbar from "~/components/navbar";
 
 const Todo = () => {
   return (
-    <div>
+    <div className="h-screen">
+      <div className="flex h-full flex-col items-center justify-center lg:pl-24">
+        <p>Todo</p>
+      </div>
       <Navbar />
     </div>
   );

src/components/homepage/chat-overview.tsx

@@ -1,22 +1,65 @@
 "use client";
 
+import { Input } from "~/components/ui/input";
 import { useQuery } from "convex/react";
 import { api } from "../../../convex/_generated/api";
 import { useUser } from "@clerk/nextjs";
-import { Avatar, AvatarFallback } from "~/components/ui/avatar";
-import { NotebookText } from "lucide-react";
-import { Check } from "lucide-react";
-import { MousePointerClick } from "lucide-react";
+import { useEffect, useState } from "react";
+import { type FunctionReturnType } from "convex/server";
+import { Check, MousePointerClick, NotebookText } from "lucide-react";
+import { Avatar, AvatarFallback } from "../ui/avatar";
 
-export function Chats() {
+type Chats = FunctionReturnType<typeof api.chats.getChats>;
+
+const Chats: React.FC = () => {
   const chats = useQuery(api.chats.getChats);
   const clerkUser = useUser();
+  const [searchTerm, setSearchTerm] = useState("");
+  const [searchedChats, setSearchedChats] = useState<Chats | null | undefined>(
+    chats,
+  );
+
+  useEffect(() => {
+    if (!searchTerm) {
+      setSearchedChats(chats);
+      return;
+    }
+    const filteredChats = chats?.filter((chat) => {
+      const filteredChatUsers = (chat.users = chat.users.filter(
+        (user) => user.clerkId.split("|").pop() !== clerkUser.user?.id,
+      ));
+      return filteredChatUsers.some((user) =>
+        user.username.toLowerCase().startsWith(searchTerm.toLowerCase().trim()),
+      ) ||
+        (chat.support &&
+          "Chat.io Support"
+            .toLowerCase()
+            .includes(searchTerm.toLowerCase().trim()))
+        ? chat
+        : !filteredChatUsers[0] &&
+            !chat.support &&
+            "My Notes Tool"
+              .toLowerCase()
+              .includes(searchTerm.toLowerCase().trim())
+          ? chat
+          : false;
+    });
+
+    console.log(filteredChats);
+    setSearchedChats(filteredChats);
+  }, [searchTerm, chats, clerkUser.user?.id]);
 
   return (
-    <>
-      <div className="flex justify-center">
+    <div className="mt-3 flex flex-col items-center justify-center">
+      <Input
+        value={searchTerm}
+        onChange={(e) => setSearchTerm(e.target.value)}
+        placeholder="Search ..."
+        className="w-3/4 lg:w-1/2 xl:w-1/3"
+      />
+      <div className="flex w-full justify-center">
         <div className="mt-20 flex w-full flex-col items-center lg:w-1/3">
-          {chats?.map((chat, index) => {
+          {searchedChats?.map((chat, index) => {
             if (chat.support) {
               return (
                 <>
@@ -76,6 +119,8 @@ export function Chats() {
           })}
         </div>
       </div>
-    </>
+    </div>
   );
-}
+};
+
+export default Chats;

src/components/navbar.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import Link from "next/link";
-import { IoChatbubblesSharp } from "react-icons/io5";
-import { FaClipboardList } from "react-icons/fa6";
-import { CgProfile } from "react-icons/cg";
-import { HiUserGroup } from "react-icons/hi2";
+import { MessagesSquare } from "lucide-react";
+import { CalendarCheck } from "lucide-react";
+import { UsersRound } from "lucide-react";
+import { CircleUser } from "lucide-react";
 import { cn } from "~/lib/utils";
 import { useEffect, useState } from "react";
 
@@ -25,27 +25,27 @@ const Navbar = () => {
       )}
     >
       <Link className={"flex flex-col items-center"} href={"/"}>
-        <IoChatbubblesSharp
+        <MessagesSquare
           className={cn({
             "text-accent": pathname === "/",
           })}
         />
         <p className={"mt-0.5 text-sm"}>Chats</p>
       </Link>
       <Link className={"flex flex-col items-center"} href={"/todo"}>
-        <FaClipboardList
+        <CalendarCheck
           className={cn({
             "text-accent": pathname === "/todo",
           })}
         />
         <p className={"mt-0.5 text-sm"}>Todo</p>
       </Link>
       <Link className={"flex flex-col items-center"} href={"/"}>
-        <HiUserGroup />
+        <UsersRound />
         <p className={"mt-0.5 text-sm"}>Group</p>
       </Link>
       <Link className={"flex flex-col items-center"} href={"/profile"}>
-        <CgProfile
+        <CircleUser
           className={cn({
             "text-accent": pathname === "/profile",
           })}

src/components/ui/badge.tsx

@@ -0,0 +1,13 @@
+import { Check } from "lucide-react";
+import { ReactNode } from "react";
+
+const Badge = ({ children }: { children: ReactNode }) => {
+  return (
+    <p className=" ml-2.5 flex rounded-sm bg-blue-400 p-1 pr-2 text-sm font-medium">
+      {" "}
+      <Check className="h-5" /> {children}
+    </p>
+  );
+};
+
+export default Badge;