55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
import React from "react";
|
|
import { useQuery } from "@apollo/client";
|
|
import {
|
|
GET_ALL_QUESTION_ANSWERS,
|
|
GetAllQuestionAnswersResponse,
|
|
GetAllQuestionAnswersVariables,
|
|
} from "../backend/queries/answer";
|
|
import { Paper, Typography } from "@material-ui/core";
|
|
import { CandidatePositionLegend } from "./CandidatePositionLegend";
|
|
import AccordionQuestionAnswer from "./AccordionQuestionAnswer";
|
|
import { makeStyles } from "@material-ui/core/styles";
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
root: {
|
|
width: "100%",
|
|
padding: theme.spacing(1),
|
|
marginBottom: theme.spacing(3),
|
|
backgroundColor: theme.palette.background.default,
|
|
},
|
|
}));
|
|
|
|
interface QuestionAnswerListProps {
|
|
loggedInPersonRowId: number;
|
|
}
|
|
|
|
export default function QuestionAnswersList(
|
|
props: QuestionAnswerListProps
|
|
): React.ReactElement {
|
|
const classes = useStyles();
|
|
const questionAnswers = useQuery<
|
|
GetAllQuestionAnswersResponse,
|
|
GetAllQuestionAnswersVariables
|
|
>(GET_ALL_QUESTION_ANSWERS, {
|
|
variables: {
|
|
personRowId: props.loggedInPersonRowId,
|
|
},
|
|
}).data?.allQuestions.nodes;
|
|
|
|
return (
|
|
<Paper className={classes.root}>
|
|
<Typography component={"h2"} variant="h6" color="primary" gutterBottom>
|
|
Fragen
|
|
</Typography>
|
|
<CandidatePositionLegend />
|
|
{questionAnswers?.map((question) => (
|
|
<AccordionQuestionAnswer
|
|
key={question.rowId}
|
|
loggedInPersonRowId={props.loggedInPersonRowId}
|
|
question={question}
|
|
/>
|
|
))}
|
|
</Paper>
|
|
);
|
|
}
|