fix: switch to prompt for sw update

akari-blue · Jan 5, 2025 · 4062afa · 4062afa
1 parent 151db53
commit 4062afa
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 47 deletions.
diff --git a/src/components/minimal-tiptap/components/section/three.tsx b/src/components/minimal-tiptap/components/section/three.tsx
@@ -6,8 +6,8 @@ import { ToolbarButton } from '../toolbar-button';
 import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
-import { useTheme } from '../../hooks/use-theme';
 import { memo, FC, useState, useCallback, useEffect } from 'react';
+import { useTheme } from '@/components/theme-provider/use-theme';
 
 type ColorItem = {
   cssVar: string;
@@ -75,7 +75,8 @@ const MemoizedColorButton = memo(
     inverse: string;
     onClick: (value: string) => void;
   }) => {
-    const isDarkMode = useTheme();
+    const { theme } = useTheme();
+    const isDarkMode = theme === 'dark';
     const label = isDarkMode && color.darkLabel ? color.darkLabel : color.label;
 
     return (

diff --git a/src/components/minimal-tiptap/hooks/use-theme.ts b/src/components/minimal-tiptap/hooks/use-theme.ts
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
@@ -1,5 +1,5 @@
-import { useTheme } from 'next-themes';
 import { Toaster as Sonner } from 'sonner';
+import { useTheme } from '../theme-provider/use-theme';
 
 type ToasterProps = React.ComponentProps<typeof Sonner>;
 
@@ -10,6 +10,7 @@ export const Toaster = ({ ...props }: ToasterProps) => {
     <Sonner
       theme={theme as ToasterProps['theme']}
       className="toaster group"
+      position="top-right"
       toastOptions={{
         classNames: {
           toast:

diff --git a/src/main.tsx b/src/main.tsx
@@ -8,15 +8,6 @@ import './i18n';
 import { routeTree } from './routeTree.gen';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ThemeProvider } from './components/theme-provider';
-import { registerSW } from 'virtual:pwa-register';
-import { toast } from 'sonner';
-
-registerSW({
-  immediate: true,
-  onOfflineReady() {
-    toast.success('akari is installed!');
-  },
-});
 
 // Create a new router instance
 const router = createRouter({ routeTree });
@@ -43,6 +34,12 @@ const queryClient = new QueryClient({
   },
 });
 
+// Log debug details
+console.info('__APP_NAME__', `"${__APP_NAME__}"`);
+console.info('__APP_VERSION__', `"${__APP_VERSION__}"`);
+console.info('__COMMIT_HASH__', `"${__COMMIT_HASH__}"`);
+console.info('__BUILD_DATE__', `"${__BUILD_DATE__}"`);
+
 // Render the app
 const rootElement = document.getElementById('root')!;
 if (!rootElement.innerHTML) {

diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
@@ -13,6 +13,8 @@ import { Helmet } from 'react-helmet';
 import { appName } from '@/config';
 import { useUnreadCount } from '@/lib/bluesky/hooks/useUnreadCount';
 import { OfflineBanner } from '@/components/ui/offline-banner';
+import { useRegisterSW } from 'virtual:pwa-register/react';
+import { toast } from 'sonner';
 
 export const Route = createRootRoute({
   component: Root,
@@ -46,6 +48,26 @@ function Root() {
   const pathname = router.location.pathname;
   const { data: unreadCount } = useUnreadCount();
 
+  useRegisterSW({
+    onRegisteredSW(swUrl, registration) {
+      if (experiments.devMode) toast.info(`Service Worker at: ${swUrl}`);
+      if (registration) {
+        setInterval(() => {
+          if (experiments.devMode) toast.info('Checking for sw update');
+          registration.update();
+        }, 20000 /* 20s for testing purposes */);
+      } else {
+        if (experiments.devMode) toast.info('SW Registered: ' + registration);
+      }
+    },
+    onNeedRefresh() {
+      toast.info('The app has been updated. Please refresh');
+    },
+    onRegisterError(error) {
+      if (experiments.devMode) toast.info('SW registration error', error);
+    },
+  });
+
   return (
     <>
       <Helmet titleTemplate={`${unreadCount ? `(${unreadCount})` : ''} %s - ${appName}`} defaultTitle={appName} />
@@ -92,7 +114,7 @@ function Root() {
               }}
             />
           )}
-          <Toaster position="bottom-right" />
+          <Toaster />
         </ErrorBoundary>
       </main>
     </>

diff --git a/vite.config.ts b/vite.config.ts
@@ -10,25 +10,21 @@ import { execSync } from 'child_process';
 const commitHash = execSync('git rev-parse --short HEAD').toString().trim();
 const buildDate = new Date().toISOString();
 
-const define = JSON.parse(
-  JSON.stringify({
-    __APP_NAME__: `"${name}"`,
-    __APP_VERSION__: `"${version}"`,
-    __COMMIT_HASH__: `"${commitHash}"`,
-    __BUILD_DATE__: `"${buildDate}"`,
-  }),
-);
-
 // https://vitejs.dev/config/
 export default defineConfig({
-  define,
+  define: {
+    __APP_NAME__: JSON.stringify(name),
+    __APP_VERSION__: JSON.stringify(version),
+    __COMMIT_HASH__: JSON.stringify(commitHash),
+    __BUILD_DATE__: JSON.stringify(buildDate),
+  },
   plugins: [
     TanStackRouterVite({
       routeFileIgnorePattern: 'components',
     }),
     react({}),
     VitePWA({
-      registerType: 'autoUpdate',
+      registerType: 'prompt',
       devOptions: {
         enabled: process.env.NODE_ENV !== 'test',
       },