just Filter now

Author: tonyqiu123

frontend/src/components/common/Filter.tsx

@@ -9,60 +9,17 @@ import {
 } from "@chakra-ui/react";
 import FilterOpenIcon from "../assets/filter-open.svg";
 
-import { filterConfigs, FilterSection } from "../../constants/filterConfig";
+import { filterConfigs } from "../../constants/filterConfig";
 
 export type FilterType = "petList" | "userManagement";
 
-type FilterProviderProps = {
+type FilterProps = {
   type: FilterType;
   onFilterChange: (selectedFilters: Record<string, string[]>) => void;
   selected?: Record<string, string[]>;
 };
 
-type FilterProps = {
-  onChange: (value: string) => void;
-  data: FilterSection;
-  selectedOptions?: string[];
-};
-
-const Filter: React.FC<FilterProps> = ({
-  onChange,
-  data,
-  selectedOptions = [],
-}) => {
-  return (
-    <Popover>
-      <PopoverTrigger>
-        <Button>
-          <img src={FilterOpenIcon} alt="open" />
-          {data.name}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent>
-        <PopoverBody className="filter">
-          <h4>Filter by: {data.name}</h4>
-          {data.options.map((option) => (
-            <div key={option.value}>
-              <input
-                type="checkbox"
-                onClick={() => onChange(option.value)}
-                checked={selectedOptions.includes(option.value)}
-                readOnly
-              />
-              <p>{option.label}</p>
-            </div>
-          ))}
-        </PopoverBody>
-      </PopoverContent>
-    </Popover>
-  );
-};
-
-const FilterProvider: React.FC<FilterProviderProps> = ({
-  type,
-  onFilterChange,
-  selected,
-}) => {
+const Filter: React.FC<FilterProps> = ({ type, onFilterChange, selected }) => {
   const filters = filterConfigs[type];
   const [selectedFilters, setSelectedFilters] = useState<
     Record<string, string[]>
@@ -86,15 +43,37 @@ const FilterProvider: React.FC<FilterProviderProps> = ({
   return (
     <div>
       {filters.map((filter) => (
-        <Filter
-          key={filter.name}
-          data={filter}
-          selectedOptions={selectedFilters[filter.name] || []}
-          onChange={(value) => handleOptionChange(filter.name, value)}
-        />
+        <Popover key={filter.name}>
+          <PopoverTrigger>
+            <Button>
+              <img src={FilterOpenIcon} alt="open" /> {filter.name}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent>
+            <PopoverBody className="filter">
+              <h4>Filter by: {filter.name}</h4>
+              {filter.options.map((option) => (
+                <div key={option.value}>
+                  <input
+                    type="checkbox"
+                    onClick={() =>
+                      handleOptionChange(filter.name, option.value)
+                    }
+                    checked={
+                      selectedFilters[filter.name]?.includes(option.value) ||
+                      false
+                    }
+                    readOnly
+                  />
+                  <p>{option.label}</p>
+                </div>
+              ))}
+            </PopoverBody>
+          </PopoverContent>
+        </Popover>
       ))}
     </div>
   );
 };
 
-export default FilterProvider;
+export default Filter;