Skip to content

Instantly share code, notes, and snippets.

@shiftyp

shiftyp/example.tsx

Last active August 22, 2020 17:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save shiftyp/1a4fa5e28343b2aedee7a93c355b41c1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save shiftyp/1a4fa5e28343b2aedee7a93c355b41c1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. shiftyp revised this gist Aug 22, 2020. No changes.
  2. shiftyp revised this gist Aug 22, 2020. 1 changed file with 9 additions and 13 deletions.
    22 changes: 9 additions & 13 deletions example.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    import React from 'react'

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

    interface Search {
    title: string
    @@ -13,31 +13,28 @@ interface Data {

    export const MovieSearch = () => {
    // Creates a stable object reference
    const [search] = useStable(() => {
    const [search] = useStable(() => ({
    title: '',
    } as Search)
    }) 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 = useWatch(search).title(
    const movies: string[] = useWatch(search).title(
    through(
    map((title: string) => title.trim()),
    filter((title: string) => title.length),
    dedupe(),
    debounce(),
    map((title: string) => (
    fetch(`/api?q=${title}`)
    .then(resp => resp.json()) as Promise<Data>
    .then(resp => resp.json() as Promise<Data>)
    .then(data => data.results)
    )),
    map((data: Data) => data.results)
    ),
    []
    )

    return (
    <>
    <div>
    <input
    value={search.title}
    onChange={(e) => {
    @@ -48,7 +45,6 @@ export const MovieSearch = () => {
    <ul>
    {movies.length ? movies.map(movie => <li>{movie}</li>) : <li>No Results</li>}
    </ul>
    </>
    </div>
    )
    }

    }
  3. shiftyp revised this gist Aug 22, 2020. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion example.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    import React from 'react'

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

    interface Search {
    title: string
    @@ -26,6 +26,7 @@ export const MovieSearch = () => {
    map((title: string) => title.trim()),
    filter((title: string) => title.length),
    dedupe(),
    debounce(),
    map((title: string) => (
    fetch(`/api?q=${title}`)
    .then(resp => resp.json()) as Promise<Data>
  4. shiftyp revised this gist Aug 22, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion example.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -20,7 +20,7 @@ export const MovieSearch = () => {
    // Connects changes in the object's properties to component state updates
    useWatch(search)()

    // Connects changes in the object's properties to computed state
    // Connects changes in the object's title property to effects and computed state
    const movies = useWatch(search).title(
    through(
    map((title: string) => title.trim()),
  5. shiftyp revised this gist Aug 22, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion example.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -18,7 +18,7 @@ export const MovieSearch = () => {
    } as Search)

    // Connects changes in the object's properties to component state updates
    useWatch(search).title()
    useWatch(search)()

    // Connects changes in the object's properties to computed state
    const movies = useWatch(search).title(
  6. shiftyp revised this gist Aug 22, 2020. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions example.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -12,12 +12,15 @@ interface Data {
    }

    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).title()

    // Connects changes in the object's properties to computed state
    const movies = useWatch(search).title(
    through(
    map((title: string) => title.trim()),
    @@ -37,6 +40,7 @@ export const MovieSearch = () => {
    <input
    value={search.title}
    onChange={(e) => {
    // Mutate the object!
    search.title = e.target.value
    }}
    />
  7. shiftyp revised this gist Aug 22, 2020. 1 changed file with 6 additions and 1 deletion.
    7 changes: 6 additions & 1 deletion example.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -34,7 +34,12 @@ export const MovieSearch = () => {

    return (
    <>
    <Input search={search} />
    <input
    value={search.title}
    onChange={(e) => {
    search.title = e.target.value
    }}
    />
    <ul>
    {movies.length ? movies.map(movie => <li>{movie}</li>) : <li>No Results</li>}
    </ul>
  8. shiftyp revised this gist Aug 22, 2020. 1 changed file with 5 additions and 8 deletions.
    13 changes: 5 additions & 8 deletions example.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -23,10 +23,10 @@ export const MovieSearch = () => {
    map((title: string) => title.trim()),
    filter((title: string) => title.length),
    dedupe(),
    map((title: string) =>
    map((title: string) => (
    fetch(`/api?q=${title}`)
    .then(resp => resp.json()) as Promise<Data>
    ),
    )),
    map((data: Data) => data.results)
    ),
    []
    @@ -36,12 +36,9 @@ export const MovieSearch = () => {
    <>
    <Input search={search} />
    <ul>
    {
    movies.length ?
    movies.map(movie => <li>{movie}</li>) :
    <li>No Results</li>
    }
    {movies.length ? movies.map(movie => <li>{movie}</li>) : <li>No Results</li>}
    </ul>
    </>
    )
    }
    }

  9. shiftyp revised this gist Aug 22, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion example.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -24,7 +24,7 @@ export const MovieSearch = () => {
    filter((title: string) => title.length),
    dedupe(),
    map((title: string) =>
    fetch(`/api/movies?title=${title}`)
    fetch(`/api?q=${title}`)
    .then(resp => resp.json()) as Promise<Data>
    ),
    map((data: Data) => data.results)
  10. shiftyp revised this gist Aug 22, 2020. 1 changed file with 3 additions and 9 deletions.
    12 changes: 3 additions & 9 deletions example.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -20,27 +20,21 @@ export const MovieSearch = () => {

    const movies = useWatch(search).title(
    through(
    map((title: string) => title.trim())
    map((title: string) => title.trim()),
    filter((title: string) => title.length),
    dedupe(),
    map((title: string) =>
    fetch(`/api/movies?title=${title}`)
    .then(resp => resp.json()) as Promise<Data>
    )
    ),
    map((data: Data) => data.results)
    ),
    []
    )

    return (
    <>
    <input
    placeholder="Search for movies!"
    value={search.title}
    onChange={(e) => {
    search.title = e.target.value
    }}
    />
    <Input search={search} />
    <ul>
    {
    movies.length ?
  11. shiftyp revised this gist Aug 22, 2020. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions example.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    import React from 'react'

    import { useCreate, useWatch } from '@objects/hooks'
    import { useStable, useWatch } from '@objects/hooks'
    import { map, filter, dedupe } from '@objects/operators'

    interface Search {
    @@ -12,7 +12,7 @@ interface Data {
    }

    export const MovieSearch = () => {
    const [search] = useCreate(() => {
    const [search] = useStable(() => {
    title: '',
    } as Search)

  12. shiftyp renamed this gist Aug 22, 2020. 1 changed file with 0 additions and 0 deletions.
    0 example.ts → example.tsx
    View file
    File renamed without changes.
  13. shiftyp revised this gist Aug 22, 2020. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions example.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -16,6 +16,8 @@ export const MovieSearch = () => {
    title: '',
    } as Search)

    useWatch(search).title()

    const movies = useWatch(search).title(
    through(
    map((title: string) => title.trim())
  14. shiftyp revised this gist Aug 22, 2020. 1 changed file with 20 additions and 19 deletions.
    39 changes: 20 additions & 19 deletions example.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,7 @@
    import React from 'react'

    import { useCreate, useWatch } from '../../core'
    import { useCreate, useWatch } from '@objects/hooks'
    import { map, filter, dedupe } from '@objects/operators'

    interface Search {
    title: string
    @@ -20,31 +21,31 @@ export const MovieSearch = () => {
    map((title: string) => title.trim())
    filter((title: string) => title.length),
    dedupe(),
    map((title: string) => fetch(`/api/movies?title=${title}`).then(resp => resp.json()) as Promise<Data>)
    map((title: string) =>
    fetch(`/api/movies?title=${title}`)
    .then(resp => resp.json()) as Promise<Data>
    )
    map((data: Data) => data.results)
    ),
    []
    )

    return (
    <>
    <Title search={search} />
    <Movies movies={movies} />
    <input
    placeholder="Search for movies!"
    value={search.title}
    onChange={(e) => {
    search.title = e.target.value
    }}
    />
    <ul>
    {
    movies.length ?
    movies.map(movie => <li>{movie}</li>) :
    <li>No Results</li>
    }
    </ul>
    </>
    )
    }

    export const Title: React.FC<{
    editable: Data
    }> = ({ editable }) => {
    watch(editable).title()

    return (
    <input
    value={editable.title}
    onChange={(e) => {
    editable.title = e.target.value
    }}
    />
    )
    }
  15. shiftyp revised this gist Aug 22, 2020. 1 changed file with 27 additions and 5 deletions.
    32 changes: 27 additions & 5 deletions example.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -1,15 +1,37 @@
    import React from 'react'

    import { watch } from '../../core'
    import { useCreate, useWatch } from '../../core'

    interface Data {
    interface Search {
    title: string
    }

    interface Data {
    results: string[]
    }

    export const MovieSearch = () => {
    const [search] = create({
    title:
    })
    const [search] = useCreate(() => {
    title: '',
    } as Search)

    const movies = useWatch(search).title(
    through(
    map((title: string) => title.trim())
    filter((title: string) => title.length),
    dedupe(),
    map((title: string) => fetch(`/api/movies?title=${title}`).then(resp => resp.json()) as Promise<Data>)
    map((data: Data) => data.results)
    ),
    []
    )

    return (
    <>
    <Title search={search} />
    <Movies movies={movies} />
    </>
    )
    }

    export const Title: React.FC<{
  16. shiftyp revised this gist Aug 22, 2020. No changes.
  17. shiftyp created this gist Aug 22, 2020.
    28 changes: 28 additions & 0 deletions example.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@
    import React from 'react'

    import { watch } from '../../core'

    interface Data {
    title: string
    }

    export const MovieSearch = () => {
    const [search] = create({
    title:
    })
    }

    export const Title: React.FC<{
    editable: Data
    }> = ({ editable }) => {
    watch(editable).title()

    return (
    <input
    value={editable.title}
    onChange={(e) => {
    editable.title = e.target.value
    }}
    />
    )
    }