From b3c7c41f57e6a39cfd2fc6e5c8fcb7b4cade1807 Mon Sep 17 00:00:00 2001
From: hsinlun <43398440+hsinlun99@users.noreply.github.com>
Date: Thu, 20 Jun 2024 22:58:24 +0800
Subject: [PATCH] [Research Integrate] initializing filter and sorting after
 closing cluster drawer (#157)

* fix: :bug: initializing filter state after closing cluster drawer

* fix: :bug: initialize sorting method state after closing cluster drawer

* fix: :bug: fix cluster default close state

* fix: :speech_balloon: remove testing console.log
---
 src/components/Drawer/ClusterDrawer/index.tsx  | 18 +++---------------
 src/components/Drawer/index.tsx                | 14 +++++++++++++-
 src/components/Map/Fabs/PoiFilterFab/index.tsx |  1 -
 .../Map/Fabs/UserFab/UserFabMenu/index.tsx     |  8 ++++++++
 4 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/components/Drawer/ClusterDrawer/index.tsx b/src/components/Drawer/ClusterDrawer/index.tsx
index 4e21fb58..01725fb2 100644
--- a/src/components/Drawer/ClusterDrawer/index.tsx
+++ b/src/components/Drawer/ClusterDrawer/index.tsx
@@ -22,7 +22,6 @@ import { editReport, resetReport } from "../../../store/report";
 import {
   getParamsFromDrawer,
   isCurrentDrawerParams,
-  resetDrawerParams,
 } from "../../../utils/routes/params";
 
 import { getClusterIcon } from "../../../constants/clusterIcon";
@@ -46,11 +45,6 @@ import {
   sortingMessages,
 } from "../../../constants/sortingOptions";
 import UIPoi, { UIPoiData, UIPois } from "../../../models/uiPoi";
-import {
-  resetFilterPoiFloors,
-  resetFilterPoiStatuses,
-  resetFilterPoiTargetNames,
-} from "../../../store/filter";
 
 interface PoiListItemProps {
   poi: {
@@ -213,7 +207,7 @@ const PoiListItem: React.FC<PoiListItemProps> = (props) => {
 const ClusterDrawer: React.FC = () => {
   const { t } = useTranslation();
 
-  const [searchParams, setSearchParams] = useSearchParams();
+  const [searchParams] = useSearchParams();
 
   const reportType = useSelector((state: IRootState) => state.report.type);
 
@@ -272,13 +266,6 @@ const ClusterDrawer: React.FC = () => {
     }
   }, [filteredFloors, filteredStatuses, filteredTargetNames, queriedPoiList]);
 
-  const handleDrawerDismiss = () => {
-    resetDrawerParams(searchParams, setSearchParams);
-    dispatch(resetFilterPoiFloors());
-    dispatch(resetFilterPoiTargetNames());
-    dispatch(resetFilterPoiStatuses());
-  };
-
   const [sortingMethod, setSortingMethod] = useState(sortingOptions[0].key);
   const [sortingMessage, setSortingMessage] = useState(
     sortingMessages[0].message,
@@ -287,6 +274,8 @@ const ClusterDrawer: React.FC = () => {
   React.useEffect(() => {
     if (!isCurrentDrawerParams("cluster", searchParams)) {
       dispatch(resetReport());
+      setSortingMethod(sortingOptions[0].key);
+      setSortingMessage(sortingMessages[0].message);
     }
   }, [dispatch, searchParams]);
 
@@ -345,7 +334,6 @@ const ClusterDrawer: React.FC = () => {
     <Drawer
       isDraggable={true}
       open={selected}
-      onClose={handleDrawerDismiss}
       title={t("clusterDrawer.title", {
         name: cluster?.data.name,
         ns: ["drawer"],
diff --git a/src/components/Drawer/index.tsx b/src/components/Drawer/index.tsx
index bc51acf0..d6795224 100644
--- a/src/components/Drawer/index.tsx
+++ b/src/components/Drawer/index.tsx
@@ -6,11 +6,13 @@ import { CloseIcon } from "../../utils/icons/drawer";
 import { drawerVariants, draggableDrawerVariants } from "./animation";
 import { Button } from "@nextui-org/react";
 import { useTranslation } from "react-i18next";
+import { isCurrentDrawerParams } from "../../utils/routes/params";
+import { useSearchParams } from "react-router-dom";
 
 interface DrawerProps {
   children: React.ReactNode;
   open: boolean;
-  onClose: () => void;
+  onClose?: () => void;
   title: React.ReactNode;
   primaryButton?: React.ReactNode;
   secondaryButton?: React.ReactNode;
@@ -43,6 +45,16 @@ const Drawer: React.FC<DrawerProps> = (props) => {
     }
   };
 
+  const [searchParams] = useSearchParams();
+
+  React.useEffect(() => {
+    if (!isCurrentDrawerParams("cluster", searchParams)) {
+      if (isListShown) {
+        setIsListShown(false);
+      }
+    }
+  }, [isListShown, searchParams]);
+
   return (
     <>
       {isDraggable ? (
diff --git a/src/components/Map/Fabs/PoiFilterFab/index.tsx b/src/components/Map/Fabs/PoiFilterFab/index.tsx
index cf97975e..9f21e454 100644
--- a/src/components/Map/Fabs/PoiFilterFab/index.tsx
+++ b/src/components/Map/Fabs/PoiFilterFab/index.tsx
@@ -91,7 +91,6 @@ const PoiFilterFabs: React.FC = () => {
       setFloor(new Set([]));
       setTargetName(new Set([]));
       setStatus(new Set([]));
-      console.log("clean up filter poi");
     };
   }, [cluster, isRecommended]);
 
diff --git a/src/components/Map/Fabs/UserFab/UserFabMenu/index.tsx b/src/components/Map/Fabs/UserFab/UserFabMenu/index.tsx
index 7faa1c60..21fbec5e 100644
--- a/src/components/Map/Fabs/UserFab/UserFabMenu/index.tsx
+++ b/src/components/Map/Fabs/UserFab/UserFabMenu/index.tsx
@@ -16,6 +16,11 @@ import {
 import { openModal } from "../../../../../store/modal";
 import { useSearchParams } from "react-router-dom";
 import { resetDrawerParams } from "../../../../../utils/routes/params";
+import {
+  resetFilterPoiFloors,
+  resetFilterPoiStatuses,
+  resetFilterPoiTargetNames,
+} from "../../../../../store/filter";
 
 const MenuItemUser: React.FC = () => {
   const { data: user } = useGetUserQuery();
@@ -65,6 +70,9 @@ const UserFabMenu: React.FC = () => {
 
   const handleBackToHome = () => {
     resetDrawerParams(searchParams, setSearchParams);
+    dispatch(resetFilterPoiFloors());
+    dispatch(resetFilterPoiTargetNames());
+    dispatch(resetFilterPoiStatuses());
   };
 
   return (