#100 Todo now functional but needs refactoring with MUI

compgirl123 · Nov 19, 2019 · 2ba5473 · 2ba5473
1 parent 3d56dc8
commit 2ba5473
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 22 deletions.
diff --git a/tutify/src/components/Todo/AddTodo.js b/tutify/src/components/Todo/AddTodo.js
@@ -1,5 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { TextField, Paper, Grid } from "@material-ui/core";
+import AddIcon from '@material-ui/icons/Add';
+import Fab from '@material-ui/core/Fab';
 
 export class AddTodo extends Component {
     state = {
@@ -16,22 +19,27 @@ export class AddTodo extends Component {
 
     render() {
         return (
-            <form onSubmit={this.onSubmit} style={{display: 'flex'}}>
-                <input 
-                    type="text" 
-                    name="title"
-                    style={{flex: '10', padding: '5px'}}
-                    placeholder="Add Todo..." 
-                    value={this.state.title}
-                    onChange={this.onChange}
-                />
-                <input 
-                    type="submit"
-                    value="Submit"
-                    className="btn"
-                    style= {{flex: '1'}}
-                />
-            </form>
+            <Paper style={{ margin: 16, padding: 16 }}>
+                <form onSubmit={this.onSubmit}>
+                    <Grid xs={10} md={11} item style={{ paddingRight: 16 }}>
+                        <TextField
+                            placeholder="Add Todo..."
+                            value={this.state.title}
+                            onChange={this.onChange}
+                            fullWidth
+                        />
+                    </Grid>
+                    <Grid xs={4} md={1} item>
+                        <input
+                            type="submit"
+                            value="Submit"
+                            className="btn"
+                            style={{ flex: '1' }}
+                        />
+                    </Grid>
+                </form>
+            </Paper>
+
         )
     }
 }

diff --git a/tutify/src/components/Todo/TodoItem.js b/tutify/src/components/Todo/TodoItem.js
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 export class TodoItem extends Component {
     getStyle = () => {
         return {
-            background: '#F4F4F4',
             padding: '10px',
             borderBottom: '1px #ccc dotted',
             textDecoration: this.props.todo.completed ? 'line-through' : 'none',

diff --git a/tutify/src/components/Todo/TodoList.js b/tutify/src/components/Todo/TodoList.js
@@ -20,7 +20,11 @@ class TodoList extends React.Component {
             todos: [],
         };
     }
-
+    componentDidMount() {
+        axios.get('https://jsonplaceholder.typicode.com/todos?_limit=10')
+      .then(res => this.setState({ todos: res.data }));
+    }
+
     markComplete = (id) => {
         this.setState({
           todos: this.state.todos.map(todo => {
@@ -31,10 +35,6 @@ class TodoList extends React.Component {
         });
     }
 
-    componentDidMount() {
-        axios.get('https://jsonplaceholder.typicode.com/todos?_limit=10')
-      .then(res => this.setState({ todos: res.data }));
-    }
 
      // Delete Todo
   delTodo = (id) => {