#11 Refactor: Some renamings

2020-12-30 21:08:09 +01:00 · 2020-12-30 21:08:09 +01:00 · 0170e850a8
parent fc8bc6724b
commit 0170e850a8
9 changed files with 112 additions and 114 deletions
--- 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() {
        />
      )}
      <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>
  )
 }
--- a/redaktions-app/src/components/DeleteConfirmationDialog.tsx
+++ b/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>
-  );
-}
-
--- 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 <DialogActions>
-        <Button onClick={props.onCancelButtonClick} color="primary">
-            Abbrechen
-        </Button>
-        <ButtonWithSpinner loading={props.loading} onClick={props.onConfirmButtonClick} >
-            {props.confirmButtonText ? props.confirmButtonText : "Ok"}
-        </ButtonWithSpinner>
-    </DialogActions>;
+export function DialogActionBar(props: DialogSimpleActionProps) {
+  return <DialogActions>
+    <Button onClick={props.onClose} color="primary">
+      Abbrechen
+    </Button>
+    <ButtonWithSpinner onClick={props.onConfirmButtonClick} autoFocus loading={props.loading}>
+      {props.confirmButtonText || "Ok"}
+    </ButtonWithSpinner>
+  </DialogActions>;
 }
--- a/redaktions-app/src/components/DialogChangeCategory.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 (
    <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}
--- a/redaktions-app/src/components/DialogChangeQuestion.tsx
+++ b/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}
      />
--- a/redaktions-app/src/components/DialogDeleteCategory.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<string>("");
-export const deleteCategoryDialogTitle = makeVar<string>("");
-export const deleteCategoryDialogOpen = makeVar<boolean>(false);
+export const dialogDeleteCategoryId = makeVar<string>("");
+export const dialogDeleteCategoryTitle = makeVar<string>("");
+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 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 (
-    <DeleteConfirmationDialog
+    <DialogSimple
      open={open}
-      type={"Kategorie"}
-      title={title}
+      title={"Kategorie löschen?"}
+      description={`Möchtest du die Kategorie "${title}" wirklich löschen?`}
+      confirmButtonText={"Löschen"}
      onConfirmButtonClick={handleConfirmButtonClick}
-      onClose={() => deleteCategoryDialogOpen(false)}
+      onClose={() => dialogDeleteCategoryOpen(false)}
      loading={loading}
    />
  );
--- a/redaktions-app/src/components/DialogDeleteQuestion.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<string>("");
-export const deleteQuestionDialogTitle = makeVar<string>("");
-export const deleteQuestionDialogOpen = makeVar<boolean>(false);
+export const dialogDeleteQuestionId = makeVar<string>("");
+export const dialogDeleteQuestionTitle = makeVar<string>("");
+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 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 (
-    <DeleteConfirmationDialog
+    <DialogSimple
      open={open}
-      type={"Frage"}
-      title={title}
+      title={"Frage löschen?"}
+      description={`Möchtest du die Frage "${title}" wirklich löschen?`}
+      confirmButtonText={"Löschen"}
      onConfirmButtonClick={handleConfirmButtonClick}
-      onClose={() => deleteQuestionDialogOpen(false)}
+      onClose={() => dialogDeleteQuestionOpen(false)}
      loading={loading}
    />
  );
--- a/redaktions-app/src/components/DialogSimple.tsx
+++ 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 (
+    <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>
+  );
+}
+
--- 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() {
        />
      )}
      <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>
  )
 }