Refactored update notice. Fixes #2124.

This commit is contained in:
Mike Cao 2023-07-27 14:47:41 -07:00
parent ba9ddcac38
commit f35d0f65dc
4 changed files with 15 additions and 13 deletions

View File

@ -1,15 +1,19 @@
import { useState, useEffect, useCallback } from 'react'; import { useEffect, useCallback, useState } from 'react';
import { Button, Row, Column } from 'react-basics'; import { Button, Row, Column } from 'react-basics';
import { setItem } from 'next-basics'; import { setItem } from 'next-basics';
import useStore, { checkVersion } from 'store/version'; import useStore, { checkVersion } from 'store/version';
import { REPO_URL, VERSION_CHECK } from 'lib/constants'; import { REPO_URL, VERSION_CHECK } from 'lib/constants';
import styles from './UpdateNotice.module.css'; import styles from './UpdateNotice.module.css';
import useMessages from 'hooks/useMessages'; import useMessages from 'hooks/useMessages';
import { useRouter } from 'next/router';
export function UpdateNotice() { export function UpdateNotice({ user, config }) {
const { formatMessage, labels, messages } = useMessages(); const { formatMessage, labels, messages } = useMessages();
const { latest, checked, hasUpdate, releaseUrl } = useStore(); const { latest, checked, hasUpdate, releaseUrl } = useStore();
const [dismissed, setDismissed] = useState(false); const { pathname } = useRouter();
const [dismissed, setDismissed] = useState(checked);
const allowUpdate =
user?.isAdmin && !config?.updatesDisabled && !pathname.includes('/share/') && !dismissed;
const updateCheck = useCallback(() => { const updateCheck = useCallback(() => {
setItem(VERSION_CHECK, { version: latest, time: Date.now() }); setItem(VERSION_CHECK, { version: latest, time: Date.now() });
@ -27,12 +31,12 @@ export function UpdateNotice() {
} }
useEffect(() => { useEffect(() => {
if (!checked) { if (allowUpdate) {
checkVersion(); checkVersion();
} }
}, [checked]); }, [allowUpdate]);
if (!hasUpdate || dismissed) { if (!allowUpdate || !hasUpdate) {
return null; return null;
} }

View File

@ -4,7 +4,7 @@
gap: 20px; gap: 20px;
margin: 20px auto; margin: 20px auto;
justify-self: center; justify-self: center;
background: #fff; background: var(--base50);
padding: 20px; padding: 20px;
border: 1px solid var(--base300); border: 1px solid var(--base300);
border-radius: var(--border-radius); border-radius: var(--border-radius);
@ -15,7 +15,8 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-weight: 600; color: var(--font-color100);
font-weight: 700;
} }
.buttons { .buttons {

View File

@ -11,17 +11,14 @@ import styles from './AppLayout.module.css';
export function AppLayout({ title, children }) { export function AppLayout({ title, children }) {
const { user } = useRequireLogin(); const { user } = useRequireLogin();
const config = useConfig(); const config = useConfig();
const { pathname } = useRouter();
if (!user || !config) { if (!user || !config) {
return null; return null;
} }
const allowUpdate = user?.isAdmin && !config?.updatesDisabled && !pathname.includes('/share/');
return ( return (
<div className={styles.layout} data-app-version={CURRENT_VERSION}> <div className={styles.layout} data-app-version={CURRENT_VERSION}>
{allowUpdate && <UpdateNotice />} <UpdateNotice user={user} config={config} />
<Head> <Head>
<title>{title ? `${title} | umami` : 'umami'}</title> <title>{title ? `${title} | umami` : 'umami'}</title>
</Head> </Head>

View File

@ -21,7 +21,7 @@ export function useConfig() {
} }
}, []); }, []);
return config || {}; return config;
} }
export default useConfig; export default useConfig;