Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[feat] technology filter functionality #85

Merged
merged 9 commits into from
Dec 5, 2024
Merged

[feat] technology filter functionality #85

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
93f6f67
[feat] filtering using technology filter
ethan-tam33 Nov 21, 2024
9c1dca3
[feat] search over filtered projects
ethan-tam33 Nov 22, 2024
6468f17
[feat] added clear filters function
ethan-tam33 Nov 22, 2024
5f7bd30
added clear function, removed map updates on search
ethan-tam33 Nov 23, 2024
0116ffa
merged with main
ethan-tam33 Nov 24, 2024
eb902a1
[fix] fixed issues
ethan-tam33 Nov 24, 2024
37eee59
[fix] fixed issues
ethan-tam33 Nov 24, 2024
70a37f9
pulled from main
ethan-tam33 Dec 2, 2024
2da013d
[fix] fixed bug
ethan-tam33 Dec 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 11 additions & 76 deletions api/maps/AddMarkers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useMemo, useState } from 'react';
import { useEffect, useState } from 'react';
import ReactDOM from 'react-dom/client';
import { Cluster, MarkerClusterer } from '@googlemaps/markerclusterer';
import { useMap } from '@vis.gl/react-google-maps';
Expand All @@ -16,6 +16,8 @@
null,
); // track currently open modal

const [clusterer, setClusterer] = useState<MarkerClusterer | null>(null);

const map = useMap();

