Merge pull request #1 from thiagovandieten/hooks

Hooks rewrite

src/containers/App.jsx

@@ -1,63 +1,57 @@
 "use client";
 
-import React, {Component} from 'react';
-import CardList from '../components/CardList';
-import SearchBox from '../components/Searchbox';
-import Scroll from '../components/Scroll';
-import { ErrorBoundary } from 'react-error-boundary';
-import './App.css';
+import React, {useState, useEffect} from "react";
+import CardList from "../components/CardList";
+import SearchBox from "../components/Searchbox";
+import Scroll from "../components/Scroll";
+import {ErrorBoundary} from "react-error-boundary";
+import "./App.css";
 
-class App extends Component {
-    constructor() {
-        super();
-        this.state = {
-            robots: [],
-            searchField: ''
-        }
-    }
+const App = () => {
+    // Declare states
+    const [robots, setRobots] = useState([]);
+    const [searchField, setSearchField] = useState('');
 
-    fallbackRender  = ({ error, resetErrorBoundary }) => (
+    useEffect(() => {
+        fetch('https://jsonplaceholder.typicode.com/users', {
+            method: 'get'
+        })
+            .then(response => response.json())
+            .then(users => setRobots(users));
+            console.log("Runs UseEffect")
+    }, []) 
+
+    const fallbackRender = ({error, resetErrorBoundary}) => {
         <div role="alert">
-            <p>Something went wrong:</p>
+            <p>Something went wrong</p>
             <pre>{error.message}</pre>
         </div>
-    );
-
-    onSearchChange = (event) => {
-        this.setState({searchField: event.target.value});
     }
-
-    render() {
-        const {robots, searchField} = this.state;
-        const filteredRobots = robots.filter(robot => {
-            return robot.name.toLowerCase().includes(searchField.toLowerCase());
-        })
 
-        if (!robots.length) {
-            return <h1 className="tc">Loading...</h1>
-        }
-        else {
-            return (
-                <div className="tc">
+    const onSearchChange = (event) => {
+        setSearchField(event.target.value);
+    }
+
+    const filteredRobots = robots.filter(robot => {
+        return robot.name.toLowerCase().includes(searchField.toLowerCase())
+    })
+
+    if(!robots.length) {
+        return <h1 className="tc">Loading...</h1>
+    }
+
+    else {
+        return (
+            <div className="tc">
                     <h1 className="f1">RoboFriends</h1>
-                    <SearchBox searchChange={this.onSearchChange} />
+                    <SearchBox searchChange={onSearchChange} />
                     <Scroll>
-                        <ErrorBoundary FallbackComponent={this.fallbackRender}>
+                        <ErrorBoundary FallbackComponent={fallbackRender}>
                             <CardList robots={filteredRobots}/>
                         </ErrorBoundary>
                     </Scroll>
                 </div>
-            )
-        }
-
-    }
-
-    componentDidMount() {
-        fetch('https://jsonplaceholder.typicode.com/users', {
-            method: 'get'
-        })
-        .then(response => response.json())
-        .then(users => this.setState({robots: users}));
+        )
     }
 }