From 84da056f09e49639a963a829ca75fe46a86a316a Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Mon, 28 Jun 2021 10:17:38 +0100
Subject: [PATCH] Add PWA update indicator.
---
src/components/common/UpdateIndicator.tsx | 25 ++++++++++++++++++++
src/lib/eventEmitter.ts | 1 +
src/main.tsx | 10 ++++----
src/pages/channels/actions/HeaderActions.tsx | 2 ++
4 files changed, 33 insertions(+), 5 deletions(-)
create mode 100644 src/components/common/UpdateIndicator.tsx
diff --git a/src/components/common/UpdateIndicator.tsx b/src/components/common/UpdateIndicator.tsx
new file mode 100644
index 0000000..982b73d
--- /dev/null
+++ b/src/components/common/UpdateIndicator.tsx
@@ -0,0 +1,25 @@
+import { updateSW } from "../../main";
+import IconButton from "../ui/IconButton";
+import { ThemeContext } from "../../context/Theme";
+import { Download } from "@styled-icons/boxicons-regular";
+import { internalSubscribe } from "../../lib/eventEmitter";
+import { useContext, useEffect, useState } from "preact/hooks";
+
+var pendingUpdate = false;
+
+export default function UpdateIndicator() {
+ const [ pending, setPending ] = useState(pendingUpdate);
+
+ useEffect(() => {
+ return internalSubscribe('PWA', 'update', () => setPending(true));
+ });
+
+ if (!pending) return;
+ const theme = useContext(ThemeContext);
+
+ return (
+ <IconButton onClick={() => updateSW(true)}>
+ <Download size={22} color={theme.success} />
+ </IconButton>
+ )
+}
diff --git a/src/lib/eventEmitter.ts b/src/lib/eventEmitter.ts
index 669ad37..ae0ae52 100644
--- a/src/lib/eventEmitter.ts
+++ b/src/lib/eventEmitter.ts
@@ -20,3 +20,4 @@ export function internalEmit(ns: string, event: string, ...args: any[]) {
// - MessageBox/append
// - TextArea/focus
// - ReplyBar/add
+// - PWA/update
diff --git a/src/main.tsx b/src/main.tsx
index fbb4a2b..02c4364 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,9 +1,9 @@
-import { registerSW } from 'virtual:pwa-register'
-const updateSW = registerSW({
+import { registerSW } from 'virtual:pwa-register';
+import { internalEmit } from './lib/eventEmitter';
+
+export const updateSW = registerSW({
onNeedRefresh() {
- // ! FIXME: temp
- updateSW(true);
- // show a prompt to user
+ internalEmit('PWA', 'update');
},
onOfflineReady() {
console.info('Ready to work offline.');
diff --git a/src/pages/channels/actions/HeaderActions.tsx b/src/pages/channels/actions/HeaderActions.tsx
index d3f7eee..e0bfcdd 100644
--- a/src/pages/channels/actions/HeaderActions.tsx
+++ b/src/pages/channels/actions/HeaderActions.tsx
@@ -4,6 +4,7 @@ import { ChannelHeaderProps } from "../ChannelHeader";
import IconButton from "../../../components/ui/IconButton";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+import UpdateIndicator from "../../../components/common/UpdateIndicator";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { VoiceContext, VoiceOperationsContext, VoiceStatus } from "../../../context/Voice";
import { UserPlus, Cog, Sidebar as SidebarIcon, PhoneCall, PhoneOutgoing } from "@styled-icons/boxicons-regular";
@@ -15,6 +16,7 @@ export default function HeaderActions({ channel, toggleSidebar }: ChannelHeaderP
return (
<>
+ <UpdateIndicator />
{ channel.channel_type === "Group" && (
<>
<IconButton onClick={() =>
--
GitLab