Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | import { styled, useMediaQuery } from "@mui/material";
import CenteredSpinner from "components/CenteredSpinner/CenteredSpinner";
import ResizeableDrawer from "components/ResizeableDrawer";
import { RpcError } from "grpc-web";
import { User } from "proto/api_pb";
import { theme } from "theme";
import PreviousNextPagination from "./PreviousNextPagination";
import SearchResultListContent from "./SearchResultListContent";
import { useMapSearchState } from "./state/mapSearchContext";
import { MapViews } from "./utils/constants";
interface MapSearchResultsListProps {
error: RpcError | null;
drawerWidth: number;
hasNextPage?: boolean;
hasPreviousPage?: boolean;
isLoading?: boolean;
mapView: MapViews;
numberOfTotal: number;
onDrawerWidthChange: (width: number) => void;
onLoadPreviousPage: () => void;
onLoadNextPage: () => void;
onUserCardClick: (userId: number) => void;
totalItems?: number;
users: User.AsObject[] | undefined;
}
const DrawerContainer = styled("div")(({ theme }) => ({
height: "100%",
width: "100%",
display: "flex",
flexDirection: "column",
}));
const SpinnerWrapper = styled("div")(({ theme }) => ({
paddingTop: theme.spacing(8),
}));
const MapSearchResultsList = ({
error,
drawerWidth,
hasPreviousPage,
hasNextPage,
isLoading,
mapView,
numberOfTotal,
onDrawerWidthChange,
onLoadPreviousPage,
onLoadNextPage,
onUserCardClick,
totalItems,
users,
}: MapSearchResultsListProps) => {
const isMobile = useMediaQuery(theme.breakpoints.down("md"));
const {
hasActiveFilters,
search: { bbox, query },
shouldSearchByUserId,
} = useMapSearchState();
const meetsSearchCriteria =
hasActiveFilters ||
bbox !== undefined ||
query !== undefined ||
shouldSearchByUserId;
return (
<DrawerContainer>
<ResizeableDrawer
onDrawerWidthChange={onDrawerWidthChange}
showDragger={!isMobile && mapView !== MapViews.LIST_ONLY}
nonScrollableChildren={
<PreviousNextPagination
hasPreviousPage={hasPreviousPage}
hasNextPage={hasNextPage}
onPreviousClick={onLoadPreviousPage}
onNextClick={onLoadNextPage}
/>
}
>
{isLoading ? (
<SpinnerWrapper>
<CenteredSpinner />
</SpinnerWrapper>
) : (
<SearchResultListContent
error={error}
numberOfTotal={numberOfTotal}
onUserCardClick={onUserCardClick}
showAlert={!isLoading && !meetsSearchCriteria}
showTopSpace={
!isMobile &&
(mapView === MapViews.LIST_ONLY ||
(mapView === MapViews.MAP_AND_LIST &&
drawerWidth > window.innerWidth / 2))
}
totalItems={totalItems}
users={users}
/>
)}
</ResizeableDrawer>
</DrawerContainer>
);
};
export default MapSearchResultsList;
|