EmbedModal: convert to typescript

app/soapbox/components/ui/input/input.tsx

@@ -11,7 +11,7 @@ const messages = defineMessages({
   hidePassword: { id: 'input.password.hide_password', defaultMessage: 'Hide password' },
 });
 
-interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxLength' | 'onChange' | 'type' | 'autoComplete' | 'autoCorrect' | 'autoCapitalize' | 'required' | 'disabled'> {
+interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxLength' | 'onChange' | 'type' | 'autoComplete' | 'autoCorrect' | 'autoCapitalize' | 'required' | 'disabled' | 'onClick' | 'readOnly'> {
   /** Put the cursor into the input on mount. */
   autoFocus?: boolean,
   /** The initial text in the input. */

app/soapbox/features/ui/components/embed_modal.js

@@ -1,97 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { FormattedMessage, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-
-import api from 'soapbox/api';
-import { Modal, Stack, Text, Input } from 'soapbox/components/ui';
-
-export default @connect()
-@injectIntl
-class EmbedModal extends ImmutablePureComponent {
-
-  static propTypes = {
-    url: PropTypes.string.isRequired,
-    onClose: PropTypes.func.isRequired,
-    onError: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  }
-
-  state = {
-    loading: false,
-    oembed: null,
-  };
-
-  fetchEmbed = () => {
-    const { dispatch, url } = this.props;
-
-    return dispatch((dispatch, getState) => {
-      return api(getState).get('/api/oembed', { params: { url } });
-    });
-  }
-
-  componentDidMount() {
-    this.setState({ loading: true });
-
-    this.fetchEmbed().then(res => {
-      this.setState({ loading: false, oembed: res.data });
-
-      const iframeDocument = this.iframe.contentWindow.document;
-
-      iframeDocument.open();
-      iframeDocument.write(res.data.html);
-      iframeDocument.close();
-
-      const innerFrame = iframeDocument.querySelector('iframe');
-
-      iframeDocument.body.style.margin = 0;
-
-      if (innerFrame) {
-        innerFrame.width = '100%';
-      }
-    }).catch(error => {
-      this.props.onError(error);
-    });
-  }
-
-  setIframeRef = c =>  {
-    this.iframe = c;
-  }
-
-  handleTextareaClick = (e) => {
-    e.target.select();
-  }
-
-  render() {
-    const { oembed } = this.state;
-
-    return (
-      <Modal title={<FormattedMessage id='status.embed' defaultMessage='Embed' />}>
-        <Stack space={4}>
-          <Stack>
-            <Text theme='muted' size='sm'>
-              <FormattedMessage id='embed.instructions' defaultMessage='Embed this post on your website by copying the code below.' />
-            </Text>
-
-            <Input
-              type='text'
-              readOnly
-              value={oembed?.html || ''}
-              onClick={this.handleTextareaClick}
-            />
-          </Stack>
-
-          <iframe
-            className='inline-flex rounded-xl overflow-hidden max-w-full'
-            frameBorder='0'
-            ref={this.setIframeRef}
-            sandbox='allow-same-origin'
-            title='preview'
-          />
-        </Stack>
-      </Modal>
-    );
-  }
-
-}

app/soapbox/features/ui/components/embed_modal.tsx

@@ -0,0 +1,81 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import api from 'soapbox/api';
+import { Modal, Stack, Text, Input } from 'soapbox/components/ui';
+import { useAppDispatch } from 'soapbox/hooks';
+
+const fetchEmbed = (url: string) => {
+  return (dispatch: any, getState: any) => {
+    return api(getState).get('/api/oembed', { params: { url } });
+  };
+};
+
+interface IEmbedModal {
+  url: string,
+  onError: (error: any) => void,
+}
+
+const EmbedModal: React.FC<IEmbedModal> = ({ url, onError }) => {
+  const dispatch = useAppDispatch();
+
+  const iframe = useRef<HTMLIFrameElement>(null);
+  const [oembed, setOembed] = useState<any>(null);
+
+  useEffect(() => {
+
+    dispatch(fetchEmbed(url)).then(({ data }) => {
+      if (!iframe.current?.contentWindow) return;
+      setOembed(data);
+
+      const iframeDocument = iframe.current.contentWindow.document;
+
+      iframeDocument.open();
+      iframeDocument.write(data.html);
+      iframeDocument.close();
+
+      const innerFrame = iframeDocument.querySelector('iframe');
+
+      iframeDocument.body.style.margin = '0';
+
+      if (innerFrame) {
+        innerFrame.width = '100%';
+      }
+    }).catch(error => {
+      onError(error);
+    });
+  }, [!!iframe.current]);
+
+  const handleInputClick: React.MouseEventHandler<HTMLInputElement> = (e) => {
+    e.currentTarget.select();
+  };
+
+  return (
+    <Modal title={<FormattedMessage id='status.embed' defaultMessage='Embed' />}>
+      <Stack space={4}>
+        <Stack>
+          <Text theme='muted' size='sm'>
+            <FormattedMessage id='embed.instructions' defaultMessage='Embed this post on your website by copying the code below.' />
+          </Text>
+
+          <Input
+            type='text'
+            readOnly
+            value={oembed?.html || ''}
+            onClick={handleInputClick}
+          />
+        </Stack>
+
+        <iframe
+          className='inline-flex rounded-xl overflow-hidden max-w-full'
+          frameBorder='0'
+          ref={iframe}
+          sandbox='allow-same-origin'
+          title='preview'
+        />
+      </Stack>
+    </Modal>
+  );
+};
+
+export default EmbedModal;