From 7697a015de6b158569ad0acb159329c84fae8654 Mon Sep 17 00:00:00 2001
From: Hao Wu <wuhaoecho@gmail.com>
Date: Mon, 30 Sep 2024 19:46:47 +0800
Subject: [PATCH] Refactor OnlineStatusIndicator to use custom hook
 `useOnlineStatus`.

---
 web/src/components/OnlineStatusIndicator.vue | 16 ++------------
 web/src/hooks/useOnlineStatus.js             | 22 ++++++++++++++++++++
 2 files changed, 24 insertions(+), 14 deletions(-)
 create mode 100644 web/src/hooks/useOnlineStatus.js

diff --git a/web/src/components/OnlineStatusIndicator.vue b/web/src/components/OnlineStatusIndicator.vue
index a010483..aff37ba 100644
--- a/web/src/components/OnlineStatusIndicator.vue
+++ b/web/src/components/OnlineStatusIndicator.vue
@@ -6,23 +6,11 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue';
 
-const isOnline = ref(navigator.onLine);
+import { useOnlineStatus } from '../hooks/useOnlineStatus';
 
-const updateOnlineStatus = () => {
-  isOnline.value = navigator.onLine;
-};
+const { isOnline } = useOnlineStatus();import { ref, onMounted, onUnmounted } from 'vue';
 
-onMounted(() => {
-  window.addEventListener('online', updateOnlineStatus);
-  window.addEventListener('offline', updateOnlineStatus);
-});
-
-onUnmounted(() => {
-  window.removeEventListener('online', updateOnlineStatus);
-  window.removeEventListener('offline', updateOnlineStatus);
-});
 </script>
 
 <style scoped>
diff --git a/web/src/hooks/useOnlineStatus.js b/web/src/hooks/useOnlineStatus.js
new file mode 100644
index 0000000..a0c4267
--- /dev/null
+++ b/web/src/hooks/useOnlineStatus.js
@@ -0,0 +1,22 @@
+// src/composables/useOnlineStatus.js
+import { ref, onMounted, onUnmounted } from 'vue';
+
+export function useOnlineStatus() {
+  const isOnline = ref(navigator.onLine);
+
+  const updateOnlineStatus = () => {
+    isOnline.value = navigator.onLine;
+  };
+
+  onMounted(() => {
+    window.addEventListener('online', updateOnlineStatus);
+    window.addEventListener('offline', updateOnlineStatus);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('online', updateOnlineStatus);
+    window.removeEventListener('offline', updateOnlineStatus);
+  });
+
+  return { isOnline };
+}