improved useSubscribe

Wappsto · Dec 10, 2019 · 19b31d2 · 19b31d2
1 parent 0522db5
commit 19b31d2
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 24 deletions.
diff --git a/hooks/useSubscribe.js b/hooks/useSubscribe.js
@@ -1,43 +1,24 @@
 import { useEffect, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 import { updateStream } from '../util';
-import usePrevious from './usePrevious';
-
-const arrDiff = (a1=[], a2=[]) => {
-  const diff = [];
-  a1.forEach(item => {
-    if(!a2.find(item2 => item2.meta.id === item.meta.id)){
-      diff.push(item);
-    }
-  });
-  return diff;
-}
 
 const useSubscribe = (items) => {
   const dispatch = useDispatch();
   const arr = useMemo(() => items ? (items.constructor === Array ? items : [items]) : [], [items]);
-  const previousArr = usePrevious(arr);
 
   // subscribe to stream
   useEffect(() => {
-    const diff = arrDiff(arr, previousArr);
-    if(diff.length > 0){
-      updateStream(dispatch, diff.map(item => '/' + item.meta.type + '/' + item.meta.id), 'add');
-    }
+    updateStream(dispatch, arr.map(item => '/' + item.meta.type + '/' + item.meta.id), 'add');
     return () => {
-      const diff = arrDiff(previousArr, arr);
-      if(diff.length > 0){
-        updateStream(dispatch, diff.map(item => '/' + item.meta.type + '/' + item.meta.id), 'remove');
-      }
+      updateStream(dispatch, arr.map(item => '/' + item.meta.type + '/' + item.meta.id), 'remove');
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [items]);
 
+  // unsubscribe on unmount
   useEffect(() => {
     return () => {
-      if(arr.length > 0){
-        updateStream(dispatch, arr.map(item => '/' + item.meta.type + '/' + item.meta.id), 'remove');
-      }
+      updateStream(dispatch, arr.map(item => '/' + item.meta.type + '/' + item.meta.id), 'remove');
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

diff --git a/util/index.js b/util/index.js
@@ -12,7 +12,7 @@ export function getLastKey(data){
 
 export function getNextKey(data){
   const lastKey = getLastKey(data) || 0;
-  return parseInt(lastKey) + 1;;
+  return parseInt(lastKey) + 1;
 }
 
 function mergeUnique(arr1, arr2){
@@ -104,3 +104,24 @@ export function getServiceUrl(service, options){
   const version = options && options.hasOwnProperty('version') ? options.version : getServiceVersion(service);
   return config.baseUrl + (version ? '/' + version : '') + '/' + service;
 }
+
+export function matchObject(obj1, obj2) {
+  for (const key in obj2) {
+    if(obj1.hasOwnProperty(key)){
+      let left = obj1[key];
+      let right = obj2[key];
+      if (left && right && left.constructor !== right.constructor) {
+        return false;
+      } else if (typeof(left) === "object") {
+        if (!matchObject(left, right)) {
+          return false;
+        }
+      } else if (left !== right) {
+        return false;
+      }
+    } else {
+      return false;
+    }
+  }
+  return true;
+}