From d6dd76021226802adf5295b3243d6f2ae4fa5cc2 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Sun, 10 Mar 2024 17:59:58 +0000
Subject: refactor: Move all components to the top level directory

---
 packages/web/app/dashboard/components/AllLists.tsx |  60 --------
 .../web/app/dashboard/components/ModileSidebar.tsx |  24 ---
 .../app/dashboard/components/ModileSidebarItem.tsx |  27 ----
 .../web/app/dashboard/components/NewListModal.tsx  | 170 ---------------------
 packages/web/app/dashboard/components/Sidebar.tsx  |  66 --------
 .../web/app/dashboard/components/SidebarItem.tsx   |  33 ----
 .../dashboard/components/SidebarProfileOptions.tsx |  35 -----
 7 files changed, 415 deletions(-)
 delete mode 100644 packages/web/app/dashboard/components/AllLists.tsx
 delete mode 100644 packages/web/app/dashboard/components/ModileSidebar.tsx
 delete mode 100644 packages/web/app/dashboard/components/ModileSidebarItem.tsx
 delete mode 100644 packages/web/app/dashboard/components/NewListModal.tsx
 delete mode 100644 packages/web/app/dashboard/components/Sidebar.tsx
 delete mode 100644 packages/web/app/dashboard/components/SidebarItem.tsx
 delete mode 100644 packages/web/app/dashboard/components/SidebarProfileOptions.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
