Created
May 25, 2019 06:50
-
-
Save lamtranweb/593df9a4e1d162143cfce24ed5f068b1 to your computer and use it in GitHub Desktop.
fetch-with-URL-check
This file contains hidden or 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
| import * as React from "react"; | |
| import { useState, useEffect, ReactNode } from "react"; | |
| import { render } from "react-dom"; | |
| import "./styles.css"; | |
| const URL = "https://jsonplaceholder.typicode.com/todos/1"; | |
| interface Todo { | |
| id: number; | |
| userId: number; | |
| title: string; | |
| completed: boolean; | |
| } | |
| interface Props { | |
| url: string; | |
| } | |
| const isValidUrl = (url: string) => | |
| url && url.startsWith("https://jsonplaceholder.typicode.com"); | |
| function App<Props>({ url }) { | |
| if (!isValidUrl(url)) { | |
| return <h1> Invalid URL {url}</h1>; | |
| } | |
| const [loading, setLoading] = useState<boolean>(false); | |
| const [error, setError] = useState<TypeError>(undefined); | |
| const [state, setState] = useState<Todo>(undefined); | |
| useEffect(() => { | |
| (async () => { | |
| setLoading(true); | |
| try { | |
| const response = await fetch(url); | |
| const json = await response.json(); | |
| setState(json); | |
| } catch (e) { | |
| setError(e); | |
| } finally { | |
| setLoading(false); | |
| } | |
| })(); | |
| }, [setError, setLoading, setState]); | |
| let State: ReactNode = null; | |
| if (loading) { | |
| State = <h1>Loading</h1>; | |
| } | |
| if (error) { | |
| State = <h1>{error.message}</h1>; | |
| } | |
| if (state) { | |
| State = <h1>{state.title}</h1>; | |
| } | |
| return <div className="App">{State}</div>; | |
| } | |
| const rootElement = document.getElementById("root"); | |
| render(<App url={URL} />, rootElement); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment