kandimat/redaktions-app/src/components/QuestionList.tsx
2020-12-30 22:46:26 +01:00

62 lines
2 KiB
TypeScript

import {Paper, Typography} from "@material-ui/core";
import React from "react";
import {makeStyles} from "@material-ui/core/styles";
import {useQuery} from "@apollo/client";
import AddCard from "./AddCard";
import AccordionWithEdit from "./AccordionWithEdit";
import {BasicQuestionResponse, GET_ALL_QUESTIONS, GetAllQuestionsResponse} from "../backend/queries/question";
import DialogChangeQuestion, {dialogChangeQuestionId, dialogChangeQuestionOpen} from "./DialogChangeQuestion";
import DialogDeleteQuestion, {
dialogDeleteQuestionId,
dialogDeleteQuestionOpen,
dialogDeleteQuestionTitle
} from "./DialogDeleteQuestion";
const useStyles = makeStyles((theme) => ({
root: {
width: '100%',
padding: theme.spacing(1),
marginBottom: theme.spacing(3),
},
}));
export default function QuestionList() {
const questions = useQuery<GetAllQuestionsResponse, null>(GET_ALL_QUESTIONS).data?.allQuestions.nodes;
const classes = useStyles();
const handleAddButtonClick = () => {
dialogChangeQuestionId("")
dialogChangeQuestionOpen(true)
}
const handleEditButtonClick = (question: BasicQuestionResponse) => {
dialogChangeQuestionId(question.id)
dialogChangeQuestionOpen(true)
};
const handleDeleteButtonClick = (question: BasicQuestionResponse) => {
dialogDeleteQuestionTitle(question.title);
dialogDeleteQuestionId(question.id);
dialogDeleteQuestionOpen(true);
}
return (
<Paper className={classes.root}>
<Typography component={"h2"} variant="h6" color="primary" gutterBottom>Fragen</Typography>
{questions?.map(question => <AccordionWithEdit
key={question.id}
title={question.title}
subTitle={question.categoryByCategoryRowId?.title}
description={question.description}
onEditButtonClick={() => handleEditButtonClick(question)}
onDeleteButtonClick={() => handleDeleteButtonClick(question)}
/>
)}
<AddCard handleClick={handleAddButtonClick}/>
<DialogChangeQuestion/>
<DialogDeleteQuestion/>
</Paper>
)
}