From 5d7a7fab0eed3625dacc1ed692a8db28cb29c139 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sat, 8 Jul 2023 18:47:59 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20(pwa)=20add=20the=20new=20version?=
 =?UTF-8?q?=20component=20from=20vite=20pwa=20plugin?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/bus/serviceWorkerEventBus.ts |  3 --
 src/components/NewVersion.vue    | 74 ++++++++++++++++++++------------
 src/styles/app.scss              |  3 +-
 src/views/HomeApp.vue            | 51 ++++++++--------------
 tsconfig.json                    |  2 +-
 5 files changed, 66 insertions(+), 67 deletions(-)
 delete mode 100644 src/bus/serviceWorkerEventBus.ts

diff --git a/src/bus/serviceWorkerEventBus.ts b/src/bus/serviceWorkerEventBus.ts
deleted file mode 100644
index b514a48..0000000
--- a/src/bus/serviceWorkerEventBus.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { createEventBus } from 'retrobus'
-
-export const serviceWorkerBusEvent = createEventBus<void>('new-version')
diff --git a/src/components/NewVersion.vue b/src/components/NewVersion.vue
index 834b4e6..562f9ac 100644
--- a/src/components/NewVersion.vue
+++ b/src/components/NewVersion.vue
@@ -1,32 +1,50 @@
+<script setup lang="ts">
+import { useRegisterSW } from 'virtual:pwa-register/vue'
+import { ref } from 'vue'
+
+const { offlineReady, needRefresh, updateServiceWorker } = useRegisterSW()
+
+const close = async () => {
+  offlineReady.value = false
+  needRefresh.value = false
+}
+const devMode = ref(import.meta.env.DEV)
+</script>
+
 <template>
-  <aside v-if="hasNewVersion" class="new-version">
-    <button class="button is-primary" @click="reload">
-      new version available
+  <div
+    v-if="devMode || offlineReady || needRefresh"
+    class="pwa-toast"
+    role="alert"
+  >
+    <div>
+      <span v-if="offlineReady">App ready to work offline </span>
+      <span v-else>
+        New content available, click on reload button to update.
+      </span>
+    </div>
+    <button
+      class="button is-primary"
+      v-if="needRefresh"
+      @click="updateServiceWorker()"
+    >
+      Reload
     </button>
-  </aside>
+    <button class="button" @click="close">Close</button>
+  </div>
 </template>
 
-<script lang="ts">
-import { serviceWorkerBusEvent } from '@/bus/serviceWorkerEventBus'
-import { defineComponent, onMounted, ref } from 'vue'
-
-export default defineComponent({
-  name: 'NewVersion',
-  setup() {
-    const hasNewVersion = ref(false)
-    onMounted(() => {
-      serviceWorkerBusEvent.addEventBusListener(
-        () => {
-          hasNewVersion.value = true
-        },
-        {
-          once: true,
-          retro: true
-        }
-      )
-    })
-
-    return { hasNewVersion, reload: () => location.reload() }
-  }
-})
-</script>
+<style scoped>
+.pwa-toast {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  margin: 1rem;
+  padding: 0.5rem;
+  width: 200px;
+  color: var(--primary-color);
+  border: var(--primary-color) 2px solid;
+  border-radius: 4px;
+  background-color: var(--background-color);
+}
+</style>
diff --git a/src/styles/app.scss b/src/styles/app.scss
index eca2428..2d2b26a 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -19,7 +19,8 @@ $light-link: lighten($link, 45%);
 $family-primary: 'Courier Prime', monospace;
 
 :root {
-  --font-family: var(#{$family-primary});
+  --primary-color: #{$primary};
+  --font-family: #{$family-primary};
   --font-color: #4a4a4a;
   --light-link: #{$light-link};
   --background-color: #ffffff;
diff --git a/src/views/HomeApp.vue b/src/views/HomeApp.vue
index 6e2ee0c..8ab189c 100644
--- a/src/views/HomeApp.vue
+++ b/src/views/HomeApp.vue
@@ -1,18 +1,9 @@
-<template>
-  <div v-if="!user || !repo" class="home content">
-    <authorize-user class="authorize" />
-    <new-version class="new-version" />
-    <welcome-world />
-  </div>
-  <flux-note v-else :key="routeKey" :user="user" :repo="repo" />
-</template>
-
-<script lang="ts">
-import { defineComponent, defineAsyncComponent, computed } from 'vue'
-import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
-import NewVersion from '@/components/NewVersion.vue'
+<script setup lang="ts">
 import AuthorizeUser from '@/components/AuthorizeUser.vue'
+import NewVersion from '@/components/NewVersion.vue'
 import { useComputeBacklinks } from '@/hooks/useComputeBacklinks.hook'
+import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
+import { computed, defineAsyncComponent } from 'vue'
 
 const FluxNote = defineAsyncComponent(() => import('@/components/FluxNote.vue'))
 
@@ -20,30 +11,22 @@ const WelcomeWorld = defineAsyncComponent(
   () => import('@/components/WelcomeWorld.vue')
 )
 
-export default defineComponent({
-  name: 'HomeApp',
-  components: {
-    WelcomeWorld,
-    FluxNote,
-    NewVersion,
-    AuthorizeUser
-  },
-  props: {
-    user: { type: String, required: false, default: '' },
-    repo: { type: String, required: false, default: '' }
-  },
-  setup(props) {
-    const { resetStackedNotes } = useQueryStackedNotes()
-    useComputeBacklinks()
+const props = defineProps<{ user: string; repo: string }>()
 
-    return {
-      resetStackedNotes,
-      routeKey: computed(() => `${props.user}-${props.repo}`)
-    }
-  }
-})
+useQueryStackedNotes()
+useComputeBacklinks()
+const routeKey = computed(() => `${props.user}-${props.repo}`)
 </script>
 
+<template>
+  <div v-if="!user || !repo" class="home content">
+    <authorize-user class="authorize" />
+    <welcome-world />
+  </div>
+  <flux-note v-else :key="routeKey" :user="user" :repo="repo" />
+  <new-version class="new-version" />
+</template>
+
 <style lang="scss" scoped>
 .home {
   display: flex;
diff --git a/tsconfig.json b/tsconfig.json
index 4322347..92be9ea 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,7 +12,7 @@
     "sourceMap": true,
     "baseUrl": ".",
     "resolveJsonModule": true,
-    "types": ["node", "vite/client"],
+    "types": ["node", "vite/client", "vite-plugin-pwa/vue"],
     "paths": {
       "@/*": ["src/*"]
     },