useComputed hook

Author: himanshu-satija

src/hooks/useComputeHook.tsx src/hooks/useComputed.tsxsrc/hooks/useComputeHook.tsx renamed to src/hooks/useComputed.tsx

@@ -1,36 +1,28 @@
 import { useEffect, useState, useContext } from 'react';
-// @ts-ignore
 import SyncStateReactContext from '../components/Context';
-import { produceWithPatches, enablePatches } from 'immer';
 import { ComputeCallback, DocStore } from '@syncstate/core';
-enablePatches();
-
-//create your forceUpdate hook
-function useForceUpdate() {
-  const [value, setValue] = useState(0); // integer state
-  return () => setValue(value => ++value); // update the state to force render
-}
 
 export function useComputed(subtree: string, computeCallback: ComputeCallback) {
-  // const forceUpdate = useForceUpdate();
   const store: DocStore = useContext(SyncStateReactContext);
 
   const [computedValue, setComputedValue] = useState(undefined);
 
   useEffect(() => {
-    const dispose = store.compute(subtree, (getValue, change) => {
+    const dispose = store.compute(subtree, (getValue: any, change: any) => {
       console.log('$$$$compute observer hook');
       const computed = computeCallback(getValue, change);
 
       setComputedValue(computed);
     });
+
+    return dispose;
   }, []);
 
   console.log('computed value through hook', computedValue);
 
   return [computedValue];
 }
 
-// export function useDoc(path: string = '', depth: number = 1) {
-//   return useSyncState('doc', path, depth);
-// }
+export function useComputedDoc(computeCallback: ComputeCallback) {
+  return useComputed('doc', computeCallback);
+}

src/hooks/useDoc.ts

@@ -1,7 +1,5 @@
 import { useEffect, useState, useContext } from 'react';
 import SyncStateReactContext from '../components/Context';
-import { produceWithPatches, enablePatches } from 'immer';
-enablePatches();
 
 //create your forceUpdate hook
 function useForceUpdate() {

src/index.tsx

@@ -1,3 +1,4 @@
 export { useDoc, useSyncState } from './hooks/useDoc';
+export { useComputed } from './hooks/useComputed';
 export { Provider } from './components/Provider';
 export { SyncStateReactContext } from './components/Context';