Refactor OnlineStatusIndicator to use custom hook useOnlineStatus.

swuecho · Sep 30, 2024 · 7697a01 · 7697a01
1 parent a01badf
commit 7697a01
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 14 deletions.
diff --git 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
@@ -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 };
+}