did the standard todo thing every new react dev does lol

package-lock.json

@@ -13436,6 +13436,21 @@
       "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==",
       "optional": true
     },
+    "shortid": {
+      "version": "2.2.16",
+      "resolved": "https://registry.npmjs.org/shortid/-/shortid-2.2.16.tgz",
+      "integrity": "sha512-Ugt+GIZqvGXCIItnsL+lvFJOiN7RYqlGy7QE41O3YC1xbNSeDGIRO7xg2JJXIAj1cAGnOeC1r7/T9pgrtQbv4g==",
+      "requires": {
+        "nanoid": "^2.1.0"
+      },
+      "dependencies": {
+        "nanoid": {
+          "version": "2.1.11",
+          "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.11.tgz",
+          "integrity": "sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA=="
+        }
+      }
+    },
     "side-channel": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.3.tgz",

package.json

@@ -9,6 +9,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.1",
+    "shortid": "^2.2.16",
     "web-vitals": "^0.2.4"
   },
   "scripts": {

src/App.js

@@ -1,20 +1,14 @@
-import './App.css';
-import { Component } from 'react';
-import MyForm from './components/MyForm'
-import ValidationForm from './components/ValidationForm';
-import FetchRandomUser from './components/FetchRandomUser';
+import "./App.css";
+import { Component } from "react";
+import TodoList from "./components/TodoList";
 
 class App extends Component {
-  state = {
-    visible: true
-  };
-
-  render () {
+  render() {
     return (
-      <div className = "App">
-        <FetchRandomUser />
+      <div className="App">
+        <TodoList />
       </div>
-    )
+    );
   }
 }
 

src/components/Counter.js

@@ -2,7 +2,7 @@ import React from "react";
 
 export class Counter extends React.Component {
     state = {
-        count: 0
+      count: 0
     }
 
     increment = () => {
@@ -17,12 +17,13 @@ export class Counter extends React.Component {
         })
     }
 
+
     render () {
       return (
         <div>
-            <div>count: {this.state.count}</div>
-            <button onClick={this.increment}>increment</button>
-            <button onClick={this.decrement}>decrement</button>
+            <div>count: {this.props.count}</div>
+            <button onClick={this.props.increment}>increment</button>
+            <button onClick={this.props.decrement}>decrement</button>
         </div>
       )
     }

src/components/FetchRandomUser.js

@@ -3,29 +3,33 @@ import React, { Component } from 'react';
 class FetchRandomUser extends Component {
     state = {
         loading: true,
-        person: null
+        people: []
     }
 
     async componentDidMount() {
-        const url = "https://api.randomuser.me/";
+        const url = "https://api.randomuser.me/?results=5";
         const response = await fetch(url);
         const data = await response.json();
-        this.setState({ person: data.results[0], loading: false });
+        this.setState({ people: data.results, loading: false });
     }
 
     render() {
         if (this.state.loading) {
             return <div>loading...</div>;
-          }
+        }
       
-          if (!this.state.person) {
+        if (!this.state.people) {
             return <div>didn't get a person</div>;
-          }
-      
-          return (
+        }
+    
+        return (
             <div>
-                <div>{this.state.person.name.title} {this.state.person.name.first} {this.state.person.name.last}</div>
-                <img src={this.state.person.picture.large}/>
+                {this.state.people.map(person => (
+                <div key={person.name.first + person.name.last}>
+                    <div>{person.name.title} {person.name.first} {person.name.last}</div>
+                    <img src={person.picture.large} />
+                </div>
+                ))}
             </div>
         );
     }

src/components/Todo.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+export default (props) => {
+  return (
+    <div style={{ display: "flex", justifyContent: "center" }}>
+      <div
+        style={{ textDecoration: props.todo.complete ? "line-through" : "" }}
+        onClick={props.toggleComplete}
+      >
+        {props.todo.text}
+        <button onClick={props.onDelete}>x</button>
+      </div>
+    </div>
+  );
+};

src/components/TodoForm.js

@@ -0,0 +1,38 @@
+import React, { Component } from "react";
+import shortid from "shortid";
+
+class TodoForm extends Component {
+  state = {
+    text: "",
+  };
+
+  handleChange = (event) => {
+    this.setState({ [event.target.name]: event.target.value });
+  };
+
+  handleSubmit = (event) => {
+    event.preventDefault();
+    this.props.onSubmit({
+      id: shortid.generate(),
+      text: this.state.text,
+      complete: false,
+    });
+    this.setState({ text: "" });
+  };
+
+  render() {
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <input
+          name="text"
+          placeholder="todo..."
+          value={this.state.text}
+          onChange={this.handleChange}
+        />
+        <button type="submit">add</button>
+      </form>
+    );
+  }
+}
+
+export default TodoForm;

src/components/TodoList.js

@@ -0,0 +1,78 @@
+import React, { Component } from "react";
+import Todo from "./Todo";
+import TodoForm from "./TodoForm";
+
+class TodoList extends Component {
+  state = {
+    list: [],
+    filter: "all",
+  };
+
+  addTodo = (todo) => {
+    const newList = [todo, ...this.state.list];
+    this.setState({ list: newList });
+  };
+
+  toggleComplete = (id) => {
+    this.setState({
+      list: this.state.list.map((todo) => {
+        if (todo.id === id) {
+          return {
+            ...todo,
+            complete: !todo.complete,
+          };
+        } else {
+          return todo;
+        }
+      }),
+    });
+  };
+
+  handleDelete = (id) => {
+    this.setState((state) => ({
+      todos: this.state.list.filter((todo) => todo.id !== id),
+    }));
+  };
+
+  updateFilter = (filter) => {
+    this.setState({ filter: filter });
+  };
+
+  render() {
+    let list = [];
+    if (this.state.filter === "all") {
+      list = this.state.list;
+    } else if (this.state.filter === "complete") {
+      list = this.state.list.filter((todo) => todo.complete);
+    } else if (this.state.filter === "active") {
+      list = this.state.list.filter((todo) => !todo.complete);
+    }
+
+    return (
+      <div>
+        <div>
+          todos left: {this.state.list.filter((todo) => !todo.complete).length}
+        </div>
+        <TodoForm onSubmit={this.addTodo} />
+        {list.map((todo) => (
+          <Todo
+            todo={todo}
+            key={todo.id}
+            onDelete={() => this.handleDelete(todo.id)}
+            toggleComplete={() => this.toggleComplete(todo.id)}
+          />
+        ))}
+
+        <div>
+          <button onClick={() => this.updateFilter("active")}>active</button>
+          <button onClick={() => this.updateFilter("all")}>all</button>
+          <button onClick={() => this.updateFilter("complete")}>
+            complete
+          </button>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default TodoList;