Support i18n.

components/common/LanguageButton.js

@@ -0,0 +1,42 @@
+import React, { useState, useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import Globe from 'assets/globe.svg';
+import useDocumentClick from 'hooks/useDocumentClick';
+import { updateApp } from 'redux/actions/app';
+import Menu from './Menu';
+import styles from './LanguageButton.module.css';
+import Button from './Button';
+
+const menuOptions = [
+  { label: 'English', value: 'en' },
+  { label: '中文 (Chinese)', value: 'zh-CN' },
+];
+
+export default function LanguageButton() {
+  const dispatch = useDispatch();
+  const [showMenu, setShowMenu] = useState(false);
+  const locale = useSelector(state => state.app.locale);
+  const ref = useRef();
+  const selectedLocale = menuOptions.find(e => e.value === locale)?.label.split(' ')[0];
+
+  function handleSelect(value) {
+    dispatch(updateApp({ locale: value }));
+    window.localStorage.setItem('locale', value);
+    setShowMenu(false);
+  }
+
+  useDocumentClick(e => {
+    if (!ref.current.contains(e.target)) {
+      setShowMenu(false);
+    }
+  });
+
+  return (
+    <div ref={ref} className={styles.container}>
+      <Button icon={<Globe />} onClick={() => setShowMenu(true)} size="small">
+        <div>{selectedLocale}</div>
+      </Button>
+      {showMenu && <Menu options={menuOptions} onSelect={handleSelect} float="top" />}
+    </div>
+  );
+}

components/common/LanguageButton.module.css

@@ -0,0 +1,5 @@
+.container {
+  display: flex;
+  position: relative;
+  cursor: pointer;
+}

components/common/UserButton.js

@@ -1,4 +1,5 @@
 import React, { useState, useRef } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { useSelector } from 'react-redux';
 import { useRouter } from 'next/router';
 import Menu from './Menu';
@@ -17,14 +18,16 @@ export default function UserButton() {
   const menuOptions = [
     {
       label: (
-        <>
-          Logged in as <b>{user.username}</b>
-        </>
+        <FormattedMessage
+          id="label.logged-in-as"
+          defaultMessage="Logged in as {username}"
+          values={{ username: <b>{user.username}</b> }}
+        />
       ),
       value: 'username',
       className: styles.username,
     },
-    { label: 'Logout', value: 'logout' },
+    { label: <FormattedMessage id="label.logout" defaultMessage="Logout" />, value: 'logout' },
   ];
 
   function handleSelect(value) {

components/layout/Footer.js

@@ -3,23 +3,26 @@ import { FormattedMessage } from 'react-intl';
 import Link from 'next/link';
 import classNames from 'classnames';
 import Button from 'components/common/Button';
+import LanguageButton from 'components/common/LanguageButton';
 import Logo from 'assets/logo.svg';
 import styles from './Footer.module.css';
 
 export default function Footer() {
   return (
     <footer className="container">
-      <div className={classNames(styles.footer, 'row justify-content-center')}>
-        <div>
+      <div className={classNames(styles.footer, 'row')}>
+        <LanguageButton />
+        <div className={styles.center}>
           <FormattedMessage id="footer.powered-by" defaultMessage="powered by" />
+          <Link href="https://umami.is">
+            <a>
+              <Button icon={<Logo />} size="small">
+                <b>umami</b>
+              </Button>
+            </a>
+          </Link>
         </div>
-        <Link href="https://umami.is">
-          <a>
-            <Button icon={<Logo />} size="small">
-              <b>umami</b>
-            </Button>
-          </a>
-        </Link>
+        <div></div>
       </div>
     </footer>
   );

components/layout/Footer.module.css

@@ -1,14 +1,21 @@
 .footer {
   display: flex;
+  justify-content: space-between;
   align-items: center;
   font-size: var(--font-size-small);
   min-height: 100px;
 }
 
-.footer button {
+.footer .center button {
   margin-left: 10px;
 }
 
 .footer a {
   text-decoration: none;
 }
+
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

components/metrics/ActiveUsers.js

@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react';
-import { useSpring, animated } from 'react-spring';
 import classNames from 'classnames';
 import useFetch from 'hooks/useFetch';
 import styles from './ActiveUsers.module.css';
@@ -11,11 +10,6 @@ export default function ActiveUsers({ websiteId, className }) {
     return data?.[0]?.x || 0;
   }, [data]);
 
-  const props = useSpring({
-    x: count,
-    from: { x: 0 },
-  });
-
   if (count === 0) {
     return null;
   }
@@ -24,14 +18,11 @@ export default function ActiveUsers({ websiteId, className }) {
     <div className={classNames(styles.container, className)}>
       <div className={styles.dot} />
       <div className={styles.text}>
-        <animated.div className={styles.value}>
-          {props.x.interpolate(x => x.toFixed(0))}
-        </animated.div>
         <div>
           <FormattedMessage
             id="active-users.message"
-            defaultMessage="current {count, plural, one {visitor} other {visitors}}"
-            values={{ count }}
+            defaultMessage="{x} current {x, plural, one {visitor} other {visitors}}"
+            values={{ x: count }}
           />
         </div>
       </div>