#11 Refactor: Some renamings

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, {
+import DialogDeleteCategory, {
-  deleteCategoryDialogId,
+  dialogDeleteCategoryId,
-  deleteCategoryDialogOpen,
+  dialogDeleteCategoryOpen,
-  deleteCategoryDialogTitle
+  dialogDeleteCategoryTitle
-} from "./DeleteCategoryDialog";
+} from "./DialogDeleteCategory";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -111,9 +111,9 @@ export default function CategoryList() {
   };
 
   const handleDeleteButtonClick = (category: BasicCategoryResponse) => {
-    deleteCategoryDialogTitle(category.title);
+    dialogDeleteCategoryTitle(category.title);
-    deleteCategoryDialogId(category.id);
+    dialogDeleteCategoryId(category.id);
-    deleteCategoryDialogOpen(true);
+    dialogDeleteCategoryOpen(true);
   }
 
   const handleDialogContentChange = (content: ChangeCategoryDialogContent) => {
@@ -151,7 +151,7 @@ export default function CategoryList() {
         />
       )}
       <AddCard handleClick={handleAddClick}/>
-      <ChangeCategoryDialog
+      <DialogChangeCategory
         title={dialogTitle}
         confirmButtonText={dialogConfirmButtonText}
         open={changeDialogOpen}
@@ -161,7 +161,7 @@ export default function CategoryList() {
         handleConfirmButtonClick={handleChangeConfirmButtonClick}
         handleClose={() => setChangeDialogOpen(false)}
       />
-      <DeleteCategoryDialog/>
+      <DialogDeleteCategory/>
     </Paper>
   )
 }

redaktions-app/src/components/DeleteConfirmationDialog.tsx

@@ -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 (
-    <Dialog
-      open={props.open}
-      onClose={props.onClose}
-      aria-labelledby="alert-dialog-title"
-      aria-describedby="alert-dialog-description"
-    >
-      <DialogTitle id="alert-dialog-title">{props.type} löschen?</DialogTitle>
-      <DialogContent>
-        <DialogContentText id="alert-dialog-description">
-          Möchten Sie die {props.type}
-          "{props.title}"
-          wirklich löschen?
-        </DialogContentText>
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={props.onClose} color="primary">
-          Abbrechen
-        </Button>
-        <ButtonWithSpinner onClick={props.onConfirmButtonClick} autoFocus loading={props.loading}>
-          Löschen
-        </ButtonWithSpinner>
-      </DialogActions>
-    </Dialog>
-  );
-}
-

redaktions-app/src/components/DialogActionBar.tsx

@@ -1,24 +1,23 @@
-import DialogActions from "@material-ui/core/DialogActions";
+import {Button, DialogActions} from "@material-ui/core";
-import Button from "@material-ui/core/Button";
-import React from "react";
 import ButtonWithSpinner from "./ButtonWithSpinner";
+import React from "react";
 
