diff --git a/src/components/ControlPanel/ControlPanel.tsx b/src/components/ControlPanel/ControlPanel.tsx index d806f25..d0b56cd 100644 --- a/src/components/ControlPanel/ControlPanel.tsx +++ b/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; @@ -30,22 +30,19 @@ const ControlPanel = ({ onDataSourcesChanged, }: ControlPanelProps) => { const [applied, setApplied] = useState(true); - const [campaignsOptions, setCampaignsOptions] = useState>([]); - const [dataSourcesOptions, setDataSourcesOptions] = useState>( - [] - ); const [selectedCampaigns, setSelectedCampaigns] = useState>([]); const [selectedDataSources, setSelectedDataSources] = useState>( [] ); - 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) => { setSelectedDataSources(selectedDataSources); diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx index 760453c..bbff752 100644 --- a/src/components/Dashboard/Dashboard.tsx +++ b/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>([]); const [selectedDataSources, setSelectedDataSources] = useState>( [] ); - 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( diff --git a/src/components/Dashboard/utils.ts b/src/components/Dashboard/utils.ts index d92b9bf..996ab33 100644 --- a/src/components/Dashboard/utils.ts +++ b/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 ), });