From 5d986f560c55bb963d36cf0ffa5541c77c95d592 Mon Sep 17 00:00:00 2001
From: Dotty <dottykurmi123@gmail.com>
Date: Mon, 10 Jun 2024 17:27:26 -0400
Subject: [PATCH] delete polygon Panel Item

---
 .../MapPolygonCheckPanelItem.tsx              | 206 ------------------
 .../MapPolygonPanel/MapPolygonPanelItem.tsx   | 165 --------------
 .../site/[uuid]/components/MockedData.ts      |  60 -----
 3 files changed, 431 deletions(-)
 delete mode 100644 src/components/elements/MapPolygonPanel/MapPolygonCheckPanelItem.tsx
 delete mode 100644 src/components/elements/MapPolygonPanel/MapPolygonPanelItem.tsx

diff --git a/src/components/elements/MapPolygonPanel/MapPolygonCheckPanelItem.tsx b/src/components/elements/MapPolygonPanel/MapPolygonCheckPanelItem.tsx
deleted file mode 100644
index 635f5a88a..000000000
--- a/src/components/elements/MapPolygonPanel/MapPolygonCheckPanelItem.tsx
+++ /dev/null
@@ -1,206 +0,0 @@
-import classNames from "classnames";
-import { DetailedHTMLProps, Dispatch, HTMLAttributes, SetStateAction, useState } from "react";
-import { When } from "react-if";
-
-import Text from "@/components/elements/Text/Text";
-import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
-import ModalConfirm from "@/components/extensive/Modal/ModalConfirm";
-import ModalWithLogo from "@/components/extensive/Modal/ModalWithLogo";
-import ModalWithMap from "@/components/extensive/Modal/ModalWithMap";
-import { useModalContext } from "@/context/modal.provider";
-
-import Button from "../Button/Button";
-import Menu from "../Menu/Menu";
-import { MENU_PLACEMENT_RIGHT_BOTTOM } from "../Menu/MenuVariant";
-import { StatusEnum } from "../Status/constants/statusMap";
-
-export interface MapPolygonCheckPanelItemProps
-  extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  uuid: string;
-  title: string;
-  isSelected?: boolean;
-  refContainer?: React.RefObject<HTMLDivElement> | null;
-  setEditPolygon?: Dispatch<SetStateAction<boolean>>;
-  status: string;
-  polygon?: string[];
-}
-
-const MapPolygonCheckPanelItem = ({
-  title,
-  isSelected,
-  className,
-  refContainer,
-  setEditPolygon,
-  polygon,
-  status,
-  ...props
-}: MapPolygonCheckPanelItemProps) => {
-  const { openModal, closeModal } = useModalContext();
-  const [openCollapse, setOpenCollapse] = useState(true);
-  const openFormModalHandlerRequestPolygonSupport = () => {
-    openModal(
-      <ModalWithMap
-        title="Request Support"
-        onClose={closeModal}
-        content="Faja Lobi Project&nbsp;&nbsp;•&nbsp;&nbsp;Priceless Planet Coalition"
-        primaryButtonText="Submit"
-        primaryButtonProps={{ className: "px-8 py-3", variant: "primary", onClick: closeModal }}
-      ></ModalWithMap>
-    );
-  };
-  const openFormModalHandlerAddCommentary = () => {
-    openModal(
-      <ModalWithLogo
-        title="Blue Forest"
-        onClose={closeModal}
-        status={StatusEnum.UNDER_REVIEW}
-        toogleButton
-        content="Faja Lobi Project&nbsp;&nbsp;•&nbsp;&nbsp;Priceless Planet Coalition"
-        primaryButtonText="Close"
-        primaryButtonProps={{ className: "px-8 py-3", variant: "primary", onClick: closeModal }}
-      />
-    );
-  };
-  const openFormModalHandlerConfirm = () => {
-    openModal(
-      <ModalConfirm
-        title={"Confirm Polygon Deletion"}
-        content="Do you want to delete this polygon?"
-        onClose={closeModal}
-        onConfirm={() => {}}
-      />
-    );
-  };
-
-  const itemsPrimaryMenu = [
-    {
-      id: "1",
-      render: () => (
-        <Text variant="text-14-semibold" className="flex items-center">
-          <Icon name={IconNames.IC_SITE_VIEW} className="h-4 w-4 lg:h-5 lg:w-5" />
-          &nbsp; Edit Polygon
-        </Text>
-      ),
-      onClick: () => setEditPolygon?.(true)
-    },
-    {
-      id: "2",
-      render: () => (
-        <Text variant="text-14-semibold" className="flex items-center">
-          <Icon name={IconNames.SEARCH} className="h-4 w-4 lg:h-5 lg:w-5" />
-          &nbsp; Zoom to
-        </Text>
-      )
-    },
-    {
-      id: "3",
-      render: () => (
-        <Text variant="text-14-semibold" className="flex items-center">
-          <Icon name={IconNames.DOWNLOAD_PA} className="h-4 w-4 lg:h-5 lg:w-5" />
-          &nbsp; Download
-        </Text>
-      )
-    },
-    {
-      id: "4",
-      render: () => (
-        <Button variant="text" onClick={openFormModalHandlerAddCommentary}>
-          <Text variant="text-14-semibold" className="flex items-center">
-            <Icon name={IconNames.COMMENT} className="h-5 w-5 lg:h-6 lg:w-6" />
-            &nbsp; Comment
-          </Text>
-        </Button>
-      )
-    },
-    {
-      id: "5",
-      render: () => (
-        <Button variant="text" onClick={openFormModalHandlerRequestPolygonSupport}>
-          <Text variant="text-14-semibold" className="flex items-center">
-            <Icon name={IconNames.REQUEST} className="h-5 w-5 lg:h-6 lg:w-6" />
-            &nbsp; Request Support
-          </Text>
-        </Button>
-      )
-    },
-    {
-      id: "6",
-      render: () => (
-        <Button variant="text" onClick={openFormModalHandlerConfirm}>
-          <Text variant="text-14-semibold" className="flex items-center ">
-            <Icon name={IconNames.TRASH_PA} className="h-5 w-5 lg:h-6 lg:w-6" />
-            &nbsp; Delete Polygon
-          </Text>
-        </Button>
-      )
-    }
-  ];
-
-  const dynamicClasses = (status: string) => {
-    switch (status) {
-      case "Submitted":
-        return "bg-blue";
-      case "Approved":
-        return "bg-green";
-      case "Needs More Info":
-        return "bg-tertiary-600";
-      case "Draft":
-        return "bg-pinkCustom";
-      default:
-        return "bg-blue ";
-    }
-  };
-
-  return (
-    <div>
-      <div {...props} className={className}>
-        <div className="flex items-center gap-2">
-          <div className={classNames("h-4 w-4 rounded-full", dynamicClasses(status))} />{" "}
-          <div className="flex flex-1 flex-col">
-            <Text variant="text-14-light" className="text-white">
-              {title}
-            </Text>
-          </div>
-          <div className="flex h-full items-start self-start">
-            <When condition={!!polygon}>
-              <button
-                onClick={() => {
-                  setOpenCollapse(!openCollapse);
-                }}
-              >
-                <Icon
-                  name={IconNames.CHEVRON_DOWN}
-                  className={classNames(
-                    "h-3 w-3 rounded-lg text-white hover:fill-primary hover:text-primary lg:h-4 lg:w-4",
-                    { "rotate-180 transform": !!openCollapse }
-                  )}
-                />
-              </button>
-            </When>
-
-            <Menu container={refContainer?.current} placement={MENU_PLACEMENT_RIGHT_BOTTOM} menu={itemsPrimaryMenu}>
-              <Icon
-                name={IconNames.IC_MORE_OUTLINED}
-                className="h-4 w-4 rounded-lg text-white hover:fill-primary hover:text-primary lg:h-5 lg:w-5"
-              />
-            </Menu>
-          </div>
-        </div>
-        <When condition={!!polygon && !!openCollapse}>
-          <div className="my-3 grid gap-3 px-4">
-            {polygon?.map((item, index) => (
-              <div key={index} className="flex items-center gap-2">
-                <Icon name={IconNames.ERROR_WHITE_BORDER_RED} className="h-4 w-4 rounded-lg text-white lg:h-5 lg:w-5" />
-                <Text variant="text-14-light" className="text-white">
-                  {item}
-                </Text>
-              </div>
-            ))}
-          </div>
-        </When>
-      </div>
-    </div>
-  );
-};
-
-export default MapPolygonCheckPanelItem;
diff --git a/src/components/elements/MapPolygonPanel/MapPolygonPanelItem.tsx b/src/components/elements/MapPolygonPanel/MapPolygonPanelItem.tsx
deleted file mode 100644
index 70b3854a1..000000000
--- a/src/components/elements/MapPolygonPanel/MapPolygonPanelItem.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import classNames from "classnames";
-import { DetailedHTMLProps, Dispatch, HTMLAttributes, SetStateAction } from "react";
-
-import Text from "@/components/elements/Text/Text";
-import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
-import ModalConfirm from "@/components/extensive/Modal/ModalConfirm";
-import ModalWithLogo from "@/components/extensive/Modal/ModalWithLogo";
-import ModalWithMap from "@/components/extensive/Modal/ModalWithMap";
-import { useModalContext } from "@/context/modal.provider";
-
-import Button from "../Button/Button";
-import Menu from "../Menu/Menu";
-import { MENU_PLACEMENT_RIGHT_BOTTOM } from "../Menu/MenuVariant";
-import { StatusEnum } from "../Status/constants/statusMap";
-
-export interface MapPolygonPanelItemProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  uuid: string;
-  title: string;
-  subtitle: string;
-  isSelected?: boolean;
-  refContainer?: React.RefObject<HTMLDivElement> | null;
-  setEditPolygon?: Dispatch<SetStateAction<boolean>>;
-}
-
-const MapPolygonPanelItem = ({
-  title,
-  subtitle,
-  isSelected,
-  className,
-  refContainer,
-  setEditPolygon,
-  ...props
-}: MapPolygonPanelItemProps) => {
-  const { openModal, closeModal } = useModalContext();
-  const openFormModalHandlerRequestPolygonSupport = () => {
-    openModal(
-      <ModalWithMap
-        title="Request Support"
-        onClose={closeModal}
-        content="Faja Lobi Project&nbsp;&nbsp;•&nbsp;&nbsp;Priceless Planet Coalition"
-        primaryButtonText="Submit"
-        primaryButtonProps={{ className: "px-8 py-3", variant: "primary", onClick: closeModal }}
-      />
-    );
-  };
-
-  const openFormModalHandlerAddCommentary = () => {
-    openModal(
-      <ModalWithLogo
-        title="Blue Forest"
-        onClose={closeModal}
-        status={StatusEnum.UNDER_REVIEW}
-        toogleButton
-        content="Faja Lobi Project&nbsp;&nbsp;•&nbsp;&nbsp;Priceless Planet Coalition"
-        primaryButtonText="Close"
-        primaryButtonProps={{ className: "px-8 py-3", variant: "primary", onClick: closeModal }}
-      />
-    );
-  };
-
-  const openFormModalHandlerConfirm = () => {
-    openModal(
-      <ModalConfirm
-        title={"Confirm Polygon Deletion"}
-        content="Do you want to delete this polygon?"
-        onClose={closeModal}
-        onConfirm={() => {}}
-      />
-    );
-  };
-
-  const itemsPrimaryMenu = [
-    {
-      id: "1",
-      render: () => (
-        <Text variant="text-14-semibold" className="flex items-center">
-          <Icon name={IconNames.IC_SITE_VIEW} className="h-4 w-4 lg:h-5 lg:w-5" />
-          &nbsp; Edit Polygon
-        </Text>
-      ),
-      onClick: () => setEditPolygon?.(true)
-    },
-    {
-      id: "2",
-      render: () => (
-        <Text variant="text-14-semibold" className="flex items-center">
-          <Icon name={IconNames.SEARCH} className="h-4 w-4 lg:h-5 lg:w-5" />
-          &nbsp; Zoom to
-        </Text>
-      )
-    },
-    {
-      id: "3",
-      render: () => (
-        <Text variant="text-14-semibold" className="flex items-center">
-          <Icon name={IconNames.DOWNLOAD_PA} className="h-5 w-5 lg:h-6 lg:w-6" />
-          &nbsp; Download
-        </Text>
-      )
-    },
-    {
-      id: "4",
-      render: () => (
-        <Button variant="text" onClick={openFormModalHandlerAddCommentary}>
-          <Text variant="text-14-semibold" className="flex items-center">
-            <Icon name={IconNames.COMMENT} className="h-5 w-5 lg:h-6 lg:w-6" />
-            &nbsp; Comment
-          </Text>
-        </Button>
-      )
-    },
-    {
-      id: "5",
-      render: () => (
-        <Button variant="text" onClick={openFormModalHandlerRequestPolygonSupport}>
-          <Text variant="text-14-semibold" className="flex items-center">
-            <Icon name={IconNames.REQUEST} className="h-5 w-5 lg:h-6 lg:w-6" />
-            &nbsp; Request Support
-          </Text>
-        </Button>
-      )
-    },
-    {
-      id: "6",
-      render: () => (
-        <Button variant="text" onClick={openFormModalHandlerConfirm}>
-          <Text variant="text-14-semibold" className="flex items-center">
-            <Icon name={IconNames.TRASH_PA} className="h-5 w-5 lg:h-6 lg:w-6" />
-            &nbsp; Delete Polygon
-          </Text>
-        </Button>
-      )
-    }
-  ];
-
-  return (
-    <div>
-      <div
-        {...props}
-        className={classNames(className, "rounded-lg border-2 border-transparent bg-white p-2 hover:border-primary", {
-          "border-primary-500": isSelected,
-          "border-neutral-500 hover:border-neutral-800": !isSelected
-        })}
-      >
-        <div className="flex items-center gap-2">
-          <Icon name={IconNames.MAP_THUMBNAIL} className="h-11 w-11 rounded-lg bg-neutral-300" />
-          <div className="flex flex-1 flex-col">
-            <Text variant="text-14-bold">{title}</Text>
-            <Text variant="text-14-light">{subtitle}</Text>
-          </div>
-          <div className="flex h-full self-start">
-            <Menu container={refContainer?.current} placement={MENU_PLACEMENT_RIGHT_BOTTOM} menu={itemsPrimaryMenu}>
-              <Icon
-                name={IconNames.IC_MORE_OUTLINED}
-                className="h-4 w-4 rounded-lg hover:fill-primary hover:text-primary lg:h-5 lg:w-5"
-              />
-            </Menu>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default MapPolygonPanelItem;
diff --git a/src/pages/site/[uuid]/components/MockedData.ts b/src/pages/site/[uuid]/components/MockedData.ts
index 82f67b376..056628fbc 100644
--- a/src/pages/site/[uuid]/components/MockedData.ts
+++ b/src/pages/site/[uuid]/components/MockedData.ts
@@ -1,6 +1,3 @@
-import { MapPolygonCheckPanelItemProps } from "@/components/elements/MapPolygonPanel/MapPolygonCheckPanelItem";
-import { MapPolygonPanelItemProps } from "@/components/elements/MapPolygonPanel/MapPolygonPanelItem";
-
 export const uploadImageData = [
   { id: "1", name: "Images5.png", status: "We are processing your image", isVerified: true },
   { id: "2", name: "Images4.png", status: "We are processing your image", isVerified: true },
@@ -43,60 +40,3 @@ export const commentariesItems = [
     status: "Draft"
   }
 ];
-
-export const PolygonData: MapPolygonPanelItemProps[] = [
-  {
-    uuid: "1",
-    title: "Polygon 1",
-    subtitle: "Created 15/12/2023"
-  },
-  {
-    uuid: "2",
-    title: "Polygon 2",
-    subtitle: "Created 15/12/2023"
-  },
-  {
-    uuid: "3",
-    title: "Polygon 3",
-    subtitle: "Created 15/12/2023"
-  },
-  {
-    uuid: "4",
-    title: "Polygon 4",
-    subtitle: "Created 15/12/2023"
-  },
-  {
-    uuid: "5",
-    title: "Polygon 5",
-    subtitle: "Created 15/12/2023"
-  }
-];
-
-export const PolygonAvailableData: MapPolygonCheckPanelItemProps[] = [
-  {
-    uuid: "1",
-    title: "Durrell",
-    status: "Submitted"
-  },
-  {
-    uuid: "2",
-    title: "Ecofix",
-    status: "Approved"
-  },
-  {
-    uuid: "3",
-    title: "Env Coffee Forest Forum",
-    status: "Needs More Info",
-    polygon: ["Not WGS 84 projection", "Not WGS 84 projection", "Overlapping polygons identified"]
-  },
-  {
-    uuid: "4",
-    title: "Env Found Afr Sl",
-    status: "Submitted"
-  },
-  {
-    uuid: "5",
-    title: "Justdiggit",
-    status: "Draft"
-  }
-];