Converting rendering components to functional components

src/rendering/SVG/index.js

@@ -21,34 +21,30 @@ const metadata = `<rdf:rdf>
 </rdf:rdf>`;
 /* eslint-enable max-len */
 
-class SVG extends React.PureComponent {
-  static propTypes = {
-    children: PropTypes.node,
-    innerWidth: PropTypes.number,
-    innerHeight: PropTypes.number
-  }
+const SVG = ({ innerWidth, innerHeight, children }) => {
+  const width = Math.round(innerWidth + 2 * padding);
+  const height = Math.round(innerHeight + 2 * padding);
 
-  render() {
-    const { innerWidth, innerHeight, children } = this.props;
+  const svgProps = {
+    width,
+    height,
+    viewBox: [0, 0, width, height].join(' '),
+    style: style.image,
+    ...namespaceProps
+  };
 
-    const width = Math.round(innerWidth + 2 * padding);
-    const height = Math.round(innerHeight + 2 * padding);
+  return <svg { ...svgProps }>
+    <metadata dangerouslySetInnerHTML={{ __html: metadata }}></metadata>
+    <g transform={ `translate(${ padding } ${ padding })` }>
+      { children }
+    </g>
+  </svg>;
+};
 
-    const svgProps = {
-      width,
-      height,
-      viewBox: [0, 0, width, height].join(' '),
-      style: style.image,
-      ...namespaceProps
-    };
-
-    return <svg { ...svgProps }>
-      <metadata dangerouslySetInnerHTML={{ __html: metadata }}></metadata>
-      <g transform={ `translate(${ padding } ${ padding })` }>
-        { children }
-      </g>
-    </svg>;
-  }
-}
+SVG.propTypes = {
+  children: PropTypes.node,
+  innerWidth: PropTypes.number,
+  innerHeight: PropTypes.number
+};
 
 export default SVG;

src/rendering/Text/index.js

@@ -3,42 +3,28 @@ import PropTypes from 'prop-types';
 
 import * as style from './style';
 
-class Text extends React.PureComponent {
-  static propTypes = {
-    quoted: PropTypes.bool,
-    transform: PropTypes.string,
-    children: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.node),
-      PropTypes.node
-    ]).isRequired
-  }
+const Text = ({ transform, quoted, children }) => {
+  const textProps = {
+    style: style.text,
+    transform
+  };
 
-  renderContent() {
-    const { children, quoted } = this.props;
-
-    if (!quoted) {
-      return children;
-    }
-
-    return <>
+  return <text { ...textProps }>
+    { quoted ? <>
       <tspan style={ style.quote }>&ldquo;</tspan>
       <tspan>{ children }</tspan>
       <tspan style={ style.quote }>&rdquo;</tspan>
-    </>;
-  }
+    </> : children }
+  </text>;
+};
 
-  render() {
-    const { transform } = this.props;
-
-    const textProps = {
-      style: style.text,
-      transform
-    };
-
-    return <text { ...textProps }>
-      { this.renderContent() }
-    </text>;
-  }
-}
+Text.propTypes = {
+  quoted: PropTypes.bool,
+  transform: PropTypes.string,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node
+  ]).isRequired
+};
 
 export default Text;