MCk3ueT8

1import React, { useState, useEffect } from 'react';
2import './App.css';
3
4import ColorBox from '../src/Components/ColorBox/ColorBox';
5
6
7const API = 'http://www.colr.org/json/color/random';
8
9function App() {
10
11    // state varaibles
12    const [colors, setColors] = useState( [] );
13    const [inputColor, setInputColor] = useState( '' );
14
15    const regex = /#[0-9a-f]{6}|#[0-9a-f]{3}/gi;
16
17    // fetch Data
18    const fetchColor = () => {
19        // "?dummy=" + Math.random() is a hack to get a new random color
20        fetch( API + '?dummy=' + Math.random() )
21            .then( res => res.json() )
22            .then( data => {
23                // console.log( data.colors );
24                const { hex, id } = data.colors[0];
25                setColors( (prevColor) => [
26                    [{ color: hex, id: id }],
27                    ...prevColor
28                ], );
29            } )
30            .catch( err => console.log( 'Error: ', err ) );
31    };
32
33    useEffect( () => {
34        fetchColor();
35    }, [] );
36
37    // render colors in a browser
38    const renderColors = colors.map( color => (
39        <ColorBox key={ color[0].id } color={ color }/>
40    ) );
41
42    const handleColorInput = e => {
43        e.preventDefault();
44
45        // setInputColor( e.target.value );
46
47        if ( regex.test( inputColor ) ) {
48
49            setColors( (prevColor) => [
50                [{ color: inputColor, id: Math.random() * 100 }],
51                ...prevColor
52            ], );
53        } else {
54            return <h1>Input color is wrong</h1>;
55        }
56
57        setInputColor( '' );
58    };
59
60    console.log( inputColor );
61
62    return (
63        <div className="app">
64            <h1>Show Colors</h1>
65            <button className="btn" onClick={ fetchColor }>Get Random color</button>
66            { renderColors }
67
68            <form onSubmit={ handleColorInput }>
69                <input type="text" value={ inputColor } onChange={ e => setInputColor( e.target.value ) }/>
70                <button type="submit">Submit</button>
71            </form>
72        </div>
73    );
74}
75
76export default App;
77