Updated profile settings. Refactored locale saving.

components/common/LanguageButton.js

@@ -1,12 +1,13 @@
 import React, { useState, useRef } from 'react';
 import Head from 'next/head';
-import Globe from 'assets/globe.svg';
-import useDocumentClick from 'hooks/useDocumentClick';
 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';
 import styles from './LanguageButton.module.css';
-import useLocale from '../../hooks/useLocale';
 
 export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'left' }) {
   const [showMenu, setShowMenu] = useState(false);
@@ -16,7 +17,7 @@ export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'l
 
   function handleSelect(value) {
     setLocale(value);
-    window.localStorage.setItem('locale', value);
+    setItem('umami.locale', value);
     setShowMenu(false);
   }
 

components/metrics/WebsiteChart.js

@@ -23,6 +23,8 @@ export default function WebsiteChart({
   const dateRange = useDateRange(websiteId);
   const { startDate, endDate, unit, value, modified } = dateRange;
 
+  console.log({ websiteId, dateRange });
+
   const { data } = useFetch(
     `/api/website/${websiteId}/pageviews`,
     {

components/settings/ProfileSettings.js

@@ -1,24 +1,39 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { useSelector } from 'react-redux';
+import { useDispatch, 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 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';
 
 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) {
+    setItem(`umami.date-range`, values);
+    dispatch(setDateRange(0, values));
+  }
+
   return (
     <>
       <PageHeader>
@@ -36,6 +51,21 @@ export default function ProfileSettings() {
           <FormattedMessage id="label.username" defaultMessage="Username" />
         </dt>
         <dd>{user.username}</dd>
+        <dt>
+          <FormattedMessage id="label.timezone" defaultMessage="Timezone" />
+        </dt>
+        <dd>{timezone}</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>
       </dl>
       {changePassword && (
         <Modal

components/settings/ProfileSettings.module.css

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