Migrate ImageViewer from class component to functional component

public/components/common/form/ImageViewer.tsx

@@ -1,74 +1,71 @@
-import React from "react"
+import React, { useState } from "react"
 import { uploadedImageURL } from "@fider/services"
 import { Modal, Button, Loader } from "@fider/components"
 
 import "./ImageViewer.scss"
 import { Trans } from "@lingui/macro"
 
-interface ImageViewerProps {
-  bkey: string
-}
-
-interface ImageViewerState {
-  showModal: boolean
-  loadedThumbnail: boolean
+interface ImageViewerModalProps {
+  isOpen: boolean
+  imgSrc: string | undefined
   loadedPreview: boolean
+  onPreviewLoad: () => void
+  onClose: () => void
 }
 
-export class ImageViewer extends React.Component<ImageViewerProps, ImageViewerState> {
-  constructor(props: ImageViewerProps) {
-    super(props)
+const ImageViewerModal = (props: ImageViewerModalProps) => (
+  <Modal.Window className="c-image-viewer-modal" isOpen={props.isOpen} onClose={props.onClose} center={false} size="fluid">
+    <Modal.Content>
+      {!props.loadedPreview && <Loader />}
+      <img alt="" onLoad={props.onPreviewLoad} src={props.imgSrc} />
+    </Modal.Content>
 
-    this.state = {
-      showModal: false,
-      loadedThumbnail: false,
-      loadedPreview: false,
-    }
-  }
+    <Modal.Footer>
+      <Button variant="tertiary" onClick={props.onClose}>
+        <Trans id="action.close">Close</Trans>
+      </Button>
+    </Modal.Footer>
+  </Modal.Window>
+)
 
-  private openModal = () => {
-    if (this.state.loadedThumbnail) {
-      this.setState({ showModal: true })
-    }
-  }
+interface ImageViewerProps {
+  bkey: string
+}
 
-  private closeModal = async () => {
-    this.setState({ showModal: false })
-  }
+export const ImageViewer = (props: ImageViewerProps) => {
+  const [showModal, setShowModal] = useState(false)
+  const [loadedThumbnail, setLoadedThumbnail] = useState(false)
+  const [loadedPreview, setLoadedPreview] = useState(false)
 
-  private onThumbnailLoad = () => {
-    this.setState({ loadedThumbnail: true })
+  const openModal = () => {
+    if (loadedThumbnail) {
+      setShowModal(true)
+    }
   }
 
-  private onPreviewLoad = () => {
-    this.setState({ loadedPreview: true })
+  const closeModal = () => {
+    setShowModal(false)
   }
 
-  private modal() {
-    return (
-      <Modal.Window className="c-image-viewer-modal" isOpen={this.state.showModal} onClose={this.closeModal} center={false} size="fluid">
-        <Modal.Content>
-          {!this.state.loadedPreview && <Loader />}
-          <img alt="" onLoad={this.onPreviewLoad} src={uploadedImageURL(this.props.bkey, 1500)} />
-        </Modal.Content>
-
-        <Modal.Footer>
-          <Button variant="tertiary" onClick={this.closeModal}>
-            <Trans id="action.close">Close</Trans>
-          </Button>
-        </Modal.Footer>
-      </Modal.Window>
-    )
+  const onThumbnailLoad = () => {
+    setLoadedThumbnail(true)
   }
 
-  public render() {
-    const previewURL = uploadedImageURL(this.props.bkey, 200)
-    return (
-      <div className="c-image-viewer">
-        {this.modal()}
-        {!this.state.loadedThumbnail && <Loader />}
-        <img alt="" onClick={this.openModal} onLoad={this.onThumbnailLoad} src={previewURL} />
-      </div>
-    )
+  const onPreviewLoad = () => {
+    setLoadedPreview(true)
   }
+
+  return (
+    <div className="c-image-viewer">
+      <ImageViewerModal
+        onPreviewLoad={onPreviewLoad}
+        isOpen={showModal}
+        onClose={closeModal}
+        imgSrc={uploadedImageURL(props.bkey, 1500)}
+        loadedPreview={loadedPreview}
+      />
+      {!loadedThumbnail && <Loader />}
+      <img alt="" onClick={openModal} onLoad={onThumbnailLoad} src={uploadedImageURL(props.bkey, 200)} />
+    </div>
+  )
 }