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

---
 .../lists/[listId]/components/DeleteListButton.tsx | 77 ----------------------
 .../lists/[listId]/components/ListView.tsx         | 25 -------
 packages/web/app/dashboard/lists/[listId]/page.tsx |  4 +-
 .../dashboard/lists/components/AllListsView.tsx    | 66 -------------------
 packages/web/app/dashboard/lists/page.tsx          |  2 +-
 5 files changed, 3 insertions(+), 171 deletions(-)
 delete mode 100644 packages/web/app/dashboard/lists/[listId]/components/DeleteListButton.tsx
 delete mode 100644 packages/web/app/dashboard/lists/[listId]/components/ListView.tsx
 delete mode 100644 packages/web/app/dashboard/lists/components/AllListsView.tsx

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

diff --git a/packages/web/app/dashboard/lists/[listId]/components/DeleteListButton.tsx b/packages/web/app/dashboard/lists/[listId]/components/DeleteListButton.tsx
deleted file mode 100644
index 5303b217..00000000
--- a/packages/web/app/dashboard/lists/[listId]/components/DeleteListButton.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { Trash } from "lucide-react";
-import { useRouter } from "next/navigation";
-import { toast } from "@/components/ui/use-toast";
-import { api } from "@/lib/trpc";
-import { ActionButton } from "@/components/ui/action-button";
-import { useState } from "react";
-import { ZBookmarkList } from "@hoarder/trpc/types/lists";
-
-export default function DeleteListButton({ list }: { list: ZBookmarkList }) {
-  const [isDialogOpen, setDialogOpen] = useState(false);
-
-  const router = useRouter();
-
-  const listsInvalidationFunction = api.useUtils().lists.list.invalidate;
-  const { mutate: deleteList, isPending } = api.lists.delete.useMutation({
-    onSuccess: () => {
-      listsInvalidationFunction();
-      toast({
-        description: `List "${list.icon} ${list.name}" is deleted!`,
-      });
-      router.push("/");
-    },
-    onError: () => {
-      toast({
-        variant: "destructive",
-        description: `Something went wrong`,
-      });
-    },
-  });
-  return (
-    <Dialog open={isDialogOpen} onOpenChange={setDialogOpen}>
-      <DialogTrigger asChild>
-        <Button className="mt-auto flex gap-2" variant="destructive">
-          <Trash className="size-5" />
-          <span className="hidden md:block">Delete List</span>
-        </Button>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>
-            Delete {list.icon} {list.name}?
-          </DialogTitle>
-        </DialogHeader>
-        <span>
-          Are you sure you want to delete {list.icon} {list.name}?
-        </span>
-        <DialogFooter className="sm:justify-end">
-          <DialogClose asChild>
-            <Button type="button" variant="secondary">
-              Close
-            </Button>
-          </DialogClose>
-          <ActionButton
-            type="button"
-            variant="destructive"
-            loading={isPending}
-            onClick={() => deleteList({ listId: list.id })}
-          >
-            Delete
-          </ActionButton>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/packages/web/app/dashboard/lists/[listId]/components/ListView.tsx b/packages/web/app/dashboard/lists/[listId]/components/ListView.tsx
deleted file mode 100644
index 979b522f..00000000
--- a/packages/web/app/dashboard/lists/[listId]/components/ListView.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-"use client";
-
-import BookmarksGrid from "@/app/dashboard/bookmarks/components/BookmarksGrid";
-import { ZBookmark } from "@hoarder/trpc/types/bookmarks";
-import { ZBookmarkListWithBookmarks } from "@hoarder/trpc/types/lists";
-import { api } from "@/lib/trpc";
-
-export default function ListView({
-  bookmarks,
-  list: initialData,
-}: {
-  list: ZBookmarkListWithBookmarks;
-  bookmarks: ZBookmark[];
-}) {
-  const { data } = api.lists.get.useQuery(
-    { listId: initialData.id },
-    {
-      initialData,
-    },
-  );
-
-  return (
-    <BookmarksGrid query={{ ids: data.bookmarks }} bookmarks={bookmarks} />
-  );
-}
diff --git a/packages/web/app/dashboard/lists/[listId]/page.tsx b/packages/web/app/dashboard/lists/[listId]/page.tsx
index 397a0f1e..006fd3ad 100644
--- a/packages/web/app/dashboard/lists/[listId]/page.tsx
+++ b/packages/web/app/dashboard/lists/[listId]/page.tsx
@@ -2,8 +2,8 @@ import { api } from "@/server/api/client";
 import { getServerAuthSession } from "@/server/auth";
 import { TRPCError } from "@trpc/server";
 import { notFound, redirect } from "next/navigation";
-import ListView from "./components/ListView";
-import DeleteListButton from "./components/DeleteListButton";
+import ListView from "@/components/dashboard/lists/ListView";
+import DeleteListButton from "@/components/dashboard/lists/DeleteListButton";
 
 export default async function ListPage({
   params,
diff --git a/packages/web/app/dashboard/lists/components/AllListsView.tsx b/packages/web/app/dashboard/lists/components/AllListsView.tsx
deleted file mode 100644
index 0e2f898b..00000000
--- a/packages/web/app/dashboard/lists/components/AllListsView.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import { api } from "@/lib/trpc";
-import { ZBookmarkList } from "@hoarder/trpc/types/lists";
-import { keepPreviousData } from "@tanstack/react-query";
-import { Plus } from "lucide-react";
-import Link from "next/link";
-import { useNewListModal } from "../../components/NewListModal";
-
-function ListItem({
-  name,
-  icon,
-  path,
-}: {
-  name: string;
-  icon: string;
-  path: string;
-}) {
-  return (
-    <Link href={path}>
-      <div className="bg-background rounded-md border border-gray-200 px-4 py-2 text-lg">
-        <p className="text-nowrap">
-          {icon} {name}
-        </p>
-      </div>
-    </Link>
-  );
-}
-
-export default function AllListsView({
-  initialData,
-}: {
-  initialData: ZBookmarkList[];
-}) {
-  const { setOpen: setIsNewListModalOpen } = useNewListModal();
-  let { data: lists } = api.lists.list.useQuery(undefined, {
-    initialData: { lists: initialData },
-    placeholderData: keepPreviousData,
-  });
-
-  // TODO: This seems to be a bug in react query
-  lists ||= { lists: initialData };
-
-  return (
-    <div className="flex flex-col flex-wrap gap-2 md:flex-row">
-      <Button
-        className="my-auto flex h-full"
-        onClick={() => setIsNewListModalOpen(true)}
-      >
-        <Plus />
-        <span className="my-auto">New List</span>
-      </Button>
-      <ListItem name="Favourites" icon="⭐️" path={`/dashboard/favourites`} />
-      <ListItem name="Archive" icon="🗄️" path={`/dashboard/archive`} />
-      {lists.lists.map((l) => (
-        <ListItem
-          key={l.id}
-          name={l.name}
-          icon={l.icon}
-          path={`/dashboard/lists/${l.id}`}
-        />
-      ))}
-    </div>
-  );
-}
diff --git a/packages/web/app/dashboard/lists/page.tsx b/packages/web/app/dashboard/lists/page.tsx
index 62e328b0..88eeda47 100644
--- a/packages/web/app/dashboard/lists/page.tsx
+++ b/packages/web/app/dashboard/lists/page.tsx
@@ -1,5 +1,5 @@
 import { api } from "@/server/api/client";
-import AllListsView from "./components/AllListsView";
+import AllListsView from "@/components/dashboard/lists/AllListsView";
 
 export default async function ListsPage() {
   const lists = await api.lists.list();
-- 
cgit v1.2.3-70-g09d2