Refactored exports.

components/metrics/ActiveUsers.js

@@ -4,7 +4,7 @@ import useApi from 'hooks/useApi';
 import useMessages from 'hooks/useMessages';
 import styles from './ActiveUsers.module.css';
 
-export default function ActiveUsers({ websiteId, value, refetchInterval = 60000 }) {
+export function ActiveUsers({ websiteId, value, refetchInterval = 60000 }) {
   const { formatMessage, messages } = useMessages();
   const { get, useQuery } = useApi();
   const { data } = useQuery(
@@ -34,3 +34,5 @@ export default function ActiveUsers({ websiteId, value, refetchInterval = 60000
     </StatusLight>
   );
 }
+
+export default ActiveUsers;

components/metrics/BarChart.js

@@ -11,7 +11,7 @@ import useTheme from 'hooks/useTheme';
 import { DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants';
 import styles from './BarChart.module.css';
 
-export default function BarChart({
+export function BarChart({
   datasets,
   unit,
   animationDuration = DEFAULT_ANIMATION_DURATION,
@@ -210,3 +210,5 @@ export default function BarChart({
     </>
   );
 }
+
+export default BarChart;

components/metrics/BrowsersTable.js

@@ -3,7 +3,7 @@ import MetricsTable from 'components/metrics/MetricsTable';
 import { BROWSERS } from 'lib/constants';
 import useMessages from 'hooks/useMessages';
 
-export default function BrowsersTable({ websiteId, ...props }) {
+export function BrowsersTable({ websiteId, ...props }) {
   const { formatMessage, labels } = useMessages();
 
   function renderLink({ x: browser }) {
@@ -21,3 +21,5 @@ export default function BrowsersTable({ websiteId, ...props }) {
     />
   );
 }
+
+export default BrowsersTable;

components/metrics/CitiesTable.js

@@ -4,7 +4,7 @@ import FilterLink from 'components/common/FilterLink';
 import useLocale from 'hooks/useLocale';
 import useMessages from 'hooks/useMessages';
 
-export default function CitiesTable({ websiteId, ...props }) {
+export function CitiesTable({ websiteId, ...props }) {
   const { locale } = useLocale();
   const { formatMessage, labels } = useMessages();
 
@@ -28,3 +28,5 @@ export default function CitiesTable({ websiteId, ...props }) {
     />
   );
 }
+
+export default CitiesTable;

components/metrics/CountriesTable.js

@@ -4,7 +4,7 @@ import useCountryNames from 'hooks/useCountryNames';
 import useLocale from 'hooks/useLocale';
 import useMessages from 'hooks/useMessages';
 
-export default function CountriesTable({ websiteId, ...props }) {
+export function CountriesTable({ websiteId, ...props }) {
   const { locale } = useLocale();
   const countryNames = useCountryNames(locale);
   const { formatMessage, labels } = useMessages();
@@ -28,3 +28,5 @@ export default function CountriesTable({ websiteId, ...props }) {
     />
   );
 }
+
+export default CountriesTable;

components/metrics/DataTable.js

@@ -3,13 +3,12 @@ import useMeasure from 'react-use-measure';
 import { FixedSizeList } from 'react-window';
 import { useSpring, animated, config } from 'react-spring';
 import classNames from 'classnames';
-import { FormattedMessage } from 'react-intl';
 import NoData from 'components/common/NoData';
 import { formatNumber, formatLongNumber } from 'lib/format';
 import styles from './DataTable.module.css';
 import useMessages from '../../hooks/useMessages';
 
-export default function DataTable({
+export function DataTable({
   data = [],
   title,
   metric,
@@ -102,3 +101,5 @@ const AnimatedRow = ({
     </div>
   );
 };
+
+export default DataTable;

components/metrics/DatePickerForm.js

@@ -8,7 +8,7 @@ import { FILTER_DAY, FILTER_RANGE } from 'lib/constants';
 import useMessages from 'hooks/useMessages';
 import styles from './DatePickerForm.module.css';
 
-export default function DatePickerForm({
+export function DatePickerForm({
   startDate: defaultStartDate,
   endDate: defaultEndDate,
   minDate,
@@ -78,3 +78,5 @@ export default function DatePickerForm({
     </div>
   );
 }
+
+export default DatePickerForm;

components/metrics/DevicesTable.js

@@ -2,7 +2,7 @@ import MetricsTable from './MetricsTable';
 import FilterLink from 'components/common/FilterLink';
 import useMessages from 'hooks/useMessages';
 
-export default function DevicesTable({ websiteId, ...props }) {
+export function DevicesTable({ websiteId, ...props }) {
   const { formatMessage, labels } = useMessages();
 
   function renderLink({ x: device }) {
@@ -26,3 +26,5 @@ export default function DevicesTable({ websiteId, ...props }) {
     />
   );
 }
+
+export default DevicesTable;

components/metrics/EventsChart.js

@@ -9,7 +9,7 @@ import useTimezone from 'hooks/useTimezone';
 import usePageQuery from 'hooks/usePageQuery';
 import { EVENT_COLORS } from 'lib/constants';
 
-export default function EventsChart({ websiteId, className, token }) {
+export function EventsChart({ websiteId, className, token }) {
   const { get, useQuery } = useApi();
   const [{ startDate, endDate, unit, modified }] = useDateRange(websiteId);
   const [timezone] = useTimezone();
@@ -76,3 +76,5 @@ export default function EventsChart({ websiteId, className, token }) {
     />
   );
 }
+
+export default EventsChart;

components/metrics/EventsTable.js

@@ -1,7 +1,7 @@
 import MetricsTable from './MetricsTable';
 import useMessages from 'hooks/useMessages';
 
-export default function EventsTable({ websiteId, ...props }) {
+export function EventsTable({ websiteId, ...props }) {
   const { formatMessage, labels } = useMessages();
 
   function handleDataLoad(data) {
@@ -19,3 +19,5 @@ export default function EventsTable({ websiteId, ...props }) {
     />
   );
 }
+
+export default EventsTable;

components/metrics/FilterTags.js

@@ -4,7 +4,7 @@ import usePageQuery from 'hooks/usePageQuery';
 import styles from './FilterTags.module.css';
 import useMessages from 'hooks/useMessages';
 
-export default function FilterTags({ params }) {
+export function FilterTags({ params }) {
   const { formatMessage, labels } = useMessages();
   const {
     router,
@@ -50,3 +50,5 @@ export default function FilterTags({ params }) {
     </div>
   );
 }
+
+export default FilterTags;

components/metrics/LanguagesTable.js

@@ -4,7 +4,7 @@ import useLanguageNames from 'hooks/useLanguageNames';
 import useLocale from 'hooks/useLocale';
 import useMessages from 'hooks/useMessages';
 
-export default function LanguagesTable({ websiteId, onDataLoad, ...props }) {
+export function LanguagesTable({ websiteId, onDataLoad, ...props }) {
   const { formatMessage, labels } = useMessages();
   const { locale } = useLocale();
   const languageNames = useLanguageNames(locale);
@@ -25,3 +25,5 @@ export default function LanguagesTable({ websiteId, onDataLoad, ...props }) {
     />
   );
 }
+
+export default LanguagesTable;

components/metrics/Legend.js

@@ -6,7 +6,7 @@ import useLocale from 'hooks/useLocale';
 import useForceUpdate from 'hooks/useForceUpdate';
 import styles from './Legend.module.css';
 
-export default function Legend({ chart }) {
+export function Legend({ chart }) {
   const { locale } = useLocale();
   const forceUpdate = useForceUpdate();
 
@@ -48,3 +48,5 @@ export default function Legend({ chart }) {
     </div>
   );
 }
+
+export default Legend;

components/metrics/MetricCard.js

@@ -3,7 +3,7 @@ import { useSpring, animated } from 'react-spring';
 import { formatNumber } from 'lib/format';
 import styles from './MetricCard.module.css';
 
-const MetricCard = ({
+export const MetricCard = ({
   value = 0,
   change = 0,
   label,

components/metrics/MetricsBar.js

@@ -9,7 +9,7 @@ import MetricCard from './MetricCard';
 import useMessages from 'hooks/useMessages';
 import styles from './MetricsBar.module.css';
 
-export default function MetricsBar({ websiteId }) {
+export function MetricsBar({ websiteId }) {
   const { formatMessage, labels } = useMessages();
   const { get, useQuery } = useApi();
   const [dateRange] = useDateRange(websiteId);
@@ -111,3 +111,5 @@ export default function MetricsBar({ websiteId }) {
     </div>
   );
 }
+
+export default MetricsBar;

components/metrics/MetricsTable.js

@@ -15,7 +15,7 @@ import useMessages from 'hooks/useMessages';
 import styles from './MetricsTable.module.css';
 import useLocale from 'hooks/useLocale';
 
-export default function MetricsTable({
+export function MetricsTable({
   websiteId,
   type,
   className,
@@ -92,3 +92,5 @@ export default function MetricsTable({
     </div>
   );
 }
+
+export default MetricsTable;

components/metrics/OSTable.js

@@ -2,7 +2,7 @@ import MetricsTable from './MetricsTable';
 import FilterLink from 'components/common/FilterLink';
 import useMessages from 'hooks/useMessages';
 
-export default function OSTable({ websiteId, ...props }) {
+export function OSTable({ websiteId, ...props }) {
   const { formatMessage, labels } = useMessages();
 
   function renderLink({ x: os }) {
@@ -20,3 +20,5 @@ export default function OSTable({ websiteId, ...props }) {
     />
   );
 }
+
+export default OSTable;

components/metrics/PagesTable.js

@@ -5,7 +5,7 @@ import useMessages from 'hooks/useMessages';
 import usePageQuery from 'hooks/usePageQuery';
 import { emptyFilter } from 'lib/filters';
 
-export default function PagesTable({ websiteId, showFilters, ...props }) {
+export function PagesTable({ websiteId, showFilters, ...props }) {
   const {
     router,
     resolveUrl,
@@ -47,3 +47,5 @@ export default function PagesTable({ websiteId, showFilters, ...props }) {
     </>
   );
 }
+
+export default PagesTable;

components/metrics/PageviewsChart.js

@@ -6,15 +6,7 @@ import useTheme from 'hooks/useTheme';
 import useMessages from 'hooks/useMessages';
 import useLocale from 'hooks/useLocale';
 
-export default function PageviewsChart({
-  websiteId,
-  data,
-  unit,
-  records,
-  className,
-  loading,
-  ...props
-}) {
+export function PageviewsChart({ websiteId, data, unit, records, className, loading, ...props }) {
   const { formatMessage, labels } = useMessages();
   const [theme] = useTheme();
   const { locale } = useLocale();
@@ -68,3 +60,5 @@ export default function PageviewsChart({
     />
   );
 }
+
+export default PageviewsChart;

components/metrics/QueryParametersTable.js

@@ -12,7 +12,7 @@ const filters = {
   [FILTER_COMBINED]: paramFilter,
 };
 
-export default function QueryParametersTable({ websiteId, showFilters, ...props }) {
+export function QueryParametersTable({ websiteId, showFilters, ...props }) {
   const [filter, setFilter] = useState(FILTER_COMBINED);
   const { formatMessage, labels } = useMessages();
 
@@ -49,3 +49,5 @@ export default function QueryParametersTable({ websiteId, showFilters, ...props
     </>
   );
 }
+
+export default QueryParametersTable;

components/metrics/RealtimeChart.js

@@ -23,7 +23,7 @@ function mapData(data) {
   return arr;
 }
 
-export default function RealtimeChart({ data, unit, ...props }) {
+export function RealtimeChart({ data, unit, ...props }) {
   const endDate = startOfMinute(new Date());
   const startDate = subMinutes(endDate, REALTIME_RANGE);
   const prevEndDate = useRef(endDate);
@@ -58,3 +58,5 @@ export default function RealtimeChart({ data, unit, ...props }) {
     />
   );
 }
+
+export default RealtimeChart;

components/metrics/ReferrersTable.js

@@ -2,7 +2,7 @@ import MetricsTable from './MetricsTable';
 import FilterLink from 'components/common/FilterLink';
 import useMessages from 'hooks/useMessages';
 
-export default function ReferrersTable({ websiteId, ...props }) {
+export function ReferrersTable({ websiteId, ...props }) {
   const { formatMessage, labels } = useMessages();
 
   const renderLink = ({ x: referrer }) => {
@@ -29,3 +29,5 @@ export default function ReferrersTable({ websiteId, ...props }) {
     </>
   );
 }
+
+export default ReferrersTable;

components/metrics/RegionsTable.js

@@ -5,7 +5,7 @@ import useLocale from 'hooks/useLocale';
 import useMessages from 'hooks/useMessages';
 import regions from 'public/iso-3166-2.json';
 
-export default function RegionsTable({ websiteId, ...props }) {
+export function RegionsTable({ websiteId, ...props }) {
   const { locale } = useLocale();
   const { formatMessage, labels } = useMessages();
 
@@ -29,3 +29,5 @@ export default function RegionsTable({ websiteId, ...props }) {
     />
   );
 }
+
+export default RegionsTable;

components/metrics/ScreenTable.js

@@ -1,7 +1,7 @@
 import MetricsTable from './MetricsTable';
 import useMessages from 'hooks/useMessages';
 
-export default function ScreenTable({ websiteId, ...props }) {
+export function ScreenTable({ websiteId, ...props }) {
   const { formatMessage, labels } = useMessages();
 
   return (
@@ -14,3 +14,5 @@ export default function ScreenTable({ websiteId, ...props }) {
     />
   );
 }
+
+export default ScreenTable;

components/metrics/WebsiteChart.js

@@ -20,7 +20,7 @@ import useMessages from 'hooks/useMessages';
 import styles from './WebsiteChart.module.css';
 import useLocale from 'hooks/useLocale';
 
-export default function WebsiteChart({
+export function WebsiteChart({
   websiteId,
   name,
   domain,
@@ -128,3 +128,5 @@ export default function WebsiteChart({
     </>
   );
 }
+
+export default WebsiteChart;

components/metrics/WebsiteHeader.js

@@ -3,7 +3,7 @@ import Favicon from 'components/common/Favicon';
 import ActiveUsers from './ActiveUsers';
 import styles from './WebsiteHeader.module.css';
 
-export default function WebsiteHeader({ websiteId, name, domain, children }) {
+export function WebsiteHeader({ websiteId, name, domain, children }) {
   return (
     <Row className={styles.header} justifyContent="center">
       <Column className={styles.title} variant="two">
@@ -17,3 +17,5 @@ export default function WebsiteHeader({ websiteId, name, domain, children }) {
     </Row>
   );
 }
+
+export default WebsiteHeader;