-interface DialogActionBarProps {
+interface DialogSimpleActionProps {
-    confirmButtonText?: string,
+  confirmButtonText?: string,
-    loading: boolean,
+  loading?: boolean,
 
-    onCancelButtonClick?(): void,
+  onClose(): void,
 
-    onConfirmButtonClick?(): void,
+  onConfirmButtonClick(): void,
 }
 
-export function DialogActionBar(props: DialogActionBarProps) {
+export function DialogActionBar(props: DialogSimpleActionProps) {
-    return <DialogActions>
+  return <DialogActions>
-        <Button onClick={props.onCancelButtonClick} color="primary">
+    <Button onClick={props.onClose} color="primary">
-            Abbrechen
+      Abbrechen
-        </Button>
+    </Button>
-        <ButtonWithSpinner loading={props.loading} onClick={props.onConfirmButtonClick} >
+    <ButtonWithSpinner onClick={props.onConfirmButtonClick} autoFocus loading={props.loading}>
-            {props.confirmButtonText ? props.confirmButtonText : "Ok"}
+      {props.confirmButtonText || "Ok"}
-        </ButtonWithSpinner>
+    </ButtonWithSpinner>
-    </DialogActions>;
+  </DialogActions>;
 }

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 (
     <Dialog open={props.open} onClose={props.handleClose} aria-labelledby="form-dialog-title">
       <DialogTitle id="form-dialog-title">{props.title}</DialogTitle>
@@ -40,7 +41,7 @@ export default function ChangeCategoryDialog(props: ChangeCategoryDialogProps) {
         />
       </DialogContent>
       <DialogActionBar
-        onCancelButtonClick={props.handleClose}
+        onClose={props.handleClose}
         onConfirmButtonClick={props.handleConfirmButtonClick}
         confirmButtonText={props.confirmButtonText}
         loading={props.loading}

redaktions-app/src/components/DialogChangeQuestion.tsx

@@ -15,7 +15,7 @@ export interface ChangeQuestionDialogContent {
   categoryId: number | null,
 }
 
-interface ChangeQuestionDialogProps {
+interface DialogChangeQuestionProps {
   title: string,
   confirmButtonText: string,
   open: boolean,
@@ -31,7 +31,7 @@ interface ChangeQuestionDialogProps {
 }
 
 
-export default function ChangeQuestionDialog(props: ChangeQuestionDialogProps) {
+export default function DialogChangeQuestion(props: DialogChangeQuestionProps) {
   return (
     <Dialog open={props.open} onClose={props.handleClose} aria-labelledby="form-dialog-title">
       <DialogTitle id="form-dialog-title">{props.title}</DialogTitle>
@@ -53,7 +53,7 @@ export default function ChangeQuestionDialog(props: ChangeQuestionDialogProps) {
       </DialogContent>
       <DialogActionBar
         loading={props.loading}
-        onCancelButtonClick={props.handleClose}
+        onClose={props.handleClose}
         onConfirmButtonClick={props.handleConfirmButtonClick}
         confirmButtonText={props.confirmButtonText}
       />

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<string>("");
+export const dialogDeleteCategoryId = makeVar<string>("");
-export const deleteCategoryDialogTitle = makeVar<string>("");
+export const dialogDeleteCategoryTitle = makeVar<string>("");
-export const deleteCategoryDialogOpen = makeVar<boolean>(false);
+export const dialogDeleteCategoryOpen = makeVar<boolean>(false);
 
-export default function DeleteCategoryDialog() {
+export default function DialogDeleteCategory() {
   const {enqueueSnackbar} = useSnackbar();
   const [deleteCategory, {loading}] = useMutation<DeleteCategoryResponse, DeleteCategoryVariables>(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 open = useReactiveVar(dialogDeleteCategoryOpen);
-  const title = useReactiveVar(deleteCategoryDialogTitle);
+  const title = useReactiveVar(dialogDeleteCategoryTitle);
-  const id = useReactiveVar(deleteCategoryDialogId);
+  const id = useReactiveVar(dialogDeleteCategoryId);
 
   const handleConfirmButtonClick = () => {
     deleteCategory({
@@ -47,12 +47,13 @@ export default function DeleteCategoryDialog() {
   }
 
   return (
-    <DeleteConfirmationDialog
+    <DialogSimple
       open={open}
-      type={"Kategorie"}
+      title={"Kategorie löschen?"}
-      title={title}
+      description={`Möchtest du die Kategorie "${title}" wirklich löschen?`}
+      confirmButtonText={"Löschen"}
       onConfirmButtonClick={handleConfirmButtonClick}
-      onClose={() => deleteCategoryDialogOpen(false)}
+      onClose={() => dialogDeleteCategoryOpen(false)}
       loading={loading}
     />
   );

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<string>("");
+export const dialogDeleteQuestionId = makeVar<string>("");
-export const deleteQuestionDialogTitle = makeVar<string>("");
+export const dialogDeleteQuestionTitle = makeVar<string>("");
-export const deleteQuestionDialogOpen = makeVar<boolean>(false);
+export const dialogDeleteQuestionOpen = makeVar<boolean>(false);
 
-export default function DeleteQuestionDialog() {
+export default function DialogDeleteQuestion() {
   const {enqueueSnackbar} = useSnackbar();
   const [deleteQuestion, {loading}] = useMutation<DeleteQuestionResponse, DeleteQuestionVariables>(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 open = useReactiveVar(dialogDeleteQuestionOpen);
-  const title = useReactiveVar(deleteQuestionDialogTitle);
+  const title = useReactiveVar(dialogDeleteQuestionTitle);
-  const id = useReactiveVar(deleteQuestionDialogId);
+  const id = useReactiveVar(dialogDeleteQuestionId);
 
   const handleConfirmButtonClick = () => {
     deleteQuestion({
@@ -46,12 +46,13 @@ export default function DeleteQuestionDialog() {
   }
 
   return (
-    <DeleteConfirmationDialog
+    <DialogSimple
       open={open}
-      type={"Frage"}
+      title={"Frage löschen?"}
-      title={title}
+      description={`Möchtest du die Frage "${title}" wirklich löschen?`}
+      confirmButtonText={"Löschen"}
       onConfirmButtonClick={handleConfirmButtonClick}
-      onClose={() => deleteQuestionDialogOpen(false)}
+      onClose={() => dialogDeleteQuestionOpen(false)}
       loading={loading}
     />
   );

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 (
+    <Dialog
+      open={props.open}
+      onClose={props.onClose}
+      aria-labelledby="alert-dialog-title"
+      aria-describedby="alert-dialog-description"
+    >
+      <DialogTitle id="alert-dialog-title">{props.title}</DialogTitle>
+      <DialogContent>
+        <DialogContentText id="alert-dialog-description">
+          {props.description}
+        </DialogContentText>
+      </DialogContent>
+      <DialogActionBar
+        confirmButtonText={props.confirmButtonText}
+        onClose={props.onClose}
+        onConfirmButtonClick={props.onConfirmButtonClick}
+      />
+    </Dialog>
+  );
+}
+

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);
+    dialogDeleteQuestionTitle(question.title);
-    deleteQuestionDialogId(question.id);
+    dialogDeleteQuestionId(question.id);
-    deleteQuestionDialogOpen(true);
+    dialogDeleteQuestionOpen(true);
   }
 
   const handleDialogContentChange = (content: ChangeQuestionDialogContent) => {
@@ -153,7 +153,7 @@ export default function QuestionList() {
         />
       )}
       <AddCard handleClick={handleAddClick}/>
-      <ChangeQuestionDialog
+      <DialogChangeQuestion
         title={dialogTitle}
         confirmButtonText={dialogConfirmButtonText}
         open={changeDialogOpen}
@@ -164,7 +164,7 @@ export default function QuestionList() {
         handleConfirmButtonClick={handleChangeConfirmButtonClick}
         handleClose={() => setChangeDialogOpen(false)}
       />
-      <DeleteQuestionDialog/>
+      <DialogDeleteQuestion/>
     </Paper>
   )
 }