Added timezone and default date range settings.

components/common/LanguageButton.js

@@ -3,7 +3,6 @@ import Head from 'next/head';
 import Menu from './Menu';
 import Button from './Button';
 import { menuOptions } from 'lib/lang';
-import { setItem } from 'lib/web';
 import useLocale from 'hooks/useLocale';
 import useDocumentClick from 'hooks/useDocumentClick';
 import Globe from 'assets/globe.svg';
@@ -17,7 +16,6 @@ export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'l
 
   function handleSelect(value) {
     setLocale(value);
-    setItem('umami.locale', value);
     setShowMenu(false);
   }
 

components/common/RefreshButton.js

@@ -10,7 +10,7 @@ import { getDateRange } from '../../lib/date';
 
 export default function RefreshButton({ websiteId }) {
   const dispatch = useDispatch();
-  const dateRange = useDateRange(websiteId);
+  const [dateRange] = useDateRange(websiteId);
   const [loading, setLoading] = useState(false);
   const completed = useSelector(state => state.queries[`/api/website/${websiteId}/metrics`]);
 

components/metrics/EventsChart.js

@@ -1,9 +1,10 @@
 import React, { useMemo } from 'react';
 import tinycolor from 'tinycolor2';
 import BarChart from './BarChart';
-import { getTimezone, getDateArray, getDateLength } from 'lib/date';
+import { getDateArray, getDateLength } from 'lib/date';
 import useFetch from 'hooks/useFetch';
 import useDateRange from 'hooks/useDateRange';
+import useTimezone from 'hooks/useTimezone';
 
 const COLORS = [
   '#2680eb',
@@ -17,15 +18,17 @@ const COLORS = [
 ];
 
 export default function EventsChart({ websiteId, token }) {
-  const dateRange = useDateRange(websiteId);
+  const [dateRange] = useDateRange(websiteId);
   const { startDate, endDate, unit, modified } = dateRange;
+  const [timezone] = useTimezone();
+
   const { data } = useFetch(
     `/api/website/${websiteId}/events`,
     {
       start_at: +startDate,
       end_at: +endDate,
       unit,
-      tz: getTimezone(),
+      tz: timezone,
       token,
     },
     { update: [modified] },

components/metrics/MetricsBar.js

@@ -9,7 +9,7 @@ import MetricCard from './MetricCard';
 import styles from './MetricsBar.module.css';
 
 export default function MetricsBar({ websiteId, token, className }) {
-  const dateRange = useDateRange(websiteId);
+  const [dateRange] = useDateRange(websiteId);
   const { startDate, endDate, modified } = dateRange;
   const { data } = useFetch(
     `/api/website/${websiteId}/metrics`,

components/metrics/MetricsTable.js

@@ -29,7 +29,7 @@ export default function MetricsTable({
   onDataLoad = () => {},
   onExpand = () => {},
 }) {
-  const dateRange = useDateRange(websiteId);
+  const [dateRange] = useDateRange(websiteId);
   const { startDate, endDate, modified } = dateRange;
   const { data } = useFetch(
     `/api/website/${websiteId}/rankings`,

components/metrics/WebsiteChart.js

@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react';
-import { useDispatch } from 'react-redux';
 import classNames from 'classnames';
 import PageviewsChart from './PageviewsChart';
 import MetricsBar from './MetricsBar';
@@ -8,8 +7,8 @@ import DateFilter from 'components/common/DateFilter';
 import StickyHeader from 'components/helpers/StickyHeader';
 import useFetch from 'hooks/useFetch';
 import useDateRange from 'hooks/useDateRange';
-import { getDateArray, getDateLength, getTimezone } from 'lib/date';
-import { setDateRange } from 'redux/actions/websites';
+import useTimezone from 'hooks/useTimezone';
+import { getDateArray, getDateLength } from 'lib/date';
 import styles from './WebsiteChart.module.css';
 
 export default function WebsiteChart({
@@ -20,9 +19,9 @@ export default function WebsiteChart({
   showLink = false,
   onDataLoad = () => {},
 }) {
-  const dispatch = useDispatch();
-  const dateRange = useDateRange(websiteId);
+  const [dateRange, setDateRange] = useDateRange(websiteId);
   const { startDate, endDate, unit, value, modified } = dateRange;
+  const [timezone] = useTimezone();
 
   const { data } = useFetch(
     `/api/website/${websiteId}/pageviews`,
@@ -30,7 +29,7 @@ export default function WebsiteChart({
       start_at: +startDate,
       end_at: +endDate,
       unit,
-      tz: getTimezone(),
+      tz: timezone,
       token,
     },
     { onDataLoad, update: [modified] },
@@ -46,10 +45,6 @@ export default function WebsiteChart({
     return [[], []];
   }, [data]);
 
-  function handleDateChange(values) {
-    dispatch(setDateRange(websiteId, values));
-  }
-
   return (
     <>
       <WebsiteHeader websiteId={websiteId} token={token} title={title} showLink={showLink} />
@@ -67,7 +62,7 @@ export default function WebsiteChart({
               value={value}
               startDate={startDate}
               endDate={endDate}
-              onChange={handleDateChange}
+              onChange={setDateRange}
             />
           </div>
         </StickyHeader>

components/settings/DateRangeSetting.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import DateFilter from 'components/common/DateFilter';
+import Button from 'components/common/Button';
+import useDateRange from 'hooks/useDateRange';
+import { DEFAULT_DATE_RANGE } from 'lib/constants';
+import { getDateRange } from 'lib/date';
+import styles from './DateRangeSetting.module.css';
+
+export default function DateRangeSetting() {
+  const [dateRange, setDateRange] = useDateRange();
+  const { startDate, endDate, value } = dateRange;
+
+  function handleReset() {
+    setDateRange(getDateRange(DEFAULT_DATE_RANGE));
+  }
+
+  return (
+    <>
+      <DateFilter value={value} startDate={startDate} endDate={endDate} onChange={setDateRange} />
+      <Button className={styles.button} size="small" onClick={handleReset}>
+        <FormattedMessage id="button.reset" defaultMessage="Reset" />
+      </Button>
+    </>
+  );
+}

components/settings/DateRangeSetting.module.css

@@ -0,0 +1,3 @@
+.button {
+  margin-left: 10px;
+}

components/settings/ProfileSettings.js

@@ -1,40 +1,27 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import PageHeader from 'components/layout/PageHeader';
 import Button from 'components/common/Button';
 import Modal from 'components/common/Modal';
 import Toast from 'components/common/Toast';
 import ChangePasswordForm from 'components/forms/ChangePasswordForm';
-import DateFilter from 'components/common/DateFilter';
+import TimezoneSetting from 'components/settings/TimezoneSetting';
 import Dots from 'assets/ellipsis-h.svg';
-import { getTimezone } from 'lib/date';
-import { setItem } from 'lib/web';
-import useDateRange from 'hooks/useDateRange';
-import { setDateRange } from 'redux/actions/websites';
 import styles from './ProfileSettings.module.css';
+import DateRangeSetting from './DateRangeSetting';
 
 export default function ProfileSettings() {
-  const dispatch = useDispatch();
   const user = useSelector(state => state.user);
   const [changePassword, setChangePassword] = useState(false);
   const [message, setMessage] = useState();
   const { user_id } = user;
-  const timezone = getTimezone();
-  const dateRange = useDateRange(0);
-  const { startDate, endDate, value } = dateRange;
 
   function handleSave() {
     setChangePassword(false);
     setMessage(<FormattedMessage id="message.save-success" defaultMessage="Saved successfully." />);
   }
 
-  function handleDateChange(values) {
-    const { value } = values;
-    setItem(`umami.date-range`, value === 'custom' ? values : value);
-    dispatch(setDateRange(0, values));
-  }
-
   return (
     <>
       <PageHeader>
@@ -47,7 +34,7 @@ export default function ProfileSettings() {
           </div>
         </Button>
       </PageHeader>
-      <dl>
+      <dl className={styles.list}>
         <dt>
           <FormattedMessage id="label.username" defaultMessage="Username" />
         </dt>
@@ -55,17 +42,14 @@ export default function ProfileSettings() {
         <dt>
           <FormattedMessage id="label.timezone" defaultMessage="Timezone" />
         </dt>
-        <dd>{timezone}</dd>
+        <dd>
+          <TimezoneSetting />
+        </dd>
         <dt>
           <FormattedMessage id="label.default-date-range" defaultMessage="Default date range" />
         </dt>
-        <dd className={styles.date}>
-          <DateFilter
-            value={value}
-            startDate={startDate}
-            endDate={endDate}
-            onChange={handleDateChange}
-          />
+        <dd>
+          <DateRangeSetting />
         </dd>
       </dl>
       {changePassword && (

components/settings/ProfileSettings.module.css

@@ -1,3 +1,3 @@
-.date {
+.list dd {
   display: flex;
 }

components/settings/TimezoneSetting.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { listTimeZones } from 'timezone-support';
+import DropDown from '../common/DropDown';
+import Button from '../common/Button';
+import useTimezone from 'hooks/useTimezone';
+import { getTimezone } from 'lib/date';
+import styles from './TimezoneSetting.module.css';
+
+export default function TimezoneSetting() {
+  const [timezone, saveTimezone] = useTimezone();
+  const options = listTimeZones().map(n => ({ label: n, value: n }));
+
+  function handleReset() {
+    saveTimezone(getTimezone());
+  }
+
+  return (
+    <>
+      <DropDown
+        menuClassName={styles.menu}
+        value={timezone}
+        options={options}
+        onChange={saveTimezone}
+      />
+      <Button className={styles.button} size="small" onClick={handleReset}>
+        <FormattedMessage id="button.reset" defaultMessage="Reset" />
+      </Button>
+    </>
+  );
+}

components/settings/TimezoneSetting.module.css

@@ -0,0 +1,8 @@
+.menu {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.button {
+  margin-left: 10px;
+}