Added timezone and default date range settings.

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;
+}