How to use the observable-hooks.useObservable function in observable-hooks

export const SearchBox: FC = props => {
  // Textarea also shares the text so only replace here
  const text = props.text.replace(/\s+/g, ' ')

  const [onSearchBoxFocusBlur, searchBoxFocusBlur$] = useObservableCallback(
    focusBlur
  )

  const [onSuggestFocusBlur, suggestFocusBlur$] = useObservableCallback(
    focusBlur
  )

  const [onShowSugget, onShowSugget$] = useObservableCallback(identity)

  const isShowSuggest = useObservableState(
    useObservable(
      inputs$ =>
        combineLatest(
          inputs$,
          merge(
            // only show suggest when start typing
            searchBoxFocusBlur$.pipe(filter(isFocus => !isFocus)),
            suggestFocusBlur$,
            onShowSugget$
          )
        ).pipe(
          map(([[enableSuggest, text], shouldShowSuggest]) =>
            Boolean(enableSuggest && text && shouldShowSuggest)
          ),
          distinctUntilChanged()
        ),
      [props.enableSuggest, props.text] as [boolean, string]

export const MenuBar: FC = props => {
  const { t } = useTranslate(['content', 'common'])

  const [updateProfileHeight, profileHeight$] = useObservableCallback(
    heightChangeTransform
  )

  const [updateSBHeight, searchBoxHeight$] = useObservableCallback(
    heightChangeTransform
  )

  // update panel min height
  useSubscription(
    useObservable(() =>
      combineLatest(profileHeight$, searchBoxHeight$).pipe(
        // a little delay for organic feeling
        debounceTime(100),
        map(heights => {
          const max = Math.max(...heights)
          return max > 0 ? max + 72 : 0
        })
      )
    ),
    props.onHeightChanged
  )

  return (
    <header>
      </header>

export const Suggests: React.FC = props => {
  const fetchFunc$ = useObservable(pluckFirst, [props.fetchFunc])
  return useObservableState(
    // A stream of React elements! I know it's mind-blowing.
    useObservable(
      inputs$ =>
        inputs$.pipe(
          filter(([text]) => text.length > 1),
          distinctUntilChanged(),
          switchMap(([text]) =>
            // delay in sub-stream so that users can see the
            // searching state quickly. But no actual request
            // is performed until the delay is hit.
            forkJoin(
              // minimum 1s delay to prevent flickering if user got really greate network condition
              timer(1000),
              timer(750).pipe(
                tap(() => console.log('>>> really start searching...')),

export const Suggests: React.FC = props => {
  const fetchFunc$ = useObservable(pluckFirst, [props.fetchFunc])
  return useObservableState(
    // A stream of React elements! I know it's mind-blowing.
    useObservable(
      inputs$ =>
        inputs$.pipe(
          filter(([text]) => text.length > 1),
          distinctUntilChanged(),
          switchMap(([text]) =>
            // delay in sub-stream so that users can see the
            // searching state quickly. But no actual request
            // is performed until the delay is hit.
            forkJoin(
              // minimum 1s delay to prevent flickering if user got really greate network condition
              timer(1000),
              timer(750).pipe(
                tap(() => console.log('>>> really start searching...')),
                withLatestFrom(fetchFunc$),
                switchMap(([, fetchFunc]) => fetchFunc(text))
              )

React.MouseEvent<element>
  &gt;(hoverWithDelay)

  const [onMouseOverOut, mouseOverOut$] = useObservableCallback&lt;
    boolean,
    React.MouseEvent<element>
  &gt;(hover)

  const [onFocusBlur, focusBlur$] = useObservableCallback(focusBlur)

  const [showHideProfiles, showHideProfiles$] = useObservableCallback(
    identity
  )

  const isShowProfiles = useObservableState(
    useObservable(() =&gt;
      merge(mouseOverOut$, mouseOverOutDelay$, focusBlur$, showHideProfiles$)
    ).pipe(debounceTime(100)),
    false
  )

  const listItem = props.profiles.map(p =&gt; {
    return {
      key: p.id,
      content: (
        <span>
          {getProfileName(p.name, props.t)}
        </span></element></element>

(props: SuggestProps, ref: React.Ref) => {
    return useObservableState(
      useObservable(
        inputs$ =>
          inputs$.pipe(
            map(([text]) => text),
            filter(Boolean),
            distinctUntilChanged(),
            debounceTime(750),
            switchMap(text =>
              from(
                message
                  .send<'GET_SUGGESTS'>({
                    type: 'GET_SUGGESTS',
                    payload: text
                  })
                  .catch(() => [] as readonly SuggestItem[])
              ).pipe(
                map(suggests => (

export function useInPanelSelect(
  touchMode: AppConfig['touchMode'],
  language: AppConfig['language'],
  doubleClickDelay: AppConfig['doubleClickDelay'],
  newSelection: (payload: Message<'SELECTION'>['payload']) => void
) {
  const [onMouseUp, mouseUp$] = useObservableCallback(
    event$ => event$.pipe(filter(e => e.button === 0))
  )

  const config$ = useObservable(identity, [touchMode, language] as const)

  const clickPeriodCount$ = useObservable(
    inputs$ =>
      inputs$.pipe(
        switchMap(([doubleClickDelay]) =>
          clickPeriodCountStream(mouseUp$, doubleClickDelay)
        )
      ),
    [doubleClickDelay] as const
  )

  const output$ = useObservable(() =>
    mouseUp$.pipe(
      withLatestFrom(config$),
      filter(([mouseup, [touchMode]]) => {
        if (touchMode) {

export const InputTimeAgo: React.FC = props => {
  const [text, diff] = useObservableState(
    useObservable(
      inputs$ =>
        inputs$.pipe(
          switchMap(([text]) =>
            interval(1000).pipe(
              startWith(-1),
              map(count => [text, fromNow(count + 1)] as [string, string])
            )
          )
        ),
      [props.text]
    )
  )!

  return (
    <div>
      You typed {text ? `"${text}"` : 'nothing'} {diff}.</div>

export const Notes: FC = props => {
  const { t } = useTranslate(['common', 'content'])
  const [isDirty, setDirty] = useState(false)
  const [isShowCtxTransList, setShowCtxTransList] = useState(false)

  const [word, setWord] = useState(props.wordEditor.word)
  const word$ = useObservable(pluckFirst, [word])

  const [ctxTransConfig, setCtxTransConfig] = useState(props.ctxTrans)
  useUpdateEffect(() => {
    setCtxTransConfig(props.ctxTrans)
  }, [props.ctxTrans])

  const [ctxTransResult, setCtxTransResult] = useState(() =>
    Object.keys(props.ctxTrans).reduce(
      (result, id) => {
        result[id] = ''
        return result
      },
      {} as CtxTranslateResults
    )
  )

export function useInPanelSelect(
  touchMode: AppConfig['touchMode'],
  language: AppConfig['language'],
  doubleClickDelay: AppConfig['doubleClickDelay'],
  newSelection: (payload: Message<'SELECTION'>['payload']) => void
) {
  const [onMouseUp, mouseUp$] = useObservableCallback(
    event$ => event$.pipe(filter(e => e.button === 0))
  )

  const config$ = useObservable(identity, [touchMode, language] as const)

  const clickPeriodCount$ = useObservable(
    inputs$ =>
      inputs$.pipe(
        switchMap(([doubleClickDelay]) =>
          clickPeriodCountStream(mouseUp$, doubleClickDelay)
        )
      ),
    [doubleClickDelay] as const
  )

  const output$ = useObservable(() =>
    mouseUp$.pipe(
      withLatestFrom(config$),
      filter(([mouseup, [touchMode]]) => {
        if (touchMode) {
          return false
        }