Merge pull request #223 from MoltenCoffee/master

Update notice when new version is live

components/common/UpdateNotice.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import useVersion from '../../hooks/useVersion';
+import Link from '../common/Link';
+import styles from './UpdateNotice.module.css';
+
+export default function UpdateNotice() {
+  const versions = useVersion();
+  console.log(versions);
+  if (!versions) return null;
+
+  const { current, latest } = versions;
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.heading}>
+        <FormattedMessage
+          id="message.new-version-available"
+          default="Version {latest} available! Current version: {current}"
+          values={{
+            latest: latest,
+            current: current,
+          }}
+        />
+      </div>
+      <Link href="https://github.com/mikecao/umami" size="xsmall">
+        <div className={styles.message}>
+          <FormattedMessage
+            id="message.visit-github-update"
+            default="Click here to visit umami on github for instructions"
+          />
+        </div>
+      </Link>
+    </div>
+  );
+}

components/common/UpdateNotice.module.css

@@ -0,0 +1,15 @@
+.wrapper {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  font-size: var(--font-size-xsmall);
+}
+.heading {
+  font-weight: 600;
+  margin: auto 10px;
+}
+.message,
+.heading {
+  display: inline-block;
+}

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 && <UpdateNotice />}
       <div className={classNames(styles.header, 'row align-items-center')}>
         <div className="col-12 col-md-12 col-lg-3">
           <div className={styles.title}>

hooks/useVersion.js

@@ -0,0 +1,28 @@
+import { useMemo } from 'react';
+import useFetch from 'hooks/useFetch';
+
+export default function useVersion() {
+  const { data } = useMemo(() =>
+    useFetch('https://api.github.com/repos/mikecao/umami/releases/latest'),
+  );
+
+  if (!data || !data['tag_name']) return null;
+
+  const latest = data['tag_name'].startsWith('v') ? data['tag_name'].slice(1) : data['tag_name'];
+  const current = process.env.VERSION;
+
+  if (latest === current) return null;
+
+  const latestArray = latest.split('.');
+  const currentArray = current.split('.');
+
+  for (let i = 0; i < 3; i++) {
+    if (Number(latestArray[i]) > Number(currentArray[i]))
+      return {
+        current: current,
+        latest: latest,
+      };
+  }
+
+  return null;
+}

lang/de-DE.json

@@ -54,6 +54,7 @@
   "message.get-tracking-code": "Erstelle Tracking Kennung",
   "message.go-to-settings": "Zu den Einstellungen",
   "message.incorrect-username-password": "Falsches Passwort oder Benutzername.",
+  "message.new-version-available": "Version {latest} ist verfügbar! Aktuelle Version: {current}",
   "message.no-data-available": "Keine Daten vorhanden.",
   "message.no-websites-configured": "Es ist keine Webseite vorhanden.",
   "message.page-not-found": "Seite nicht gefunden.",
@@ -62,6 +63,7 @@
   "message.share-url": "Dies ist der öffentliche URL zum Teilen für {target}.",
   "message.track-stats": "Um die Statistiken für {target} zu übermitteln, platzieren Sie bitte den folgenden Quelltext im {head} ihrer Homepage.",
   "message.type-delete": "Geben Sie {delete} in das Feld unten ein um zu bestätigen.",
+  "message.visit-github-update": "Klicken Sie hier um umami auf GitHub zu besuchen für Anweisungen",
   "metrics.actions": "Aktionen",
   "metrics.average-visit-time": "Durchschn. Besuchszeit",
   "metrics.bounce-rate": "Absprungrate",

lang/en-US.json

@@ -54,6 +54,7 @@
   "message.get-tracking-code": "Get tracking code",
   "message.go-to-settings": "Go to settings",
   "message.incorrect-username-password": "Incorrect username/password.",
+  "message.new-version-available": "Version {latest} available! Current version: {current}",
   "message.no-data-available": "No data available.",
   "message.no-websites-configured": "You don't have any websites configured.",
   "message.page-not-found": "Page not found.",
@@ -62,6 +63,7 @@
   "message.share-url": "This is the publicly shared URL for {target}.",
   "message.track-stats": "To track stats for {target}, place the following code in the {head} section of your website.",
   "message.type-delete": "Type {delete} in the box below to confirm.",
+  "message.visit-github-update": "Click here to visit umami on GitHub for instructions",
   "metrics.actions": "Actions",
   "metrics.average-visit-time": "Average visit time",
   "metrics.bounce-rate": "Bounce rate",

lang/nl-NL.json

@@ -54,6 +54,7 @@
   "message.get-tracking-code": "Tracking code",
   "message.go-to-settings": "Naar instellingen",
   "message.incorrect-username-password": "Incorrecte gebruikersnaam/wachtwoord.",
+  "message.new-version-available": "Versie {latest} beschikbaar! Huidige versie: {current}",
   "message.no-data-available": "Geen gegevens beschikbaar.",
   "message.no-websites-configured": "Je hebt geen websites ingesteld.",
   "message.page-not-found": "Pagina niet gevonden.",
@@ -62,6 +63,7 @@
   "message.share-url": "Met deze URL kan {target} openbaar gedeeld worden.",
   "message.track-stats": "Om statistieken voor {target} bij te houden, plaats je de volgende code in het {head} gedeelte van je website.",
   "message.type-delete": "Type {delete} in onderstaande veld om dit te bevestigen.",
+  "message.visit-github-update": "Klik hier om naar umami op GitHub te gaan voor instructies",
   "metrics.actions": "Acties",
   "metrics.average-visit-time": "Gemiddelde bezoektijd",
   "metrics.bounce-rate": "Bouncepercentage",