Revert "[feat] technology filter functionality"

calblueprint · Dec 5, 2024 · ebca66a · ebca66a
1 parent 3ba2101
commit ebca66a
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 84 deletions.
diff --git a/api/maps/AddMarkers.tsx b/api/maps/AddMarkers.tsx
@@ -90,7 +90,6 @@ export default function AddMarker({
     return mapZoom;
   };
 */
-
   const clusterer = useMemo(() => {
     if (!map) return null;
 
@@ -129,6 +128,18 @@ export default function AddMarker({
       onClusterClick: clusterHandler,
     });
 
+    /*setClusterer.addListener('click', function (cluster: Cluster) {
+      const mapZoom = map.getZoom() ?? 0;
+      const minZoom = getMinZoom(cluster, mapZoom);
+
+      if (mapZoom && mapZoom < minZoom) {
+        const idleListener = map.addListener('idle', function () {
+          map.setZoom(minZoom);
+          idleListener.remove();
+        });
+      }
+    });*/
+
     return setClusterer;
   }, [map]);
 

diff --git a/components/Filter/index.tsx b/components/Filter/index.tsx
@@ -16,8 +16,6 @@ interface FilterProps {
   selectedFilters: Filters;
   filterChangeHandlers: FilterChangeHandlers;
   handleButtonClick: (filter: FilterType) => void;
-  handleFilterButtonClick: () => void;
-  clearFilters: () => void;
 }
 
 export default function Filter({
@@ -26,8 +24,6 @@ export default function Filter({
   selectedFilters,
   filterChangeHandlers,
   handleButtonClick,
-  handleFilterButtonClick,
-  clearFilters,
 }: FilterProps) {
   return (
     <FilterBackgroundStyles isActive={isActive}>
@@ -40,8 +36,6 @@ export default function Filter({
             icon={filter.icon}
             label={filter.label}
             currFilter={filter}
-            handleFilterButtonClick={handleFilterButtonClick}
-            clearFilters={clearFilters}
           />
         ) : filter.id === 'status' ? (
           <StatusDropdown

diff --git a/components/FilterBar/index.tsx b/components/FilterBar/index.tsx
@@ -5,21 +5,20 @@ import { FilterContainerStyles } from './styles';
 
 export const FilterBar = ({
   filters,
+  onFilterChange,
   selectedFilters,
   setSelectedFilters,
-  handleFilterButtonClick,
-  clearFilters,
 }: {
   filters: FilterType[];
+  onFilterChange: (filter: FilterType) => void;
   selectedFilters: Filters;
   setSelectedFilters: React.Dispatch<React.SetStateAction<Filters>>;
-  handleFilterButtonClick: () => void;
-  clearFilters: () => void;
 }) => {
   const [activeFilter, setActiveFilter] = useState<FilterType | null>(null);
 
   const handleButtonClick = (filter: FilterType) => {
     setActiveFilter(activeFilter?.id === filter.id ? null : filter);
+    onFilterChange(filter);
   };
 
   const handleTechnologyChange = (options: string[]) => {
@@ -53,8 +52,6 @@ export const FilterBar = ({
           selectedFilters={selectedFilters}
           filterChangeHandlers={filterChangeHandlers}
           handleButtonClick={handleButtonClick}
-          handleFilterButtonClick={handleFilterButtonClick}
-          clearFilters={clearFilters}
         />
       ))}
     </FilterContainerStyles>

diff --git a/components/MapViewScreen/index.tsx b/components/MapViewScreen/index.tsx
@@ -56,70 +56,29 @@ export default function MapViewScreen({
     projectSize: { min: 0, max: 0 },
     location: [],
   });
-  const [filteredProjectsFromDropdowns, setFilteredProjectsFromDropdowns] =
-    useState<Project[]>(projects);
 
-  const [filteredProjectsFromSearch, setFilteredProjectsFromSearch] =
-    useState<Project[]>(projects);
-
-  // clear filters
-  const clearFilters = () => {
-    setSelectedFilters({
-      status: [],
-      technology: [],
-      projectSize: { min: 0, max: 0 },
-      location: [],
-    });
-    setFilteredProjects(projects);
-    setFilteredProjectsFromDropdowns(projects);
-  };
-
-  // show projects based on selected filters
-  const handleFilterButtonClick = () => {
-    /* eslint-disable @typescript-eslint/no-unused-vars */
-    const { status, technology, projectSize, location } = selectedFilters;
-    // add all filtering logic here
-    const technologyProjects = projects?.filter(project =>
-      technology.includes(project.renewable_energy_technology),
-    );
-    setFilteredProjectsFromDropdowns(technologyProjects);
+  const handleFilterChange = (filter: FilterType) => {
+    console.log(filter);
   };
 
-  // search within all projects or filtered projects from dropdowns
   useEffect(() => {
-    let projectsToSearch: Project[] = [];
-
-    if (filteredProjectsFromDropdowns.length > 0) {
-      projectsToSearch = filteredProjectsFromDropdowns;
-    } else {
-      projectsToSearch = projects;
-    }
-
-    const searchedProjects: Project[] =
-      projectsToSearch?.filter(project =>
+    let filtered: Project[] = [];
+    filtered =
+      projects?.filter(project =>
         project.project_name.toLowerCase().includes(searchTerm.toLowerCase()),
-      ) ?? [];
+      ) ?? null;
 
-    setFilteredProjectsFromSearch(searchedProjects);
-  }, [projects, searchTerm, filteredProjectsFromDropdowns]);
-
-  useEffect(() => {
-    setFilteredProjects(filteredProjectsFromDropdowns);
-  }, [filteredProjectsFromDropdowns, setFilteredProjects]);
-
-  useEffect(() => {
-    setFilteredProjects(filteredProjectsFromSearch);
-  }, [filteredProjectsFromSearch, setFilteredProjects]);
+    setFilteredProjects(filtered);
+  }, [projects, searchTerm, setFilteredProjects]);
 
   return (
     <>
       <SearchBar searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
       <FilterBar
         filters={filters}
+        onFilterChange={handleFilterChange}
         selectedFilters={selectedFilters}
         setSelectedFilters={setSelectedFilters}
-        handleFilterButtonClick={handleFilterButtonClick}
-        clearFilters={clearFilters}
       />
       <Map
         projects={projects}

diff --git a/components/TechnologyDropdown/index.tsx b/components/TechnologyDropdown/index.tsx
@@ -25,7 +25,6 @@ import {
   ExitStyles,
   FilterContentDiv,
   FilterDropdownStyles,
-  FilterIconStyles,
   IconStyles,
 } from './styles';
 
@@ -36,8 +35,6 @@ interface TechnologyDropdownProps {
   icon: React.ReactNode;
   label: string;
   currFilter: FilterType;
-  handleFilterButtonClick: () => void;
-  clearFilters: () => void;
 }
 
 export default function TechnologyDropdown({
@@ -47,8 +44,6 @@ export default function TechnologyDropdown({
   icon,
   label,
   currFilter,
-  handleFilterButtonClick,
-  clearFilters,
 }: TechnologyDropdownProps) {
   const filter = {
     categories: [
@@ -143,14 +138,12 @@ export default function TechnologyDropdown({
   return (
     <FilterDropdownStyles>
       <FilterContentDiv>
-        <ButtonWithIconStyles>
-          <FilterIconStyles onClick={() => handleButtonClick(currFilter)}>
-            {icon}
-          </FilterIconStyles>
-          <ButtonStyles onClick={() => handleButtonClick(currFilter)}>
+        <ButtonWithIconStyles onClick={() => handleButtonClick(currFilter)}>
+          {icon}
+          <ButtonStyles>
             <FilterHeadingUnused>{label}</FilterHeadingUnused>
           </ButtonStyles>
-          <ExitStyles onClick={clearFilters}>
+          <ExitStyles>
             <ExitIcon />
           </ExitStyles>
         </ButtonWithIconStyles>
@@ -176,10 +169,7 @@ export default function TechnologyDropdown({
             ))}
           </div>
         ))}
-        <ApplyButtonStyles
-          isActive={isApplyButtonActive}
-          onClick={handleFilterButtonClick}
-        >
+        <ApplyButtonStyles isActive={isApplyButtonActive}>
           <ApplyFiltersText>APPLY</ApplyFiltersText>
         </ApplyButtonStyles>
       </FilterContentDiv>

diff --git a/components/TechnologyDropdown/styles.ts b/components/TechnologyDropdown/styles.ts
@@ -72,12 +72,6 @@ export const ButtonWithIconStyles = styled.div`
   cursor: pointer;
 `;
 
-export const FilterIconStyles = styled.div`
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-`;
-
 export const IconStyles = styled.div`
   width: '3rem',
   height: '3rem',