63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
import React from "react";
|
|
import { Paper, Typography } from "@material-ui/core";
|
|
import { makeStyles } from "@material-ui/core/styles";
|
|
import PersonCard from "./PersonCard";
|
|
import { useQuery } from "@apollo/client";
|
|
import {
|
|
BasicPersonResponse,
|
|
GET_PERSONS_SORTED_BY_ROLE,
|
|
GetPersonsSortedByRoleResponse,
|
|
} from "../backend/queries/person";
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
root: {
|
|
width: "100%",
|
|
padding: theme.spacing(1),
|
|
marginBottom: theme.spacing(3),
|
|
},
|
|
}));
|
|
|
|
export function ProfileManagement(): React.ReactElement {
|
|
const classes = useStyles();
|
|
const persons = useQuery<GetPersonsSortedByRoleResponse>(
|
|
GET_PERSONS_SORTED_BY_ROLE
|
|
).data;
|
|
|
|
const convertPersonNodeToPersonCard = (
|
|
person: BasicPersonResponse
|
|
): JSX.Element => {
|
|
return (
|
|
<PersonCard
|
|
key={person.id}
|
|
firstName={person.firstName || ""}
|
|
lastName={person.lastName || ""}
|
|
userRole={person.role}
|
|
userRowId={person.rowId}
|
|
/>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<Paper className={classes.root}>
|
|
<Typography component={"h2"} variant="h6" color="primary" gutterBottom>
|
|
Ertellen Sie hier ihr Profil
|
|
</Typography>
|
|
{persons?.editors.nodes.map(convertPersonNodeToPersonCard)}
|
|
</Paper>
|
|
<Paper className={classes.root}>
|
|
<Typography component={"h2"} variant="h6" color="primary" gutterBottom>
|
|
KandidatInnen
|
|
</Typography>
|
|
{persons?.candidates.nodes.map(convertPersonNodeToPersonCard)}
|
|
</Paper>
|
|
<Paper className={classes.root}>
|
|
<Typography component={"h2"} variant="h6" color="primary" gutterBottom>
|
|
Andere registrierte Personen
|
|
</Typography>
|
|
{persons?.users.nodes.map(convertPersonNodeToPersonCard)}
|
|
</Paper>
|
|
</div>
|
|
);
|
|
}
|