How to use observable-hooks - 10 common examples

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))
              )

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)
          ),

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

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

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$),

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()
        ),

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>