[front-end] Add ApplyFilters component and integrate filter application in Panel

Author: ms0ur1s

apps/front-end/src/components/panel/Panel.tsx

@@ -8,6 +8,7 @@ import CloseButton from "../common/closeButton/CloseButton";
 import AboutPanel from "./aboutPanel/AboutPanel";
 import DirectoryPanel from "./directoryPanel/DirectoryPanel";
 import SearchPanel from "./searchPanel/SearchPanel";
+import ApplyFilters from "./applyFilters/ApplyFilters";
 import ResultsPanel from "../panel/resultsPanel/ResultsPanel";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import {
@@ -18,7 +19,14 @@ import {
   selectPanelOpen,
   selectResultsPanelOpen,
   openPanel,
+  openResultsPanel,
 } from "./panelSlice";
+import {
+  selectText,
+  performSearch,
+  selectIsFilterActive,
+} from "../panel/searchPanel/searchSlice";
+import { useTranslation } from "react-i18next";
 
 const StyledPanel = styled(Drawer)(() => ({
   display: "flex",
@@ -36,6 +44,7 @@ const StyledPanel = styled(Drawer)(() => ({
     visibility: "visible !important",
     overflow: "visible",
     boxShadow: "0 0 20px rgba(0, 0, 0, 0.16)",
+    borderRight: "none",
   },
 }));
 
@@ -52,6 +61,9 @@ const Panel = () => {
   const isOpen = useAppSelector(selectPanelOpen);
   const selectedTab = useAppSelector(selectSelectedTab);
   const resultsOpen = useAppSelector(selectResultsPanelOpen);
+  const isFilterActive = useAppSelector(selectIsFilterActive);
+  const searchText = useAppSelector(selectText);
+  const { t } = useTranslation();
 
   const isMedium = useMediaQuery("(min-width: 897px)");
 
@@ -81,6 +93,12 @@ const Panel = () => {
     dispatch(setSelectedTab(0));
   };
 
+  const onApplyFilters = async () => {
+    console.log(`Applying filters`);
+    await dispatch(performSearch());
+    dispatch(openResultsPanel());
+  };
+
   return (
     <>
       {/* Desktop view  */}
@@ -137,6 +155,13 @@ const Panel = () => {
                 boxShadow: "0 -2px 10px rgba(0, 0, 0, 0.2)",
               }}
             >
+              {selectedTab === 2 && (
+                <ApplyFilters
+                  buttonText={t("apply_filters")}
+                  buttonAction={onApplyFilters}
+                  disabled={!searchText && !isFilterActive}
+                />
+              )}
               <NavBar
                 onTabChange={handleTabChange}
                 selectedTab={selectedTab}

apps/front-end/src/components/panel/applyFilters/ApplyFilters.tsx

@@ -0,0 +1,38 @@
+import Box from "@mui/material/Box";
+import { styled } from "@mui/material/styles";
+import StandardButton from "../../common/standardButton/StandardButton";
+
+const StyledButtonContainer = styled(Box)(() => ({
+  width: "100%",
+  display: "flex",
+  justifyContent: "center",
+  position: "sticky",
+  padding: "var(--spacing-medium)",
+  backgroundColor: "#fff",
+  boxShadow: "0 0 20px rgba(0, 0, 0, 0.16)",
+  margin: 0,
+  "@media (min-width: 897px)": {
+    display: "none",
+  },
+}));
+
+interface ApplyFiltersProps {
+  buttonText: string;
+  disabled: boolean;
+  buttonAction: () => void;
+}
+
+const ApplyFilters = ({buttonText, buttonAction, disabled}: ApplyFiltersProps) => {
+  return (
+    <StyledButtonContainer>
+      <StandardButton
+        buttonAction={buttonAction}
+        disabled={disabled}
+      >
+        {buttonText}
+      </StandardButton>
+    </StyledButtonContainer>
+  );
+};
+
+export default ApplyFilters;

apps/front-end/src/components/panel/searchPanel/SearchPanel.tsx

@@ -5,10 +5,7 @@ import Heading from "../heading/Heading";
 import ContentPanel from "../contentPanel/ContentPanel";
 import SelectBox from "../../common/selectBox/SelectBox";
 import SearchBox from "./searchBox/SearchBox";
-import StandardButton from "../../common/standardButton/StandardButton";
 import Typography from "@mui/material/Typography";
-import Box from "@mui/material/Box";
-import { styled } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { useAppDispatch, useAppSelector } from "../../../app/hooks";
 import {
@@ -23,20 +20,6 @@ import {
 import { selectTotalItemsCount } from "../../map/mapSlice";
 import { openResultsPanel } from "../panelSlice";
 
-const StyledButtonContainer = styled(Box)(() => ({
-  width: "100%",
-  display: "flex",
-  justifyContent: "center",
-  position: "sticky",
-  padding: "var(--spacing-medium)",
-  backgroundColor: "rgba(255, 255, 255, 0.25) !important",
-  boxShadow: "0 0 20px rgba(0, 0, 0, 0.16)",
-  zIndex: 1,
-  "@media (min-width: 897px)": {
-    display: "none",
-  },
-}));
-
 const SearchPanel = () => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
@@ -53,6 +36,7 @@ const SearchPanel = () => {
 
   const onSearchChange = (e: React.FormEvent<HTMLInputElement>): void => {
     setCurrentText(e.currentTarget.value);
+    dispatch(setText(currentText));
   };
 
   const onFilterChange = async (
@@ -65,12 +49,6 @@ const SearchPanel = () => {
     if (isMedium) dispatch(openResultsPanel());
   };
 
-  const onApplyFilters = async () => {
-    console.log(`Applying filters`);
-    await dispatch(performSearch());
-    dispatch(openResultsPanel());
-  };
-
   const onSubmitSearch = async () => {
     console.log(`Searching for '${submittedText}'`);
     dispatch(setText(currentText));
@@ -87,7 +65,12 @@ const SearchPanel = () => {
 
   return (
     <form
-      style={{ display: "flex", flexDirection: "column", overflow: "hidden" }} // Fix for search filter overflow issue
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        paddingBottom: "80px",
+      }} // Fix for search filter overflow issue
     >
       <Heading title={t("search")}>
         <SearchBox
@@ -113,16 +96,6 @@ const SearchPanel = () => {
           />
         ))}
       </ContentPanel>
-      <StyledButtonContainer>
-        {!isMedium && (
-          <StandardButton
-            buttonAction={onApplyFilters}
-            disabled={!currentText && !isFilterActive}
-          >
-            {t("apply_filters")}
-          </StandardButton>
-        )}
-      </StyledButtonContainer>
     </form>
   );
 };