[Research Integrate] initializing filter and sorting after closing cl…

…uster drawer (#157)

* fix: 🐛 initializing filter state after closing cluster drawer

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

* fix: 🐛 fix cluster default close state

* fix: 💬 remove testing console.log

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"],

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 ? (

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]);
 

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 (