From 3981ad42c5dec5589e494585e921354cf39ac399 Mon Sep 17 00:00:00 2001
From: Julien Calixte <juliencalixte@gmail.com>
Date: Sat, 25 Jul 2020 14:05:55 +0200
Subject: [PATCH] =?UTF-8?q?:sparkles:=20(new=20version)=20reload=20new?=
 =?UTF-8?q?=E2=80=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                     | 13 +++++++++
 src/assets/reload.svg           |  4 +++
 src/components/SWNewVersion.vue | 47 +++++++++++++++++++++++++++++++++
 3 files changed, 64 insertions(+)
 create mode 100644 src/assets/reload.svg
 create mode 100644 src/components/SWNewVersion.vue

diff --git a/src/App.vue b/src/App.vue
index cdc5f4e..6a16f9f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,9 +2,22 @@
   <div id="app">
     <img class="logo" src="@/assets/logo.svg" alt="binôme" />
     <router-view />
+    <SWNewVersion />
   </div>
 </template>
 
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api'
+import SWNewVersion from '@/components/SWNewVersion.vue'
+
+export default defineComponent({
+  name: 'App',
+  components: {
+    SWNewVersion
+  }
+})
+</script>
+
 <style lang="scss">
 @import '@/styles/app';
 
diff --git a/src/assets/reload.svg b/src/assets/reload.svg
new file mode 100644
index 0000000..5a0a0d1
--- /dev/null
+++ b/src/assets/reload.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-rotate-clockwise" width="76" height="76" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3a47" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z"/>
+  <path d="M4.05 11a8 8 0 1 1 .5 4m-.5 5v-5h5" />
+</svg>
\ No newline at end of file
diff --git a/src/components/SWNewVersion.vue b/src/components/SWNewVersion.vue
new file mode 100644
index 0000000..b583f71
--- /dev/null
+++ b/src/components/SWNewVersion.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="sw-new-version" v-if="newVersion">
+    <button @click="reload">
+      <img src="@/assets/reload.svg" alt="reload" />
+    </button>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, onMounted } from '@vue/composition-api'
+import { serviceWorkerVersionListener } from 'sw-new-version'
+
+export default defineComponent({
+  name: 'SWNewVersion',
+  setup() {
+    const newVersion = ref(serviceWorkerVersionListener.getNewVersion)
+
+    onMounted(() => {
+      serviceWorkerVersionListener.listenToNewVersion(
+        (version) => (newVersion.value = version)
+      )
+    })
+
+    return {
+      reload: () => location.reload(true)
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+$size: 25px;
+
+.sw-new-version {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+
+  button {
+    padding: 0.5rem;
+    img {
+      width: $size;
+      height: $size;
+    }
+  }
+}
+</style>