Filter and sort dropdowns fixes

IntersectMBO · Mar 25, 2024 · 6d92332 · 6d92332
1 parent 37b0c5f
commit 6d92332
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 63 deletions.
diff --git a/govtool/frontend/src/components/atoms/ClickOutside.tsx b/govtool/frontend/src/components/atoms/ClickOutside.tsx
diff --git a/govtool/frontend/src/components/atoms/index.ts b/govtool/frontend/src/components/atoms/index.ts
@@ -2,7 +2,6 @@ export * from "./ActionRadio";
 export * from "./Background";
 export * from "./Button";
 export * from "./Checkbox";
-export * from "./ClickOutside";
 export * from "./CopyButton";
 export * from "./DrawerLink";
 export * from "./ExternalModalButton";

diff --git a/govtool/frontend/src/components/molecules/DataActionsBar.tsx b/govtool/frontend/src/components/molecules/DataActionsBar.tsx
@@ -4,7 +4,6 @@ import Search from "@mui/icons-material/Search";
 
 import { GovernanceActionsFilters, GovernanceActionsSorting } from "@molecules";
 import { OrderActionsChip } from "./OrderActionsChip";
-import { ClickOutside } from "../atoms";
 import { theme } from "@/theme";
 
 type DataActionsBarProps = {
@@ -86,24 +85,23 @@ export const DataActionsBar: FC<DataActionsBarProps> = ({ ...props }) => {
           setSortOpen={setSortOpen}
           sortingActive={sortingActive}
           sortOpen={sortOpen}
-        />
+        >
+          {filtersOpen && (
+            <GovernanceActionsFilters
+              chosenFilters={chosenFilters}
+              setChosenFilters={setChosenFilters}
+              closeFilters={closeFilters}
+            />
+          )}
+          {sortOpen && (
+            <GovernanceActionsSorting
+              chosenSorting={chosenSorting}
+              setChosenSorting={setChosenSorting}
+              closeSorts={closeSorts}
+            />
+          )}
+        </OrderActionsChip>
       </Box>
-      {filtersOpen && (
-        <ClickOutside onClick={closeFilters}>
-          <GovernanceActionsFilters
-            chosenFilters={chosenFilters}
-            setChosenFilters={setChosenFilters}
-          />
-        </ClickOutside>
-      )}
-      {sortOpen && (
-        <ClickOutside onClick={closeSorts}>
-          <GovernanceActionsSorting
-            chosenSorting={chosenSorting}
-            setChosenSorting={setChosenSorting}
-          />
-        </ClickOutside>
-      )}
     </>
   );
 };
