Skip to content

Commit 919025d

Browse files
VirginiaWu11VirginiaWu11
committed
2505-add-view-results-button-to-mobile-filters
1 parent dc339a4 commit 919025d

5 files changed

Lines changed: 106 additions & 62 deletions

File tree

‎client/src/components/FoodSeeker/SearchResults/ResultsFilters/FilterPanel.jsx‎

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const checkedStyle = {
4242

4343
const yPadding = { py: 2 };
4444

45-
export default function FilterPanel({ mealPantry }) {
45+
export default function FilterPanel({ mealPantry, filterCount }) {
4646
const { isDesktop } = useBreakpoints();
4747
const drawerWidth = isDesktop ? 340 : "100%";
4848
const drawerHeight = isDesktop ? `100%` : "50%";
@@ -126,9 +126,31 @@ export default function FilterPanel({ mealPantry }) {
126126
<Typography variant="h3" textAlign="center" color="common.grey">
127127
Filters
128128
</Typography>
129-
<IconButton onClick={handleDrawerClose}>
130-
<CloseIcon />
131-
</IconButton>
129+
<Typography
130+
sx={(theme) => ({
131+
fontWeight: "bold",
132+
lineHeight: "1.3",
133+
color: theme.palette.common.gray,
134+
display: isDesktop ? "none" : "block",
135+
})}
136+
>
137+
{`${filterCount} ${filterCount === 1 ? "Location" : "Locations"}`}
138+
</Typography>
139+
{isDesktop ? (
140+
<IconButton onClick={handleDrawerClose}>
141+
<CloseIcon />
142+
</IconButton>
143+
) : (
144+
<Typography
145+
onClick={handleDrawerClose}
146+
sx={{
147+
cursor: "pointer",
148+
textDecoration: "underline",
149+
}}
150+
>
151+
View Results
152+
</Typography>
153+
)}
132154
</Stack>
133155
<Divider />
134156
</Box>

‎client/src/components/FoodSeeker/SearchResults/ResultsList/ResultsList.jsx‎

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { Virtuoso } from "react-virtuoso";
1212
import * as analytics from "services/analytics";
1313
import {
1414
useAppDispatch,
15+
useFilterPanel,
1516
useSelectedOrganization,
1617
} from "../../../../appReducer";
1718
import StakeholderDetails from "../StakeholderDetails/StakeholderDetails";
@@ -25,6 +26,7 @@ const ResultsList = ({ stakeholders, loading, handleReset }) => {
2526
const { isDesktop } = useBreakpoints();
2627
const dispatch = useAppDispatch();
2728
const { flyTo } = useMapbox();
29+
const open = useFilterPanel();
2830

2931
useEffect(() => {
3032
analytics.postEvent("showList");
@@ -61,17 +63,33 @@ const ResultsList = ({ stakeholders, loading, handleReset }) => {
6163
<Stack height="100%">
6264
{stakeholders.length > 0 && (
6365
<Stack pt={2} spacing={2}>
64-
<Typography
65-
pl={2}
66-
sx={(theme) => ({
67-
fontWeight: "bold",
68-
fontSize: { xs: "18px" },
69-
color: theme.palette.common.gray,
70-
})}
71-
>
72-
{stakeholders.length}{" "}
73-
{stakeholders.length === 1 ? "Location" : "Locations"}
74-
</Typography>
66+
<Stack px={2} direction="row" justifyContent="space-between">
67+
<Typography
68+
sx={(theme) => ({
69+
fontWeight: "bold",
70+
fontSize: { xs: "18px" },
71+
color: theme.palette.common.gray,
72+
})}
73+
>
74+
{stakeholders.length}{" "}
75+
{stakeholders.length === 1 ? "Location" : "Locations"}
76+
</Typography>
77+
<Typography
78+
sx={{
79+
cursor: "pointer",
80+
textDecoration: "underline",
81+
display: isDesktop ? "none" : "block",
82+
}}
83+
onClick={() => {
84+
dispatch({
85+
type: "FILTER_PANEL_TOGGLE",
86+
filterPanel: !open,
87+
});
88+
}}
89+
>
90+
More Filters
91+
</Typography>
92+
</Stack>
7593
<Divider />
7694
</Stack>
7795
)}

‎client/src/components/FoodSeeker/SearchResults/ResultsMap/ResultsMap.jsx‎

Lines changed: 46 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import {
3030
useSelectedOrganization,
3131
useUserCoordinates,
3232
useOrgNameFilter,
33-
useOpenTimeFilter
33+
useOpenTimeFilter,
3434
} from "../../../../appReducer";
3535
import { useMapbox } from "../../../../hooks/useMapbox";
3636
import AdvancedFilters from "../AdvancedFilters/AdvancedFilters";
@@ -49,7 +49,13 @@ import {
4949
} from "constants/stakeholder";
5050
import debounceFn from "debounce-fn";
5151

52-
const ResultsMap = ({ stakeholders, categoryIds, toggleCategory, loading, initialZoom }) => {
52+
const ResultsMap = ({
53+
stakeholders,
54+
categoryIds,
55+
toggleCategory,
56+
loading,
57+
initialZoom,
58+
}) => {
5359
const [markersLoaded, setMarkersLoaded] = useState(false);
5460
const [cursor, setCursor] = useState("auto");
5561
const searchCoordinates = useSearchCoordinates();
@@ -324,51 +330,48 @@ const ResultsMap = ({ stakeholders, categoryIds, toggleCategory, loading, initia
324330
};
325331
}, []);
326332

327-
function updateUrlParams(updates = {}) {
328-
const params = new URLSearchParams(window.location.search);
333+
function updateUrlParams(updates = {}) {
334+
const params = new URLSearchParams(window.location.search);
329335

330-
Object.entries(updates).forEach(([key, value]) => {
331-
if (value === null || value === undefined || value === "") {
332-
params.delete(key);
333-
} else {
334-
params.set(key, value);
335-
}
336-
});
336+
Object.entries(updates).forEach(([key, value]) => {
337+
if (value === null || value === undefined || value === "") {
338+
params.delete(key);
339+
} else {
340+
params.set(key, value);
341+
}
342+
});
337343

338-
const newUrl = `${window.location.pathname}?${params.toString()}`;
339-
window.history.replaceState(null, "", newUrl);
340-
}
341-
342-
useEffect(() => {
343-
updateUrlParams({
344-
name: orgNameFilter || null,
345-
pantry: isPantrySelected ? "1" : "0",
346-
meal: isMealSelected ? "1" : "0",
347-
openRadio:
348-
openTimeFilter.radio !== "Show All" ? openTimeFilter.radio : null,
349-
openDay:
350-
openTimeFilter.radio === "Customized" ? openTimeFilter.day : null,
351-
openTime:
352-
openTimeFilter.radio === "Customized" ? openTimeFilter.time : null,
353-
});
354-
}, [
355-
orgNameFilter,
356-
isPantrySelected,
357-
isMealSelected,
358-
openTimeFilter,
359-
]);
360-
361-
useEffect(() => {
362-
const timeout = setTimeout(() => {
344+
const newUrl = `${window.location.pathname}?${params.toString()}`;
345+
window.history.replaceState(null, "", newUrl);
346+
}
347+
348+
useEffect(() => {
363349
updateUrlParams({
364-
lat: viewport.latitude?.toFixed(7),
365-
lng: viewport.longitude?.toFixed(7),
366-
zoom: viewport.zoom ? (Math.round(viewport.zoom * 10) / 10).toString() : null,
350+
name: orgNameFilter || null,
351+
pantry: isPantrySelected ? "1" : "0",
352+
meal: isMealSelected ? "1" : "0",
353+
openRadio:
354+
openTimeFilter.radio !== "Show All" ? openTimeFilter.radio : null,
355+
openDay:
356+
openTimeFilter.radio === "Customized" ? openTimeFilter.day : null,
357+
openTime:
358+
openTimeFilter.radio === "Customized" ? openTimeFilter.time : null,
367359
});
368-
}, 100);
360+
}, [orgNameFilter, isPantrySelected, isMealSelected, openTimeFilter]);
361+
362+
useEffect(() => {
363+
const timeout = setTimeout(() => {
364+
updateUrlParams({
365+
lat: viewport.latitude?.toFixed(7),
366+
lng: viewport.longitude?.toFixed(7),
367+
zoom: viewport.zoom
368+
? (Math.round(viewport.zoom * 10) / 10).toString()
369+
: null,
370+
});
371+
}, 100);
369372

370-
return () => clearTimeout(timeout);
371-
}, [viewport]);
373+
return () => clearTimeout(timeout);
374+
}, [viewport]);
372375

373376
return (
374377
<div
@@ -469,6 +472,7 @@ useEffect(() => {
469472
</Grid>
470473
)}
471474
<FilterPanel
475+
filterCount={stakeholders.length}
472476
mealPantry={{
473477
toggleMeal,
474478
togglePantry,

‎client/tests/app.spec.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ test.describe("App", () => {
1010
page.getByText("Locate free food in Los Angeles")
1111
).toBeVisible();
1212
//await expect(
13-
//page.getByText(
14-
//"Due to the LA Fires, some information may be out-of-date."
15-
//)
13+
//page.getByText(
14+
//"Due to the LA Fires, some information may be out-of-date."
15+
//)
1616
//).toBeVisible();
1717
await expect(page.getByText("Learn about this site")).toBeVisible();
1818
await expect(page.getByText("Learn about this site")).toHaveAttribute(
@@ -24,6 +24,6 @@ test.describe("App", () => {
2424
.getByText("Los Angeles, California 90001, United States")
2525
.click();
2626
await expect(page.url()).toBe("http://localhost:3000/organizations");
27-
await expect(page.getByText("3 Locations")).toBeVisible();
27+
await expect(page.getByText("3 Locations").first()).toBeVisible();
2828
});
2929
});

‎client/tests/organizations.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ test.describe("Organizations", () => {
2222
test("should render all 3 stakeholders", async ({ page }) => {
2323
await mockRequests(page);
2424
await page.goto("/organizations");
25-
await expect(page.getByText("3 Locations")).toBeVisible();
25+
await expect(page.getByText("3 Locations").first()).toBeVisible();
2626
await expect(page.getByText("Stakeholder 1")).toBeVisible();
2727
await expect(page.getByText("Stakeholder 2")).toBeVisible();
2828
await expect(page.getByText("Stakeholder 3")).toBeVisible();

0 commit comments

Comments
 (0)