From d79c80459150e47b92eb6d2cfceda8e21e227f60 Mon Sep 17 00:00:00 2001 From: MoltenCoffee <13321277+MoltenCoffee@users.noreply.github.com> Date: Sat, 26 Sep 2020 13:01:42 +0200 Subject: [PATCH 01/11] Add hook to check version with GitHub API --- hooks/useVersion.js | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 hooks/useVersion.js diff --git a/hooks/useVersion.js b/hooks/useVersion.js new file mode 100644 index 00000000..76aefadc --- /dev/null +++ b/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; +} From 4f248342659ed1af4e0d2cf725f270c1aa8744a1 Mon Sep 17 00:00:00 2001 From: MoltenCoffee <13321277+MoltenCoffee@users.noreply.github.com> Date: Sat, 26 Sep 2020 13:03:13 +0200 Subject: [PATCH 02/11] Create banner to display when new version is available --- components/common/UpdateNotice.js | 36 +++++++++++++++++++++++ components/common/UpdateNotice.module.css | 15 ++++++++++ 2 files changed, 51 insertions(+) create mode 100644 components/common/UpdateNotice.js create mode 100644 components/common/UpdateNotice.module.css diff --git a/components/common/UpdateNotice.js b/components/common/UpdateNotice.js new file mode 100644 index 00000000..a0d5f512 --- /dev/null +++ b/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 ( +
+
+ +
+ +
+ +
+ +
+ ); +} diff --git a/components/common/UpdateNotice.module.css b/components/common/UpdateNotice.module.css new file mode 100644 index 00000000..ec3a113f --- /dev/null +++ b/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; +} From 1e0274db09987464040e513931ed31eafd8b146a Mon Sep 17 00:00:00 2001 From: MoltenCoffee <13321277+MoltenCoffee@users.noreply.github.com> Date: Sat, 26 Sep 2020 13:04:44 +0200 Subject: [PATCH 03/11] Add UpdateNotice to Header --- components/layout/Header.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/layout/Header.js b/components/layout/Header.js index 639db7ea..93b96715 100644 --- 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 (
+ {user && }
From 57d7c118e0c5c2ff54525e277c18216f84660ea2 Mon Sep 17 00:00:00 2001 From: MoltenCoffee <13321277+MoltenCoffee@users.noreply.github.com> Date: Sat, 26 Sep 2020 13:05:15 +0200 Subject: [PATCH 04/11] Added needed strings in English, German and Dutch --- lang/de-DE.json | 2 ++ lang/en-US.json | 2 ++ lang/nl-NL.json | 2 ++ 3 files changed, 6 insertions(+) diff --git a/lang/de-DE.json b/lang/de-DE.json index f960d1eb..f7ef14fc 100644 --- a/lang/de-DE.json +++ b/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", diff --git a/lang/en-US.json b/lang/en-US.json index 54ee8cad..044d4645 100644 --- a/lang/en-US.json +++ b/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", diff --git a/lang/nl-NL.json b/lang/nl-NL.json index 3ebfcd14..d8fc730f 100644 --- a/lang/nl-NL.json +++ b/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", From 6bb34cd3a51fa783d2e024e5aa5883e700fc2a09 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Sun, 27 Sep 2020 00:51:29 -0700 Subject: [PATCH 05/11] Moved files around. Updated test page. --- components/common/DropDown.js | 2 +- components/common/Dropdown.module.css | 4 + components/layout/Page.js | 5 +- components/layout/PageHeader.module.css | 1 + components/metrics/WebsiteChart.js | 4 +- components/metrics/WebsiteChart.module.css | 1 + components/{settings => pages}/Settings.js | 6 +- components/pages/Test.js | 92 +++++++++++++++++++ components/pages/Test.module.css | 5 + components/{ => pages}/WebsiteDetails.js | 16 ++-- .../{ => pages}/WebsiteDetails.module.css | 0 components/{ => pages}/WebsiteList.js | 0 components/{ => pages}/WebsiteList.module.css | 1 + package.json | 2 +- pages/dashboard/[[...id]].js | 2 +- pages/settings/index.js | 2 +- pages/share/[...id].js | 2 +- pages/test.js | 58 ++---------- pages/website/[...id].js | 2 +- 19 files changed, 136 insertions(+), 69 deletions(-) rename components/{settings => pages}/Settings.js (87%) create mode 100644 components/pages/Test.js create mode 100644 components/pages/Test.module.css rename components/{ => pages}/WebsiteDetails.js (92%) rename components/{ => pages}/WebsiteDetails.module.css (100%) rename components/{ => pages}/WebsiteList.js (100%) rename components/{ => pages}/WebsiteList.module.css (87%) diff --git a/components/common/DropDown.js b/components/common/DropDown.js index b6b2357b..d240fbd6 100644 --- a/components/common/DropDown.js +++ b/components/common/DropDown.js @@ -37,7 +37,7 @@ export default function DropDown({ return (
- {options.find(e => e.value === value)?.label || value} +
{options.find(e => e.value === value)?.label || value}
} className={styles.icon} size="small" />
{showMenu && ( diff --git a/components/common/Dropdown.module.css b/components/common/Dropdown.module.css index 4b94f58f..9738b007 100644 --- 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/layout/Page.js b/components/layout/Page.js index c9a928c5..28492ddf 100644 --- 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
{children}
; +export default function Page({ className, children }) { + return
{children}
; } diff --git a/components/layout/PageHeader.module.css b/components/layout/PageHeader.module.css index 74f7d1a2..263bd5b7 100644 --- 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/WebsiteChart.js b/components/metrics/WebsiteChart.js index 99c03951..ea86ad3e 100644 --- a/components/metrics/WebsiteChart.js +++ b/components/metrics/WebsiteChart.js @@ -59,7 +59,7 @@ export default function WebsiteChart({ } return ( - <> +
- +
); } diff --git a/components/metrics/WebsiteChart.module.css b/components/metrics/WebsiteChart.module.css index 29f94670..0e947aea 100644 --- 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 { diff --git a/components/settings/Settings.js b/components/pages/Settings.js similarity index 87% rename from components/settings/Settings.js rename to components/pages/Settings.js index be9feb35..c6e39f2a 100644 --- a/components/settings/Settings.js +++ b/components/pages/Settings.js @@ -2,9 +2,9 @@ import React, { useState } from 'react'; import { useRouter } from 'next/router'; import Page from 'components/layout/Page'; import MenuLayout from 'components/layout/MenuLayout'; -import WebsiteSettings from './WebsiteSettings'; -import AccountSettings from './AccountSettings'; -import ProfileSettings from './ProfileSettings'; +import WebsiteSettings from '../settings/WebsiteSettings'; +import AccountSettings from '../settings/AccountSettings'; +import ProfileSettings from '../settings/ProfileSettings'; import { useSelector } from 'react-redux'; import { FormattedMessage } from 'react-intl'; diff --git a/components/pages/Test.js b/components/pages/Test.js new file mode 100644 index 00000000..84efbd67 --- /dev/null +++ b/components/pages/Test.js @@ -0,0 +1,92 @@ +import React, { useState } from 'react'; +import classNames from 'classnames'; +import Head from 'next/head'; +import Link from 'next/link'; +import Page from '../layout/Page'; +import PageHeader from '../layout/PageHeader'; +import useFetch from '../../hooks/useFetch'; +import DropDown from '../common/DropDown'; +import styles from './Test.module.css'; +import WebsiteChart from '../metrics/WebsiteChart'; +import EventsChart from '../metrics/EventsChart'; +import Button from '../common/Button'; +import EmptyPlaceholder from '../common/EmptyPlaceholder'; + +export default function Test() { + const [website, setWebsite] = useState(); + const { data } = useFetch('/api/websites'); + + if (!data) { + return null; + } + + const options = data.map(({ name, website_id }) => ({ label: name, value: website_id })); + const selectedValue = options.find(({ value }) => value === website?.website_id)?.value; + + function handleSelect(value) { + setWebsite(data.find(({ website_id }) => website_id === value)); + } + + function handleClick() { + window.umami('event (default)'); + window.umami.trackView('/page-view', 'https://www.google.com'); + window.umami.trackEvent('event (custom)', 'custom-type'); + } + + return ( + + + {typeof window !== 'undefined' && website && ( +