diff --git a/redaktions-app/src/components/CategoryList.tsx b/redaktions-app/src/components/CategoryList.tsx index 0b140ed..abd91e5 100644 --- a/redaktions-app/src/components/CategoryList.tsx +++ b/redaktions-app/src/components/CategoryList.tsx @@ -10,7 +10,7 @@ import { GET_ALL_CATEGORIES, GetAllCategoriesResponse } from "../backend/queries/category"; -import ChangeCategoryDialog, {ChangeCategoryDialogContent} from "./ChangeCategoryDialog"; +import DialogChangeCategory, {ChangeCategoryDialogContent} from "./DialogChangeCategory"; import {useSnackbar} from "notistack"; import { ADD_CATEGORY, @@ -20,11 +20,11 @@ import { EditCategoryResponse, EditCategoryVariables } from "../backend/mutations/category"; -import DeleteCategoryDialog, { - deleteCategoryDialogId, - deleteCategoryDialogOpen, - deleteCategoryDialogTitle -} from "./DeleteCategoryDialog"; +import DialogDeleteCategory, { + dialogDeleteCategoryId, + dialogDeleteCategoryOpen, + dialogDeleteCategoryTitle +} from "./DialogDeleteCategory"; const useStyles = makeStyles((theme) => ({ root: { @@ -111,9 +111,9 @@ export default function CategoryList() { }; const handleDeleteButtonClick = (category: BasicCategoryResponse) => { - deleteCategoryDialogTitle(category.title); - deleteCategoryDialogId(category.id); - deleteCategoryDialogOpen(true); + dialogDeleteCategoryTitle(category.title); + dialogDeleteCategoryId(category.id); + dialogDeleteCategoryOpen(true); } const handleDialogContentChange = (content: ChangeCategoryDialogContent) => { @@ -151,7 +151,7 @@ export default function CategoryList() { /> )} - setChangeDialogOpen(false)} /> - + ) } diff --git a/redaktions-app/src/components/DeleteConfirmationDialog.tsx b/redaktions-app/src/components/DeleteConfirmationDialog.tsx deleted file mode 100644 index be70416..0000000 --- a/redaktions-app/src/components/DeleteConfirmationDialog.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; -import Dialog from '@material-ui/core/Dialog'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogTitle from '@material-ui/core/DialogTitle'; -import {Button, DialogActions, DialogContentText} from "@material-ui/core"; -import ButtonWithSpinner from "./ButtonWithSpinner"; - - -interface DeleteConfirmationDialogProps { - open: boolean, - type: string, - title: string, - loading?: boolean, - - onConfirmButtonClick(): void, - - onClose(): void, -} - -export default function DeleteConfirmationDialog(props: DeleteConfirmationDialogProps) { - return ( - - {props.type} löschen? - - - Möchten Sie die {props.type} - "{props.title}" - wirklich löschen? - - - - - - Löschen - - - - ); -} - diff --git a/redaktions-app/src/components/DialogActionBar.tsx b/redaktions-app/src/components/DialogActionBar.tsx index 4445360..1888c82 100644 --- a/redaktions-app/src/components/DialogActionBar.tsx +++ b/redaktions-app/src/components/DialogActionBar.tsx @@ -1,24 +1,23 @@ -import DialogActions from "@material-ui/core/DialogActions"; -import Button from "@material-ui/core/Button"; -import React from "react"; +import {Button, DialogActions} from "@material-ui/core"; import ButtonWithSpinner from "./ButtonWithSpinner"; +import React from "react"; -interface DialogActionBarProps { - confirmButtonText?: string, - loading: boolean, +interface DialogSimpleActionProps { + confirmButtonText?: string, + loading?: boolean, - onCancelButtonClick?(): void, + onClose(): void, - onConfirmButtonClick?(): void, + onConfirmButtonClick(): void, } -export function DialogActionBar(props: DialogActionBarProps) { - return - - - {props.confirmButtonText ? props.confirmButtonText : "Ok"} - - ; +export function DialogActionBar(props: DialogSimpleActionProps) { + return + + + {props.confirmButtonText || "Ok"} + + ; } diff --git a/redaktions-app/src/components/ChangeCategoryDialog.tsx b/redaktions-app/src/components/DialogChangeCategory.tsx similarity index 87% rename from redaktions-app/src/components/ChangeCategoryDialog.tsx rename to redaktions-app/src/components/DialogChangeCategory.tsx index 9cbff82..840ec3e 100644 --- a/redaktions-app/src/components/ChangeCategoryDialog.tsx +++ b/redaktions-app/src/components/DialogChangeCategory.tsx @@ -4,6 +4,7 @@ import DialogContent from '@material-ui/core/DialogContent'; import DialogTitle from '@material-ui/core/DialogTitle'; import {DialogActionBar} from "./DialogActionBar"; import {DialogTitleAndDetails} from "./DialogTitleAndDetails"; +import {makeVar} from "@apollo/client"; export interface ChangeCategoryDialogContent { @@ -12,7 +13,7 @@ export interface ChangeCategoryDialogContent { details: string | null, } -interface ChangeCategoryDialogProps { +interface DialogChangeCategoryProps { title: string, confirmButtonText: string, open: boolean, @@ -27,7 +28,7 @@ interface ChangeCategoryDialogProps { } -export default function ChangeCategoryDialog(props: ChangeCategoryDialogProps) { +export default function DialogChangeCategory(props: DialogChangeCategoryProps) { return ( {props.title} @@ -40,7 +41,7 @@ export default function ChangeCategoryDialog(props: ChangeCategoryDialogProps) { /> {props.title} @@ -53,7 +53,7 @@ export default function ChangeQuestionDialog(props: ChangeQuestionDialogProps) { diff --git a/redaktions-app/src/components/DeleteCategoryDialog.tsx b/redaktions-app/src/components/DialogDeleteCategory.tsx similarity index 68% rename from redaktions-app/src/components/DeleteCategoryDialog.tsx rename to redaktions-app/src/components/DialogDeleteCategory.tsx index 3f32bb7..daa16ba 100644 --- a/redaktions-app/src/components/DeleteCategoryDialog.tsx +++ b/redaktions-app/src/components/DialogDeleteCategory.tsx @@ -1,22 +1,22 @@ import React from 'react'; import {makeVar, Reference, useMutation, useReactiveVar} from "@apollo/client"; -import DeleteConfirmationDialog from "./DeleteConfirmationDialog"; +import DialogSimple from "./DialogSimple"; import {useSnackbar} from "notistack"; import {DELETE_CATEGORY, DeleteCategoryResponse, DeleteCategoryVariables} from "../backend/mutations/category"; -export const deleteCategoryDialogId = makeVar(""); -export const deleteCategoryDialogTitle = makeVar(""); -export const deleteCategoryDialogOpen = makeVar(false); +export const dialogDeleteCategoryId = makeVar(""); +export const dialogDeleteCategoryTitle = makeVar(""); +export const dialogDeleteCategoryOpen = makeVar(false); -export default function DeleteCategoryDialog() { +export default function DialogDeleteCategory() { const {enqueueSnackbar} = useSnackbar(); const [deleteCategory, {loading}] = useMutation(DELETE_CATEGORY, { onError: (e) => enqueueSnackbar(`Ein Fehler ist aufgetreten: ${e.message}`, {variant: "error"}), onCompleted: (response) => { if (response.deleteCategory) { enqueueSnackbar("Kategorie erfolgreich gelöscht.", {variant: "success"}) - deleteCategoryDialogOpen(false); + dialogDeleteCategoryOpen(false); } else { enqueueSnackbar("Ein Fehler ist aufgetreten, versuche es erneut.", {variant: "error"}) } @@ -34,9 +34,9 @@ export default function DeleteCategoryDialog() { } }); - const open = useReactiveVar(deleteCategoryDialogOpen); - const title = useReactiveVar(deleteCategoryDialogTitle); - const id = useReactiveVar(deleteCategoryDialogId); + const open = useReactiveVar(dialogDeleteCategoryOpen); + const title = useReactiveVar(dialogDeleteCategoryTitle); + const id = useReactiveVar(dialogDeleteCategoryId); const handleConfirmButtonClick = () => { deleteCategory({ @@ -47,12 +47,13 @@ export default function DeleteCategoryDialog() { } return ( - deleteCategoryDialogOpen(false)} + onClose={() => dialogDeleteCategoryOpen(false)} loading={loading} /> ); diff --git a/redaktions-app/src/components/DeleteQuestionDialog.tsx b/redaktions-app/src/components/DialogDeleteQuestion.tsx similarity index 67% rename from redaktions-app/src/components/DeleteQuestionDialog.tsx rename to redaktions-app/src/components/DialogDeleteQuestion.tsx index 7e7f8c0..7338012 100644 --- a/redaktions-app/src/components/DeleteQuestionDialog.tsx +++ b/redaktions-app/src/components/DialogDeleteQuestion.tsx @@ -1,22 +1,22 @@ import React from 'react'; import {makeVar, Reference, useMutation, useReactiveVar} from "@apollo/client"; -import DeleteConfirmationDialog from "./DeleteConfirmationDialog"; +import DialogSimple from "./DialogSimple"; import {DELETE_QUESTION, DeleteQuestionResponse, DeleteQuestionVariables} from "../backend/mutations/question"; import {useSnackbar} from "notistack"; -export const deleteQuestionDialogId = makeVar(""); -export const deleteQuestionDialogTitle = makeVar(""); -export const deleteQuestionDialogOpen = makeVar(false); +export const dialogDeleteQuestionId = makeVar(""); +export const dialogDeleteQuestionTitle = makeVar(""); +export const dialogDeleteQuestionOpen = makeVar(false); -export default function DeleteQuestionDialog() { +export default function DialogDeleteQuestion() { const {enqueueSnackbar} = useSnackbar(); const [deleteQuestion, {loading}] = useMutation(DELETE_QUESTION, { onError: (e) => enqueueSnackbar(`Ein Fehler ist aufgetreten: ${e.message}`, {variant: "error"}), onCompleted: (response) => { if (response.deleteQuestion) { enqueueSnackbar("Frage erfolgreich gelöscht.", {variant: "success"}) - deleteQuestionDialogOpen(false); + dialogDeleteQuestionOpen(false); } else { enqueueSnackbar("Ein Fehler ist aufgetreten, versuche es erneut.", {variant: "error"}) } @@ -33,9 +33,9 @@ export default function DeleteQuestionDialog() { } }); - const open = useReactiveVar(deleteQuestionDialogOpen); - const title = useReactiveVar(deleteQuestionDialogTitle); - const id = useReactiveVar(deleteQuestionDialogId); + const open = useReactiveVar(dialogDeleteQuestionOpen); + const title = useReactiveVar(dialogDeleteQuestionTitle); + const id = useReactiveVar(dialogDeleteQuestionId); const handleConfirmButtonClick = () => { deleteQuestion({ @@ -46,12 +46,13 @@ export default function DeleteQuestionDialog() { } return ( - deleteQuestionDialogOpen(false)} + onClose={() => dialogDeleteQuestionOpen(false)} loading={loading} /> ); diff --git a/redaktions-app/src/components/DialogSimple.tsx b/redaktions-app/src/components/DialogSimple.tsx new file mode 100644 index 0000000..2d67a67 --- /dev/null +++ b/redaktions-app/src/components/DialogSimple.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import Dialog from '@material-ui/core/Dialog'; +import DialogContent from '@material-ui/core/DialogContent'; +import DialogTitle from '@material-ui/core/DialogTitle'; +import {DialogContentText} from "@material-ui/core"; +import {DialogActionBar} from "./DialogActionBar"; + + +interface DialogSimpleProps { + open: boolean, + title: string, + confirmButtonText: string, + description: string, + loading?: boolean, + + onConfirmButtonClick(): void, + + onClose(): void, +} + +export default function DialogSimple(props: DialogSimpleProps) { + return ( + + {props.title} + + + {props.description} + + + + + ); +} + diff --git a/redaktions-app/src/components/QuestionList.tsx b/redaktions-app/src/components/QuestionList.tsx index 4ec58b9..457b716 100644 --- a/redaktions-app/src/components/QuestionList.tsx +++ b/redaktions-app/src/components/QuestionList.tsx @@ -10,7 +10,7 @@ import { GET_ALL_QUESTIONS, GetAllQuestionsResponse } from "../backend/queries/question"; -import ChangeQuestionDialog, {ChangeQuestionDialogContent} from "./ChangeQuestionDialog"; +import DialogChangeQuestion, {ChangeQuestionDialogContent} from "./DialogChangeQuestion"; import {GET_ALL_CATEGORIES, GetAllCategoriesResponse} from "../backend/queries/category"; import { ADD_QUESTION, @@ -21,7 +21,7 @@ import { EditQuestionVariables } from "../backend/mutations/question"; import {useSnackbar} from 'notistack'; -import DeleteQuestionDialog, {deleteQuestionDialogId, deleteQuestionDialogOpen, deleteQuestionDialogTitle} from "./DeleteQuestionDialog"; +import DialogDeleteQuestion, {dialogDeleteQuestionId, dialogDeleteQuestionOpen, dialogDeleteQuestionTitle} from "./DialogDeleteQuestion"; const useStyles = makeStyles((theme) => ({ root: { @@ -110,9 +110,9 @@ export default function QuestionList() { }; const handleDeleteButtonClick = (question: BasicQuestionResponse) => { - deleteQuestionDialogTitle(question.title); - deleteQuestionDialogId(question.id); - deleteQuestionDialogOpen(true); + dialogDeleteQuestionTitle(question.title); + dialogDeleteQuestionId(question.id); + dialogDeleteQuestionOpen(true); } const handleDialogContentChange = (content: ChangeQuestionDialogContent) => { @@ -153,7 +153,7 @@ export default function QuestionList() { /> )} - setChangeDialogOpen(false)} /> - + ) }