Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* abort and demos * maybe idempotent-babel-polyfill * remove dist * Update README.md * wrapping up, finished demos, pulled out unused code * v0.1.50 * v0.1.51 * making it so dist is only included when we publish * switch package name, adding build step in publish * cleaning up examples * Update README.md * Update README.md * Create remove.js * Add files via upload * Delete remove.js * Update README.md
- Loading branch information
Showing
9 changed files
with
311 additions
and
328 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| import React from 'react' | ||
| import useFetch from '../src/index' | ||
| import { delayedUrl } from './urls' | ||
|
|
||
| /** | ||
| * Abortable demos | ||
| * - https://github.com/dai-shi/react-hooks-async | ||
| */ | ||
|
|
||
| const GithubRepoSearchAbortDemo = () => { | ||
| const githubQueryRepoURL = 'https://api.github.com/search/repositories?q=' | ||
| const githubRepos = useFetch({ | ||
| baseUrl: githubQueryRepoURL, | ||
| }) | ||
|
|
||
| const searchGithub = e => githubRepos.get(e.target.value || "%27%27") | ||
|
|
||
| const githubRepoItems = (githubRepos.data || {}).items || [] | ||
|
|
||
| return ( | ||
| <> | ||
| <h3>Github Repo Search Demo</h3> | ||
| <input onChange={searchGithub} /> | ||
| {githubRepos.loading ? ( | ||
| <div style={{display: 'flex'}}> | ||
| Loading... | ||
| <button onClick={githubRepos.abort}>Cancel Request</button> | ||
| </div> | ||
| ) : githubRepoItems.map(({ id, name, html_url }) => ( | ||
| <li key={id}><a target="_blank" rel="noreferrer noopener" href={html_url}>{name}</a></li> | ||
| ))} | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| const OnClickAbortDemo = () => { | ||
| const request = useFetch(delayedUrl) | ||
| return ( | ||
| <> | ||
| <h3>On Click Demo</h3> | ||
| <button onClick={() => request.post({ no: 'way' })}>Fetch Data</button> | ||
| {request.loading ? ( | ||
| <div style={{display: 'flex'}}> | ||
| Loading... | ||
| <button onClick={request.abort}>Cancel Request</button> | ||
| </div> | ||
| ) : ( | ||
| <code style={{ display: 'block' }}> | ||
| <pre>{JSON.stringify(request.data, null, 2)}</pre> | ||
| </code> | ||
| )} | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| const AbortDemos = () => ( | ||
| <> | ||
| <div>If for some reason you aren't getting any responses from these, it's possible you have used your daily limit for api calls to these apis.</div> | ||
| <h1>Abort Demos</h1> | ||
| <p>Open the network tab in the devtools to see this in action 😛</p> | ||
| <GithubRepoSearchAbortDemo /> | ||
| <OnClickAbortDemo /> | ||
| </> | ||
| ) | ||
|
|
||
| export default AbortDemos |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,126 +1,13 @@ | ||
| import React from 'react'; | ||
| import { render } from 'react-dom'; | ||
| // import './index.css'; | ||
| // import App from './App'; | ||
| // import * as serviceWorker from './serviceWorker'; | ||
| import useFetch, { useGet, usePost } from '../src/index' | ||
| // import useFetch, { useGet, usePost } from '../dist' | ||
|
|
||
| const App = () => { | ||
| const [data, loading, error, { get }] = useFetch('https://api.etilbudsavis.dk/v2/dealerfront?country_id=DK') | ||
| const handleClick = () => get() | ||
|
|
||
| // WORKS 😍 | ||
| // const [data, loading, error, request] = useFetch({ | ||
| // url: 'https://jsonplaceholder.typicode.com/posts/1', | ||
| // // baseUrl: '', // then you can do: request.post({ url: '/posts', body: {} }) | ||
| // headers: { | ||
| // "Content-type": "application/json; charset=UTF-8" | ||
| // }, | ||
| // // timeout: 1000, | ||
| // // onMount: true, // run on component did mount | ||
| // }) | ||
|
|
||
| // const [data, loading, error, request] = useFetch('https://jsonplaceholder.typicode.com/posts/1') | ||
|
|
||
| // const { data, loading, error, request, get, post, patch, put, del } = useFetch('https://jsonplaceholder.typicode.com/posts/1') | ||
| // const { data, loading, error, request, get, post, patch, put, del } = useFetch({ | ||
| // baseUrl: 'https://jsonplaceholder.typicode.com/posts' | ||
| // }) | ||
|
|
||
| // useEffect(() => { | ||
| // // on component did mount or use 'onMount' option above | ||
| // request.get() | ||
| // }, [request]) | ||
|
|
||
| // const [data, loading, error, get] = useGet({ | ||
| // url: 'https://jsonplaceholder.typicode.com/posts/1' | ||
| // }) | ||
| const handleClick2 = () => { | ||
| // get('/1') | ||
| // post('/', { | ||
| // // params: '?no=way&something=true', | ||
| // title: 'foo', | ||
| // body: 'bar', | ||
| // userId: 1 | ||
| // }) | ||
| // patch('/1', { | ||
| // title: 'foo', | ||
| // body: 'bar', | ||
| // userId: 1 | ||
| // }) | ||
| // put('/1', { | ||
| // title: 'foo', | ||
| // body: 'bar', | ||
| // userId: 1 | ||
| // }) | ||
| // del('/1') | ||
| // request.get() | ||
| // request.post({ | ||
| // // params: '?no=way&something=true', | ||
| // title: 'foo', | ||
| // body: 'bar', | ||
| // userId: 1 | ||
| // }) | ||
| // request.patch({ | ||
| // title: 'foo', | ||
| // body: 'bar', | ||
| // userId: 1 | ||
| // }) | ||
| // request.put({ | ||
| // title: 'foo', | ||
| // body: 'bar', | ||
| // userId: 1 | ||
| // }) | ||
| // request.delete({ | ||
| // title: 'foo', | ||
| // body: 'bar', | ||
| // userId: 1 | ||
| // }) | ||
| // get() | ||
| // post({ | ||
| // // params: '?no=way&something=true', | ||
| // title: 'foo', | ||
| // body: 'bar', | ||
| // userId: 1 | ||
| // }) | ||
| // patch({ | ||
| // title: 'foo', | ||
| // body: 'bar', | ||
| // userId: 1 | ||
| // }) | ||
| // put({ | ||
| // title: 'foo', | ||
| // body: 'bar', | ||
| // userId: 1 | ||
| // }) | ||
| // del({ | ||
| // title: 'foo', | ||
| // body: 'bar', | ||
| // userId: 1 | ||
| // }) | ||
| } | ||
|
|
||
|
|
||
| if (error) return 'Error...' | ||
| if (loading) return 'Loading...' | ||
| import React, { useState, Fragment, useRef } from 'react' | ||
| import { render } from 'react-dom' | ||
| import AbortExamples from './abort-examples' | ||
|
|
||
| function App() { | ||
| return ( | ||
| <div className="App"> | ||
| <header className="App-header"> | ||
| <button onClick={handleClick}>CLICK</button> | ||
| <code style={{ display: 'block' }}> | ||
| <pre>{JSON.stringify(data, null, 2)}</pre> | ||
| </code> | ||
| </header> | ||
| </div> | ||
| ); | ||
| <> | ||
| <AbortExamples /> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| render(<App />, document.getElementById('root')); | ||
|
|
||
| // If you want your app to work offline and load faster, you can change | ||
| // unregister() to register() below. Note this comes with some pitfalls. | ||
| // Learn more about service workers: https://bit.ly/CRA-PWA | ||
| // serviceWorker.unregister(); | ||
| // | ||
| render(<App />, document.getElementById('root')) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
|
|
||
| export const delayedUrl = 'https://httpbin.org/delay/3' | ||
| export const chuckUrl = 'https://api.icndb.com/jokes/random/%3FlimitTo=[nerdy]&escape=javascript' // - handles POST too | ||
| // export const allUrl = 'https://km04k9k9x5.codesandbox.io/test.json' | ||
| // const baseUrl = 'https://jsonplaceholder.typicode.com' | ||
| // const postUrl = baseUrl + '/posts' | ||
| // POST https://jsonplaceholder.typicode.com/posts | ||
| // const allUrl = postUrl + '/1' | ||
| // everything else: https://jsonplaceholder.typicode.com/posts/1 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.