From f6d5dfe601230526d30fdc07d50dc604d8b0b286 Mon Sep 17 00:00:00 2001 From: Sidney Alcantara Date: Mon, 12 Jul 2021 21:27:21 +1000 Subject: [PATCH] add badge to UserMenu when update is available --- www/package.json | 2 +- .../components/Navigation/UpdateChecker.tsx | 2 +- www/src/components/Navigation/UserMenu.tsx | 13 +++++-- www/yarn.lock | 34 +++++++++---------- 4 files changed, 30 insertions(+), 21 deletions(-) diff --git a/www/package.json b/www/package.json index 027b8976a..6c1235eac 100644 --- a/www/package.json +++ b/www/package.json @@ -11,7 +11,7 @@ "@antlerengineering/form-builder": "^2.6.0", "@antlerengineering/multiselect": "^0.9.2", "@date-io/date-fns": "1.x", - "@material-ui/core": "^4.11.3", + "@material-ui/core": "^4.12.1", "@material-ui/icons": "^4.11.2", "@material-ui/lab": "^4.0.0-alpha.56", "@material-ui/pickers": "^3.2.10", diff --git a/www/src/components/Navigation/UpdateChecker.tsx b/www/src/components/Navigation/UpdateChecker.tsx index 3c8d6676a..dabfce8f1 100644 --- a/www/src/components/Navigation/UpdateChecker.tsx +++ b/www/src/components/Navigation/UpdateChecker.tsx @@ -18,7 +18,7 @@ import WIKI_LINKS from "constants/wikiLinks"; const useLastCheckedUpdateState = createPersistedState( "_FT_LAST_CHECKED_UPDATE" ); -const useLatestUpdateState = createPersistedState("_FT_LATEST_UPDATE"); +export const useLatestUpdateState = createPersistedState("_FT_LATEST_UPDATE"); const useStyles = makeStyles((theme) => createStyles({ diff --git a/www/src/components/Navigation/UserMenu.tsx b/www/src/components/Navigation/UserMenu.tsx index fe9515583..4bfd6c3c6 100644 --- a/www/src/components/Navigation/UserMenu.tsx +++ b/www/src/components/Navigation/UserMenu.tsx @@ -14,15 +14,17 @@ import { ListItemSecondaryAction, ListItemIcon, Divider, + Badge, } from "@material-ui/core"; import AccountCircleIcon from "@material-ui/icons/AccountCircle"; import ArrowRightIcon from "@material-ui/icons/ArrowRight"; import CheckIcon from "@material-ui/icons/Check"; -import UpdateChecker from "./UpdateChecker"; +import UpdateChecker, { useLatestUpdateState } from "./UpdateChecker"; import { useAppContext } from "contexts/AppContext"; import routes from "constants/routes"; import { projectId } from "../../firebase"; +import meta from "../../../package.json"; const useStyles = makeStyles((theme) => createStyles({ @@ -64,6 +66,7 @@ export default function UserMenu(props: IconButtonProps) { const anchorEl = useRef(null); const [open, setOpen] = useState(false); const [themeSubMenu, setThemeSubMenu] = useState(null); + const [latestUpdate] = useLatestUpdateState>(); const { currentUser, @@ -118,7 +121,13 @@ export default function UserMenu(props: IconButtonProps) { onClick={() => setOpen(true)} className={classes.iconButton} > - {avatar} + {latestUpdate?.tag_name > "v" + meta.version ? ( + + {avatar} + + ) : ( + avatar + )}