const handleMarkerClick = (
Expand All @@ -33,74 +35,19 @@
document.title = 'ACE NY';
setSelectedProjectId(null); // close modal
};
/*
function euclideanDistance(point1: number[], point2: number[]): number {
const [x1, y1] = point1;
const [x2, y2] = point2;
return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
}

const getMinZoom = function (cluster: Cluster, mapZoom: number): number {
const numMarkers = cluster.markers?.length ?? 0;
const markers = cluster.markers ?? [];
if (numMarkers === 2) {
const marker1Position = (
markers[0] as google.maps.marker.AdvancedMarkerElement
).position ?? { lat: 0, lng: 0 };
const marker2Position = (
markers[1] as google.maps.marker.AdvancedMarkerElement
).position ?? { lat: 0, lng: 0 };
const distance = euclideanDistance(
Object.values(marker1Position),
Object.values(marker2Position),
);

const maxZoom = 11.5;
const minZoom = 6;
const maxDistance = 15;

let zoom = Math.max(
minZoom,
Math.min(
maxZoom,
minZoom +
((maxDistance - distance) / maxDistance) * (maxZoom - minZoom),
),
);

const projection = map?.getProjection();
const point1 = projection?.fromLatLngToPoint(marker1Position);
const point2 = projection?.fromLatLngToPoint(marker2Position);
useEffect(() => {
if (!map || !projects) return;

const point1x = point1?.x ?? 0;
const point1y = point1?.y ?? 0;
const point2x = point2?.x ?? 0;
const point2y = point2?.y ?? 0;

const pixelDistance = Math.sqrt(
Math.pow(point2x - point1x, 2) + Math.pow(point2y - point1y, 2),
);

if (pixelDistance > 0.3) {
zoom = zoom - 1; // slight zoom out for large screen distances
}
if (pixelDistance < 0.15) {
zoom = zoom + 1; // slight zoom in for small screen distances
}
return zoom;
// clear previous cluster markers
if (clusterer) {
clusterer.clearMarkers();
}
return mapZoom;
};
*/
const clusterer = useMemo(() => {
if (!map) return null;

const renderer = {
render(cluster: Cluster) {
const count = cluster.markers?.length ?? 0;
const position = cluster.position;

// create a container for the custom icon
const container = document.createElement('div');
const root = ReactDOM.createRoot(container);
root.render(<ClusterIcon count={count} />);
Expand All @@ -124,26 +71,14 @@
}
};

const setClusterer = new MarkerClusterer({
const newClusterer = new MarkerClusterer({
map,
renderer,
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]);
setClusterer(newClusterer);
}, [map, projects]);

Check warning on line 81 in api/maps/AddMarkers.tsx

View workflow job for this annotation

GitHub Actions / Run ESLint, Prettier, and TypeScript compiler 

React Hook useEffect has a missing dependency: 'clusterer'. Either include it or remove the dependency array

Check warning on line 81 in api/maps/AddMarkers.tsx

View workflow job for this annotation

GitHub Actions / Run ESLint, Prettier, and TypeScript compiler 

React Hook useEffect has a missing dependency: 'clusterer'. Either include it or remove the dependency array

return (
<>
Expand Down
6 changes: 6 additions & 0 deletions components/Filter/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ interface FilterProps {
selectedFilters: Filters;
filterChangeHandlers: FilterChangeHandlers;
handleButtonClick: (filter: FilterType) => void;
handleFilterButtonClick: () => void;
clearFilters: () => void;
}

export default function Filter({
Expand All @@ -24,6 +26,8 @@ export default function Filter({
selectedFilters,
filterChangeHandlers,
handleButtonClick,
handleFilterButtonClick,
clearFilters,
}: FilterProps) {
return (
<FilterBackgroundStyles isActive={isActive}>
Expand All @@ -36,6 +40,8 @@ export default function Filter({
icon={filter.icon}
label={filter.label}
currFilter={filter}
handleFilterButtonClick={handleFilterButtonClick}
clearFilters={clearFilters}
/>
) : filter.id === 'status' ? (
<StatusDropdown
Expand Down
6 changes: 6 additions & 0 deletions components/FilterBar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,15 @@ export const FilterBar = ({
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);

Expand Down Expand Up @@ -52,6 +56,8 @@ export const FilterBar = ({
selectedFilters={selectedFilters}
filterChangeHandlers={filterChangeHandlers}
handleButtonClick={handleButtonClick}
handleFilterButtonClick={handleFilterButtonClick}
clearFilters={clearFilters}
/>
))}
</FilterContainerStyles>
Expand Down
44 changes: 35 additions & 9 deletions components/MapViewScreen/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,19 +52,43 @@ export default function MapViewScreen({
location: [],
});

const handleFilterChange = (filter: FilterType) => {
console.log(filter);
const [filteredProjectsWithSearch, setFilteredProjectsWithSearch] =
useState<Project[]>(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 filteredProjects = projects?.filter(project =>
technology.includes(project.renewable_energy_technology),
);
setFilteredProjects(filteredProjects);
};

// clear filters
const clearFilters = () => {
setSelectedFilters({
status: [],
technology: [],
projectSize: { min: 0, max: 0 },
location: [],
});
setFilteredProjects(projects);
};

// search within all projects
useEffect(() => {
let filtered: Project[] = [];
filtered =
const searchedProjects: Project[] =
projects?.filter(project =>
project.project_name.toLowerCase().includes(searchTerm.toLowerCase()),
) ?? null;
) ?? [];
setFilteredProjectsWithSearch(searchedProjects);
}, [projects, searchTerm]);

setFilteredProjects(filtered);
}, [projects, searchTerm, setFilteredProjects]);
const handleFilterChange = (filter: FilterType) => {
console.log(filter);
};

return (
<>
Expand All @@ -74,9 +98,11 @@ export default function MapViewScreen({
onFilterChange={handleFilterChange}
selectedFilters={selectedFilters}
setSelectedFilters={setSelectedFilters}
handleFilterButtonClick={handleFilterButtonClick}
clearFilters={clearFilters}
/>
<Map projects={projects} />
<ProjectsListingModal projects={filteredProjects} />
<Map projects={filteredProjects} />
<ProjectsListingModal projects={filteredProjectsWithSearch} />
</>
);
}
20 changes: 15 additions & 5 deletions components/TechnologyDropdown/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import {
ExitStyles,
FilterContentDiv,
FilterDropdownStyles,
FilterIconStyles,
IconStyles,
} from './styles';

Expand All @@ -35,6 +36,8 @@ interface TechnologyDropdownProps {
icon: React.ReactNode;
label: string;
currFilter: FilterType;
handleFilterButtonClick: () => void;
clearFilters: () => void;
}

export default function TechnologyDropdown({
Expand All @@ -44,6 +47,8 @@ export default function TechnologyDropdown({
icon,
label,
currFilter,
handleFilterButtonClick,
clearFilters,
}: TechnologyDropdownProps) {
const filter = {
categories: [
Expand Down Expand Up @@ -138,12 +143,14 @@ export default function TechnologyDropdown({
return (
<FilterDropdownStyles>
<FilterContentDiv>
<ButtonWithIconStyles onClick={() => handleButtonClick(currFilter)}>
{icon}
<ButtonStyles>
<ButtonWithIconStyles>
<FilterIconStyles onClick={() => handleButtonClick(currFilter)}>
{icon}
</FilterIconStyles>
<ButtonStyles onClick={() => handleButtonClick(currFilter)}>
<FilterHeadingUnused>{label}</FilterHeadingUnused>
</ButtonStyles>
<ExitStyles>
<ExitStyles onClick={clearFilters}>
<ExitIcon />
</ExitStyles>
</ButtonWithIconStyles>
Expand All @@ -169,7 +176,10 @@ export default function TechnologyDropdown({
))}
</div>
))}
<ApplyButtonStyles isActive={isApplyButtonActive}>
<ApplyButtonStyles
isActive={isApplyButtonActive}
onClick={handleFilterButtonClick}
>
<ApplyFiltersText>APPLY</ApplyFiltersText>
</ApplyButtonStyles>
</FilterContentDiv>
Expand Down
6 changes: 6 additions & 0 deletions components/TechnologyDropdown/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,12 @@ export const ButtonWithIconStyles = styled.div`
cursor: pointer;
`;

export const FilterIconStyles = styled.div`
display: flex;
align-items: center;
flex-direction: row;
`;
Comment on lines +75 to +79
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: Any chance the FilterIconStyles style could extend a button instead of a div? It seems to be using the onClick property in the TechnologyDropdown which is an attribute that typically belongs to buttons.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm previously only ButtonWithIconStyles had the onClick property, but I had to manually add it for each of the sub-components in this sprint because of the temporary clearFilters method on the exit button. I don't think this change will be permanent, but I do agree that we should look into making ButtonWithIconStyles extend a button instead of a div.


export const IconStyles = styled.div`
width: '3rem',
height: '3rem',
Expand Down