<commit_before>import React 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
  loadedPreview: boolean
}

export class ImageViewer extends React.Component<ImageViewerProps, ImageViewerState> {
  constructor(props: ImageViewerProps) {
    super(props)

    this.state = {
      showModal: false,
      loadedThumbnail: false,
      loadedPreview: false,
    }
  }

  private openModal = () => {
    if (this.state.loadedThumbnail) {
      this.setState({ showModal: true })
    }
  }

  private closeModal = async () => {
    this.setState({ showModal: false })
  }

  private onThumbnailLoad = () => {
    this.setState({ loadedThumbnail: true })
  }

  private onPreviewLoad = () => {
    this.setState({ loadedPreview: true })
  }

  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>
    )
  }

  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>
    )
  }
}
<commit_msg>refactor: Migrate ImageViewer from class to FC (#1022)<commit_after>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 ImageViewerModalProps {
  isOpen: boolean
  imgSrc: string | undefined
  loadedPreview: boolean
  onPreviewLoad: () => void
  onClose: () => void
}

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>

    <Modal.Footer>
      <Button variant="tertiary" onClick={props.onClose}>
        <Trans id="action.close">Close</Trans>
      </Button>
    </Modal.Footer>
  </Modal.Window>
)

interface ImageViewerProps {
  bkey: string
}

export const ImageViewer = (props: ImageViewerProps) => {
  const [showModal, setShowModal] = useState(false)
  const [loadedThumbnail, setLoadedThumbnail] = useState(false)
  const [loadedPreview, setLoadedPreview] = useState(false)

  const openModal = () => {
    if (loadedThumbnail) {
      setShowModal(true)
    }
  }

  const closeModal = () => {
    setShowModal(false)
  }

  const onThumbnailLoad = () => {
    setLoadedThumbnail(true)
  }

  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>
  )
}

{'fraction_non_alphanumeric': 0.14072164948453608, 'fraction_numerical': 0.004639175257731959, 'mean_word_length': 3.312222222222222, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 49, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6098158', 'n_tokens_mistral': 1266, 'n_tokens_neox': 1230, 'n_words': 238}