Merge pull request #279 from mikecao/dev

v0.80.0

Author: mikecao

assets/exclamation-triangle.svg

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import Icon from './Icon';
+import Exclamation from 'assets/exclamation-triangle.svg';
+import styles from './ErrorMessage.module.css';
+
+export default function ErrorMessage() {
+  return (
+    <div className={styles.error}>
+      <Icon icon={<Exclamation />} className={styles.icon} size="large" />
+      <FormattedMessage id="message.failure" defaultMessage="Something went wrong." />
+    </div>
+  );
+}

components/common/ErrorMessage.js

@@ -0,0 +1,13 @@
+.error {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin: auto;
+  display: flex;
+  z-index: 1;
+}
+
+.icon {
+  margin-right: 10px;
+}

components/common/ErrorMessage.module.css

@@ -9,7 +9,8 @@ export default function MenuButton({
   icon,
   value,
   options,
-  menuClassname,
+  buttonClassName,
+  menuClassName,
   menuPosition = 'bottom',
   menuAlign = 'right',
   onSelect,
@@ -38,15 +39,15 @@ export default function MenuButton({
     <div className={styles.container} ref={ref}>
       <Button
         icon={icon}
-        className={classNames(styles.button, { [styles.open]: showMenu })}
+        className={classNames(styles.button, buttonClassName, { [styles.open]: showMenu })}
         onClick={toggleMenu}
         variant="light"
       >
         <div className={styles.text}>{renderValue ? renderValue(selectedOption) : value}</div>
       </Button>
       {showMenu && (
         <Menu
-          className={menuClassname}
+          className={menuClassName}
           options={options}
           selectedOption={selectedOption}
           onSelect={handleSelect}

components/common/MenuButton.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import Loading from 'components/common/Loading';
+import ErrorMessage from 'components/common/ErrorMessage';
 import useFetch from 'hooks/useFetch';
 import useDateRange from 'hooks/useDateRange';
 import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format';
@@ -17,7 +18,7 @@ export default function MetricsBar({ websiteId, token, className }) {
     query: { url },
   } = usePageQuery();
 
-  const { data } = useFetch(
+  const { data, error, loading } = useFetch(
     `/api/website/${websiteId}/metrics`,
     {
       start_at: +startDate,
@@ -40,9 +41,9 @@ export default function MetricsBar({ websiteId, token, className }) {
 
   return (
     <div className={classNames(styles.bar, className)} onClick={handleSetFormat}>
-      {!data ? (
-        <Loading />
-      ) : (
+      {!data && loading && <Loading />}
+      {error && <ErrorMessage />}
+      {data && !error && (
         <>
           <MetricCard
             label={<FormattedMessage id="metrics.views" defaultMessage="Views" />}

components/metrics/MetricsBar.js

@@ -13,6 +13,7 @@ import { formatNumber, formatLongNumber } from 'lib/format';
 import useDateRange from 'hooks/useDateRange';
 import usePageQuery from 'hooks/usePageQuery';
 import styles from './MetricsTable.module.css';
+import ErrorMessage from '../common/ErrorMessage';
 
 export default function MetricsTable({
   websiteId,
@@ -36,7 +37,7 @@ export default function MetricsTable({
     query: { url },
   } = usePageQuery();
 
-  const { data } = useFetch(
+  const { data, loading, error } = useFetch(
     `/api/website/${websiteId}/rankings`,
     {
       type,
@@ -61,7 +62,7 @@ export default function MetricsTable({
       return items;
     }
     return [];
-  }, [data, dataFilter, filterOptions]);
+  }, [data, error, dataFilter, filterOptions]);
 
   const handleSetFormat = () => setFormat(state => !state);
 
@@ -86,8 +87,9 @@ export default function MetricsTable({
 
   return (
     <div className={classNames(styles.container, className)}>
-      {!data && <Loading />}
-      {data && (
+      {!data && loading && <Loading />}
+      {error && <ErrorMessage />}
+      {data && !error && (
         <>
           <div className={styles.header}>
             <div className={styles.title}>{title}</div>

components/metrics/MetricsTable.js

@@ -13,6 +13,7 @@ import usePageQuery from 'hooks/usePageQuery';
 import { getDateArray, getDateLength } from 'lib/date';
 import Times from 'assets/times.svg';
 import styles from './WebsiteChart.module.css';
+import ErrorMessage from '../common/ErrorMessage';
 
 export default function WebsiteChart({
   websiteId,
@@ -31,7 +32,7 @@ export default function WebsiteChart({
     query: { url },
   } = usePageQuery();
 
-  const { data, loading } = useFetch(
+  const { data, loading, error } = useFetch(
     `/api/website/${websiteId}/pageviews`,
     {
       start_at: +startDate,
@@ -83,6 +84,7 @@ export default function WebsiteChart({
       </div>
       <div className="row">
         <div className="col">
+          {error && <ErrorMessage />}
           <PageviewsChart
             websiteId={websiteId}
             data={{ pageviews, uniques }}

components/metrics/WebsiteChart.js

@@ -33,7 +33,7 @@ export default function LanguageButton() {
         icon={<Globe />}
         options={menuOptions}
         value={locale}
-        menuClassname={styles.menu}
+        menuClassName={styles.menu}
         renderValue={option => option?.display}
         onSelect={handleSelect}
       />

components/settings/LanguageButton.js

@@ -25,7 +25,13 @@ export default function useFetch(url, params = {}, options = {}) {
 
       dispatch(updateQuery({ url, time: performance.now() - time, completed: Date.now() }));
 
-      setData(data);
+      if (status >= 400) {
+        setError(data);
+        setData(null);
+      } else {
+        setData(data);
+      }
+
       setStatus(status);
       onDataLoad(data);
     } catch (e) {

hooks/useFetch.js

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+
+export default function useForceSSL(enabled) {
+  const router = useRouter();
+
+  useEffect(() => {
+    if (enabled && typeof window !== 'undefined' && /^http:\/\//.test(location.href)) {
+      router.push(location.href.replace(/^http:\/\//, 'https://'));
+    }
+  }, [enabled]);
+
+  return null;
+}