Fix default date range setting.

components/settings/DateRangeSetting.js

@@ -4,18 +4,19 @@ import DateFilter, { filterOptions } 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';
-import useLocale from 'hooks/useLocale';
 
 export default function DateRangeSetting() {
-  const { locale } = useLocale();
   const [dateRange, setDateRange] = useDateRange();
   const { startDate, endDate, value } = dateRange;
   const options = filterOptions.filter(e => e.value !== 'all');
 
+  function handleChange(value) {
+    setDateRange(value);
+  }
+
   function handleReset() {
-    setDateRange(getDateRange(DEFAULT_DATE_RANGE, locale));
+    setDateRange(DEFAULT_DATE_RANGE);
   }
 
   return (
@@ -25,7 +26,7 @@ export default function DateRangeSetting() {
         value={value}
         startDate={startDate}
         endDate={endDate}
-        onChange={setDateRange}
+        onChange={handleChange}
       />
       <Button className={styles.button} size="small" onClick={handleReset}>
         <FormattedMessage id="label.reset" defaultMessage="Reset" />

hooks/useDateRange.js

@@ -7,11 +7,12 @@ import useForceUpdate from './useForceUpdate';
 import useLocale from './useLocale';
 import useStore, { setDateRange } from 'store/websites';
 
-export default function useDateRange(websiteId, defaultDateRange = DEFAULT_DATE_RANGE) {
+export default function useDateRange(websiteId) {
   const { locale } = useLocale();
   const selector = useCallback(state => state?.[websiteId]?.dateRange, [websiteId]);
-  const dateRange = useStore(selector);
+  const websiteDateRange = useStore(selector);
   const forceUpdate = useForceUpdate();
+  const defaultDateRange = getDateRange(DEFAULT_DATE_RANGE, locale);
 
   const globalDefault = getItem(DATE_RANGE_CONFIG);
   let globalDateRange;
@@ -32,11 +33,10 @@ export default function useDateRange(websiteId, defaultDateRange = DEFAULT_DATE_
     if (websiteId) {
       setDateRange(websiteId, dateRange);
     } else {
-      const { value } = dateRange;
-      setItem(DATE_RANGE_CONFIG, value === 'custom' ? dateRange : value);
+      setItem(DATE_RANGE_CONFIG, dateRange);
       forceUpdate();
     }
   }
 
-  return [dateRange || globalDateRange || getDateRange(defaultDateRange, locale), saveDateRange];
+  return [websiteDateRange || globalDateRange || defaultDateRange, saveDateRange];
 }

lib/web.js

@@ -56,7 +56,7 @@ export const doNotTrack = () => {
 };
 
 export const setItem = (key, data, session) => {
-  if (typeof window !== 'undefined') {
+  if (typeof window !== 'undefined' && data) {
     (session ? sessionStorage : localStorage).setItem(key, JSON.stringify(data));
   }
 };

store/websites.js

@@ -19,8 +19,6 @@ export function setDateRange(websiteId, value) {
         dateRange = getDateRange(value, locale);
       }
 
-      console.log({ websiteId, value, dateRange });
-
       state[websiteId].dateRange = { ...dateRange, modified: Date.now() };
 
       return state;