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 123 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 16x 16x 23x 23x 23x 23x 23x 23x 3x | import { useMediaQuery } from "@mui/material";
import Alert from "components/Alert";
import CenteredSpinner from "components/CenteredSpinner/CenteredSpinner";
import { useListAvailableReferences } from "features/profile/hooks/referencesHooks";
import { ProfileUserProvider } from "features/profile/hooks/useProfileUser";
import ReferenceForm from "features/profile/view/leaveReference/ReferenceForm";
import UserOverview from "features/profile/view/UserOverview";
import { useUser } from "features/userQueries/useUsers";
import { useTranslation } from "i18n";
import { GLOBAL, PROFILE } from "i18n/namespaces";
import { User } from "proto/api_pb";
import { ReferenceType } from "proto/references_pb";
import React from "react";
import { ReferenceStep, referenceTypeRoute } from "routes";
import { ReferenceTypeStrings } from "service/references";
import { theme } from "theme";
import makeStyles from "utils/makeStyles";
const useStyles = makeStyles((theme) => ({
form: {
[theme.breakpoints.down("md")]: {
margin: 0,
width: "100%",
},
flexGrow: 1,
margin: theme.spacing(2),
padding: theme.spacing(2),
},
root: {
padding: theme.spacing(1),
[theme.breakpoints.up("sm")]: {
display: "grid",
gridTemplateColumns: "2fr 3fr",
gap: theme.spacing(3),
margin: theme.spacing(0, 3),
padding: 0,
paddingTop: theme.spacing(3),
paddingBottom: theme.spacing(3),
},
[theme.breakpoints.up("md")]: {
gridTemplateColumns: "2fr 4fr",
maxWidth: "61.5rem",
margin: "0 auto",
},
},
}));
export default function LeaveReferencePage({
referenceType,
userId,
hostRequestId,
step = "appropriate",
}: {
referenceType: string;
userId: number;
hostRequestId?: number;
step?: ReferenceStep;
}) {
const { t } = useTranslation([GLOBAL, PROFILE]);
const classes = useStyles();
const isBelowMedium = useMediaQuery(theme.breakpoints.down("md"));
const {
data: user,
isLoading: isUserLoading,
error: userError,
} = useUser(userId);
const {
data: availableReferences,
isLoading: isAvailableReferencesLoading,
error: availableReferencesError,
} = useListAvailableReferences(userId);
if (!(referenceType in ReferenceTypeStrings)) {
return (
<Alert severity="error">
{t("profile:leave_reference.invalid_reference_type")}
</Alert>
);
}
return (
<>
{(userError || availableReferencesError) && (
<Alert severity="error">
{userError || availableReferencesError?.message || ""}
</Alert>
)}
{(isUserLoading || isAvailableReferencesLoading) && <CenteredSpinner />}
{availableReferences &&
user &&
((referenceType ===
referenceTypeRoute[ReferenceType.REFERENCE_TYPE_FRIEND] &&
availableReferences.canWriteFriendReference &&
user.friends === User.FriendshipStatus.FRIENDS) ||
(hostRequestId &&
availableReferences.availableWriteReferencesList.find(
({ hostRequestId: availableId }) => availableId === hostRequestId
)) ? (
<div className={classes.root}>
<ProfileUserProvider user={user}>
{!isBelowMedium && (
<UserOverview showHostAndMeetAvailability={false} />
)}
<div className={classes.form}>
<ReferenceForm
hostRequestId={hostRequestId}
referenceType={referenceType}
userId={userId}
step={step}
/>
</div>
</ProfileUserProvider>
</div>
) : (
<Alert severity="error">
{t("profile:leave_reference.reference_type_not_available")}
</Alert>
))}
</>
);
}
|