Merge pull request #642 from mikecao/dev

v1.17.0

Author: mikecao

.eslintrc.json

@@ -4,7 +4,7 @@
     "es2020": true,
     "node": true
   },
-  "extends": ["eslint:recommended", "plugin:react/recommended", "prettier", "prettier/react"],
+  "extends": ["eslint:recommended", "plugin:react/recommended", "prettier"],
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true

assets/chart-bar.svg

@@ -7,20 +7,22 @@ import styles from './Checkbox.module.css';
 function Checkbox({ name, value, label, onChange }) {
   const ref = useRef();
 
+  const onClick = () => ref.current.click();
+
   return (
     <div className={styles.container}>
-      <div className={styles.checkbox} onClick={() => ref.current.click()}>
+      <div className={styles.checkbox} onClick={onClick}>
         {value && <Icon icon={<Check />} size="small" />}
       </div>
-      <label className={styles.label} htmlFor={name}>
+      <label className={styles.label} htmlFor={name} onClick={onClick}>
         {label}
       </label>
       <input
         ref={ref}
         className={styles.input}
         type="checkbox"
         name={name}
-        value={value}
+        defaultChecked={value}
         onChange={onChange}
       />
     </div>

components/common/Checkbox.js

@@ -17,6 +17,7 @@
 
 .label {
   margin-left: 10px;
+  user-select: none; /* disable text selection when clicking to toggle the checkbox */
 }
 
 .input {

components/common/Checkbox.module.css

@@ -77,7 +77,7 @@ export default function WebsiteEditForm({ values, onSave, onClose }) {
               </div>
             </FormRow>
             <FormRow>
-              <label></label>
+              <label />
               <Field name="enable_share_url">
                 {({ field }) => (
                   <Checkbox

components/forms/WebsiteEditForm.js

@@ -70,6 +70,11 @@
     padding: 0 15px;
   }
 
+  .title {
+    padding: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
   .nav {
     font-size: var(--font-size-normal);
     flex-wrap: wrap;
@@ -102,6 +107,9 @@
   .burger {
     display: block;
     /* color: #4a4a4a; */
+    background: none;
+    border: 1px solid var(--gray900);
+    border-radius: 4px;
     cursor: pointer;
     height: 3.25rem;
     width: 3.25rem;
@@ -112,20 +120,20 @@
   }
 
   .burger span {
-    transform: translateX(-50%);
+    transform: translateX(25%);
     padding: 1px 0px;
     margin: 6px 0;
-    width: 20px;
+    width: 65%;
     display: block;
-    background-color: white;
+    background-color: var(--gray900);
   }
 
   .burger div {
-    height: 100%;
-    color: white;
+    /* height: 100%; */
+    color: var(--gray900);
     text-align: center;
     margin: auto;
     font-size: 1.5rem;
-    transform: translateX(-50%);
+    /* transform: translateX(-50%); */
   }
 }

components/layout/Header.module.css

@@ -23,6 +23,7 @@ export default function WebsiteChart({
   domain,
   stickyHeader = false,
   showLink = false,
+  hideChart = false,
   onDataLoad = () => {},
 }) {
   const shareToken = useShareToken();
@@ -91,13 +92,15 @@ export default function WebsiteChart({
       <div className="row">
         <div className="col">
           {error && <ErrorMessage />}
-          <PageviewsChart
-            websiteId={websiteId}
-            data={chartData}
-            unit={unit}
-            records={getDateLength(startDate, endDate, unit)}
-            loading={loading}
-          />
+          {!hideChart && (
+            <PageviewsChart
+              websiteId={websiteId}
+              data={chartData}
+              unit={unit}
+              records={getDateLength(startDate, endDate, unit)}
+              loading={loading}
+            />
+          )}
         </div>
       </div>
     </div>

components/metrics/WebsiteChart.js

@@ -1,28 +1,26 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import Link from 'components/common/Link';
 import WebsiteChart from 'components/metrics/WebsiteChart';
 import Page from 'components/layout/Page';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
+import Button from 'components/common/Button';
 import useFetch from 'hooks/useFetch';
 import Arrow from 'assets/arrow-right.svg';
+import Chart from 'assets/chart-bar.svg';
 import styles from './WebsiteList.module.css';
 
 export default function WebsiteList({ userId }) {
   const { data } = useFetch('/api/websites', { params: { user_id: userId } });
+  const [hideCharts, setHideCharts] = useState(false);
 
   if (!data) {
     return null;
   }
 
-  return (
-    <Page>
-      {data.map(({ website_id, name, domain }) => (
-        <div key={website_id} className={styles.website}>
-          <WebsiteChart websiteId={website_id} title={name} domain={domain} showLink />
-        </div>
-      ))}
-      {data.length === 0 && (
+  if (data.length === 0) {
+    return (
+      <Page>
         <EmptyPlaceholder
           msg={
             <FormattedMessage
@@ -35,7 +33,26 @@ export default function WebsiteList({ userId }) {
             <FormattedMessage id="message.go-to-settings" defaultMessage="Go to settings" />
           </Link>
         </EmptyPlaceholder>
-      )}
+      </Page>
+    );
+  }
+
+  return (
+    <Page>
+      <div className={styles.menubar}>
+        <Button icon={<Chart />} onClick={() => setHideCharts(!hideCharts)} />
+      </div>
+      {data.map(({ website_id, name, domain }) => (
+        <div key={website_id} className={styles.website}>
+          <WebsiteChart
+            websiteId={website_id}
+            title={name}
+            domain={domain}
+            hideChart={hideCharts}
+            showLink
+          />
+        </div>
+      ))}
     </Page>
   );
 }

components/pages/WebsiteList.js

@@ -9,3 +9,10 @@
   border-bottom: 0;
   margin-bottom: 0;
 }
+
+.menubar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-top: 10px;
+}

components/pages/WebsiteList.module.css

@@ -5,7 +5,13 @@ import { THEME_CONFIG } from 'lib/constants';
 import { useEffect } from 'react';
 
 export default function useTheme() {
-  const theme = useSelector(state => state.app.theme || getItem(THEME_CONFIG) || 'light');
+  const defaultTheme =
+    typeof window !== 'undefined'
+      ? window?.matchMedia('prefers-color-scheme: dark')?.matches
+        ? 'dark'
+        : 'light'
+      : 'light';
+  const theme = useSelector(state => state.app.theme || getItem(THEME_CONFIG) || defaultTheme);
   const dispatch = useDispatch();
 
   function saveTheme(value) {