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 110 111 112 113 114 115 116 117 118 119 120 121 122 | import { Alert, Box, styled, Typography, useMediaQuery } from "@mui/material";
import { DEFAULT_DRAWER_WIDTH } from "components/ResizeableDrawer";
import { RpcError } from "grpc-web";
import { useTranslation } from "i18n";
import { SEARCH } from "i18n/namespaces";
import { User } from "proto/api_pb";
import { theme } from "theme";
import SearchResultUserCard from "./SeachResultUserCard";
import { useMapSearchState } from "./state/mapSearchContext";
interface SearchResultListContentProps {
error: RpcError | null;
numberOfTotal: number;
onUserCardClick: (userId: number) => void;
showAlert: boolean;
showTopSpace?: boolean;
totalItems: number | undefined;
users: User.AsObject[] | undefined;
}
const ListContentWrapper = styled(Box, {
shouldForwardProp: (prop) => prop !== "showTopSpace",
})<{ showTopSpace: boolean }>(({ showTopSpace }) => ({
width: "100%",
padding: theme.spacing(2),
height: "100%",
...(showTopSpace && { paddingTop: theme.spacing(10) }),
}));
const UserCardsWrapper = styled("div")(({ theme }) => ({
display: "grid",
gridTemplateColumns: `repeat(auto-fill, minmax(${DEFAULT_DRAWER_WIDTH - 50}px, 1fr))`, // Responsive columns
gap: theme.spacing(2),
justifyContent: "start",
width: "100%",
paddingBottom: theme.spacing(2),
}));
const StyledCardWrapper = styled("div")(({ theme }) => ({
height: `${DEFAULT_DRAWER_WIDTH - 40}px`,
display: "flex",
}));
const CenteredRow = styled("div")(({ theme }) => ({
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "100%",
marginBottom: theme.spacing(2),
}));
const SearchResultListContent = ({
error,
numberOfTotal,
onUserCardClick,
showAlert,
showTopSpace = false,
totalItems,
users,
}: SearchResultListContentProps) => {
const { t } = useTranslation([SEARCH]);
const isMobile = useMediaQuery(theme.breakpoints.down("md"));
const { selectedUserId } = useMapSearchState();
return (
<ListContentWrapper showTopSpace={showTopSpace}>
{error && (
<Alert
severity="error"
sx={{
height: "fit-content",
width: "100%",
marginBottom: theme.spacing(2),
}}
>
{t("search:error_loading_users")}
</Alert>
)}
{showAlert && (
<Alert severity="info" sx={{ height: "fit-content", width: "100%" }}>
{isMobile
? t("search:choose_search_criteria_mobile")
: t("search:choose_search_criteria")}
</Alert>
)}
<CenteredRow>
{users?.length === 0 && (
<Typography>
{t("search:search_result.no_user_result_message")}
</Typography>
)}
{(users ?? []).length > 0 && (
<Typography variant="body2">
{t("search:search_result.people_found_message", {
numberOfTotal,
totalItems,
})}
</Typography>
)}
</CenteredRow>
<UserCardsWrapper>
{users?.map((user) => (
<StyledCardWrapper
key={user?.userId}
id={`search-result-${user?.userId}`}
>
<SearchResultUserCard
isHighlighted={selectedUserId === user.userId}
onUserCardClick={onUserCardClick}
user={user}
/>
</StyledCardWrapper>
))}
</UserCardsWrapper>
</ListContentWrapper>
);
};
export default SearchResultListContent;
|