Refactor useDynamicAddresses to use vueuse utilities

learningequality · May 27, 2021 · 6146bab · 6146bab
1 parent a5d6ad5
commit 6146bab
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 22 deletions.
diff --git a/kolibri/core/assets/src/views/sync/SelectAddressModalGroup/useDynamicAddresses.js b/kolibri/core/assets/src/views/sync/SelectAddressModalGroup/useDynamicAddresses.js
@@ -4,7 +4,9 @@ import {
   onBeforeMount,
   onBeforeUnmount,
   getCurrentInstance,
+  watch,
 } from '@vue/composition-api';
+import { get, set, useIntervalFn } from '@vueuse/core';
 import { fetchDynamicAddresses } from './api';
 
 const Stages = Object.freeze({
@@ -17,53 +19,58 @@ export default function useDynamicAddresses(props) {
   const { fetchAddressArgs, discoverySpinnerTime } = props;
   const addresses = ref([]);
   const stage = ref('');
-  const intervalId = ref('');
   const discoveredAddressesInitiallyFetched = ref(false);
   const $parent = getCurrentInstance().proxy.$parent;
 
   function parentEmit(event, ...args) {
     $parent.$emit(event, ...args);
   }
 
+  const setStage = newStage => set(stage, newStage);
+
   function discoverPeers() {
     parentEmit('started_peer_discovery');
-    stage.value = Stages.PEER_DISCOVERY_STARTED;
+    setStage(Stages.PEER_DISCOVERY_STARTED);
     return fetchDynamicAddresses(fetchAddressArgs)
       .then(devices => {
-        addresses.value = devices;
+        set(addresses, devices);
         parentEmit('finished_peer_discovery');
         setTimeout(() => {
-          stage.value = Stages.PEER_DISCOVERY_SUCCESSFUL;
+          setStage(Stages.PEER_DISCOVERY_SUCCESSFUL);
         }, discoverySpinnerTime);
-        discoveredAddressesInitiallyFetched.value = true;
+        set(discoveredAddressesInitiallyFetched, true);
       })
       .catch(() => {
         parentEmit('peer_discovery_failed');
-        stage.value = Stages.PEER_DISCOVERY_FAILED;
+        setStage(Stages.PEER_DISCOVERY_FAILED);
       });
   }
 
   // Start polling
+  const pollForPeers = useIntervalFn(
+    () => {
+      discoverPeers();
+    },
+    5000,
+    false
+  );
+
   onBeforeMount(() => {
     discoverPeers();
-    if (!intervalId.value) {
-      intervalId.value = setInterval(discoverPeers, 5000);
-    }
+    pollForPeers.resume();
   });
 
   // Stop polling
   onBeforeUnmount(() => {
-    if (intervalId.value) {
-      intervalId.value = clearInterval(intervalId.value);
-    }
+    pollForPeers.pause();
   });
 
   const discoveringPeers = computed(() => {
-    return stage.value === Stages.PEER_DISCOVERY_STARTED;
+    return get(stage) === Stages.PEER_DISCOVERY_STARTED;
   });
 
   const discoveryFailed = computed(() => {
-    return stage.value === Stages.PEER_DISCOVERY_FAILED;
+    return get(stage) === Stages.PEER_DISCOVERY_FAILED;
   });
 
   return {

diff --git a/kolibri/core/assets/src/views/sync/SelectAddressModalGroup/useSavedAddresses.js b/kolibri/core/assets/src/views/sync/SelectAddressModalGroup/useSavedAddresses.js
@@ -16,19 +16,17 @@ export default function useSavedAddresses(props, context) {
   const stage = ref('');
   const savedAddressesInitiallyFetched = ref(false);
 
-  function updateStage(newStage) {
-    set(stage, newStage);
-  }
+  const setStage = newStage => set(stage, newStage);
 
   function removeSavedAddress(id) {
-    updateStage(Stages.DELETING_ADDRESS);
+    setStage(Stages.DELETING_ADDRESS);
     return deleteAddress(id)
       .then(() => {
         set(
           addresses,
           get(addresses).filter(a => a.id !== id)
         );
-        updateStage(Stages.DELETING_SUCCESSFUL);
+        setStage(Stages.DELETING_SUCCESSFUL);
         context.emit('removed_address');
       })
       .catch(() => {
@@ -47,16 +45,16 @@ export default function useSavedAddresses(props, context) {
   });
 
   function refreshSavedAddressList() {
-    updateStage(Stages.FETCHING_ADDRESSES);
+    setStage(Stages.FETCHING_ADDRESSES);
     set(addresses, []);
     return fetchStaticAddresses(get(fetchAddressArgs))
       .then(addrs => {
         set(addresses, [...addrs]);
-        updateStage(Stages.FETCHING_SUCCESSFUL);
+        setStage(Stages.FETCHING_SUCCESSFUL);
         set(savedAddressesInitiallyFetched, true);
       })
       .catch(() => {
-        updateStage(Stages.FETCHING_FAILED);
+        setStage(Stages.FETCHING_FAILED);
       });
   }