From 4674f90f8afa42cc9283271444c7fd9187270860 Mon Sep 17 00:00:00 2001
From: D0dii <marcindolatowski123@gmail.com>
Date: Tue, 17 Sep 2024 18:52:26 +0200
Subject: [PATCH] feat: delete, copy plan, style plans page

---
 ...DeletePlanConfirmationResponsiveDialog.tsx | 97 +++++++++++++++++++
 src/components/Plan.tsx                       |  8 +-
 src/pages/app/plans.tsx                       | 11 +--
 3 files changed, 103 insertions(+), 13 deletions(-)
 create mode 100644 src/components/DeletePlanConfirmationResponsiveDialog.tsx

diff --git a/src/components/DeletePlanConfirmationResponsiveDialog.tsx b/src/components/DeletePlanConfirmationResponsiveDialog.tsx
new file mode 100644
index 0000000..7689473
--- /dev/null
+++ b/src/components/DeletePlanConfirmationResponsiveDialog.tsx
@@ -0,0 +1,97 @@
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+import { useMediaQuery } from "@/lib/useMediaQuery";
+
+export const DeletePlanConfirmationResponsiveDialog = ({
+  deletePlan,
+}: {
+  deletePlan: () => void;
+}) => {
+  const [open, setOpen] = React.useState(false);
+  const isDesktop = useMediaQuery("(min-width: 768px)");
+  const closeDialog = () => {
+    setOpen(false);
+  };
+  if (isDesktop) {
+    return (
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogTrigger asChild={true}>
+          <button className="w-full rounded-md rounded-t-none p-2 text-left hover:bg-slate-200">
+            Usuń
+          </button>
+        </DialogTrigger>
+        <DialogContent
+          className="sm:max-w-[425px]"
+          aria-describedby={undefined}
+        >
+          <DialogHeader>
+            <DialogTitle>Czy na pewno chcesz usunąć plan?</DialogTitle>
+          </DialogHeader>
+          <DeletePlan deletePlan={deletePlan} closeDialog={closeDialog} />
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  return (
+    <Drawer open={open} onOpenChange={setOpen}>
+      <DrawerTrigger asChild={true}>
+        <button className="w-full rounded-md rounded-t-none p-2 text-left hover:bg-slate-200">
+          Usuń
+        </button>
+      </DrawerTrigger>
+      <DrawerContent
+        className="items-center px-4 pb-6"
+        aria-describedby={undefined}
+      >
+        <DrawerHeader className="w-full max-w-[400px] text-left">
+          <DrawerTitle>Czy na pewno chcesz usunąć plan</DrawerTitle>
+        </DrawerHeader>
+        <DeletePlan deletePlan={deletePlan} closeDialog={closeDialog} />
+      </DrawerContent>
+    </Drawer>
+  );
+};
+
+function DeletePlan({
+  deletePlan,
+  closeDialog,
+}: {
+  deletePlan: () => void;
+  closeDialog: () => void;
+}) {
+  return (
+    <div className="flex w-full max-w-[400px] items-center justify-end gap-4 space-x-2 pt-4">
+      <button
+        onClick={() => {
+          closeDialog();
+        }}
+      >
+        Anuluj
+      </button>
+      <Button
+        onClick={() => {
+          deletePlan();
+        }}
+        className="rounded-md bg-red-500 text-lg hover:bg-red-400"
+      >
+        Tak
+      </Button>
+    </div>
+  );
+}
diff --git a/src/components/Plan.tsx b/src/components/Plan.tsx
index ec46c6b..d2f7fcf 100644
--- a/src/components/Plan.tsx
+++ b/src/components/Plan.tsx
@@ -13,6 +13,7 @@ import { cn } from "@/lib/utils";
 import { planFamily } from "@/pages/createplan/[id]";
 import { plansIds } from "@/pages/plans";
 
+import { DeletePlanConfirmationResponsiveDialog } from "./DeletePlanConfirmationResponsiveDialog";
 import { buttonVariants } from "./ui/button";
 
 export const Plan = ({ id, name }: { id: string; name: string }) => {
@@ -60,12 +61,7 @@ export const Plan = ({ id, name }: { id: string; name: string }) => {
               >
                 Kopiuj
               </button>
-              <button
-                onClick={deletePlan}
-                className="w-full rounded-md rounded-t-none p-2 text-left hover:bg-slate-200"
-              >
-                Usuń
-              </button>
+              <DeletePlanConfirmationResponsiveDialog deletePlan={deletePlan} />
             </div>
           </PopoverContent>
         </Popover>
diff --git a/src/pages/app/plans.tsx b/src/pages/app/plans.tsx
index fb440c8..fb5fc08 100644
--- a/src/pages/app/plans.tsx
+++ b/src/pages/app/plans.tsx
@@ -7,7 +7,7 @@ import { planFamily } from "@/atoms/planFamily";
 import { Plan } from "@/components/Plan";
 import { Seo } from "@/components/SEO";
 import { SolvroLogo } from "@/components/SolvroLogo";
-import { buttonVariants } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
 export const plansIds = atomWithStorage<Array<{ id: number }>>("plansIds", []);
@@ -61,12 +61,9 @@ const Plans = () => {
 
         <div className="container mx-auto max-h-full flex-1 flex-grow overflow-y-auto p-4">
           <div className="flex flex-wrap items-center justify-center gap-4 sm:justify-start">
-            <button
-              onClick={addNewPlan}
-              className="flex h-[200px] w-[200px] items-center justify-center rounded-lg border-2 border-dashed border-gray-400 p-4 shadow-xl"
-            >
-              <span>Dodaj nowy plan</span>
-            </button>
+            <div className="flex h-[200px] w-[200px] items-center justify-center rounded-lg border-2 border-dashed border-gray-400 p-4 shadow-xl">
+              <Button onClick={addNewPlan}>Dodaj nowy plan</Button>
+            </div>
             {plans.map((plan) => (
               <Plan key={plan.id} id={plan.id} name={plan.name} />
             ))}