Moved helper functions in GraphCard outside of component function

src/visits/GraphCard.js

@@ -10,49 +10,50 @@ const propTypes = {
   stats: PropTypes.object,
 };
 
-export function GraphCard({ title, isBarChart, stats }) {
-  const generateGraphData = (stats) => ({
-    labels: keys(stats),
-    datasets: [
-      {
-        title,
-        data: values(stats),
-        backgroundColor: isBarChart ? 'rgba(70, 150, 229, 0.4)' : [
-          '#97BBCD',
-          '#DCDCDC',
-          '#F7464A',
-          '#46BFBD',
-          '#FDB45C',
-          '#949FB1',
-          '#4D5360',
-        ],
-        borderColor: isBarChart ? 'rgba(70, 150, 229, 1)' : 'white',
-        borderWidth: 2,
-      },
-    ],
-  });
-  const renderGraph = () => {
-    const Component = isBarChart ? HorizontalBar : Doughnut;
-    const options = {
-      legend: isBarChart ? { display: false } : { position: 'right' },
-      scales: isBarChart ? {
-        xAxes: [
-          {
-            ticks: { beginAtZero: true },
-          },
-        ],
-      } : null,
-    };
+const generateGraphData = (title, isBarChart, stats) => ({
+  labels: keys(stats),
+  datasets: [
+    {
+      title,
+      data: values(stats),
+      backgroundColor: isBarChart ? 'rgba(70, 150, 229, 0.4)' : [
+        '#97BBCD',
+        '#DCDCDC',
+        '#F7464A',
+        '#46BFBD',
+        '#FDB45C',
+        '#949FB1',
+        '#4D5360',
+      ],
+      borderColor: isBarChart ? 'rgba(70, 150, 229, 1)' : 'white',
+      borderWidth: 2,
+    },
+  ],
+});
 
-    return <Component data={generateGraphData(stats)} options={options} />;
+const renderGraph = (title, isBarChart, stats) => {
+  const Component = isBarChart ? HorizontalBar : Doughnut;
+  const options = {
+    legend: isBarChart ? { display: false } : { position: 'right' },
+    scales: isBarChart ? {
+      xAxes: [
+        {
+          ticks: { beginAtZero: true },
+        },
+      ],
+    } : null,
   };
 
-  return (
-    <Card className="mt-4">
-      <CardHeader>{title}</CardHeader>
-      <CardBody>{renderGraph()}</CardBody>
-    </Card>
-  );
-}
+  return <Component data={generateGraphData(title, isBarChart, stats)} options={options} />;
+};
+
+const GraphCard = ({ title, isBarChart, stats }) => (
+  <Card className="mt-4">
+    <CardHeader>{title}</CardHeader>
+    <CardBody>{renderGraph(title, isBarChart, stats)}</CardBody>
+  </Card>
+);
 
 GraphCard.propTypes = propTypes;
+
+export default GraphCard;

src/visits/ShortUrlVisits.js

@@ -15,7 +15,7 @@ import {
   processReferrersStats,
 } from './services/VisitsParser';
 import { VisitsHeader } from './VisitsHeader';
-import { GraphCard } from './GraphCard';
+import GraphCard from './GraphCard';
 import { getShortUrlDetail, shortUrlDetailType } from './reducers/shortUrlDetail';
 import './ShortUrlVisits.scss';
 

test/visits/GraphCard.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { Doughnut, HorizontalBar } from 'react-chartjs-2';
 import { keys, values } from 'ramda';
-import { GraphCard } from '../../src/visits/GraphCard';
+import GraphCard from '../../src/visits/GraphCard';
 
 describe('<GraphCard />', () => {
   let wrapper;

test/visits/ShortUrlVisits.test.js

@@ -5,7 +5,7 @@ import { Card } from 'reactstrap';
 import * as sinon from 'sinon';
 import { ShortUrlsVisitsComponent as ShortUrlsVisits } from '../../src/visits/ShortUrlVisits';
 import MutedMessage from '../../src/utils/MuttedMessage';
-import { GraphCard } from '../../src/visits/GraphCard';
+import GraphCard from '../../src/visits/GraphCard';
 import DateInput from '../../src/common/DateInput';
 
 describe('<ShortUrlVisits />', () => {