From 75d315dda4232ee3b89abf054f0b6ee10105ffe3 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Fri, 1 Mar 2024 18:00:58 +0000
Subject: feature: Add support for creating and updating lists

---
 packages/web/app/dashboard/components/AllLists.tsx |  41 +++++
 .../web/app/dashboard/components/NewListModal.tsx  | 170 +++++++++++++++++++++
 packages/web/app/dashboard/components/Sidebar.tsx  |  10 +-
 .../web/app/dashboard/components/SidebarItem.tsx   |   7 +-
 4 files changed, 223 insertions(+), 5 deletions(-)
 create mode 100644 packages/web/app/dashboard/components/AllLists.tsx
 create mode 100644 packages/web/app/dashboard/components/NewListModal.tsx

(limited to 'packages/web/app/dashboard/components')

diff --git a/packages/web/app/dashboard/components/AllLists.tsx b/packages/web/app/dashboard/components/AllLists.tsx
new file mode 100644
index 00000000..6b5ca3b5
--- /dev/null
+++ b/packages/web/app/dashboard/components/AllLists.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import { api } from "@/lib/trpc";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import SidebarItem from "./SidebarItem";
+import LoadingSpinner from "@/components/ui/spinner";
+import NewListModal, { useNewListModal } from "./NewListModal";
+import { Plus } from "lucide-react";
+import Link from "next/link";
+
+export default function AllLists() {
+  const { data: lists } = api.lists.list.useQuery();
+
+  const { setOpen } = useNewListModal();
+
+  return (
+    <ul className="max-h-full gap-2 overflow-scroll text-sm font-medium">
+      <NewListModal />
+      <li className="flex justify-between py-2 font-bold">
+        <p>Lists</p>
+        <Link href="#" onClick={() => setOpen(true)}>
+          <Plus />
+        </Link>
+      </li>
+      {lists && lists.lists.length == 0 && <li>No lists</li>}
+      {lists ? (
+        lists.lists.map((l) => (
+          <SidebarItem
+            key={l.id}
+            logo={<span className="text-lg"> {l.icon}</span>}
+            name={l.name}
+            path={`/dashboard/lists/${l.id}`}
+            className="py-0.5"
+          />
+        ))
+      ) : (
+        <LoadingSpinner />
+      )}
+    </ul>
+  );
+}
diff --git a/packages/web/app/dashboard/components/NewListModal.tsx b/packages/web/app/dashboard/components/NewListModal.tsx
new file mode 100644
index 00000000..17b72576
--- /dev/null
+++ b/packages/web/app/dashboard/components/NewListModal.tsx
@@ -0,0 +1,170 @@
+"use client";
+
+import data from "@emoji-mart/data";
+import Picker from "@emoji-mart/react";
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+import { ActionButton } from "@/components/ui/action-button";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "@/components/ui/form";
+
+import { toast } from "@/components/ui/use-toast";
+import { api } from "@/lib/trpc";
+
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Input } from "@/components/ui/input";
+
+import { create } from "zustand";
+
+export const useNewListModal = create<{
+  open: boolean;
+  setOpen: (v: boolean) => void;
+}>((set) => ({
+  open: false,
+  setOpen: (open: boolean) => set(() => ({ open })),
+}));
+
+export default function NewListModal() {
+  const { open, setOpen } = useNewListModal();
+
+  const formSchema = z.object({
+    name: z.string(),
+    icon: z.string(),
+  });
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: "",
+      icon: "💡",
+    },
+  });
+
+  const listsInvalidationFunction = api.useUtils().lists.list.invalidate;
+
+  const { mutate: createList, isPending } = api.lists.create.useMutation({
+    onSuccess: () => {
+      toast({
+        description: "List has been created!",
+      });
+      listsInvalidationFunction();
+      setOpen(false);
+    },
+    onError: (e) => {
+      if (e.data?.code == "BAD_REQUEST") {
+        toast({
+          variant: "destructive",
+          description: e.message,
+        });
+      } else {
+        toast({
+          variant: "destructive",
+          title: "Something went wrong",
+        });
+      }
+    },
+  });
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(s) => {
+        form.reset();
+        setOpen(s);
+      }}
+    >
+      <DialogContent>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit((value) => {
+              createList(value);
+            })}
+          >
+            <DialogHeader>
+              <DialogTitle>Create List</DialogTitle>
+            </DialogHeader>
+            <div className="flex w-full gap-2 py-4">
+              <FormField
+                control={form.control}
+                name="icon"
+                render={({ field }) => {
+                  return (
+                    <FormItem>
+                      <FormControl>
+                        <Popover>
+                          <PopoverTrigger className="border-input h-full rounded border px-2 text-2xl">
+                            {field.value}
+                          </PopoverTrigger>
+                          <PopoverContent>
+                            <Picker
+                              data={data}
+                              onEmojiSelect={(e: { native: string }) =>
+                                field.onChange(e.native)
+                              }
+                            />
+                          </PopoverContent>
+                        </Popover>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  );
+                }}
+              />
+
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => {
+                  return (
+                    <FormItem className="grow">
+                      <FormControl>
+                        <Input
+                          type="text"
+                          className="w-full"
+                          placeholder="List Name"
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  );
+                }}
+              />
+            </div>
+            <DialogFooter className="sm:justify-end">
+              <DialogClose asChild>
+                <Button type="button" variant="secondary">
+                  Close
+                </Button>
+              </DialogClose>
+              <ActionButton type="submit" loading={isPending}>
+                Create
+              </ActionButton>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/packages/web/app/dashboard/components/Sidebar.tsx b/packages/web/app/dashboard/components/Sidebar.tsx
index b8b7fc56..7eea6b6d 100644
--- a/packages/web/app/dashboard/components/Sidebar.tsx
+++ b/packages/web/app/dashboard/components/Sidebar.tsx
@@ -4,6 +4,8 @@ import SidebarItem from "./SidebarItem";
 import { getServerAuthSession } from "@/server/auth";
 import Link from "next/link";
 import SidebarProfileOptions from "./SidebarProfileOptions";
