From 975d4d43e566bcaaa65f95e95a03f3a48a9147b2 Mon Sep 17 00:00:00 2001
From: Destiny Saturday <destiny@destinedcodes.com>
Date: Mon, 29 Jul 2024 14:32:36 +0100
Subject: [PATCH] Revert "Vxrcel clean"

---
 .../_components/layout/navbar/index.tsx       |   2 +-
 .../[productId]/form-images/project-logo.tsx  | 125 --------
 .../products/[productId]/page.tsx             |  16 -
 .../[productId]/product-details-component.tsx | 302 ------------------
 .../[productId]/product-details-content.tsx   |  36 ---
 .../_components/product-body-shadcn.tsx       |   7 -
 .../(user-dashboard)/products/layout.tsx      |  27 --
 .../(user-dashboard)/products/page.tsx        |  14 +-
 8 files changed, 14 insertions(+), 515 deletions(-)
 delete mode 100644 src/app/dashboard/(user-dashboard)/products/[productId]/form-images/project-logo.tsx
 delete mode 100644 src/app/dashboard/(user-dashboard)/products/[productId]/page.tsx
 delete mode 100644 src/app/dashboard/(user-dashboard)/products/[productId]/product-details-component.tsx
 delete mode 100644 src/app/dashboard/(user-dashboard)/products/[productId]/product-details-content.tsx
 delete mode 100644 src/app/dashboard/(user-dashboard)/products/layout.tsx

