From 31dc113f2989f96b07c9aa130143323ee929df85 Mon Sep 17 00:00:00 2001
From: ahong75 <anthonyhong2003@gmail.com>
Date: Mon, 23 Oct 2023 16:22:12 -0400
Subject: [PATCH 1/3] feat: added back filter feature

---
 src/components/SearchBar/SearchBar.jsx | 149 ++++++++++++++++++++-----
 1 file changed, 124 insertions(+), 25 deletions(-)

diff --git a/src/components/SearchBar/SearchBar.jsx b/src/components/SearchBar/SearchBar.jsx
index 8fb8b7b..be1a9f8 100644
--- a/src/components/SearchBar/SearchBar.jsx
+++ b/src/components/SearchBar/SearchBar.jsx
@@ -1,4 +1,4 @@
-import { SearchIcon } from "@chakra-ui/icons";
+import { ChevronDownIcon, ChevronUpIcon, SearchIcon } from "@chakra-ui/icons";
 import {
   Box,
   Button,
@@ -6,9 +6,17 @@ import {
   Input,
   InputGroup,
   InputLeftElement,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  Text,
+  useDisclosure,
 } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import { Form, useForm, useFormState } from "react-final-form";
+import Tag from "../Tag";
 
 const SearchBarComponent = (props) => {
   const {
@@ -16,6 +24,7 @@ const SearchBarComponent = (props) => {
     setResetSearch,
     handleSubmit,
     searchInput,
+    isClickedSearch,
     setSearchInput,
     tagToClear,
     setTagToClear,
@@ -26,6 +35,7 @@ const SearchBarComponent = (props) => {
   const { values } = useFormState();
   const { mutators } = useForm();
 
+  const { isOpen, onToggle } = useDisclosure();
   const searchPlaceholder = "Search within " + pageType;
 
   useEffect(() => {
@@ -45,10 +55,21 @@ const SearchBarComponent = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tagToClear, setTagToClear]);
 
+  const handleApplyFiltersClick = (handleSubmit) => {
+    onToggle();
+    handleSubmit();
+  };
+
   const handleSearchInputChange = (e) => {
     setSearchInput(e.target.value);
   };
 
+  const getNumTagsFiltered = (values) => {
+    return isClickedSearch && values.tagArray && values.tagArray.length > 0
+      ? `(${values.tagArray.length})`
+      : "";
+  };
+
   const SearchButton = ({ handleSubmit }) => {
     return (
       <Button
@@ -68,31 +89,109 @@ const SearchBarComponent = (props) => {
   };
 
   return (
-    <Flex {...rest} justifyContent="flex-end">
-      <Box position="relative">
-        <Flex alignItems="center">
-          {/* search bar */}
-          <InputGroup size="lg">
-            <InputLeftElement pointerEvents="none">
-              <SearchIcon color="lightGrey" />
-            </InputLeftElement>
-            <Input
-              value={searchInput}
-              onChange={handleSearchInputChange}
-              placeholder={searchPlaceholder}
-              fontWeight="400"
-              fontSize="16px"
-              fontFamily="'Europa-Regular', sans-serif"
-              width="25rem"
-              borderRadius="15px"
-              border="2px solid lightGrey"
-            />
-          </InputGroup>
-
-          {/* Submit search button */}
-          <SearchButton handleSubmit={handleSubmit} />
-        </Flex>
+    <Flex {...rest} justifyContent="flex-end" position="relative" gap="10px">
+      <Box position="absolute" mr="238px">
+        {/* <Flex alignItems="center"> */}
+        {/* search bar */}
+        <InputGroup size="lg">
+          <InputLeftElement pointerEvents="none">
+            <SearchIcon color="lightGrey" />
+          </InputLeftElement>
+          <Input
+            value={searchInput}
+            onChange={handleSearchInputChange}
+            placeholder={searchPlaceholder}
+            fontWeight="400"
+            fontSize="16px"
+            fontFamily="'Europa-Regular', sans-serif"
+            width="25rem"
+            borderRadius="15px"
+            border="2px solid lightGrey"
+          />
+        </InputGroup>
+
+        {/* </Flex> */}
       </Box>
+      {/* Filter tab */}
+      {/* <Box mr="3"> */}
+      <Tabs variant="enclosed" h="full" align="end">
+        {isOpen ? (
+          <TabList>
+            <Box
+              border="1px solid Grey"
+              borderBottom="none"
+              roundedTop={8}
+              roundedBottom={0}
+            >
+              <Tab
+                color="Grey"
+                bgColor="#F2F2F2"
+                border="none"
+                onClick={onToggle}
+                fontSize="lg"
+                px={4}
+                pb={isOpen ? 5 : 3}
+              >
+                <Text pr={3} fontFamily="'Europa-Regular', sans-serif">
+                  Filter {getNumTagsFiltered(values)}
+                </Text>
+                <ChevronUpIcon />
+              </Tab>
+            </Box>
+          </TabList>
+        ) : (
+          <Button
+            p={4}
+            pt={3}
+            rounded={8}
+            bgColor="#F2F2F2"
+            color="Grey"
+            border="1px solid Grey"
+            _hover={{ bgColor: "#d9d9d9" }}
+            _active={{ bgColor: "#c1c1c1" }}
+            size="lg"
+            fontFamily="'Europa-Regular', sans-serif"
+            fontSize="lg"
+            onClick={onToggle}
+          >
+            <Text pr={3}>Filter {getNumTagsFiltered(values)}</Text>
+            <ChevronDownIcon />
+          </Button>
+        )}
+        {/* <Box position="absolute" top="100%" left="0" width="100vw" zIndex="10"> */}
+        <TabPanels
+          display={isOpen ? "initial" : "none"}
+          // backgroundColor="#F2F2F2"
+          mr="-100px"
+          // position="absolute"
+        >
+          <TabPanel
+            width={{ base: "75em", "2xl": "80em" }}
+            border="1px solid Grey"
+            rounded={8}
+            roundedTopRight={0}
+            bgColor="#F2F2F2"
+            position="relative"
+          >
+            <Tag height="65vh" overflow="auto" />
+            <Button
+              p={4}
+              variant="Blue"
+              pos="absolute"
+              right="2em"
+              bottom="2em"
+              onClick={() => handleApplyFiltersClick(handleSubmit)}
+            >
+              Apply Filters {getNumTagsFiltered(values)}
+            </Button>
+          </TabPanel>
+        </TabPanels>
+        {/* </Box> */}
+      </Tabs>
+      {/* </Box> */}
+
+      {/* Submit search button */}
+      <SearchButton handleSubmit={handleSubmit} />
     </Flex>
   );
 };

From dd1e639fefbbdf4dbc9129c2a9492d1e266f234b Mon Sep 17 00:00:00 2001
From: ahong75 <anthonyhong2003@gmail.com>
Date: Mon, 23 Oct 2023 16:41:07 -0400
Subject: [PATCH 2/3] style: removed comments

---
 src/components/SearchBar/SearchBar.jsx | 17 +----------------
 1 file changed, 1 insertion(+), 16 deletions(-)

diff --git a/src/components/SearchBar/SearchBar.jsx b/src/components/SearchBar/SearchBar.jsx
index be1a9f8..0da1f51 100644
--- a/src/components/SearchBar/SearchBar.jsx
+++ b/src/components/SearchBar/SearchBar.jsx
@@ -91,8 +91,6 @@ const SearchBarComponent = (props) => {
   return (
     <Flex {...rest} justifyContent="flex-end" position="relative" gap="10px">
       <Box position="absolute" mr="238px">
-        {/* <Flex alignItems="center"> */}
-        {/* search bar */}
         <InputGroup size="lg">
           <InputLeftElement pointerEvents="none">
             <SearchIcon color="lightGrey" />
@@ -109,11 +107,7 @@ const SearchBarComponent = (props) => {
             border="2px solid lightGrey"
           />
         </InputGroup>
-
-        {/* </Flex> */}
       </Box>
-      {/* Filter tab */}
-      {/* <Box mr="3"> */}
       <Tabs variant="enclosed" h="full" align="end">
         {isOpen ? (
           <TabList>
@@ -158,13 +152,7 @@ const SearchBarComponent = (props) => {
             <ChevronDownIcon />
           </Button>
         )}
-        {/* <Box position="absolute" top="100%" left="0" width="100vw" zIndex="10"> */}
-        <TabPanels
-          display={isOpen ? "initial" : "none"}
-          // backgroundColor="#F2F2F2"
-          mr="-100px"
-          // position="absolute"
-        >
+        <TabPanels display={isOpen ? "initial" : "none"} mr="-100px">
           <TabPanel
             width={{ base: "75em", "2xl": "80em" }}
             border="1px solid Grey"
@@ -186,11 +174,8 @@ const SearchBarComponent = (props) => {
             </Button>
           </TabPanel>
         </TabPanels>
-        {/* </Box> */}
       </Tabs>
-      {/* </Box> */}
 
-      {/* Submit search button */}
       <SearchButton handleSubmit={handleSubmit} />
     </Flex>
   );

From de678d83ca668c3c98ed3772ed5e2e2ce4ad6d1c Mon Sep 17 00:00:00 2001
From: ahong75 <anthonyhong2003@gmail.com>
Date: Mon, 23 Oct 2023 16:55:44 -0400
Subject: [PATCH 3/3] fix: added conditional spacing

---
 src/components/SearchBar/SearchBar.jsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/SearchBar/SearchBar.jsx b/src/components/SearchBar/SearchBar.jsx
index 0da1f51..4c2407f 100644
--- a/src/components/SearchBar/SearchBar.jsx
+++ b/src/components/SearchBar/SearchBar.jsx
@@ -87,10 +87,17 @@ const SearchBarComponent = (props) => {
       </Button>
     );
   };
-
+  const calculateRight = () => {
+    if (!isClickedSearch || !values.tagArray || values.tagArray.length == 0)
+      return "238px";
+    if (values.tagArray.length >= 10) {
+      return "274px";
+    }
+    return "263px";
+  };
   return (
     <Flex {...rest} justifyContent="flex-end" position="relative" gap="10px">
-      <Box position="absolute" mr="238px">
+      <Box position="absolute" right={calculateRight()}>
         <InputGroup size="lg">
           <InputLeftElement pointerEvents="none">
             <SearchIcon color="lightGrey" />