Updated timezone hook, fixed chart rendering, added icons.

src/components/common/Favicon.tsx

@@ -16,7 +16,8 @@ export function Favicon({ domain, ...props }) {
     <img
       className={styles.favicon}
       src={`https://icons.duckduckgo.com/ip3/${hostName}.ico`}
-      height="16"
+      width={16}
+      height={16}
       alt=""
       {...props}
     />

src/components/hooks/queries/useReport.ts

@@ -8,7 +8,7 @@ export function useReport(reportId: string, defaultParameters: { [key: string]:
   const [report, setReport] = useState(null);
   const [isRunning, setIsRunning] = useState(false);
   const { get, post } = useApi();
-  const [timezone] = useTimezone();
+  const { timezone } = useTimezone();
   const { formatMessage, labels } = useMessages();
 
   const baseParameters = {

src/components/hooks/queries/useWebsitePageviews.ts

@@ -4,7 +4,7 @@ export function useWebsitePageviews(websiteId: string, options?: { [key: string]
   const { get, useQuery } = useApi();
   const [dateRange] = useDateRange(websiteId);
   const { startDate, endDate, unit } = dateRange;
-  const [timezone] = useTimezone();
+  const { timezone } = useTimezone();
   const {
     query: { url, referrer, os, browser, device, country, region, city, title },
   } = useNavigation();

src/components/hooks/useTheme.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import useStore, { setTheme } from 'store/app';
 import { getItem, setItem } from 'next-basics';
 import { DEFAULT_THEME, THEME_COLORS, THEME_CONFIG } from 'lib/constants';
@@ -10,38 +10,40 @@ export function useTheme() {
   const theme = useStore(selector) || getItem(THEME_CONFIG) || DEFAULT_THEME;
   const primaryColor = colord(THEME_COLORS[theme].primary);
 
-  const colors = {
-    theme: {
-      ...THEME_COLORS[theme],
-    },
-    chart: {
-      text: THEME_COLORS[theme].gray700,
-      line: THEME_COLORS[theme].gray200,
-      views: {
-        hoverBackgroundColor: primaryColor.alpha(0.7).toRgbString(),
-        backgroundColor: primaryColor.alpha(0.4).toRgbString(),
-        borderColor: primaryColor.alpha(0.7).toRgbString(),
-        hoverBorderColor: primaryColor.toRgbString(),
+  const colors = useMemo(() => {
+    return {
+      theme: {
+        ...THEME_COLORS[theme],
       },
-      visitors: {
-        hoverBackgroundColor: primaryColor.alpha(0.9).toRgbString(),
-        backgroundColor: primaryColor.alpha(0.6).toRgbString(),
-        borderColor: primaryColor.alpha(0.9).toRgbString(),
-        hoverBorderColor: primaryColor.toRgbString(),
+      chart: {
+        text: THEME_COLORS[theme].gray700,
+        line: THEME_COLORS[theme].gray200,
+        views: {
+          hoverBackgroundColor: primaryColor.alpha(0.7).toRgbString(),
+          backgroundColor: primaryColor.alpha(0.4).toRgbString(),
+          borderColor: primaryColor.alpha(0.7).toRgbString(),
+          hoverBorderColor: primaryColor.toRgbString(),
+        },
+        visitors: {
+          hoverBackgroundColor: primaryColor.alpha(0.9).toRgbString(),
+          backgroundColor: primaryColor.alpha(0.6).toRgbString(),
+          borderColor: primaryColor.alpha(0.9).toRgbString(),
+          hoverBorderColor: primaryColor.toRgbString(),
+        },
       },
-    },
-    map: {
-      baseColor: THEME_COLORS[theme].primary,
-      fillColor: THEME_COLORS[theme].gray100,
-      strokeColor: THEME_COLORS[theme].primary,
-      hoverColor: THEME_COLORS[theme].primary,
-    },
-  };
+      map: {
+        baseColor: THEME_COLORS[theme].primary,
+        fillColor: THEME_COLORS[theme].gray100,
+        strokeColor: THEME_COLORS[theme].primary,
+        hoverColor: THEME_COLORS[theme].primary,
+      },
+    };
+  }, [theme]);
 
-  function saveTheme(value) {
+  const saveTheme = (value: string) => {
     setItem(THEME_CONFIG, value);
     setTheme(value);
-  }
+  };
 
   useEffect(() => {
     document.body.setAttribute('data-theme', theme);

src/components/hooks/useTimezone.ts

@@ -1,20 +1,18 @@
-import { useState, useCallback } from 'react';
-import { getTimezone } from 'lib/date';
-import { getItem, setItem } from 'next-basics';
+import { setItem } from 'next-basics';
 import { TIMEZONE_CONFIG } from 'lib/constants';
+import useStore, { setTimezone } from 'store/app';
+
+const selector = (state: { timezone: string }) => state.timezone;
 
 export function useTimezone() {
-  const [timezone, setTimezone] = useState(getItem(TIMEZONE_CONFIG) || getTimezone());
+  const timezone = useStore(selector);
 
-  const saveTimezone = useCallback(
-    (value: string) => {
-      setItem(TIMEZONE_CONFIG, value);
-      setTimezone(value);
-    },
-    [setTimezone],
-  );
+  const saveTimezone = (value: string) => {
+    setItem(TIMEZONE_CONFIG, value);
+    setTimezone(value);
+  };
 
-  return [timezone, saveTimezone];
+  return { timezone, saveTimezone };
 }
 
 export default useTimezone;

src/components/metrics/EventsChart.tsx

@@ -22,7 +22,7 @@ export interface EventsChartProps {
 export function EventsChart({ websiteId, className, token }: EventsChartProps) {
   const [{ startDate, endDate, unit, offset }] = useDateRange(websiteId);
   const { locale } = useLocale();
-  const [timezone] = useTimezone();
+  const { timezone } = useTimezone();
   const {
     query: { url, event },
   } = useNavigation();

src/components/metrics/ReferrersTable.tsx

@@ -1,18 +1,23 @@
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
 import FilterLink from 'components/common/FilterLink';
+import Favicon from 'components/common/Favicon';
 import { useMessages } from 'components/hooks';
+import { Flexbox } from 'react-basics';
 
 export function ReferrersTable(props: MetricsTableProps) {
   const { formatMessage, labels } = useMessages();
 
   const renderLink = ({ x: referrer }) => {
     return (
-      <FilterLink
-        id="referrer"
-        value={referrer}
-        externalUrl={`https://${referrer}`}
-        label={!referrer && formatMessage(labels.none)}
-      />
+      <Flexbox alignItems="center">
+        <Favicon domain={referrer} />
+        <FilterLink
+          id="referrer"
+          value={referrer}
+          externalUrl={`https://${referrer}`}
+          label={!referrer && formatMessage(labels.none)}
+        />
+      </Flexbox>
     );
   };