Files
myeasycms-v2/packages/ui/src/makerkit/version-updater.tsx
Giancarlo Buomprisco a0e29c1193 chore: bump version to 2.20.2 in package.json and update captcha integration across auth components (#405)
- Incremented application version from 2.20.1 to 2.20.2 in package.json.
- Added captchaSiteKey prop to SignUpPage for enhanced security.
- Refactored captcha field rendering in various authentication components to ensure consistent placement and functionality.
2025-11-02 16:58:02 +07:00

118 lines
3.2 KiB
TypeScript

'use client';
import { useEffect, useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { RocketIcon } from 'lucide-react';
import {
AlertDialog,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from '../shadcn/alert-dialog';
import { Button } from '../shadcn/button';
import { Trans } from './trans';
/**
* Current version of the app that is running
*/
let version: string | null = null;
/**
* Default interval time in seconds to check for new version
* By default, it is set to 120 seconds
*/
const DEFAULT_REFETCH_INTERVAL = 120;
/**
* Default interval time in seconds to check for new version
*/
const VERSION_UPDATER_REFETCH_INTERVAL_SECONDS =
process.env.NEXT_PUBLIC_VERSION_UPDATER_REFETCH_INTERVAL_SECONDS;
export function VersionUpdater(props: { intervalTimeInSecond?: number }) {
const { data } = useVersionUpdater(props);
const [dismissed, setDismissed] = useState(false);
const [showDialog, setShowDialog] = useState<boolean>(false);
useEffect(() => {
if (data?.didChange && !dismissed) {
// eslint-disable-next-line
setShowDialog(data?.didChange ?? false);
}
}, [data?.didChange, dismissed]);
return (
<AlertDialog open={showDialog} onOpenChange={setShowDialog}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle className={'flex items-center gap-x-2'}>
<RocketIcon className={'h-4'} />
<span>
<Trans i18nKey="common:newVersionAvailable" />
</span>
</AlertDialogTitle>
<AlertDialogDescription>
<Trans i18nKey="common:newVersionAvailableDescription" />
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<Button
variant={'outline'}
onClick={() => {
setShowDialog(false);
setDismissed(true);
}}
>
<Trans i18nKey="common:back" />
</Button>
<Button onClick={() => window.location.reload()}>
<Trans i18nKey="common:newVersionSubmitButton" />
</Button>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
);
}
function useVersionUpdater(props: { intervalTimeInSecond?: number } = {}) {
const interval = VERSION_UPDATER_REFETCH_INTERVAL_SECONDS
? Number(VERSION_UPDATER_REFETCH_INTERVAL_SECONDS)
: DEFAULT_REFETCH_INTERVAL;
const refetchInterval = (props.intervalTimeInSecond ?? interval) * 1000;
// start fetching new version after half of the interval time
const staleTime = refetchInterval / 2;
return useQuery({
queryKey: ['version-updater'],
staleTime,
gcTime: refetchInterval,
refetchIntervalInBackground: true,
refetchInterval,
initialData: null,
queryFn: async () => {
const response = await fetch('/version');
const currentVersion = await response.text();
const oldVersion = version;
version = currentVersion;
const didChange = oldVersion !== null && currentVersion !== oldVersion;
return {
currentVersion,
oldVersion,
didChange,
};
},
});
}