react_materials/21_http.html at master · neethu-satheesh/react_materials · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<script src="https://unpkg.com/react@16.12.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.8.3/babel.js"></script>

<script type="text/babel">

    async function getUserInfo(userName){
       const reponse = await fetch(`https://api.github.com/users/${userName}`)
       const responseObj = await reponse.json()
       return responseObj
    }

    const PrintUser = ({user}) => {
        if(user && user.id) {
            return (
                <div>
                    <p>ID: {user.id}</p>
                    <p>Type: {user.type}</p>
                    <p>Avatar URL: {user.avatar_url}</p>
                    <p>Name: {user.name}</p>
                </div>
            )
        } else {
            return <p>...</p>
        }
    }

    const App = () => {
        const [user, setUser] = React.useState('')

        const checkValidity = (response) => {
            console.log(response.message)
            if(response.message == `Not Found`) {
                setUser(null)
                throw new Error('Incorrect user name')
            }
            else return response
        }

        const submitHandler = (event) => {
            event.preventDefault()

            const userName = event.target.userName.value
            getUserInfo(userName)
            .then(checkValidity)
            .then(setUser)
            .catch(console.log)
        }

        return (
            <div>
                <form onSubmit={submitHandler}>
                    <p><label htmlFor="userName">GIT Username</label></p>
                    <p><input id="userName" /></p>
                    <p><button type="submit">Submit</button></p>
                </form>
                <hr />
                <PrintUser user={user}/>
            </div>
        )
    }
    const renderApp = () => ReactDOM.render(<App />, document.getElementById("root"))
    renderApp()
</script>

<body>
    <div id="root"></div>
</body>