Merge pull request #167 from mikecao/dev

v0.37.0
umami-software · Sep 18, 2020 · 0005e4e · 0005e4e · vercel · Sep 18, 2020
2 parents 7c11a04 + e4eefc6
commit 0005e4e
Show file tree

Hide file tree

Showing 84 changed files with 1,118 additions and 758 deletions.
diff --git a/.github/stale.yml b/.github/stale.yml
@@ -0,0 +1,19 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 60
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 7
+# Issues with these labels will never be considered stale
+exemptLabels:
+  - pinned
+  - security
+  - enhancement
+  - bug
+# Label to use when marking an issue as stale
+staleLabel: wontfix
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions.
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: false
diff --git a/components/WebsiteDetails.js b/components/WebsiteDetails.js
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
+import { useRouter } from 'next/router';
 import classNames from 'classnames';
 import WebsiteChart from 'components/metrics/WebsiteChart';
 import WorldMap from 'components/common/WorldMap';
@@ -19,20 +20,37 @@ import EventsChart from './metrics/EventsChart';
 import useFetch from 'hooks/useFetch';
 import Loading from 'components/common/Loading';
 
-export default function WebsiteDetails({ websiteId }) {
-  const { data } = useFetch(`/api/website/${websiteId}`);
+const views = {
+  url: PagesTable,
+  referrer: ReferrersTable,
+  browser: BrowsersTable,
+  os: OSTable,
+  device: DevicesTable,
+  country: CountriesTable,
+  event: EventsTable,
+};
+
+export default function WebsiteDetails({ websiteId, token }) {
+  const router = useRouter();
+  const { data } = useFetch(`/api/website/${websiteId}`, { token });
   const [chartLoaded, setChartLoaded] = useState(false);
   const [countryData, setCountryData] = useState();
   const [eventsData, setEventsData] = useState();
-  const [expand, setExpand] = useState();
+  const {
+    query: { id, view },
+    basePath,
+    asPath,
+  } = router;
+
+  const path = `${basePath}/${asPath.split('/')[1]}/${id.join('/')}`;
 
   const BackButton = () => (
     <Button
       key="back-button"
       className={styles.backButton}
       icon={<Arrow />}
       size="xsmall"
-      onClick={() => setExpand(null)}
+      onClick={() => router.push(path)}
     >
       <div>
         <FormattedMessage id="button.back" defaultMessage="Back" />
@@ -46,53 +64,43 @@ export default function WebsiteDetails({ websiteId }) {
     },
     {
       label: <FormattedMessage id="metrics.pages" defaultMessage="Pages" />,
-      value: 'url',
-      component: PagesTable,
+      value: `${path}?view=url`,
     },
     {
       label: <FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />,
-      value: 'referrer',
-      component: ReferrersTable,
+      value: `${path}?view=referrer`,
     },
     {
       label: <FormattedMessage id="metrics.browsers" defaultMessage="Browsers" />,
-      value: 'browser',
-      component: BrowsersTable,
+      value: `${path}?view=browser`,
     },
     {
       label: <FormattedMessage id="metrics.operating-systems" defaultMessage="Operating system" />,
-      value: 'os',
-      component: OSTable,
+      value: `${path}?view=os`,
     },
     {
       label: <FormattedMessage id="metrics.devices" defaultMessage="Devices" />,
-      value: 'device',
-      component: DevicesTable,
+      value: `${path}?view=device`,
     },
     {
       label: <FormattedMessage id="metrics.countries" defaultMessage="Countries" />,
-      value: 'country',
-      component: CountriesTable,
+      value: `${path}?view=country`,
     },
     {
       label: <FormattedMessage id="metrics.events" defaultMessage="Events" />,
-      value: 'event',
-      component: EventsTable,
+      value: `${path}?view=event`,
     },
   ];
 
   const tableProps = {
     websiteId,
+    token,
     websiteDomain: data?.domain,
     limit: 10,
     onExpand: handleExpand,
   };
 
-  const DetailsComponent = expand?.component;
-
-  function getSelectedMenuOption(value) {
-    return menuOptions.find(e => e.value === value);
-  }
+  const DetailsComponent = views[view];
 
   function handleDataLoad() {
     if (!chartLoaded) {
@@ -101,11 +109,7 @@ export default function WebsiteDetails({ websiteId }) {
   }
 
   function handleExpand(value) {
-    setExpand(getSelectedMenuOption(value));
-  }
-
-  function handleMenuSelect(value) {
-    setExpand(getSelectedMenuOption(value));
+    router.push(`${path}?view=${value}`);
   }
 
   if (!data) {
@@ -118,6 +122,7 @@ export default function WebsiteDetails({ websiteId }) {
         <div className={classNames(styles.chart, 'col')}>
           <WebsiteChart
             websiteId={websiteId}
+            token={token}
             title={data.name}
             onDataLoad={handleDataLoad}
             showLink={false}
@@ -126,7 +131,7 @@ export default function WebsiteDetails({ websiteId }) {
         </div>
       </div>
       {!chartLoaded && <Loading />}
-      {chartLoaded && !expand && (
+      {chartLoaded && !view && (
         <>
           <div className={classNames(styles.row, 'row')}>
             <div className="col-md-12 col-lg-6">
@@ -162,19 +167,17 @@ export default function WebsiteDetails({ websiteId }) {
               <EventsTable {...tableProps} onDataLoad={setEventsData} />
             </div>
             <div className="col-12 col-md-12 col-lg-8 pt-5 pb-5">
-              <EventsChart websiteId={websiteId} />
+              <EventsChart websiteId={websiteId} token={token} />
             </div>
           </div>
         </>
       )}
-      {expand && (
+      {view && (
         <MenuLayout
-          className={styles.expand}
+          className={styles.view}
           menuClassName={styles.menu}
-          optionClassName={styles.option}
+          contentClassName={styles.content}
           menu={menuOptions}
-          selectedOption={expand.value}
-          onMenuSelect={handleMenuSelect}
         >
           <DetailsComponent {...tableProps} limit={false} />
         </MenuLayout>

diff --git a/components/WebsiteDetails.module.css b/components/WebsiteDetails.module.css
@@ -2,16 +2,16 @@
   margin-bottom: 30px;
 }
 
-.expand {
+.view {
   border-top: 1px solid var(--gray300);
 }
 
 .menu {
   font-size: var(--font-size-small);
 }
 
-.menu .option {
-  font-size: var(--font-size-small);
+.content {
+  min-height: 600px;
 }
 
 .backButton {

diff --git a/components/WebsiteList.js b/components/WebsiteList.js
@@ -11,7 +11,7 @@ import styles from './WebsiteList.module.css';
 
 export default function WebsiteList({ userId }) {
   const router = useRouter();
-  const { data } = useFetch('/api/websites', { userId });
+  const { data } = useFetch('/api/websites', { user_id: userId });
 
   if (!data) {
     return null;
@@ -28,17 +28,14 @@ export default function WebsiteList({ userId }) {
         <EmptyPlaceholder
           msg={
             <FormattedMessage
-              id="placeholder.message.no-websites-configured"
+              id="message.no-websites-configured"
               defaultMessage="You don't have any websites configured."
             />
           }
         >
           <Button icon={<Arrow />} size="medium" onClick={() => router.push('/settings')}>
             <div>
-              <FormattedMessage
-                id="placeholder.message.go-to-settings"
-                defaultMessage="Go to settings"
-              />
+              <FormattedMessage id="message.go-to-settings" defaultMessage="Go to settings" />
             </div>
           </Button>
         </EmptyPlaceholder>

diff --git a/components/common/Calendar.js b/components/common/Calendar.js
@@ -70,34 +70,36 @@ export default function Calendar({ date, minDate, maxDate, onChange }) {
           <Icon className={styles.icon} icon={selectYear ? <Cross /> : <Chevron />} size="small" />
         </div>
       </div>
-      {!selectMonth && !selectYear && (
-        <DaySelector
-          date={date}
-          minDate={minDate}
-          maxDate={maxDate}
-          locale={locale}
-          onSelect={handleChange}
-        />
-      )}
-      {selectMonth && (
-        <MonthSelector
-          date={date}
-          minDate={minDate}
-          maxDate={maxDate}
-          locale={locale}
-          onSelect={handleChange}
-          onClose={toggleMonthSelect}
-        />
-      )}
-      {selectYear && (
-        <YearSelector
-          date={date}
-          minDate={minDate}
-          maxDate={maxDate}
-          onSelect={handleChange}
-          onClose={toggleYearSelect}
-        />
-      )}
+      <div className={styles.body}>
+        {!selectMonth && !selectYear && (
+          <DaySelector
+            date={date}
+            minDate={minDate}
+            maxDate={maxDate}
+            locale={locale}
+            onSelect={handleChange}
+          />
+        )}
+        {selectMonth && (
+          <MonthSelector
+            date={date}
+            minDate={minDate}
+            maxDate={maxDate}
+            locale={locale}
+            onSelect={handleChange}
+            onClose={toggleMonthSelect}
+          />
+        )}
+        {selectYear && (
+          <YearSelector
+            date={date}
+            minDate={minDate}
+            maxDate={maxDate}
+            onSelect={handleChange}
+            onClose={toggleYearSelect}
+          />
+        )}
+      </div>
     </div>
   );
 }
@@ -220,42 +222,46 @@ const YearSelector = ({ date, minDate, maxDate, onSelect }) => {
 
   return (
     <div className={styles.pager}>
-      <Button
-        icon={<Chevron />}
-        size="small"
-        className={styles.left}
-        onClick={handlePrevClick}
-        disabled={years[0] <= minYear}
-        variant="light"
-      />
-      <table>
-        <tbody>
-          {chunk(years, 5).map((row, i) => (
-            <tr key={i}>
-              {row.map((n, j) => (
-                <td
-                  key={j}
-                  className={classNames({
-                    [styles.selected]: n === year,
-                    [styles.disabled]: n < minYear || n > maxYear,
-                  })}
-                  onClick={() => (n < minYear || n > maxYear ? null : handleSelect(n))}
-                >
-                  {n}
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-      <Button
-        icon={<Chevron />}
-        size="small"
-        className={styles.right}
-        onClick={handleNextClick}
-        disabled={years[years.length - 1] > maxYear}
-        variant="light"
-      />
+      <div className={styles.left}>
+        <Button
+          icon={<Chevron />}
+          size="small"
+          onClick={handlePrevClick}
+          disabled={years[0] <= minYear}
+          variant="light"
+        />
+      </div>
+      <div className={styles.middle}>
+        <table>
+          <tbody>
+            {chunk(years, 5).map((row, i) => (
+              <tr key={i}>
+                {row.map((n, j) => (
+                  <td
+                    key={j}
+                    className={classNames({
+                      [styles.selected]: n === year,
+                      [styles.disabled]: n < minYear || n > maxYear,
+                    })}
+                    onClick={() => (n < minYear || n > maxYear ? null : handleSelect(n))}
+                  >
+                    {n}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <div className={styles.right}>
+        <Button
+          icon={<Chevron />}
+          size="small"
+          onClick={handleNextClick}
+          disabled={years[years.length - 1] > maxYear}
+          variant="light"
+        />
+      </div>
     </div>
   );
 };