Updating FormActions to use hooks

src/components/App/__snapshots__/test.js.snap

@@ -20,7 +20,7 @@ exports[`App removing rendered expression 1`] = `
 }"
   >
     <span
-      data-component="withI18nextTranslation(FormActions)"
+      data-component="FormActions"
       data-props="{}"
     />
   </span>
@@ -145,7 +145,7 @@ exports[`App rendering an expression 3`] = `
 }"
   >
     <span
-      data-component="withI18nextTranslation(FormActions)"
+      data-component="FormActions"
       data-props="{}"
     />
   </span>

src/components/FormActions/__snapshots__/test.js.snap

@@ -8,168 +8,6 @@ exports[`FormActions rendering 1`] = `
 </DocumentFragment>
 `;
 
-exports[`FormActions rendering download links 1`] = `
-<DocumentFragment>
-  <ul
-    class="actions"
-  >
-    <li>
-      <a
-        download="image.png"
-        href="http://example.com/image.png"
-        type="image/png"
-      >
-        <span
-          data-component="Download"
-          data-props="{}"
-        />
-        TRANSLATE(Example PNG Link)
-      </a>
-    </li>
-    <li>
-      <a
-        download="image.svg"
-        href="http://example.com/image.svg"
-        type="image/svg+xml"
-      >
-        <span
-          data-component="Download"
-          data-props="{}"
-        />
-        TRANSLATE(Example SVG Link)
-      </a>
-    </li>
-  </ul>
-</DocumentFragment>
-`;
-
-exports[`FormActions rendering download links with data after mounting 1`] = `
-<DocumentFragment>
-  <ul
-    class="actions"
-  >
-    <li>
-      <a
-        href="http://example.com"
-      >
-        <span
-          data-component="Link"
-          data-props="{}"
-        />
-        <span
-          data-component="Trans"
-          data-props="{}"
-        >
-          Permalink
-        </span>
-      </a>
-    </li>
-  </ul>
-</DocumentFragment>
-`;
-
-exports[`FormActions rendering download links with data after mounting 2`] = `
-<DocumentFragment>
-  <ul
-    class="actions"
-  >
-    <li>
-      <a
-        download="image.png"
-        href="http://example.com/image.png"
-        type="image/png"
-      >
-        <span
-          data-component="Download"
-          data-props="{}"
-        />
-        TRANSLATE(Example PNG Link)
-      </a>
-    </li>
-    <li>
-      <a
-        download="image.svg"
-        href="http://example.com/image.svg"
-        type="image/svg+xml"
-      >
-        <span
-          data-component="Download"
-          data-props="{}"
-        />
-        TRANSLATE(Example SVG Link)
-      </a>
-    </li>
-    <li>
-      <a
-        href="http://example.com"
-      >
-        <span
-          data-component="Link"
-          data-props="{}"
-        />
-        <span
-          data-component="Trans"
-          data-props="{}"
-        >
-          Permalink
-        </span>
-      </a>
-    </li>
-  </ul>
-</DocumentFragment>
-`;
-
-exports[`FormActions rendering download links with data after mounting 3`] = `
-<DocumentFragment>
-  <ul
-    class="actions"
-  >
-    <li>
-      <a
-        download="image.png"
-        href="http://example.com/image.png"
-        type="image/png"
-      >
-        <span
-          data-component="Download"
-          data-props="{}"
-        />
-        TRANSLATE(Example PNG Link)
-      </a>
-    </li>
-    <li>
-      <a
-        download="image.svg"
-        href="http://example.com/image.svg"
-        type="image/svg+xml"
-      >
-        <span
-          data-component="Download"
-          data-props="{}"
-        />
-        TRANSLATE(Example SVG Link)
-      </a>
-    </li>
-    <li>
-      <a
-        href="http://example.com"
-      >
-        <span
-          data-component="Link"
-          data-props="{}"
-        />
-        <span
-          data-component="Trans"
-          data-props="{}"
-        >
-          Permalink
-        </span>
-      </a>
-    </li>
-  </ul>
-</DocumentFragment>
-`;
-
 exports[`FormActions rendering with a permalink 1`] = `
 <DocumentFragment>
   <ul

src/components/FormActions/index.js

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { withTranslation, Trans } from 'react-i18next';
+import { useTranslation, Trans } from 'react-i18next';
 
 import DownloadIcon from 'react-feather/dist/icons/download';
 import LinkIcon from 'react-feather/dist/icons/link';
@@ -9,89 +9,52 @@ import style from './style.module.css';
 
 import { createPngLink, createSvgLink } from './links';
 
-class FormActions extends React.PureComponent {
+const downloadLink = (link, t) => {
-  static propTypes = {
+  const { url, filename, type, label } = link;
-    permalinkUrl: PropTypes.string,
-    imageDetails: PropTypes.shape({
-      svg: PropTypes.string,
-      width: PropTypes.number,
-      height: PropTypes.number
-    }),
-    t: PropTypes.func.isRequired
-  }
-
-  state = {
-    svgLink: null,
-    pngLink: null
-  }
-
-  componentDidMount() {
-    const { imageDetails } = this.props;
-
-    if (imageDetails && imageDetails.svg) {
-      this.generateDownloadLinks();
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    const { imageDetails } = this.props;
-    const { imageDetails: prevImageDetails } = prevProps;
-
-    if (!imageDetails) {
-      this.setState({ svgLink: null, pngLink: null });
-      return;
-    }
-
-    if (!prevImageDetails) {
-      this.generateDownloadLinks();
-      return;
-    }
-
-    if (imageDetails.svg !== prevImageDetails.svg
-      || imageDetails.width !== prevImageDetails.width
-      || imageDetails.height !== prevImageDetails.height) {
-      this.generateDownloadLinks();
-      return;
-    }
-  }
-
-  async generateDownloadLinks() {
-    const { imageDetails: { svg, width, height } } = this.props;
-
-    this.setState({
-      svgLink: await createSvgLink({ svg }),
-      pngLink: await createPngLink({ svg, width, height })
-    });
-  }
-
-  downloadLink({ url, filename, type, label }) {
-    const { t } = this.props;
-
   return <li>
     <a href={ url } download={ filename } type={ type }>
       <DownloadIcon />{ t(label) }
     </a>
   </li>;
-  }
+};
 
-  render() {
+const FormActions = ({
-    const {
+  permalinkUrl,
-      permalinkUrl
+  imageDetails
-    } = this.props;
+}) => {
-    const {
+  const { t } = useTranslation();
-      svgLink,
+  const [svgLink, setSvgLink] = useState(null);
-      pngLink
+  const [pngLink, setPngLink] = useState(null);
-    } = this.state;
+
+  const generateDownloadLinks = useCallback(async () => {
+    const { svg, width, height } = imageDetails;
+
+    setSvgLink(await createSvgLink({ svg }));
+    setPngLink(await createPngLink({ svg, width, height }));
+  }, [setSvgLink, setPngLink, imageDetails]);
+
+  useEffect(() => {
+    if (imageDetails && imageDetails.svg) {
+      generateDownloadLinks();
+    }
+  }, [imageDetails]);
 
   return <ul className={ style.actions }>
-      { pngLink && this.downloadLink(pngLink) }
+    { pngLink && downloadLink(pngLink, t) }
-      { svgLink && this.downloadLink(svgLink) }
+    { svgLink && downloadLink(svgLink, t) }
     { permalinkUrl && <li>
       <a href={ permalinkUrl }><LinkIcon /><Trans>Permalink</Trans></a>
     </li> }
   </ul>;
-  }
+};
-}
 
-export { FormActions };
+FormActions.propTypes = {
-export default withTranslation()(FormActions);
+  permalinkUrl: PropTypes.string,
+  imageDetails: PropTypes.shape({
+    svg: PropTypes.string,
+    width: PropTypes.number,
+    height: PropTypes.number
+  })
+};
+
+export default FormActions;

src/components/FormActions/test.js

@@ -9,8 +9,7 @@ jest.mock('react-feather/dist/icons/link', () =>
 import React from 'react';
 import { render } from 'react-testing-library';
 
-import { mockT } from 'i18n';
+import FormActions from 'components/FormActions';
-import { FormActions } from 'components/FormActions';
 import { createPngLink, createSvgLink } from './links';
 
 createPngLink.mockResolvedValue({
@@ -29,68 +28,15 @@ createSvgLink.mockResolvedValue({
 describe('FormActions', () => {
   test('rendering', () => {
     const { asFragment } = render(
-      <FormActions t={ mockT } />
+      <FormActions/>
     );
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('rendering with a permalink', () => {
     const { asFragment } = render(
-      <FormActions permalinkUrl="http://example.com" t={ mockT } />
+      <FormActions permalinkUrl="http://example.com" />
     );
     expect(asFragment()).toMatchSnapshot();
   });
-
-  test('rendering download links', async () => {
-    const imageDetails = {
-      svg: 'test image',
-      width: 10,
-      height: 20
-    };
-
-    const { asFragment } = render(
-      <FormActions imageDetails={ imageDetails } t={ mockT } />
-    );
-
-    // Give a beat for mocked promises to resolve
-    await new Promise(resolve => setTimeout(resolve));
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('rendering download links with data after mounting', async () => {
-    const { asFragment, rerender } = render(
-      <FormActions t={ mockT } />
-    );
-
-    rerender(
-      <FormActions permalinkUrl="http://example.com" t={ mockT } />
-    );
-
-    expect(asFragment()).toMatchSnapshot();
-
-    rerender(
-      <FormActions
-        permalinkUrl="http://example.com"
-        imageDetails={ { svg: 'test-image' } }
-        t={ mockT } />
-    );
-
-    // Give a beat for mocked promises to resolve
-    await new Promise(resolve => setTimeout(resolve));
-
-    expect(asFragment()).toMatchSnapshot();
-
-    rerender(
-      <FormActions
-        permalinkUrl="http://example.com"
-        imageDetails={ { svg: 'test-image', width: 10, height: 20 } }
-        t={ mockT } />
-    );
-
-    // Give a beat for mocked promises to resolve
-    await new Promise(resolve => setTimeout(resolve));
-
-    expect(asFragment()).toMatchSnapshot();
-  });
 });