fix(proxy-state-tree): keep track of tracking, avoiding async access to affect tracking

Author: christianalfoni

packages/node_modules/overmind-react/src/index.ts

@@ -145,6 +145,7 @@ export const createConnect = <A extends Overmind<Configuration>>(
       componentInstanceId = componentInstanceId++
       currentFlushId = 0
       componentDidMount() {
+        console.log(this.tree)
         overmind.eventHub.emitAsync(EventType.COMPONENT_ADD, {
           componentId: populatedComponent.__componentId,
           componentInstanceId: this.componentInstanceId,

packages/node_modules/proxy-state-tree/src/TrackStateTree.ts

@@ -10,6 +10,7 @@ export class TrackStateTree<T extends object> implements ITrackStateTree<T> {
   master: IProxyStateTree<T>
   pathDependencies: Set<string> = new Set()
   callback: ITrackCallback
+  shouldTrack: boolean = false
   state: T
   proxifier: IProxifier<T>
   constructor(master: IProxyStateTree<T>) {
@@ -24,6 +25,10 @@ export class TrackStateTree<T extends object> implements ITrackStateTree<T> {
     return true
   }
   addTrackingPath(path: string) {
+    if (!this.shouldTrack) {
+      return
+    }
+
     this.pathDependencies.add(path)
 
     if (this.callback) {
@@ -32,7 +37,8 @@ export class TrackStateTree<T extends object> implements ITrackStateTree<T> {
   }
   track(cb?: ITrackCallback) {
     this.master.changeTrackStateTree(this)
-
+    this.shouldTrack = true
+    setTimeout(() => (this.shouldTrack = false))
     if (this.callback) {
       for (let path of this.pathDependencies) {
         this.master.removePathDependency(path, this.callback)

packages/overmind-website/src/app/index.ts

@@ -16,8 +16,6 @@ declare module 'overmind' {
   interface IConfig extends TConfig<typeof config> {}
 }
 
-export type Connect = TConnect<typeof config>
-
 const app = new Overmind(
   config,
   process.env.NODE_ENV === 'production'
@@ -28,5 +26,3 @@ const app = new Overmind(
 )
 
 export const useOvermind = createHook(app)
-
-export const connect = createConnect(app)

packages/overmind-website/src/app/state.ts

@@ -25,7 +25,6 @@ type State = {
   isLoadingSearchResult: boolean
   searchResult: SearchResult[]
   showSearchResult: boolean
-  test: Derive<State, Guide[]>
 }
 
 const state: State = {
@@ -44,7 +43,6 @@ const state: State = {
   isLoadingSearchResult: false,
   searchResult: [],
   showSearchResult: false,
-  test: (state) => state.guides.filter((guide) => guide.type === 'beginner'),
 }
 
 export default state

packages/overmind-website/src/components/App/index.tsx

@@ -1,5 +1,5 @@
 import { createElement, SFC, useRef, useEffect } from 'react'
-import { useOvermind, connect, Connect } from '../../app'
+import { useOvermind } from '../../app'
 import * as styles from './styles'
 import TopBar from '../TopBar'
 import FrontPage from '../FrontPage'
@@ -30,7 +30,8 @@ const fadeInPage = () => {
   logo.style.opacity = '0'
 }
 
-const App: SFC<Connect> = ({ overmind: { state } }) => {
+const App: SFC = () => {
+  const { state } = useOvermind()
   const mainRef = useRef(null)
   const isMobile = useIsMobile()
   useScrollToTop(state.page)
@@ -53,4 +54,4 @@ const App: SFC<Connect> = ({ overmind: { state } }) => {
   )
 }
 
-export default connect(App)
+export default App