Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-10 07:25:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add the status indicator for new versions

Browse Source
This commit is contained in:
ajnart
2022-12-20 15:21:36 +09:00
parent 11b111209a
commit 9996ff1529
4 changed files with 89 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/layout/header/Header.tsx
View File

@@ -1,4 +1,6 @@
import { Box, createStyles, Group, Header as MantineHeader } from '@mantine/core';
import { Box, createStyles, Group, Header as MantineHeader, Indicator } from '@mantine/core';
import { useState, useEffect } from 'react';
import { REPO_URL, CURRENT_VERSION } from '../../../../data/constants';
import { useConfigContext } from '../../../config/provider';
import { Logo } from '../Logo';
import { useCardStyles } from '../useCardStyles';
@@ -15,6 +17,18 @@ export function Header(props: any) {
const { config } = useConfigContext();
const [newVersionAvailable, setNewVersionAvailable] = useState<string>('');
useEffect(() => {
// Fetch Data here when component first mounted
fetch(`https://api.github.com/repos/${REPO_URL}/releases/latest`).then((res) => {
res.json().then((data) => {
if (data.tag_name > CURRENT_VERSION) {
setNewVersionAvailable(data.tag_name);
}
});
});
}, [CURRENT_VERSION]);
return (
<MantineHeader height={HeaderHeight} className={cardClasses.card}>
<Group p="xs" noWrap grow>
@@ -25,7 +39,9 @@ export function Header(props: any) {
<Search />
<AddElementAction />
<ToggleEditModeAction />
<SettingsMenu />
<Indicator size={15} color="blue" withBorder processing disabled={!newVersionAvailable}>
<SettingsMenu newVersionAvailable={newVersionAvailable} />
</Indicator>
</Group>
</Group>
</MantineHeader>

27
src/components/layout/header/SettingsMenu.tsx
View File

@@ -1,4 +1,4 @@
import { ActionIcon, Menu, Tooltip } from '@mantine/core';
import { ActionIcon, Badge, Menu, Tooltip } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { IconInfoCircle, IconMenu2, IconSettings } from '@tabler/icons';
import { useTranslation } from 'next-i18next';
@@ -6,7 +6,7 @@ import { AboutModal } from '../../About/AboutModal';
import { SettingsDrawer } from '../../Settings/SettingsDrawer';
import { ColorSchemeSwitch } from './SettingsMenu/ColorSchemeSwitch';
export const SettingsMenu = () => {
export function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: string }) {
const [drawerOpened, drawer] = useDisclosure(false);
const { t } = useTranslation('common');
const [aboutModalOpened, aboutModal] = useDisclosure(false);
@@ -28,15 +28,30 @@ export const SettingsMenu = () => {
</Menu.Item>
<Menu.Item
icon={<IconInfoCircle strokeWidth={1.2} size={18} />}
onClick={aboutModal.open}
rightSection={
newVersionAvailable && (
<Badge variant="light" color="blue">
New
</Badge>
)
}
onClick={() => aboutModal.open()}
>
About
</Menu.Item>
</Menu.Dropdown>
</Menu>
</Tooltip>
<SettingsDrawer opened={drawerOpened} closeDrawer={drawer.close} />
<AboutModal opened={aboutModalOpened} closeModal={aboutModal.close} />
<SettingsDrawer
opened={drawerOpened}
closeDrawer={drawer.close}
newVersionAvailable={newVersionAvailable}
/>
<AboutModal
opened={aboutModalOpened}
closeModal={aboutModal.close}
newVersionAvailable={newVersionAvailable}
/>
</>
);
};
}