Fix review findings

scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx

@@ -22,12 +22,14 @@
  * SOFTWARE.
  */
 import * as React from "react";
-import { FC } from "react";
+import { FC, ReactNode, useState } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
+import FullscreenModal from "../modals/FullscreenModal";
 
 type Props = {
-  onClick?: () => void;
+  modalTitle: string;
+  modalBody: ReactNode;
 };
 
 const Button = styled.a`
@@ -37,13 +39,22 @@ const Button = styled.a`
   }
 `;
 
-const OpenInFullscreenButton: FC<Props> = ({ onClick }) => {
+const OpenInFullscreenButton: FC<Props> = ({ modalTitle, modalBody }) => {
   const [t] = useTranslation("repos");
+  const [showModal, setShowModal] = useState(false);
 
   return (
-    <Button title={t("diff.fullscreen.open")} className="button" onClick={onClick}>
-      <i className="fas fa-search-plus" />
-    </Button>
+    <>
+      <Button title={t("diff.fullscreen.open")} className="button" onClick={() => setShowModal(true)}>
+        <i className="fas fa-search-plus" />
+      </Button>
+      <FullscreenModal
+        title={modalTitle}
+        closeFunction={() => setShowModal(false)}
+        body={modalBody}
+        active={showModal}
+      />
+    </>
   );
 };
 

scm-ui/ui-components/src/repos/DiffFile.tsx

@@ -33,7 +33,7 @@ import Icon from "../Icon";
 import { Change, ChangeEvent, DiffObjectProps, File, Hunk as HunkType } from "./DiffTypes";
 import TokenizedDiffView from "./TokenizedDiffView";
 import DiffButton from "./DiffButton";
-import { MenuContext, OpenInFullscreenButton, FullscreenModal } from "@scm-manager/ui-components";
+import { MenuContext, OpenInFullscreenButton } from "@scm-manager/ui-components";
 import DiffExpander, { ExpandableHunk } from "./DiffExpander";
 import HunkExpandLink from "./HunkExpandLink";
 import { Modal } from "../modals";
@@ -57,7 +57,6 @@ type State = Collapsible & {
   sideBySide?: boolean;
   diffExpander: DiffExpander;
   expansionError?: any;
-  showFullscreenModal: boolean;
 };
 
 const DiffFilePanel = styled.div`
@@ -108,8 +107,7 @@ class DiffFile extends React.Component<Props, State> {
       collapsed: this.defaultCollapse(),
       sideBySide: props.sideBySide,
       diffExpander: new DiffExpander(props.file),
-      file: props.file,
-      showFullscreenModal: false
+      file: props.file
     };
   }
 
@@ -150,18 +148,6 @@ class DiffFile extends React.Component<Props, State> {
     );
   };
 
-  openModal = () => {
-    this.setState({
-      showFullscreenModal: true
-    });
-  };
-
-  closeModal = () => {
-    this.setState({
-      showFullscreenModal: false
-    });
-  };
-
   setCollapse = (collapsed: boolean) => {
     this.setState({
       collapsed
@@ -421,7 +407,7 @@ class DiffFile extends React.Component<Props, State> {
 
   render() {
     const { fileControlFactory, fileAnnotationFactory, t } = this.props;
-    const { file, collapsed, sideBySide, diffExpander, expansionError, showFullscreenModal } = this.state;
+    const { file, collapsed, sideBySide, diffExpander, expansionError } = this.state;
     const viewType = sideBySide ? "split" : "unified";
 
     let body = null;
@@ -444,7 +430,12 @@ class DiffFile extends React.Component<Props, State> {
     }
     const collapseIcon = this.hasContent(file) ? <Icon name={icon} color="inherit" /> : null;
     const fileControls = fileControlFactory ? fileControlFactory(file, this.setCollapse) : null;
-    const openInFullscreen = file?.hunks?.length ? <OpenInFullscreenButton onClick={this.openModal} /> : null;
+    const openInFullscreen = file?.hunks?.length ? (
+      <OpenInFullscreenButton
+        modalTitle={file.type === "delete" ? file.oldPath : file.newPath}
+        modalBody={<MarginlessModalContent>{body}</MarginlessModalContent>}
+      />
+    ) : null;
     const sideBySideToggle = file?.hunks?.length && (
       <MenuContext.Consumer>
         {({ setCollapsed }) => (
@@ -484,18 +475,6 @@ class DiffFile extends React.Component<Props, State> {
       );
     }
 
-    let modalContent;
-    if (file?.hunks?.length) {
-      modalContent = (
-        <FullscreenModal
-          title={file.type === "delete" ? file.oldPath : file.newPath}
-          closeFunction={() => this.closeModal()}
-          body={<MarginlessModalContent>{body}</MarginlessModalContent>}
-          active={showFullscreenModal}
-        />
-      );
-    }
-
     return (
       <DiffFilePanel
         className={classNames("panel", "is-size-6")}
@@ -520,7 +499,6 @@ class DiffFile extends React.Component<Props, State> {
           </FlexWrapLevel>
         </div>
         {body}
-        {modalContent}
       </DiffFilePanel>
     );
   }