Refactoring of modals (#294)

* Refactored modals (added CommonModal and DeletionModal besides ErrorModal)

This change allows more code reusage by defining a common modal that has a translated title with an optional icon.

* Replace the eslint-hack with a proper TypeScript conform solution

Instead of asserting non-null and disabling eslint, the 'as ...'-syntax is used to convince the compiler that everything is fine.

* Improved property names and ShowIf-construct

* Fixed missing renamings

src/components/common/error-modal/error-modal.tsx

@@ -1,32 +0,0 @@
-import React, { Fragment } from 'react'
-import { Modal } from 'react-bootstrap'
-import { Trans } from 'react-i18next'
-import { ForkAwesomeIcon, IconName } from '../fork-awesome/fork-awesome-icon'
-
-export interface ErrorModalProps {
-  show: boolean
-  onHide: () => void
-  title: string
-  icon?: IconName
-}
-
-export const ErrorModal: React.FC<ErrorModalProps> = ({ show, onHide, title, icon, children }) => {
-  return (
-    <Modal show={show} onHide={onHide} animation={true} className="text-dark">
-      <Modal.Header closeButton>
-        <Modal.Title>
-          {icon
-            ? <Fragment>
-              <ForkAwesomeIcon icon={icon}/>&nbsp;<Trans i18nKey={title}/>
-            </Fragment>
-            : <Trans i18nKey={title}/>
-          }
-
-        </Modal.Title>
-      </Modal.Header>
-      <Modal.Body className="text-dark text-center">
-        {children}
-      </Modal.Body>
-    </Modal>
-  )
-}

src/components/common/modals/common-modal.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Modal } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
+import { ForkAwesomeIcon, IconName } from '../fork-awesome/fork-awesome-icon'
+import { ShowIf } from '../show-if/show-if'
+
+export interface CommonModalProps {
+  show: boolean
+  onHide: () => void
+  titleI18nKey: string
+  closeButton?: boolean
+  icon?: IconName
+}
+
+export const CommonModal: React.FC<CommonModalProps> = ({ show, onHide, titleI18nKey, closeButton, icon, children }) => {
+  useTranslation()
+
+  return (
+    <Modal show={show} onHide={onHide} animation={true} className="text-dark">
+      <Modal.Header closeButton={!!closeButton}>
+        <Modal.Title>
+          <ShowIf condition={!!icon}>
+            <ForkAwesomeIcon icon={icon as IconName}/>&nbsp;
+          </ShowIf>
+          <Trans i18nKey={titleI18nKey}/>
+        </Modal.Title>
+      </Modal.Header>
+      { children }
+    </Modal>
+  )
+}

src/components/common/modals/deletion-modal.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Modal, Button } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
+import { CommonModal, CommonModalProps } from './common-modal'
+
+export interface DeletionModalProps extends CommonModalProps {
+  onConfirm: () => void
+  deletionButtonI18nKey: string
+}
+
+export const DeletionModal: React.FC<DeletionModalProps> = ({ show, onHide, titleI18nKey, onConfirm, deletionButtonI18nKey, icon, children }) => {
+  useTranslation()
+
+  return (
+    <CommonModal show={show} onHide={onHide} titleI18nKey={titleI18nKey} icon={icon} closeButton={true}>
+      <Modal.Body className="text-dark">
+        { children }
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant="danger" onClick={onConfirm}>
+          <Trans i18nKey={deletionButtonI18nKey}/>
+        </Button>
+      </Modal.Footer>
+    </CommonModal>
+  )
+}

src/components/common/modals/error-modal.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Modal } from 'react-bootstrap'
+import { CommonModal, CommonModalProps } from './common-modal'
+
+export const ErrorModal: React.FC<CommonModalProps> = ({ show, onHide, titleI18nKey, icon, children }) => {
+  return (
+    <CommonModal show={show} onHide={onHide} titleI18nKey={titleI18nKey} icon={icon} closeButton={true}>
+      <Modal.Body className="text-dark text-center">
+        { children }
+      </Modal.Body>
+    </CommonModal>
+  )
+}