diff --git a/govtool/frontend/src/components/molecules/GovernanceActionsFilters.tsx b/govtool/frontend/src/components/molecules/GovernanceActionsFilters.tsx
@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useCallback } from "react";
+import { Dispatch, SetStateAction, useCallback, useRef } from "react";
 import {
   Box,
   Checkbox,
@@ -8,16 +8,18 @@ import {
 } from "@mui/material";
 
 import { GOVERNANCE_ACTIONS_FILTERS } from "@consts";
-import { useScreenDimension, useTranslation } from "@hooks";
+import { useOnClickOutside, useScreenDimension, useTranslation } from "@hooks";
 
 interface Props {
   chosenFilters: string[];
   setChosenFilters: Dispatch<SetStateAction<string[]>>;
+  closeFilters: () => void;
 }
 
 export const GovernanceActionsFilters = ({
   chosenFilters,
   setChosenFilters,
+  closeFilters,
 }: Props) => {
   const handleFilterChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -36,7 +38,10 @@ export const GovernanceActionsFilters = ({
   );
 
   const { t } = useTranslation();
-  const { isMobile } = useScreenDimension();
+  const { isMobile, screenWidth } = useScreenDimension();
+
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  useOnClickOutside(wrapperRef, closeFilters);
 
   return (
     <Box
@@ -48,11 +53,12 @@ export const GovernanceActionsFilters = ({
         boxShadow: "1px 2px 11px 0px #00123D5E",
         borderRadius: "10px",
         padding: "12px 0px",
-        width: "auto",
+        width: screenWidth < 850 ? "315px" : "415px",
         zIndex: "1",
-        right: isMobile ? "73px" : "141px",
-        top: isMobile ? "274px" : "200px",
+        right: isMobile ? "59px" : "115px",
+        top: "53px",
       }}
+      ref={wrapperRef}
     >
       <FormLabel
         sx={{

diff --git a/govtool/frontend/src/components/molecules/GovernanceActionsSorting.tsx b/govtool/frontend/src/components/molecules/GovernanceActionsSorting.tsx
@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction } from "react";
+import { Dispatch, SetStateAction, useRef } from "react";
 import {
   Box,
   FormControl,
@@ -9,19 +9,23 @@ import {
 } from "@mui/material";
 
 import { GOVERNANCE_ACTIONS_SORTING } from "@consts";
-import { useScreenDimension, useTranslation } from "@hooks";
+import { useTranslation, useOnClickOutside } from "@hooks";
 
 interface Props {
   chosenSorting: string;
   setChosenSorting: Dispatch<SetStateAction<string>>;
+  closeSorts: () => void;
 }
 
 export const GovernanceActionsSorting = ({
   chosenSorting,
   setChosenSorting,
+  closeSorts,
 }: Props) => {
   const { t } = useTranslation();
-  const { isMobile } = useScreenDimension();
+
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  useOnClickOutside(wrapperRef, closeSorts);
 
   return (
     <Box
@@ -33,11 +37,12 @@ export const GovernanceActionsSorting = ({
         boxShadow: "1px 2px 11px 0px #00123D5E",
         borderRadius: "10px",
         padding: "12px 0px",
-        width: "auto",
+        width: "315px",
         zIndex: "1",
-        right: isMobile ? "17px" : "29px",
-        top: isMobile ? "274px" : "200px",
+        right: "3px",
+        top: "53px",
       }}
+      ref={wrapperRef}
     >
       <FormControl>
         <Box display="flex" justifyContent="space-between" px="20px">

diff --git a/govtool/frontend/src/components/molecules/OrderActionsChip.tsx b/govtool/frontend/src/components/molecules/OrderActionsChip.tsx
@@ -13,6 +13,7 @@ type Props = {
   sortOpen: boolean;
   setSortOpen: Dispatch<SetStateAction<boolean>>;
   sortingActive: boolean;
+  children?: React.ReactNode;
   isFiltering?: boolean;
 };
 
@@ -32,6 +33,7 @@ export const OrderActionsChip = (props: Props) => {
     setSortOpen,
     sortingActive,
     isFiltering = true,
+    children,
   } = props;
 
   return (
@@ -41,6 +43,8 @@ export const OrderActionsChip = (props: Props) => {
       alignItems="center"
       ml="8px"
       gap={isMobile ? "8px" : "24px"}
+      position="relative"
+      sx={{ alignSelf: "end" }}
     >
       {isFiltering && (
         <Box
@@ -185,6 +189,7 @@ export const OrderActionsChip = (props: Props) => {
           </Box>
         )}
       </Box>
+      {children}
     </Box>
   );
 };
diff --git a/govtool/frontend/src/hooks/index.ts b/govtool/frontend/src/hooks/index.ts
@@ -1,8 +1,9 @@
 export { useTranslation } from "react-i18next";
+export * from "./useFetchNextPageDetector";
+export * from "./useOutsideClick";
+export * from "./useSaveScrollPosition";
 export * from "./useScreenDimension";
 export * from "./useSlider";
-export * from "./useSaveScrollPosition";
-export * from "./useFetchNextPageDetector";
 export * from "./useWalletConnectionListener";
 
 export * from "./forms";

diff --git a/govtool/frontend/src/hooks/useOutsideClick.tsx b/govtool/frontend/src/hooks/useOutsideClick.tsx
@@ -0,0 +1,25 @@
+import { MutableRefObject, useEffect } from "react";
+
+export function useOnClickOutside(
+  ref: MutableRefObject<HTMLDivElement | null>,
+  handler: (event: MouseEvent | TouchEvent) => void,
+) {
+  useEffect(() => {
+    const listener = (event: MouseEvent | TouchEvent) => {
+      const target = event.target as Node;
+
+      if (!ref.current || ref.current.contains(target)) {
+        return;
+      }
+      handler(event);
+    };
+
+    document.addEventListener("mousedown", listener as EventListener);
+    document.addEventListener("touchstart", listener as EventListener);
+
+    return () => {
+      document.removeEventListener("mousedown", listener as EventListener);
+      document.removeEventListener("touchstart", listener as EventListener);
+    };
+  }, [ref, handler]);
+}