How to use the effector.guard function in effector

<ol>
      
    </ol>
    
    <h3>Users:</h3>
    
    
  
)

export const installHistory = app.createEvent()
const changeLocation = app.createEvent()

// triggered when current location not equal new location
// and new location is valid user ID
const onValidLocation = guard(changeLocation, {
  filter: sample({
    source: combine({loc: location$, users: userList}),
    clock: changeLocation,
    fn: ({loc, users}, path) =&gt;
      loc !== path &amp;&amp; users.includes(path.replace('/user/', '')),
  }),
})

installHistory.watch(history =&gt; {
  const locationUpdate = scopeBind(changeLocation)
  history.listen(location =&gt; {
    locationUpdate(location.pathname)
  })
})

forward({

<ol>
      
    </ol>
    
    <h3>Users:</h3>
    
    
  
)

export const installHistory = app.createEvent()
const changeLocation = app.createEvent()

// triggered when current location not equal new location
// and new location is valid user ID
const onValidLocation = guard(changeLocation, {
  filter: sample({
    source: location$,
    clock: changeLocation,
    fn: (loc, path) =&gt; loc !== path &amp;&amp; path.slice(1) in users,
  }),
})

installHistory.watch(history =&gt; {
  const locationUpdate = scopeBind(changeLocation)
  history.listen(location =&gt; {
    locationUpdate(location.pathname)
  })
})

forward({
  from: startClient,

typeNode.style.opacity = '1'
  typeNode.style.visibility = 'inherit'
})
guard({
  source: hideTypeNode,
  filter: typeHoverToggle,
}).watch(() => {
  typeNode.style.opacity = '0'
  typeNode.style.visibility = 'hidden'
})
guard({
  source: typeAtPos.fail,
  filter: typeHoverToggle,
  target: hideTypeNode,
})
guard({
  source: typeHint.map(data => {
    if (data === null) return 'Loading...'
    return data
  }),
  filter: typeHoverToggle,
}).watch(hint => {
  typeNode.innerText = hint
})

}))
    .on(clear, ({ states, head }) => ({
      states: [states[head]],
      head: 0
    }));

  const current = history.map(({ states, head }) => states[head]);

  const shouldSave = createStore({
    next: initialState,
    prev: initialState
  })
    .on(store, ({ next: prev }, next) => ({ next, prev }))
    .map(({ next, prev }) => filter(next, prev));

  guard({
    source: sample(store, merge(events)),
    filter: shouldSave,
    target: push
  });

  forward({
    from: current,
    to: store
  });

  return { undo, redo, clear, history };
}

}
  performLint()
})

typeErrors
  .on(checkContent.done, (state, {result}) => {
    if (result.code === 'fail') return state
    return result.code
  })
  .reset(checkContent.fail)

typeHint
  //$todo
  .on(typeAtPos.done, (_, {result}) => result.code.c)
  .reset(typeAtPos.fail)
guard({
  source: showTypeNode,
  filter: typeHoverToggle,
}).watch(() => {
  typeNode.style.opacity = '1'
  typeNode.style.visibility = 'inherit'
})
guard({
  source: hideTypeNode,
  filter: typeHoverToggle,
}).watch(() => {
  typeNode.style.opacity = '0'
  typeNode.style.visibility = 'hidden'
})
guard({
  source: typeAtPos.fail,
  filter: typeHoverToggle,

forward,
  sample,
  guard,
  type Effect,
  type Store,
  type Event,
} from 'effector'
import {sourceCode} from '../editor/state'
import {shareCode} from '../graphql'
import {isShareAPISupported} from '../device'

const pressCtrlS = createEvent()

sample({
  source: sourceCode,
  clock: guard(pressCtrlS, {
    filter: shareCode.pending.map(pending => !pending),
  }),
  target: shareCode,
})

document.addEventListener(
  'keydown',
  e => {
    if ((e.metaKey || e.ctrlKey) && e.keyCode === 83) {
      e.preventDefault()
      pressCtrlS()
    }
  },
  false,
)