From bd851d3b58186eaed7d37d2f55299d3265947cf9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=9F=E3=81=84=E3=81=A1=20=E3=81=B2?=
 <taichi221228@icloud.com>
Date: Mon, 8 May 2023 18:12:44 +0900
Subject: [PATCH] [Glitch] Rewrite Image component as function component

Port a65d2d10458fcb6c1c36fa6dd52b8f64d12ce50d to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../flavours/glitch/components/image.jsx      | 33 -------------------
 .../flavours/glitch/components/image.tsx      | 27 +++++++++++++++
 2 files changed, 27 insertions(+), 33 deletions(-)
 delete mode 100644 app/javascript/flavours/glitch/components/image.jsx
 create mode 100644 app/javascript/flavours/glitch/components/image.tsx

diff --git a/app/javascript/flavours/glitch/components/image.jsx b/app/javascript/flavours/glitch/components/image.jsx
deleted file mode 100644
index 6e81ddf08..000000000
--- a/app/javascript/flavours/glitch/components/image.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Blurhash from './blurhash';
-import classNames from 'classnames';
-
-export default class Image extends React.PureComponent {
-
-  static propTypes = {
-    src: PropTypes.string,
-    srcSet: PropTypes.string,
-    blurhash: PropTypes.string,
-    className: PropTypes.string,
-  };
-
-  state = {
-    loaded: false,
-  };
-
-  handleLoad = () => this.setState({ loaded: true });
-
-  render () {
-    const { src, srcSet, blurhash, className } = this.props;
-    const { loaded } = this.state;
-
-    return (
-      <div className={classNames('image', { loaded }, className)} role='presentation'>
-        {blurhash && <Blurhash hash={blurhash} className='image__preview' />}
-        <img src={src} srcSet={srcSet} alt='' onLoad={this.handleLoad} />
-      </div>
-    );
-  }
-
-}
diff --git a/app/javascript/flavours/glitch/components/image.tsx b/app/javascript/flavours/glitch/components/image.tsx
new file mode 100644
index 000000000..9b4d60225
--- /dev/null
+++ b/app/javascript/flavours/glitch/components/image.tsx
@@ -0,0 +1,27 @@
+import React, { useCallback, useState } from 'react';
+import Blurhash from './blurhash';
+import classNames from 'classnames';
+
+type Props = {
+  src: string;
+  srcSet?: string;
+  blurhash?: string;
+  className?: string;
+}
+
+export const Image: React.FC<Props> = ({ src, srcSet, blurhash, className }) => {
+  const [loaded, setLoaded] = useState(false);
+
+  const handleLoad = useCallback(() => {
+    setLoaded(true);
+  }, [setLoaded]);
+
+  return (
+    <div className={classNames('image', { loaded }, className)} role='presentation'>
+      {blurhash && <Blurhash hash={blurhash} className='image__preview' />}
+      <img src={src} srcSet={srcSet} alt='' onLoad={handleLoad} />
+    </div>
+  );
+};
+
+export default Image;