Got all components started and rendering, need to complete functionality

README.md

@@ -34,9 +34,9 @@ We're going to practice building a stateful class component with this project. E
 
 ### Task 1: Project Set Up
 
-- [ ] Create a forked copy of this project.
-- [ ] Clone your OWN version of the repository in your terminal
-- [ ] Create a new branch: git checkout -b `<firstName-lastName>`.
+- [x] Create a forked copy of this project.
+- [x] Clone your OWN version of the repository in your terminal
+- [x] Create a new branch: git checkout -b `<firstName-lastName>`.
 - [ ] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly.
 - [ ] Push commits: git push origin `<firstName-lastName>`.
 

src/App.js

@@ -1,14 +1,117 @@
 import React from 'react';
 
+
+import TodoForm from './components/TodoForm';
+import TodoList from './components/TodoList';
+
+
+// ??? How are all these components working together ???
+// ??? not sure why this was in components folder as a component ???
+import './components/Todo.css';
+
+// todos var will be a prop to pass & dummy data to test
+const todos = [
+  {
+    task: 'Complete Project MVP',
+    id: 1528817077285,
+    completed: false
+
+  },
+  {
+    task: 'Submit Quiz',
+    id: 1528817077286,
+    completed: false
+  },
+  {
+    task: 'Submit Check for Understanding',
+    id: 1528817077287,
+    completed: false
+  }
+];
+
 class App extends React.Component {
   // you will need a place to store your state in this component.
   // design `App` to be the parent component of your application.
   // this component is going to take care of state, and any change handlers you need to work with your state
+
+  // Constructor state
+  constructor() {
+    super(); // ???why is this depreciated???
+    // Application level state, to be shared with components as props
+    this.state = {
+      todos:todos
+
+    }
+  }
+
+  // toggle finished 
+
+  toggleFinished = (id) => {
+    this.setState({
+    // conosle.log working & passing the itemId, not sure how it's doing that ???, but it is
+    //console.log("toggling finished tasks", id);
+    // map thru the array
+    // when the item matches the one clicked, toggle its completed flag
+    // otherwise, don't make any changes
+    todos : this.state.todos.map(item => {
+      // Logic walk through
+      // if item.id === itemId, toggle completed flag
+      // else, return item
+      // ??? IDK this doesn't seem to be doing anything ???
+      if (item.id === id) {
+        return {...item, completed: !item.completed};
+      }
+      else {
+        return item;
+      }  
+    }),
+
+    });
+
+  }
+
+  // bringing in props from TodoForm
+  // remember to pass this down to your render
+  addItem = (newItem) => {
+    // this console is working :)
+    console.log("Adding a new task:", newItem);
+    const anItem = {
+          task: newItem,
+          id: new Date(),
+          completed: false
+    };
+
+    this.setState({
+      //...this.state,
+      todos: [
+        ...this.state.todos, anItem
+      ],
+    })
+  }
+
+  clearCompleted = () => {
+    // ??? this console.log doesn't seem to be working ???
+    console.log("clearing completed tasks");
+    this.setState({
+      //...this.state,
+      todos: this.state.todos.filter(item => !item.completed)
+    })
+  }
+
   render() {
     return (
       <div>
-        <h2>Welcome to your Todo App!</h2>
+        <h1>Todo List: MVP</h1>
+        <TodoForm addItem={this.addItem} />
+        <TodoList 
+          // passes original state variables
+          todos={this.state.todos} 
+          // updates state varibles on toggle function
+          toggleFinished={this.toggleFinished}
+          clearCompleted={this.clearCompleted}
+        />
       </div>
+
     );
   }
 }

src/components/Todo.css

@@ -0,0 +1,19 @@
+.item.completed {
+    text-decoration: line-through;
+    font-style: bold italic;
+
+
+
+  }
+
+  .clear, .add {
+    border: solid black 2px;
+    font-weight: bolder;
+    margin-left: 3px;
+  }
+
+  .input {
+border: solid gray 2px;
+font-size: 14px;
+
+  }

src/components/Todo.js

@@ -0,0 +1,20 @@
+// this Component is for sending props up when task is completed
+import React from 'react';
+
+const Todo = props => {
+    return (
+        // ??? not exactly sure what this is doing ???
+        // line 8 is supposed to be adding the .done class which adds a strike-through if item is completed, still confused ???
+        <div onClick={ () => props.toggleFinished(props.item.id)}
+        className={`item${props.item.completed ? ' completed' : ''}`}
+        // className="done"
+        >
+
+
+
+            <p>{props.item.task}</p>
+        </div>
+    )
+}
+
+export default Todo;

src/components/TodoForm.js

@@ -0,0 +1,51 @@
+// This component adds items to the form with the 'Add Todo' button to the DOM
+import React from "react";
+
+class ToDoForm extends React.Component {
+    // Constructor with state
+    constructor() {
+        super();
+        this.state = {
+            newItem: "",
+        }
+    }
+
+
+    handleChanges = e => {
+        // update state with each keystroke
+        this.setState({
+            //...this.state,
+            newItem: e.target.value
+        });
+    };
+
+    // class property to submit form
+    handleSubmit = e => {
+        // props coming from App.js
+        e.preventDefault();
+        this.props.addItem(this.state.newItem);
+        // resets textbox back to empty after it submits
+        this.setState({
+            newItem: ''
+        })
+    };
+
+    render() {
+       return (
+           <form onSubmit={this.handleSubmit}>
+               <input 
+                    type="text" 
+                    name="item" 
+                    value={this.state.newItem}
+                    onChange={this.handleChanges}
+                />
+               <button>Add Todo</button>
+           </form> 
+
+       ); 
+    }
+
+
+}
+
+export default ToDoForm;

src/components/TodoList.js

@@ -1,2 +1,22 @@
-// your components will all go in this `component` directory.
+// your components will all go in this `component` directory. ??? what does this mean ???
 // feel free to change this component.js into TodoList.js
+
+import React from "react";
+// ??? exactly why are we pulling Todo in here ??? is it because of the map only
+import Todo from "./Todo";
+
+const TodoList = props => {
+    // for sorting the list based whether a task has been completed or not
+    return (
+        <div className='test'> 
+            {/* ??? don't 100% get what this is doing ??? */}
+            {props.todos.map(item => (
+              <Todo key={item.id} item={item} toggleFinished={props.toggleFinished} />   
+             ))}
+
+            <button onClick={props.clearCompleted} className="">Clear Completed</button>
+        </div>
+    );
+};
+
+export default TodoList;