From 3bd21f225856fd783aba2a86508d22ffb2f784cf Mon Sep 17 00:00:00 2001
From: Thiago van Dieten <thiago@tvdieten.com>
Date: Tue, 6 Feb 2024 03:46:50 +0100
Subject: [PATCH 1/2] turn App into a functional comp

---
 src/containers/App.jsx | 83 +++++++++++++++++++-----------------------
 1 file changed, 38 insertions(+), 45 deletions(-)

diff --git a/src/containers/App.jsx b/src/containers/App.jsx
index 06d8b13..553c711 100644
--- a/src/containers/App.jsx
+++ b/src/containers/App.jsx
@@ -1,63 +1,56 @@
 "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));
+    }) 
+    
+    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}));
+        )
     }
 }
 

From 7a4feb9b63e086cb14b6c14e8949f11b4545fd95 Mon Sep 17 00:00:00 2001
From: Thiago van Dieten <thiago@tvdieten.com>
Date: Thu, 8 Feb 2024 08:05:48 +0100
Subject: [PATCH 2/2] fix continious loop bug UseEffect

---
 src/containers/App.jsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/containers/App.jsx b/src/containers/App.jsx
index 553c711..197d644 100644
--- a/src/containers/App.jsx
+++ b/src/containers/App.jsx
@@ -16,9 +16,10 @@ const App = () => {
         fetch('https://jsonplaceholder.typicode.com/users', {
             method: 'get'
         })
-        .then(response => response.json())
-        .then(users => setRobots(users));
-    }) 
+            .then(response => response.json())
+            .then(users => setRobots(users));
+            console.log("Runs UseEffect")
+    }, []) 
     
     const fallbackRender = ({error, resetErrorBoundary}) => {
         <div role="alert">