diff --git a/components/common/UpdateNotice.js b/components/common/UpdateNotice.js index 161a5a67..2cdbcb43 100644 --- a/components/common/UpdateNotice.js +++ b/components/common/UpdateNotice.js @@ -1,15 +1,19 @@ -import { useState, useEffect, useCallback } from 'react'; +import { useEffect, useCallback, useState } from 'react'; import { Button, Row, Column } from 'react-basics'; import { setItem } from 'next-basics'; import useStore, { checkVersion } from 'store/version'; import { REPO_URL, VERSION_CHECK } from 'lib/constants'; import styles from './UpdateNotice.module.css'; import useMessages from 'hooks/useMessages'; +import { useRouter } from 'next/router'; -export function UpdateNotice() { +export function UpdateNotice({ user, config }) { const { formatMessage, labels, messages } = useMessages(); 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(() => { setItem(VERSION_CHECK, { version: latest, time: Date.now() }); @@ -27,12 +31,12 @@ export function UpdateNotice() { } useEffect(() => { - if (!checked) { + if (allowUpdate) { checkVersion(); } - }, [checked]); + }, [allowUpdate]); - if (!hasUpdate || dismissed) { + if (!allowUpdate || !hasUpdate) { return null; } diff --git a/components/common/UpdateNotice.module.css b/components/common/UpdateNotice.module.css index f5e29445..db7a0abd 100644 --- a/components/common/UpdateNotice.module.css +++ b/components/common/UpdateNotice.module.css @@ -4,7 +4,7 @@ gap: 20px; margin: 20px auto; justify-self: center; - background: #fff; + background: var(--base50); padding: 20px; border: 1px solid var(--base300); border-radius: var(--border-radius); @@ -15,7 +15,8 @@ display: flex; justify-content: center; align-items: center; - font-weight: 600; + color: var(--font-color100); + font-weight: 700; } .buttons { diff --git a/components/layout/AppLayout.js b/components/layout/AppLayout.js index 45ba7e23..c30b1018 100644 --- a/components/layout/AppLayout.js +++ b/components/layout/AppLayout.js @@ -11,17 +11,14 @@ import styles from './AppLayout.module.css'; export function AppLayout({ title, children }) { const { user } = useRequireLogin(); const config = useConfig(); - const { pathname } = useRouter(); if (!user || !config) { return null; } - const allowUpdate = user?.isAdmin && !config?.updatesDisabled && !pathname.includes('/share/'); - return (
- {allowUpdate && } + {title ? `${title} | umami` : 'umami'} diff --git a/hooks/useConfig.js b/hooks/useConfig.js index 6dda7b74..2dead15a 100644 --- a/hooks/useConfig.js +++ b/hooks/useConfig.js @@ -21,7 +21,7 @@ export function useConfig() { } }, []); - return config || {}; + return config; } export default useConfig;