From 3b07ed2ab54708c365770b5ea9fb8f2de17f022f Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
Date: Thu, 28 Mar 2019 07:12:03 -0400
Subject: [PATCH] Updating FormActions to use hooks

---
 src/components/App/__snapshots__/test.js.snap |   4 +-
 .../FormActions/__snapshots__/test.js.snap    | 162 ------------------
 src/components/FormActions/index.js           | 123 +++++--------
 src/components/FormActions/test.js            |  60 +------
 4 files changed, 48 insertions(+), 301 deletions(-)

diff --git a/src/components/App/__snapshots__/test.js.snap b/src/components/App/__snapshots__/test.js.snap
index 5e067f6..97996f0 100644
--- a/src/components/App/__snapshots__/test.js.snap
+++ b/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>
diff --git a/src/components/FormActions/__snapshots__/test.js.snap b/src/components/FormActions/__snapshots__/test.js.snap
index b4bbe71..033f9d2 100644
--- a/src/components/FormActions/__snapshots__/test.js.snap
+++ b/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
diff --git a/src/components/FormActions/index.js b/src/components/FormActions/index.js
index c8dff09..e422b8f 100644
--- a/src/components/FormActions/index.js
+++ b/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 {
-  static propTypes = {
-    permalinkUrl: PropTypes.string,
-    imageDetails: PropTypes.shape({
-      svg: PropTypes.string,
-      width: PropTypes.number,
-      height: PropTypes.number
-    }),
-    t: PropTypes.func.isRequired
-  }
+const downloadLink = (link, t) => {
+  const { url, filename, type, label } = link;
+  return <li>
+    <a href={ url } download={ filename } type={ type }>
+      <DownloadIcon />{ t(label) }
+    </a>
+  </li>;
+};
 
-  state = {
-    svgLink: null,
-    pngLink: null
-  }
+const FormActions = ({
+  permalinkUrl,
+  imageDetails
+}) => {
+  const { t } = useTranslation();
+  const [svgLink, setSvgLink] = useState(null);
+  const [pngLink, setPngLink] = useState(null);
 
-  componentDidMount() {
-    const { imageDetails } = this.props;
+  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) {
-      this.generateDownloadLinks();
+      generateDownloadLinks();
     }
-  }
+  }, [imageDetails]);
 
-  componentDidUpdate(prevProps) {
-    const { imageDetails } = this.props;
-    const { imageDetails: prevImageDetails } = prevProps;
+  return <ul className={ style.actions }>
+    { pngLink && downloadLink(pngLink, t) }
+    { svgLink && downloadLink(svgLink, t) }
+    { permalinkUrl && <li>
+      <a href={ permalinkUrl }><LinkIcon /><Trans>Permalink</Trans></a>
+    </li> }
+  </ul>;
+};
 
-    if (!imageDetails) {
-      this.setState({ svgLink: null, pngLink: null });
-      return;
-    }
+FormActions.propTypes = {
+  permalinkUrl: PropTypes.string,
+  imageDetails: PropTypes.shape({
+    svg: PropTypes.string,
+    width: PropTypes.number,
+    height: PropTypes.number
+  })
+};
 
-    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 {
-      permalinkUrl
-    } = this.props;
-    const {
-      svgLink,
-      pngLink
-    } = this.state;
-
-    return <ul className={ style.actions }>
-      { pngLink && this.downloadLink(pngLink) }
-      { svgLink && this.downloadLink(svgLink) }
-      { permalinkUrl && <li>
-        <a href={ permalinkUrl }><LinkIcon /><Trans>Permalink</Trans></a>
-      </li> }
-    </ul>;
-  }
-}
-
-export { FormActions };
-export default withTranslation()(FormActions);
+export default FormActions;
diff --git a/src/components/FormActions/test.js b/src/components/FormActions/test.js
index bb986b7..570730a 100644
--- a/src/components/FormActions/test.js
+++ b/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();
-  });
 });