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`] = `
}"
>
@@ -145,7 +145,7 @@ exports[`App rendering an expression 3`] = `
}"
>
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`] = `
`;
-exports[`FormActions rendering download links 1`] = `
-
-
-
-`;
-
-exports[`FormActions rendering download links with data after mounting 1`] = `
-
-
-
-`;
-
-exports[`FormActions rendering download links with data after mounting 2`] = `
-
-
-
-`;
-
-exports[`FormActions rendering download links with data after mounting 3`] = `
-
-
-
-`;
-
exports[`FormActions rendering with a permalink 1`] = `
{
+ const { url, filename, type, label } = link;
+ return -
+
+ { t(label) }
+
+
;
+};
- 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
+ { pngLink && downloadLink(pngLink, t) }
+ { svgLink && downloadLink(svgLink, t) }
+ { permalinkUrl && -
+ Permalink
+
}
+
;
+};
- 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 -
-
- { t(label) }
-
-
;
- }
-
- render() {
- const {
- permalinkUrl
- } = this.props;
- const {
- svgLink,
- pngLink
- } = this.state;
-
- return
- { pngLink && this.downloadLink(pngLink) }
- { svgLink && this.downloadLink(svgLink) }
- { permalinkUrl && -
- Permalink
-
}
-
;
- }
-}
-
-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(
-
+
);
expect(asFragment()).toMatchSnapshot();
});
test('rendering with a permalink', () => {
const { asFragment } = render(
-
+
);
expect(asFragment()).toMatchSnapshot();
});
-
- test('rendering download links', async () => {
- const imageDetails = {
- svg: 'test image',
- width: 10,
- height: 20
- };
-
- const { asFragment } = render(
-
- );
-
- // 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(
-
- );
-
- rerender(
-
- );
-
- expect(asFragment()).toMatchSnapshot();
-
- rerender(
-
- );
-
- // Give a beat for mocked promises to resolve
- await new Promise(resolve => setTimeout(resolve));
-
- expect(asFragment()).toMatchSnapshot();
-
- rerender(
-
- );
-
- // Give a beat for mocked promises to resolve
- await new Promise(resolve => setTimeout(resolve));
-
- expect(asFragment()).toMatchSnapshot();
- });
});