deleted file mode 100644
index a77252d0..00000000
--- a/packages/web/app/dashboard/components/AllLists.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-"use client";
-
-import { api } from "@/lib/trpc";
-import SidebarItem from "./SidebarItem";
-import NewListModal, { useNewListModal } from "./NewListModal";
-import { Plus } from "lucide-react";
-import Link from "next/link";
-import { ZBookmarkList } from "@hoarder/trpc/types/lists";
-
-export default function AllLists({
-  initialData,
-}: {
-  initialData: { lists: ZBookmarkList[] };
-}) {
-  let { data: lists } = api.lists.list.useQuery(undefined, {
-    initialData,
-  });
-  // TODO: This seems to be a bug in react query
-  lists ||= initialData;
-  const { setOpen } = useNewListModal();
-
-  return (
-    <ul className="max-h-full gap-y-2 overflow-auto text-sm font-medium">
-      <NewListModal />
-      <li className="flex justify-between pb-2 font-bold">
-        <p>Lists</p>
-        <Link href="#" onClick={() => setOpen(true)}>
-          <Plus />
-        </Link>
-      </li>
-      <SidebarItem
-        logo={<span className="text-lg">📋</span>}
-        name="All Lists"
-        path={`/dashboard/lists`}
-        className="py-0.5"
-      />
-      <SidebarItem
-        logo={<span className="text-lg">⭐️</span>}
-        name="Favourties"
-        path={`/dashboard/favourites`}
-        className="py-0.5"
-      />
-      <SidebarItem
-        logo={<span className="text-lg">🗄️</span>}
-        name="Archive"
-        path={`/dashboard/archive`}
-        className="py-0.5"
-      />
-      {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"
-        />
-      ))}
-    </ul>
-  );
-}
diff --git a/packages/web/app/dashboard/components/ModileSidebar.tsx b/packages/web/app/dashboard/components/ModileSidebar.tsx
deleted file mode 100644
index 4bd6a347..00000000
--- a/packages/web/app/dashboard/components/ModileSidebar.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import MobileSidebarItem from "./ModileSidebarItem";
-import {
-  Tag,
-  PackageOpen,
-  Settings,
-  Search,
-  ClipboardList,
-} from "lucide-react";
-import SidebarProfileOptions from "./SidebarProfileOptions";
-
-export default async function MobileSidebar() {
-  return (
-    <aside className="w-full">
-      <ul className="flex justify-between space-x-2 border-b-black bg-gray-100 px-5 py-2 pt-5">
-        <MobileSidebarItem logo={<PackageOpen />} path="/dashboard/bookmarks" />
-        <MobileSidebarItem logo={<Search />} path="/dashboard/search" />
-        <MobileSidebarItem logo={<ClipboardList />} path="/dashboard/lists" />
-        <MobileSidebarItem logo={<Tag />} path="/dashboard/tags" />
-        <MobileSidebarItem logo={<Settings />} path="/dashboard/settings" />
-        <SidebarProfileOptions />
-      </ul>
-    </aside>
-  );
-}
diff --git a/packages/web/app/dashboard/components/ModileSidebarItem.tsx b/packages/web/app/dashboard/components/ModileSidebarItem.tsx
deleted file mode 100644
index 9389d2e4..00000000
--- a/packages/web/app/dashboard/components/ModileSidebarItem.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-"use client";
-
-import { cn } from "@/lib/utils";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-
-export default function MobileSidebarItem({
-  logo,
-  path,
-}: {
-  logo: React.ReactNode;
-  path: string;
-}) {
-  const currentPath = usePathname();
-  return (
-    <li
-      className={cn(
-        "flex w-full rounded-lg hover:bg-gray-50",
-        path == currentPath ? "bg-gray-50" : "",
-      )}
-    >
-      <Link href={path} className="mx-auto px-3 py-2">
-        {logo}
-      </Link>
-    </li>
-  );
-}
diff --git a/packages/web/app/dashboard/components/NewListModal.tsx b/packages/web/app/dashboard/components/NewListModal.tsx
deleted file mode 100644
index f51616ed..00000000
--- a/packages/web/app/dashboard/components/NewListModal.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-"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>New 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
deleted file mode 100644
index a5c1d7a5..00000000
--- a/packages/web/app/dashboard/components/Sidebar.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { Tag, Home, PackageOpen, Settings, Search, Shield } from "lucide-react";
-import { redirect } from "next/navigation";
-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";
-import serverConfig from "@hoarder/shared/config";
-import { api } from "@/server/api/client";
-
-export default async function Sidebar() {
-  const session = await getServerAuthSession();
-  if (!session) {
-    redirect("/");
-  }
-
-  const lists = await api.lists.list();
-
-  return (
-    <aside className="flex h-screen w-60 flex-col gap-5 border-r p-4">
-      <Link href={"/dashboard/bookmarks"}>
-        <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="space-y-2 text-sm font-medium">
-          <SidebarItem
-            logo={<Home />}
-            name="Home"
-            path="/dashboard/bookmarks"
-          />
-          {serverConfig.meilisearch && (
-            <SidebarItem
-              logo={<Search />}
-              name="Search"
-              path="/dashboard/search"
-            />
-          )}
-          <SidebarItem logo={<Tag />} name="Tags" path="/dashboard/tags" />
-          <SidebarItem
-            logo={<Settings />}
-            name="Settings"
-            path="/dashboard/settings"
-          />
-          {session.user.role == "admin" && (
-            <SidebarItem
-              logo={<Shield />}
-              name="Admin"
-              path="/dashboard/admin"
-            />
-          )}
-        </ul>
-      </div>
-      <Separator />
-      <AllLists initialData={lists} />
-      <div className="mt-auto flex justify-between justify-self-end">
-        <div className="my-auto"> {session.user.name} </div>
-        <SidebarProfileOptions />
-      </div>
-    </aside>
-  );
-}
diff --git a/packages/web/app/dashboard/components/SidebarItem.tsx b/packages/web/app/dashboard/components/SidebarItem.tsx
deleted file mode 100644
index 856bdffd..00000000
--- a/packages/web/app/dashboard/components/SidebarItem.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-"use client";
-
-import { cn } from "@/lib/utils";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-
-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 px-3 py-2 hover:bg-slate-100",
-        path == currentPath ? "bg-gray-50" : "",
-        className,
-      )}
-    >
-      <Link href={path} className="flex w-full gap-x-2">
-        {logo}
-        <span className="my-auto"> {name} </span>
-      </Link>
-    </li>
-  );
-}
diff --git a/packages/web/app/dashboard/components/SidebarProfileOptions.tsx b/packages/web/app/dashboard/components/SidebarProfileOptions.tsx
deleted file mode 100644
index f931b63e..00000000
--- a/packages/web/app/dashboard/components/SidebarProfileOptions.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { LogOut, MoreHorizontal } from "lucide-react";
-import { signOut } from "next-auth/react";
-
-export default function SidebarProfileOptions() {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost">
-          <MoreHorizontal />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-fit">
-        <DropdownMenuItem
-          onClick={() =>
-            signOut({
-              callbackUrl: "/",
-            })
-          }
-        >
-          <LogOut className="mr-2 size-4" />
-          <span>Sign Out</span>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-- 
cgit v1.2.3-70-g09d2