Merge remote-tracking branch 'mikecao/master'

thikari · Oct 1, 2020 · 0acda0a · 0acda0a
2 parents 992908c + e60376f
commit 0acda0a
Show file tree

Hide file tree

Showing 84 changed files with 783 additions and 434 deletions.
diff --git a/components/common/DropDown.js b/components/common/DropDown.js
@@ -37,7 +37,7 @@ export default function DropDown({
   return (
     <div ref={ref} className={classNames(styles.dropdown, className)} onClick={handleShowMenu}>
       <div className={styles.value}>
-        {options.find(e => e.value === value)?.label || value}
+        <div className={styles.text}>{options.find(e => e.value === value)?.label || value}</div>
         <Icon icon={<Chevron />} className={styles.icon} size="small" />
       </div>
       {showMenu && (

diff --git a/components/common/Dropdown.module.css b/components/common/Dropdown.module.css
@@ -19,6 +19,10 @@
   min-width: 160px;
 }
 
+.text {
+  flex: 1;
+}
+
 .icon {
   padding-left: 20px;
 }
diff --git a/components/common/UpdateNotice.js b/components/common/UpdateNotice.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import useVersion from 'hooks/useVersion';
+import styles from './UpdateNotice.module.css';
+import ButtonLayout from '../layout/ButtonLayout';
+import Button from './Button';
+import useForceUpdate from '../../hooks/useForceUpdate';
+
+export default function UpdateNotice() {
+  const forceUpdte = useForceUpdate();
+  const { hasUpdate, latest, updateCheck } = useVersion();
+
+  function handleViewClick() {
+    location.href = 'https://github.com/mikecao/umami/releases';
+    updateCheck();
+    forceUpdte();
+  }
+
+  function handleDismissClick() {
+    updateCheck();
+    forceUpdte();
+  }
+
+  if (!hasUpdate) {
+    return null;
+  }
+
+  return (
+    <div className={styles.notice}>
+      <div className={styles.message}>
+        <FormattedMessage
+          id="message.new-version-available"
+          defaultMessage="A new version of umami {version} is available!"
+          values={{ version: `v${latest}` }}
+        />
+      </div>
+      <ButtonLayout>
+        <Button size="xsmall" variant="action" onClick={handleViewClick}>
+          <FormattedMessage id="button.view-details" defaultMessage="View details" />
+        </Button>
+        <Button size="xsmall" onClick={handleDismissClick}>
+          <FormattedMessage id="button.dismiss" defaultMessage="Dismiss" />
+        </Button>
+      </ButtonLayout>
+    </div>
+  );
+}
diff --git a/components/common/UpdateNotice.module.css b/components/common/UpdateNotice.module.css
@@ -0,0 +1,13 @@
+.notice {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: 10px;
+  font-size: var(--font-size-small);
+  font-weight: 600;
+}
+
+.message {
+  text-align: center;
+  margin-right: 20px;
+}
diff --git a/components/common/WorldMap.js b/components/common/WorldMap.js
@@ -6,6 +6,8 @@ import tinycolor from 'tinycolor2';
 import useTheme from 'hooks/useTheme';
 import { THEME_COLORS } from 'lib/constants';
 import styles from './WorldMap.module.css';
+import useCountryNames from 'hooks/useCountryNames';
+import useLocale from 'hooks/useLocale';
 
 const geoUrl = '/world-110m.json';
 
@@ -21,6 +23,8 @@ export default function WorldMap({ data, className }) {
     }),
     [theme],
   );
+  const [locale] = useLocale();
+  const countryNames = useCountryNames(locale);
 
   function getFillColor(code) {
     if (code === 'AQ') return;
@@ -39,10 +43,10 @@ export default function WorldMap({ data, className }) {
     return code === 'AQ' ? 0 : 1;
   }
 
-  function handleHover({ ISO_A2: code, NAME: name }) {
+  function handleHover(code) {
     if (code === 'AQ') return;
     const country = data?.find(({ x }) => x === code);
-    setTooltip(`${name}: ${country?.y || 0} visitors`);
+    setTooltip(`${countryNames[code]}: ${country?.y || 0} visitors`);
   }
 
   return (
@@ -70,7 +74,7 @@ export default function WorldMap({ data, className }) {
                       hover: { outline: 'none', fill: colors.hoverColor },
                       pressed: { outline: 'none' },
                     }}
-                    onMouseOver={() => handleHover(geo.properties)}
+                    onMouseOver={() => handleHover(code)}
                     onMouseOut={() => setTooltip(null)}
                   />
                 );

diff --git a/components/forms/AccountEditForm.js b/components/forms/AccountEditForm.js
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Formik, Form, Field } from 'formik';
+import { useRouter } from 'next/router';
 import { post } from 'lib/web';
 import Button from 'components/common/Button';
 import FormLayout, {
@@ -29,18 +30,17 @@ const validate = ({ user_id, username, password }) => {
 };
 
 export default function AccountEditForm({ values, onSave, onClose }) {
+  const { basePath } = useRouter();
   const [message, setMessage] = useState();
 
   const handleSubmit = async values => {
-    const response = await post(`/api/account`, values);
+    const { ok, data } = await post(`${basePath}/api/account`, values);
 
-    if (typeof response !== 'string') {
+    if (ok) {
       onSave();
     } else {
       setMessage(
-        response || (
-          <FormattedMessage id="message.failure" defaultMessage="Something went wrong." />
-        ),
+        data || <FormattedMessage id="message.failure" defaultMessage="Something went wrong." />,
       );
     }
   };

diff --git a/components/forms/ChangePasswordForm.js b/components/forms/ChangePasswordForm.js
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
+import { useRouter } from 'next/router';
 import { Formik, Form, Field } from 'formik';
 import { post } from 'lib/web';
 import Button from 'components/common/Button';
@@ -37,18 +38,17 @@ const validate = ({ current_password, new_password, confirm_password }) => {
 };
 
 export default function ChangePasswordForm({ values, onSave, onClose }) {
+  const { basePath } = useRouter();
   const [message, setMessage] = useState();
 
   const handleSubmit = async values => {
-    const response = await post(`/api/account/password`, values);
+    const { ok, data } = await post(`${basePath}/api/account/password`, values);
 
-    if (typeof response !== 'string') {
+    if (ok) {
       onSave();
     } else {
       setMessage(
-        response || (
-          <FormattedMessage id="message.failure" defaultMessage="Something went wrong." />
-        ),
+        data || <FormattedMessage id="message.failure" defaultMessage="Something went wrong." />,
       );
     }
   };

diff --git a/components/forms/DeleteForm.js b/components/forms/DeleteForm.js
@@ -1,4 +1,6 @@
 import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useRouter } from 'next/router';
 import { Formik, Form, Field } from 'formik';
 import { del } from 'lib/web';
 import Button from 'components/common/Button';
@@ -8,7 +10,6 @@ import FormLayout, {
   FormMessage,
   FormRow,
 } from 'components/layout/FormLayout';
-import { FormattedMessage } from 'react-intl';
 
 const CONFIRMATION_WORD = 'DELETE';
 
@@ -27,15 +28,18 @@ const validate = ({ confirmation }) => {
 };
 
 export default function DeleteForm({ values, onSave, onClose }) {
+  const { basePath } = useRouter();
   const [message, setMessage] = useState();
 
   const handleSubmit = async ({ type, id }) => {
-    const response = await del(`/api/${type}/${id}`);
+    const { ok, data } = await del(`${basePath}/api/${type}/${id}`);
 
-    if (typeof response !== 'string') {
+    if (ok) {
       onSave();
     } else {
-      setMessage(<FormattedMessage id="message.failure" defaultMessage="Something went wrong." />);
+      setMessage(
+        data || <FormattedMessage id="message.failure" defaultMessage="Something went wrong." />,
+      );
     }
   };
 

diff --git a/components/forms/LoginForm.js b/components/forms/LoginForm.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Formik, Form, Field } from 'formik';
-import Router from 'next/router';
+import { useRouter } from 'next/router';
 import { post } from 'lib/web';
 import Button from 'components/common/Button';
 import FormLayout, {
@@ -28,22 +28,26 @@ const validate = ({ username, password }) => {
 };
 
 export default function LoginForm() {
+  const router = useRouter();
   const [message, setMessage] = useState();
 
   const handleSubmit = async ({ username, password }) => {
-    const response = await post('/api/auth/login', { username, password });
+    const { ok, status, data } = await post(`${router.basePath}/api/auth/login`, {
+      username,
+      password,
+    });
 
-    if (typeof response !== 'string') {
-      await Router.push('/');
+    if (ok) {
+      return router.push('/');
     } else {
       setMessage(
-        response.startsWith('401') ? (
+        status === 401 ? (
           <FormattedMessage
             id="message.incorrect-username-password"
             defaultMessage="Incorrect username/password."
           />
         ) : (
-          response
+          data
         ),
       );
     }

diff --git a/components/forms/WebsiteEditForm.js b/components/forms/WebsiteEditForm.js
@@ -11,6 +11,7 @@ import FormLayout, {
 } from 'components/layout/FormLayout';
 import Checkbox from 'components/common/Checkbox';
 import { DOMAIN_REGEX } from 'lib/constants';
+import { useRouter } from 'next/router';
 
 const initialValues = {
   name: '',
@@ -34,15 +35,18 @@ const validate = ({ name, domain }) => {
 };
 
 export default function WebsiteEditForm({ values, onSave, onClose }) {
+  const { basePath } = useRouter();
   const [message, setMessage] = useState();
 
   const handleSubmit = async values => {
-    const response = await post(`/api/website`, values);
+    const { ok, data } = await post(`${basePath}/api/website`, values);
 
-    if (typeof response !== 'string') {
+    if (ok) {
       onSave();
     } else {
-      setMessage(<FormattedMessage id="message.failure" defaultMessage="Something went wrong." />);
+      setMessage(
+        data || <FormattedMessage id="message.failure" defaultMessage="Something went wrong." />,
+      );
     }
   };
 

diff --git a/components/layout/Header.js b/components/layout/Header.js
@@ -6,6 +6,7 @@ import Link from 'components/common/Link';
 import Icon from 'components/common/Icon';
 import LanguageButton from 'components/settings/LanguageButton';
 import ThemeButton from 'components/settings/ThemeButton';
+import UpdateNotice from 'components/common/UpdateNotice';
 import UserButton from 'components/settings/UserButton';
 import Logo from 'assets/logo.svg';
 import styles from './Header.module.css';
@@ -15,6 +16,7 @@ export default function Header() {
 
   return (
     <header className="container">
+      {user?.is_admin && <UpdateNotice />}
       <div className={classNames(styles.header, 'row align-items-center')}>
         <div className="col-12 col-md-12 col-lg-3">
           <div className={styles.title}>

diff --git a/components/layout/Page.js b/components/layout/Page.js
@@ -1,6 +1,7 @@
 import React from 'react';
+import classNames from 'classnames';
 import styles from './Page.module.css';
 
-export default function Page({ children }) {
-  return <div className={styles.page}>{children}</div>;
+export default function Page({ className, children }) {
+  return <div className={classNames(styles.page, className)}>{children}</div>;
 }
diff --git a/components/layout/PageHeader.module.css b/components/layout/PageHeader.module.css
@@ -4,4 +4,5 @@
   align-items: center;
   align-content: center;
   min-height: 80px;
+  align-self: stretch;
 }
diff --git a/components/metrics/CountriesTable.js b/components/metrics/CountriesTable.js
@@ -1,9 +1,18 @@
 import React from 'react';
 import MetricsTable from './MetricsTable';
-import { countryFilter, percentFilter } from 'lib/filters';
+import { percentFilter } from 'lib/filters';
 import { FormattedMessage } from 'react-intl';
+import useCountryNames from 'hooks/useCountryNames';
+import useLocale from 'hooks/useLocale';
 
 export default function CountriesTable({ websiteId, token, limit, onDataLoad = () => {} }) {
+  const [locale] = useLocale();
+  const countryNames = useCountryNames(locale);
+
+  function renderLabel({ x }) {
+    return <div className={locale}>{countryNames[x]}</div>;
+  }
+
   return (
     <MetricsTable
       title={<FormattedMessage id="metrics.countries" defaultMessage="Countries" />}
@@ -12,8 +21,8 @@ export default function CountriesTable({ websiteId, token, limit, onDataLoad = (
       websiteId={websiteId}
       token={token}
       limit={limit}
-      dataFilter={countryFilter}
       onDataLoad={data => onDataLoad(percentFilter(data))}
+      renderLabel={renderLabel}
     />
   );
 }
diff --git a/components/metrics/WebsiteChart.js b/components/metrics/WebsiteChart.js
@@ -59,7 +59,7 @@ export default function WebsiteChart({
   }
 
   return (
-    <>
+    <div className={styles.container}>
       <WebsiteHeader websiteId={websiteId} token={token} title={title} showLink={showLink} />
       <div className={classNames(styles.header, 'row')}>
         <StickyHeader
@@ -92,7 +92,7 @@ export default function WebsiteChart({
           />
         </div>
       </div>
-    </>
+    </div>
   );
 }
 

diff --git a/components/metrics/WebsiteChart.module.css b/components/metrics/WebsiteChart.module.css
@@ -1,6 +1,7 @@
 .container {
   display: flex;
   flex-direction: column;
+  align-self: stretch;
 }
 
 .title {