feat(frontend): check for updates periodically

1 files changed, 51 insertions, 0 deletions

diff --git a/subprojects/frontend/src/UpdateNotification.tsx b/subprojects/frontend/src/UpdateNotification.tsx
new file mode 100644
index 00000000..d260e3b7
--- /dev/null
+++ b/subprojects/frontend/src/UpdateNotification.tsx
@@ -0,0 +1,51 @@
+import Button from '@mui/material/Button';
+import { observer } from 'mobx-react-lite';
+import React, { useEffect } from 'react';
+
+import { useRootStore } from './RootStore';
+import { ContrastThemeProvider } from './theme/ThemeProvider';
+import useDelayedSnackbar from './utils/useDelayedSnackbar';
+
+export default observer(function UpdateNotification(): null {
+  const { pwaStore } = useRootStore();
+  const { needsUpdate, updateError } = pwaStore;
+  const enqueueLater = useDelayedSnackbar();
+
+  useEffect(() => {
+    if (needsUpdate) {
+      return enqueueLater('An update for Refinery is available', {
+        persist: true,
+        action: (
+          <ContrastThemeProvider>
+            <Button color="primary" onClick={() => pwaStore.reloadWithUpdate()}>
+              Reload
+            </Button>
+            <Button color="inherit" onClick={() => pwaStore.dismissUpdate()}>
+              Dismiss
+            </Button>
+          </ContrastThemeProvider>
+        ),
+      });
+    }
+
+    if (updateError) {
+      return enqueueLater('Failed to download update', {
+        variant: 'error',
+        action: (
+          <>
+            <Button color="inherit" onClick={() => pwaStore.checkForUpdates()}>
+              Try again
+            </Button>
+            <Button color="inherit" onClick={() => pwaStore.dismissError()}>
+              Dismiss
+            </Button>
+          </>
+        ),
+      });
+    }
+
+    return () => {};
+  }, [pwaStore, needsUpdate, updateError, enqueueLater]);
+
+  return null;
+});