objects 0.2.0 example

example.tsx

import React from 'react'

import { useStable, useWatch } from '@objects/hooks'
import { through, map, debounce } from '@objects/operators'

interface Search {
  title: string
}

interface Data {
  results: string[]
}

export const MovieSearch = () => {
  // Creates a stable object reference
  const [search] = useStable(() => ({
    title: '',
  }) as Search)
  
  // Connects changes in the object's properties to component state updates
  useWatch(search)()
  
  // Connects changes in the object's title property to effects and computed state
  const movies: string[] = useWatch(search).title(
    through(
      debounce(),
      map((title: string) => (
        fetch(`/api?q=${title}`)
          .then(resp => resp.json() as Promise<Data>)
          .then(data => data.results)
      )),
    ),
    []
  )
  
  return (
    <div>
      <input
        value={search.title}
        onChange={(e) => {
          // Mutate the object!
          search.title = e.target.value
        }}
      />
      <ul>
        {movies.length ? movies.map(movie => <li>{movie}</li>) : <li>No Results</li>}    
      </ul>
    </div>
  )
}