Add some review fixes

src/components/ControlPanel/ControlPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { camelCase } from 'lodash';
 import {
   Actions,
@@ -8,7 +8,7 @@ import {
   Title,
 } from './ControlPanelStyles';
 
-import Selector, { Option } from 'components/Selector';
+import Selector from 'components/Selector';
 
 interface ControlPanelProps {
   dataSources: Array<string>;
@@ -30,22 +30,19 @@ const ControlPanel = ({
   onDataSourcesChanged,
 }: ControlPanelProps) => {
   const [applied, setApplied] = useState(true);
-  const [campaignsOptions, setCampaignsOptions] = useState<Array<Option>>([]);
-  const [dataSourcesOptions, setDataSourcesOptions] = useState<Array<Option>>(
-    []
-  );
   const [selectedCampaigns, setSelectedCampaigns] = useState<Array<string>>([]);
   const [selectedDataSources, setSelectedDataSources] = useState<Array<string>>(
     []
   );
 
-  useEffect(() => {
-    setDataSourcesOptions(prepareSelectData(dataSources));
-  }, [dataSources]);
-
-  useEffect(() => {
-    setCampaignsOptions(prepareSelectData(campaigns));
-  }, [campaigns]);
+  const campaignsOptions = React.useMemo(
+    () => prepareSelectData(campaigns),
+    [campaigns]
+  );
+  const dataSourcesOptions = React.useMemo(
+    () => prepareSelectData(dataSources),
+    [dataSources]
+  );
 
   const handleDataSourcesChanged = (selectedDataSources: Array<string>) => {
     setSelectedDataSources(selectedDataSources);

src/components/Dashboard/Dashboard.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { groupBy, mapValues, get, uniq } from 'lodash';
 
 import ControlPanel from 'components/ControlPanel';
@@ -16,18 +16,14 @@ interface DashboardProps {
 }
 
 const Dashboard = ({ data }: DashboardProps) => {
-  const [groupedData, setGroupedData] = useState({});
   const [selectedCampaigns, setSelectedCampaigns] = useState<Array<string>>([]);
   const [selectedDataSources, setSelectedDataSources] = useState<Array<string>>(
     []
   );
 
-  useEffect(() => {
+  const groupedData = React.useMemo(() => {
     const groupedByDataSource = groupBy(data, 'Datasource');
-    const groupedByDataSourceAndCampaign = mapValues(groupedByDataSource, val =>
-      groupBy(val, 'Campaign')
-    );
-    setGroupedData(groupedByDataSourceAndCampaign);
+    return mapValues(groupedByDataSource, val => groupBy(val, 'Campaign'));
   }, [data]);
 
   const allDataSources = React.useMemo(

src/components/Dashboard/utils.ts

@@ -1,4 +1,4 @@
-import { get, groupBy } from 'lodash';
+import { get, groupBy, sumBy } from 'lodash';
 
 import { ChartData } from 'components/Chart';
 
@@ -70,13 +70,10 @@ export const prepareChartData = (
     (memo, date) => {
       memo.push({
         date,
-        clicks: filteredDataGroupedByDate[date].reduce(
-          (sum, value) => sum + value.Clicks,
-          0
-        ),
-        impressions: filteredDataGroupedByDate[date].reduce(
-          (sum, value) => sum + value.Impressions,
-          0
+        clicks: sumBy(filteredDataGroupedByDate[date], item => item.Clicks),
+        impressions: sumBy(
+          filteredDataGroupedByDate[date],
+          item => item.Impressions
         ),
       });