diff --git a/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx b/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx
index 0c74fc194..935806e9c 100644
--- a/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx
+++ b/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx
@@ -47,7 +47,7 @@ const UserNavbar = () => {
   const currentPath = pathname?.split("/")[2];
   return (
     <nav
-      className="overflow-hidden border-b-[0.5px] border-border bg-background px-5 py-2.5 md:left-[220px] lg:left-[252px]"
+      className="border-b-[0.5px] border-border bg-background px-5 py-2.5 md:left-[220px] lg:left-[252px]"
       role="navbar"
     >
       <div className="flex items-center justify-between gap-2">
diff --git a/src/app/dashboard/(user-dashboard)/products/[productId]/form-images/project-logo.tsx b/src/app/dashboard/(user-dashboard)/products/[productId]/form-images/project-logo.tsx
deleted file mode 100644
index aa5009f02..000000000
--- a/src/app/dashboard/(user-dashboard)/products/[productId]/form-images/project-logo.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import { X } from "lucide-react";
-import React, { useState } from "react";
-import { UseFormReturn } from "react-hook-form";
-
-import BlurImage from "~/components/miscellaneous/blur-image";
-import { Button } from "~/components/ui/button";
-import { cn } from "~/lib/utils";
-import { NewProduct } from "../schema/schema";
-
-type Properties = {
-  form: UseFormReturn<NewProduct>;
-  name: string;
-};
-const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-  event.preventDefault();
-};
-const ProjectLogo = ({ form, name }: Properties) => {
-  const [isDragging, setIsDragging] = useState(false);
-
-  const projectLogo = form.getValues("media");
-
-  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
-    event.preventDefault();
-    event.stopPropagation();
-
-    const target = event.dataTransfer.files[0] as File;
-
-    if (target.type === "image/gif") {
-      return name;
-    }
-    const event_data = {
-      target: {
-        files: event.dataTransfer.files,
-      },
-    };
-    handleImageChange(
-      event_data as unknown as React.ChangeEvent<HTMLInputElement>,
-    );
-    setIsDragging(false);
-  };
-
-  return (
-    <div className="relative grid h-full w-[inherit] place-items-center rounded-xl border border-dashed border-[#CBD5E1] bg-[#FAFAFA]">
-      <div
-        data-upload
-        className="flexx absolute inset-0 z-10 hidden items-center justify-center rounded-xl bg-white/30 text-black"
-      >
-        <div className="grid h-full w-full place-items-center rounded-xl bg-white/80 uppercase backdrop-blur-xl">
-          <p className="items-center md:flex md:flex-col">
-            <span className="animate-pulse md:text-xs">Uploading...</span>{" "}
-            <b>10%</b>
-          </p>
-        </div>
-      </div>
-
-      {isDragging && (
-        <div className="pointer-events-none absolute inset-0 z-20 grid h-full w-full scale-95 place-items-center rounded-xl border-2 border-dashed border-white bg-white/20 backdrop-blur-xl">
-          <p className="text-xl text-white">Drop to upload</p>
-        </div>
-      )}
-
-      {projectLogo.url && typeof projectLogo.url === "string" ? (
-        <div className="absolute inset-0 h-full w-full rounded-xl">
-          <div className="h-full w-full overflow-hidden rounded-xl">
-            <BlurImage
-              src={projectLogo.url}
-              width={500}
-              height={500}
-              alt="nft"
-              className={cn(
-                "size-full object-cover transition-all duration-300",
-              )}
-            />
-          </div>
-          <button
-            disabled={false}
-            className="absolute right-1 top-1 rounded-full bg-black/40 p-1 backdrop-blur-xl hover:bg-red-500 disabled:cursor-not-allowed disabled:bg-black/40 md:-right-1 md:-top-1 md:bg-white/20 md:disabled:bg-white/20"
-          >
-            <X className="size-8 min-[500px]:size-10" />
-          </button>
-        </div>
-      ) : (
-        <div
-          onDrop={handleDrop}
-          onDragOver={(event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            setIsDragging(true);
-          }}
-          onDragLeave={(event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            setIsDragging(false);
-          }}
-          className="grid h-full w-full place-items-center"
-        >
-          <label
-            className="flex h-full w-full cursor-pointer flex-col items-center justify-center gap-y-2 text-neutral-dark-1 hover:text-black"
-            htmlFor={`media`}
-          >
-            <Button
-              type="button"
-              variant={"secondary"}
-              size={"sm"}
-              className="pointer-events-none flex !h-[32px] items-center bg-white text-sm text-[#0F172A] shadow-[0px_1px_18px_0px_rgba(10,_57,_176,_0.12)]"
-            >
-              Upload New
-            </Button>
-            <p className="text-xs md:text-sm">Add Image or drag it here</p>
-          </label>
-          <input
-            type="file"
-            hidden
-            accept=" image/*"
-            name={`media`}
-            id={`media`}
-            onChange={handleImageChange}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default ProjectLogo;
diff --git a/src/app/dashboard/(user-dashboard)/products/[productId]/page.tsx b/src/app/dashboard/(user-dashboard)/products/[productId]/page.tsx
deleted file mode 100644
index 3d166772b..000000000
--- a/src/app/dashboard/(user-dashboard)/products/[productId]/page.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { notFound } from "next/navigation";
-
-import ProductDetailsContent from "./product-details-content";
-
-const ProductDetailsPage = async ({
-  params,
-}: {
-  params: { productId: string };
-}) => {
-  const id = params.productId;
-  if (!id) return notFound();
-
-  return <ProductDetailsContent productId={id} />;
-};
-
-export default ProductDetailsPage;
diff --git a/src/app/dashboard/(user-dashboard)/products/[productId]/product-details-component.tsx b/src/app/dashboard/(user-dashboard)/products/[productId]/product-details-component.tsx
deleted file mode 100644
index 9cd245e4e..000000000
--- a/src/app/dashboard/(user-dashboard)/products/[productId]/product-details-component.tsx
+++ /dev/null
@@ -1,302 +0,0 @@
-"use client";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { ArrowLeft, Loader } from "lucide-react";
-import Link from "next/link";
-import { useTransition } from "react";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-
-import WordCounter from "~/components/miscellaneous/WordCounter";
-import { Button } from "~/components/ui/button";
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "~/components/ui/form";
-import { Input } from "~/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "~/components/ui/select";
-import { Textarea } from "~/components/ui/textarea";
-import { useProducts } from "~/hooks/admin-product/use-products.persistence";
-import { cn, generateId, getCurrentDateTime, simulateDelay } from "~/lib/utils";
-import { ProductTableProperties } from "~/types/admin-product.types";
-import { NewProductSchema } from "../_components/schema/schema";
-import { CATEGORIES } from "../data/categories.moct";
-import ProjectLogo from "./form-images/project-logo";
-
-const MAX_CHAR = 160;
-
-const ProductDetailsComponent = ({
-  product,
-}: {
-  product: ProductTableProperties;
-}) => {
-  const { addProduct } = useProducts();
-  const [isLoading, startTransition] = useTransition();
-
-  const new_product_form = useForm<z.infer<typeof NewProductSchema>>({
-    defaultValues: {
-      product_name: "",
-      description: "",
-      price: "",
-      category: "",
-      quantity: "",
-      media: {
-        url: "",
-        id: "",
-      },
-    },
-    resolver: zodResolver(NewProductSchema),
-  });
-
-  const hasProjectLogo = new_product_form.getValues("media.url");
-
-  const onSubmit = async (values: z.infer<typeof NewProductSchema>) => {
-    startTransition(async () => {
-      const date_data = getCurrentDateTime();
-      await simulateDelay(3);
-      addProduct({
-        product_id: `P${generateId(6)}`,
-        category: values.category,
-        description: values.description,
-        name: values.product_name,
-        price: Number(values.price),
-        stock: Number(values.quantity),
-        image: "/product/product-image.webp",
-        status: "in_stock",
-        date_added: date_data.date_added,
-        time: date_data.time,
-      });
-      new_product_form.reset();
-    });
-  };
-
-  return (
-    <div className="flex w-full flex-col gap-y-8 md:gap-y-16">
-      <div className="flex w-full items-center justify-between">
-        <div className="flex items-center gap-x-2 md:gap-x-4">
-          <Link
-            href={"/dashboard/products"}
-            className="rounded-sm border p-0.5 hover:bg-gray-200"
-          >
-            <ArrowLeft />
-          </Link>
-          <span className="font-medium text-neutral-dark-2 sm:text-[20px] md:font-semibold">
-            {product.name}
-          </span>
-          <span
-            className={cn(
-              "flex items-center gap-x-1 whitespace-nowrap rounded-full pl-2 text-sm leading-5 text-neutral-dark-1 md:gap-x-2",
-            )}
-          >
-            <span
-              className={cn("size-3 rounded-full", {
-                "bg-[#6DC347]": product.status === "in_stock",
-                "bg-[#DC2626]": product.status === "low_on_stock",
-                "bg-[#EAB308]": product.status === "out_of_stock",
-              })}
-            />
-            {product.status === "in_stock" && "In Stock"}
-            {product.status === "low_on_stock" && "Low on Stock"}
-            {product.status === "out_of_stock" && "Out of Stock"}
-          </span>
-        </div>
-        <div className="flex items-center justify-end gap-x-4">
-          <Button
-            disabled={isLoading}
-            type="button"
-            variant="outline"
-            size="default"
-            className="rounded-md bg-transparent px-4 py-3 hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2"
-          >
-            Discard
-          </Button>
-          <Button
-            disabled={isLoading}
-            type="submit"
-            variant="default"
-            size="default"
-            className="rounded-md bg-primary px-4 py-3 font-normal text-white hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2"
-          >
-            {isLoading ? (
-              <span className="flex items-center gap-x-2">
-                <span className="animate-pulse">Saving...</span>{" "}
-                <Loader className="size-4 animate-spin sm:size-5" />
-              </span>
-            ) : (
-              <span>Save changes</span>
-            )}
-          </Button>
-        </div>
-      </div>
-      <Form {...new_product_form}>
-        <form
-          onSubmit={new_product_form.handleSubmit(onSubmit)}
-          className="flex h-full w-full flex-col gap-y-2"
-        >
-          <div className="flex h-full w-full flex-col gap-y-2 px-2 min-[500px]:px-6">
-            {" "}
-            <FormField
-              control={new_product_form.control}
-              name="product_name"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="font-medium text-neutral-dark-2">
-                    Title<span className="text-red-500">*</span>
-                  </FormLabel>
-                  <FormControl>
-                    <Input
-                      id="product_name"
-                      disabled={isLoading}
-                      placeholder="Product name"
-                      className="bg-transparent placeholder:text-slate-400"
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={new_product_form.control}
-              name="description"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="font-medium text-neutral-dark-2">
-                    Description
-                  </FormLabel>
-                  <FormControl>
-                    <div className="relative flex w-full flex-col gap-y-2">
-                      <Textarea
-                        disabled={isLoading}
-                        placeholder="Enter product description"
-                        className={cn(
-                          "h-20 resize-none bg-transparent placeholder:text-slate-400",
-                          field.value.length > MAX_CHAR
-                            ? "focus-visible:outline-red-500 focus-visible:ring-red-500"
-                            : "",
-                        )}
-                        {...field}
-                      />
-                      <div className="flex w-full items-center justify-between">
-                        <span className="whitespace-nowrap text-sm text-slate-500">
-                          Maximum of {MAX_CHAR} characters
-                        </span>
-                        <WordCounter length={MAX_CHAR} word={field.value} />
-                      </div>
-                    </div>
-                  </FormControl>
-                  <FormMessage data-testid="password-error" />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={new_product_form.control}
-              name="category"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="font-medium text-neutral-dark-2">
-                    Category
-                  </FormLabel>
-                  <FormControl>
-                    <Select {...field} onValueChange={field.onChange}>
-                      <SelectTrigger className="bg-transparent">
-                        <SelectValue placeholder="Select a category" />
-                      </SelectTrigger>
-                      <SelectContent className="z-[99999]">
-                        <SelectGroup>
-                          <SelectLabel>Fruits</SelectLabel>
-                          {CATEGORIES.map((category) => (
-                            <SelectItem
-                              key={category.value}
-                              value={category.value}
-                            >
-                              {category.label}
-                            </SelectItem>
-                          ))}
-                        </SelectGroup>
-                      </SelectContent>
-                    </Select>
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <div className="flex w-full items-center gap-x-4 gap-y-4 xl:flex-col">
-              {" "}
-              <FormField
-                control={new_product_form.control}
-                name="price"
-                render={({ field }) => (
-                  <FormItem className="relative w-full">
-                    <FormLabel className="font-medium text-neutral-dark-2">
-                      Standard Price
-                      <span className="text-red-500">*</span>
-                    </FormLabel>
-                    <FormControl>
-                      <div className="relative flex w-full items-center gap-x-2">
-                        <span className="absolute left-2 font-medium text-black">
-                          $
-                        </span>
-                        <Input
-                          disabled={isLoading}
-                          placeholder="0.00"
-                          className="bg-transparent pl-8 placeholder:text-slate-400"
-                          {...field}
-                        />
-                      </div>
-                    </FormControl>
-                    <FormMessage className="absolute -bottom-5" />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={new_product_form.control}
-                name="quantity"
-                render={({ field }) => (
-                  <FormItem className="relative w-full">
-                    <FormLabel className="font-medium text-neutral-dark-2">
-                      Quantity<span className="text-red-500">*</span>
-                    </FormLabel>
-                    <FormControl>
-                      <Input
-                        disabled={isLoading}
-                        placeholder="0.00"
-                        className="bg-transparent placeholder:text-slate-400"
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage className="absolute -bottom-5" />
-                  </FormItem>
-                )}
-              />
-            </div>
-            <div className="relative mt-2 flex h-fit min-h-[125px] w-full flex-col gap-y-2 rounded-xl md:rounded-2xl">
-              <p className="font-medium text-neutral-dark-2">Media</p>
-              <ProjectLogo form={new_product_form} name="media" />
-              {hasProjectLogo.length === 0 &&
-                new_product_form.formState.errors.media && (
-                  <p className="mt-0.5 w-full justify-self-start border-l-4 border-red-500 bg-red-500/10 px-2 text-sm font-bold text-red-500">
-                    {new_product_form.formState.errors.media.message}
-                  </p>
-                )}
-            </div>
-          </div>
-        </form>
-      </Form>
-    </div>
-  );
-};
-
-export default ProductDetailsComponent;
diff --git a/src/app/dashboard/(user-dashboard)/products/[productId]/product-details-content.tsx b/src/app/dashboard/(user-dashboard)/products/[productId]/product-details-content.tsx
deleted file mode 100644
index 50fa7ec42..000000000
--- a/src/app/dashboard/(user-dashboard)/products/[productId]/product-details-content.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-"use client";
-
-import { ChevronRight, Loader } from "lucide-react";
-
-import { useProducts } from "~/hooks/admin-product/use-products.persistence";
-import ProductDetailsComponent from "./product-details-component";
-
-const ProductDetailsContent = ({ productId }: { productId: string }) => {
-  const { products } = useProducts();
-  const product = products?.find((p) => p.product_id === productId);
-
-  if (!product)
-    return (
-      <div>
-        <p className="flex items-center gap-x-2 text-neutral-dark-2">
-          <span className="animate-pulse">Loading...</span>{" "}
-          <Loader className="size-4 animate-spin sm:size-5" />.
-        </p>
-      </div>
-    );
-
-  return (
-    <div className="flex w-full flex-col gap-y-8 px-2 py-4 sm:px-4 sm:py-8 md:gap-y-16">
-      <div className="flex w-fit items-center gap-x-2 rounded-md border bg-[#fafafa] px-2 py-2 text-sm sm:px-4">
-        <span className="font-medium text-neutral-dark-2 md:font-semibold">
-          Products
-        </span>
-        <ChevronRight className="size-3 text-neutral-dark-1 sm:size-4" />
-        <span className="text-neutral-dark-1">Product Details</span>
-      </div>
-      <ProductDetailsComponent product={product} />
-    </div>
-  );
-};
-
-export default ProductDetailsContent;
diff --git a/src/app/dashboard/(user-dashboard)/products/_components/product-body-shadcn.tsx b/src/app/dashboard/(user-dashboard)/products/_components/product-body-shadcn.tsx
index 722c930bd..3bd423007 100644
--- a/src/app/dashboard/(user-dashboard)/products/_components/product-body-shadcn.tsx
+++ b/src/app/dashboard/(user-dashboard)/products/_components/product-body-shadcn.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { AnimatePresence, motion } from "framer-motion";
 import { Edit2, MoreVertical, Trash } from "lucide-react";
-import { useRouter } from "next-nprogress-bar";
 import { useEffect, useRef } from "react";
 
 import BlurImage from "~/components/miscellaneous/blur-image";
@@ -34,7 +33,6 @@ const ProductBodyShadcn = ({
     setIsDelete,
   } = useProductModal();
   const modalReference = useRef<HTMLDivElement>(null);
-  const router = useRouter();
 
   useEffect(() => {
     if (!isActionModal || !modalReference.current) return;
@@ -64,10 +62,6 @@ const ProductBodyShadcn = ({
     updateProductId(id);
     setIsDelete(true);
   };
-  const handleEditAction = (id: string) => {
-    setIsActionModal(false);
-    router.push(`/dashboard/products/${id}`);
-  };
 
   return (
     filteredProducts.length > 0 &&
@@ -190,7 +184,6 @@ const ProductBodyShadcn = ({
                 <div className="flex flex-col">
                   <Button
                     variant="ghost"
-                    onClick={() => handleEditAction(product.product_id)}
                     size={"sm"}
                     className={cn(
                       "flex h-8 cursor-pointer items-center justify-start gap-x-2 px-2 py-1 text-xs min-[500px]:text-sm",
diff --git a/src/app/dashboard/(user-dashboard)/products/layout.tsx b/src/app/dashboard/(user-dashboard)/products/layout.tsx
deleted file mode 100644
index 74f45465f..000000000
--- a/src/app/dashboard/(user-dashboard)/products/layout.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-"use client";
-
-import { useEffect } from "react";
-
-import { useProducts } from "~/hooks/admin-product/use-products.persistence";
-import { PRODUCT_TABLE } from "./data/product.mock";
-
-export default function UserProductLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  const { addProducts } = useProducts();
-  useEffect(() => {
-    const is_saved = localStorage.getItem("admin_products");
-    if (is_saved) {
-      const parse_data = JSON.parse(is_saved);
-      if (parse_data.state.products) return;
-      setTimeout(() => {
-        addProducts(PRODUCT_TABLE);
-      }, 5000);
-    }
-  }, []);
-
-  return <>{children}</>;
-}
diff --git a/src/app/dashboard/(user-dashboard)/products/page.tsx b/src/app/dashboard/(user-dashboard)/products/page.tsx
index 1bb5df0fc..acbff045c 100644
--- a/src/app/dashboard/(user-dashboard)/products/page.tsx
+++ b/src/app/dashboard/(user-dashboard)/products/page.tsx
@@ -6,11 +6,13 @@ import dynamic from "next/dynamic";
 import { useEffect, useState } from "react";
 
 import { useProductModal } from "~/hooks/admin-product/use-product.modal";
+import { useProducts } from "~/hooks/admin-product/use-products.persistence";
 import NewProductModal from "./_components/new-product-modal";
 import ProductDeleteModal from "./_components/product-delete-modal";
 import ProductDetailModal from "./_components/product-detail-modal";
 import ProductDetailView from "./_components/product-detail-view";
 import ProductHeader from "./_components/product-header";
+import { PRODUCT_TABLE } from "./data/product.mock";
 
 const ProductContent = dynamic(() => import("./_components/product-content"), {
   ssr: false,
@@ -22,7 +24,7 @@ const ProductFilter = dynamic(() => import("./_components/product-filter"), {
 const ProductPage = () => {
   const [searchTerm, setSearchTerm] = useState("");
   const [view, setView] = useState<"list" | "grid">("list");
-
+  const { addProducts } = useProducts();
   const {
     isOpen,
     updateProductId,
@@ -36,6 +38,16 @@ const ProductPage = () => {
     setIsDelete,
   } = useProductModal();
 
+  useEffect(() => {
+    const is_saved = localStorage.getItem("admin_products");
+    if (is_saved) {
+      const parse_data = JSON.parse(is_saved);
+      if (parse_data.state.products) return;
+      setTimeout(() => {
+        addProducts(PRODUCT_TABLE);
+      }, 5000);
+    }
+  }, []);
   useEffect(() => {
     const handleEscape = (event: KeyboardEvent) => {
       if (event.key === "Escape") {