Added timezone and default date range settings.

hooks/useDateRange.js

@@ -1,24 +1,41 @@
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { parseISO } from 'date-fns';
 import { getDateRange } from 'lib/date';
-import { getItem } from 'lib/web';
+import { getItem, setItem } from 'lib/web';
+import { setDateRange } from '../redux/actions/websites';
+import { DATE_RANGE_CONFIG, DEFAULT_DATE_RANGE } from 'lib/constants';
+import useForceUpdate from './useForceUpdate';
 
-export default function useDateRange(websiteId, defaultDateRange = '24hour') {
-  const globalDefault = getItem('umami.date-range');
+export default function useDateRange(websiteId, defaultDateRange = DEFAULT_DATE_RANGE) {
+  const dispatch = useDispatch();
+  const dateRange = useSelector(state => state.websites[websiteId]?.dateRange);
+  const forceUpdate = useForceUpdate();
+
+  const globalDefault = getItem(DATE_RANGE_CONFIG);
   let globalDateRange;
 
-  if (typeof globalDefault === 'string') {
-    globalDateRange = getDateRange(globalDefault);
-  } else if (typeof globalDefault === 'object') {
-    globalDateRange = {
-      ...globalDefault,
-      startDate: parseISO(globalDefault.startDate),
-      endDate: parseISO(globalDefault.endDate),
-    };
+  if (globalDefault) {
+    if (typeof globalDefault === 'string') {
+      globalDateRange = getDateRange(globalDefault);
+    } else if (typeof globalDefault === 'object') {
+      globalDateRange = {
+        ...globalDefault,
+        startDate: parseISO(globalDefault.startDate),
+        endDate: parseISO(globalDefault.endDate),
+      };
+    }
   }
 
-  return useSelector(
-    state =>
-      state.websites[websiteId]?.dateRange || globalDateRange || getDateRange(defaultDateRange),
-  );
+  function saveDateRange(values) {
+    const { value } = values;
+
+    if (websiteId) {
+      dispatch(setDateRange(websiteId, values));
+    } else {
+      setItem(DATE_RANGE_CONFIG, value === 'custom' ? values : value);
+      forceUpdate();
+    }
+  }
+
+  return [dateRange || globalDateRange || getDateRange(defaultDateRange), saveDateRange];
 }

hooks/useForceUpdate.js

@@ -0,0 +1,9 @@
+import { useCallback, useState } from 'react';
+
+export default function useForceUpdate() {
+  const [, update] = useState(Object.create(null));
+
+  return useCallback(() => {
+    update(Object.create(null));
+  }, [update]);
+}

hooks/useLocale.js

@@ -1,11 +1,14 @@
 import { useDispatch, useSelector } from 'react-redux';
 import { updateApp } from 'redux/actions/app';
+import { setItem } from 'lib/web';
+import { LOCALE_CONFIG } from 'lib/constants';
 
 export default function useLocale() {
   const locale = useSelector(state => state.app.locale);
   const dispatch = useDispatch();
 
   function setLocale(value) {
+    setItem(LOCALE_CONFIG, value);
     dispatch(updateApp({ locale: value }));
   }
 

hooks/useTimezone.js

@@ -0,0 +1,17 @@
+import { useState, useCallback } from 'react';
+import { getTimezone } from 'lib/date';
+import { getItem, setItem } from 'lib/web';
+
+export default function useTimezone() {
+  const [timezone, setTimezone] = useState(getItem('umami.timezone') || getTimezone());
+
+  const saveTimezone = useCallback(
+    value => {
+      setItem('umami.timezone', value);
+      setTimezone(value);
+    },
+    [setTimezone],
+  );
+
+  return [timezone, saveTimezone];
+}