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.

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

frontend - feat: add new list view of users on map #4848 #5294

Open
wants to merge 18 commits into
base: develop
Choose a base branch
from
Open
2 changes: 1 addition & 1 deletion app/web/features/search/MapWrapper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import {
} from "maplibre-gl";
import { User } from "proto/api_pb";
import { UserSearchRes } from "proto/search_pb";
import {
import React, {
Dispatch,
MutableRefObject,
SetStateAction,
Expand Down
67 changes: 24 additions & 43 deletions app/web/features/search/SearchPage.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { Collapse, useMediaQuery, useTheme } from "@mui/material";
import makeStyles from "@mui/styles/makeStyles";
import HtmlMeta from "components/HtmlMeta";
import { Coordinates } from "features/search/constants";
Expand Down Expand Up @@ -76,9 +75,8 @@ export default function SearchPage({
const { t } = useTranslation([GLOBAL, SEARCH]);
const queryClient = new QueryClient();
const classes = useStyles();
const theme = useTheme();
const map = useRef<MaplibreMap>();
const isMobile = useMediaQuery(theme.breakpoints.down("md"));
const searchFromDashboard = locationName !== "";

// State
const [wasSearchPerformed, setWasSearchPerformed] = useState(false);
Expand Down Expand Up @@ -174,52 +172,35 @@ export default function SearchPage({
locationResult.location.lat,
]);

/**
Copy link
Contributor

Choose a reason for hiding this comment

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

fixes the bug when a selected result remains even after searching

Copy link
Collaborator

Choose a reason for hiding this comment

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

Sorry I just saw this. I think it makes more sense to set this in the same place the search happens rather than a separate useEffect? So where you set the new location, then set this there instead.

* Every time a new result is set (new search) we unselect the selected result
*/
useEffect(() => {
setSelectedResult(undefined);
}, [locationResult]);

const errorMessage = error?.message;

return (
<QueryClientProvider client={queryClient}>
<HtmlMeta title={t("global:nav.map_search")} />
<div className={classes.container}>
{/* Desktop */}
Copy link
Contributor

Choose a reason for hiding this comment

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

unnecesary code

Copy link
Collaborator

Choose a reason for hiding this comment

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

Why was it unnecessary? Looks like a big chunk removed.

{!isMobile && (
<SearchResultsList
searchType={searchType}
setSearchType={setSearchType}
locationResult={locationResult}
setLocationResult={setLocationResult}
queryName={queryName}
setQueryName={setQueryName}
results={data}
error={errorMessage}
hasNext={hasNextPage}
selectedResult={selectedResult}
setSelectedResult={setSelectedResult}
isLoading={isLoading || isFetching}
/>
)}
{/* Mobile */}
{isMobile && (
<Collapse
in={wasSearchPerformed || !!selectedResult}
timeout={theme.transitions.duration.standard}
className={classes.mobileCollapse}
>
<SearchResultsList
searchType={searchType}
setSearchType={setSearchType}
locationResult={locationResult}
setLocationResult={setLocationResult}
queryName={queryName}
setQueryName={setQueryName}
results={data}
error={errorMessage}
hasNext={hasNextPage}
selectedResult={selectedResult}
setSelectedResult={setSelectedResult}
isLoading={isLoading || isFetching}
/>
</Collapse>
)}
<SearchResultsList
searchType={searchType}
setSearchType={setSearchType}
locationResult={locationResult}
setLocationResult={setLocationResult}
queryName={queryName}
setQueryName={setQueryName}
results={data}
error={errorMessage}
hasNext={hasNextPage}
selectedResult={selectedResult}
setSelectedResult={setSelectedResult}
wasSearchPerformed={wasSearchPerformed}
isLoading={isLoading || isFetching}
searchFromDashboard={searchFromDashboard}
/>
<FilterDialog
isOpen={isFiltersOpen}
queryName={queryName}
Expand Down
4 changes: 4 additions & 0 deletions app/web/features/search/SearchResultsList.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,8 @@ describe("SearchResultsList", () => {
beforeEach(() => {
render(
<SearchResultsList
searchFromDashboard={false}
wasSearchPerformed={false}
isLoading={false}
results={undefined}
selectedResult={undefined}
Expand Down Expand Up @@ -84,7 +86,9 @@ describe("SearchResultsList", () => {
beforeEach(() => {
render(
<SearchResultsList
searchFromDashboard={false}
isLoading={false}
wasSearchPerformed={true}
results={mockTestResults()}
error={"error message"}
hasNext={undefined}
Expand Down
Loading