search

jiyuujin / rx-pokemon

https://rx-pokemon.vercel.app/
0 stars 0 forks source link

Hooks API + RxJS #1

Open jiyuujin opened 2 years ago

jiyuujin commented 2 years ago
jiyuujin commented 2 years ago

Use react-rxjs-elements

const stream$ = React.useMemo(() => {
    return fromFetch(
        `${process.env.REACT_APP_POKEMON_API}/pokemon?limit=200&offset=200`
    ).pipe(
        mergeMap((response) => response.json()),
        map((data) => (
            <div className="App">
                <div className="search">
                    <Search text={searchText} setText={handleInputClick} />
                </div>
                <div className="gallery">
                    <CardList data={data.results} search={searchText} />
                </div>
            </div>
        )),
        catchError(() => of(<div>Failed</div>)),
        startWith(<div>Loading..</div>)
    )
}, [])

return <$>{stream$}</$>