+import { Separator } from "@/components/ui/separator";
+import AllLists from "./AllLists";
 
 export default async function Sidebar() {
   const session = await getServerAuthSession();
@@ -12,16 +14,16 @@ export default async function Sidebar() {
   }
 
   return (
-    <aside className="flex h-full w-60 flex-col border-r p-4">
+    <aside className="flex h-screen w-60 flex-col gap-5 border-r p-4">
       <Link href={"/dashboard/bookmarks"}>
-        <div className="mb-5 flex items-center rounded-lg px-1 text-slate-900">
+        <div className="flex items-center rounded-lg px-1 text-slate-900">
           <PackageOpen />
           <span className="ml-2 text-base font-semibold">Hoarder</span>
         </div>
       </Link>
       <hr />
       <div>
-        <ul className="mt-5 space-y-2 text-sm font-medium">
+        <ul className="space-y-2 text-sm font-medium">
           <SidebarItem
             logo={<Home />}
             name="Home"
@@ -45,6 +47,8 @@ export default async function Sidebar() {
           />
         </ul>
       </div>
+      <Separator />
+      <AllLists />
       <div className="mt-auto flex justify-between justify-self-end">
         <div className="my-auto"> {session.user.name} </div>
         <SidebarProfileOptions />
diff --git a/packages/web/app/dashboard/components/SidebarItem.tsx b/packages/web/app/dashboard/components/SidebarItem.tsx
index 74d20bc0..856bdffd 100644
--- a/packages/web/app/dashboard/components/SidebarItem.tsx
+++ b/packages/web/app/dashboard/components/SidebarItem.tsx
@@ -8,20 +8,23 @@ export default function SidebarItem({
   name,
   logo,
   path,
+  className,
 }: {
   name: string;
   logo: React.ReactNode;
   path: string;
+  className?: string;
 }) {
   const currentPath = usePathname();
   return (
     <li
       className={cn(
-        "rounded-lg  hover:bg-slate-100",
+        "rounded-lg px-3 py-2 hover:bg-slate-100",
         path == currentPath ? "bg-gray-50" : "",
+        className,
       )}
     >
-      <Link href={path} className="flex w-full space-x-2 px-3 py-2">
+      <Link href={path} className="flex w-full gap-x-2">
         {logo}
         <span className="my-auto"> {name} </span>
       </Link>
-- 
cgit v1.2.3-70-g09d2