[ZK] added create task component

README.md

@@ -15,7 +15,9 @@ it will run at port `3001`, url: `http://localhost:3001`
 ## Frontend project
 
 `cd frontend`
+
 `npm install`
+
 `npm start`
 
 it will run at port `3000`, url: `http://localhost:3000`, will send request to backend when start

frontend/src/App.js

@@ -1,29 +1,10 @@
 import './App.css';
-import styled from 'styled-components'
-import ItemList from "./components/ItemList";
+import ToDoList from "./components/ToDoList";
 
-const TaskListContainer = styled.div`
-    max-width: 800px;
-    color: palevioletred;
-    background-color: white;
-    padding: 10px 20px;
-`
-const Title = styled.div`
-    font-size: 26px;
-    margin: 20px;
-    line-height: 50px;
-    height: 50px;
-    text-align: center;
-`
 
 function App() {
     return (
-        <>
-            <Title>To-Do List</Title>
-            <TaskListContainer className="App">
-                <ItemList />
-            </TaskListContainer>
-        </>
+        <ToDoList/>
     );
 }
 

frontend/src/components/AddToDoItem.jsx

@@ -0,0 +1,62 @@
+import {Container} from "./Container";
+import styled from "styled-components";
+import {useState} from "react";
+
+const ToDoItemContainer = styled(Container)`
+    margin-bottom: 20px;
+    align-item: middle;
+    justify-content: space-between;
+    
+    input {
+        color: palevioletred; 
+        height: 30px;
+        font-size: 20px;
+        font-weight: 500;
+        border-radius: 5px;
+        border: 0 solid palevioletred;
+        max-width: 600px;
+        width: 600px;
+        padding-left: 5px;
+        
+        ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+            color: palevioletred;
+            opacity: 0.7; /* Firefox */
+        }
+        
+        :focus{
+            outline: none;
+        }
+    }
+    
+    button {
+        text-align: right;
+        color: white;
+        background: palevioletred;
+        border: none;
+        border-radius: 8px;
+        max-width: 200px;
+        min-width: 100px;
+        text-align: center;
+        font-weight: 600;
+        
+        :hover {
+            background: #ffa6c9;
+            cursor: pointer;
+        }
+    }
+`;
+export default function AddToDoItem(props) {
+    const {onChange} = props;
+    const [inputValue, setInputValue] = useState('');
+    const buttonOnClick = () => {
+        onChange && onChange(inputValue);
+        setInputValue('');
+    }
+    return (<ToDoItemContainer>
+        <input type="text" placeholder="Add a task" autoFocus={true} value={inputValue}
+               onChange={(event) =>
+                   setInputValue(event.target.value)
+               }/>
+        <button onClick={buttonOnClick}>ADD</button>
+    </ToDoItemContainer>)
+}

frontend/src/components/Container.jsx

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+    margin: 0 auto;
+    color: palevioletred;
+    background-color: white;
+    padding: 10px 20px;
+    display: flex;
+`;

frontend/src/components/Item.jsx

@@ -3,7 +3,6 @@ import React from 'react';
 import styled from 'styled-components'
 
 const ItemContainer = styled.div`
-    max-width: 800px;
     margin: 10px auto;
     text-align: left;
     padding: 20px 0;
@@ -16,6 +15,10 @@ const ItemContainer = styled.div`
 const CheckBoxContainer = styled.div`
     flex: 1;
     max-width: 30px;
+    
+    input[type="checkbox"] {
+        cursor: pointer;
+    }
 `
 
 const ItemDescriptionContainer = styled.div`

frontend/src/components/ItemList.jsx

@@ -1,43 +1,13 @@
-import React, {useEffect, useState} from "react";
+import React from "react";
 import Item from "./Item";
 
-export default function ItemList() {
-    const [items, setItems] = useState([]);
-    const onChange = (id) => {
-        fetch('http://localhost:3001/done', {
-            method: 'POST',
-            headers: {
-                'Accept': 'application/json',
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({id: id})
-        }).then(res => res.json())
-            .then(
-                (result) => {
-                    setItems(result);
-                },
-                (error) => {
-                    console.log(error);
-                }
-            )
-    };
-
-    useEffect(() => {
-        fetch("http://localhost:3001")
-            .then(res => res.json())
-            .then(
-                (result) => {
-                    console.log(result);
-                    setItems(result);
-                },
-                (error) => {
-                    console.log(error);
-                }
-            )
-    }, []);
+export default function ItemList(props) {
+    const {items, onChange} = props;
     return (<>
-        {items.length > 0 ? items.map((item) => {
-            return (<Item key={item.id} item={item} onChange={() => onChange(item.id)}/>);
-        }) : <div>You have done everything!</div>}
+        {items.length > 0
+            ? items.map((item) =>
+                (<Item key={item.id} item={item} onChange={() => onChange(item.id)}/>)
+            )
+            : <div>You have done everything!</div>}
     </>);
 }

frontend/src/components/ToDoList.jsx

@@ -0,0 +1,80 @@
+import styled from "styled-components";
+import AddToDoItem from "./AddToDoItem";
+import ItemList from "./ItemList";
+import {useEffect, useState} from "react";
+
+const TaskListContainer = styled.div`
+    color: palevioletred;
+    background-color: white;
+    padding: 10px 20px;
+`
+const Title = styled.div`
+    font-size: 26px;
+    margin: 20px;
+    line-height: 50px;
+    height: 50px;
+    text-align: center;
+`
+
+export default function ToDoList() {
+    const [items, setItems] = useState([]);
+
+    useEffect(() => {
+        fetch("http://localhost:3001")
+            .then(res => res.json())
+            .then(
+                (result) => {
+                    console.log(result);
+                    setItems(result);
+                },
+                (error) => {
+                    console.log(error);
+                }
+            )
+    }, []);
+
+    const onAdd = (task) => {
+        fetch('http://localhost:3001/', {
+            method: 'POST',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({task: task})
+        }).then(res => res.json())
+            .then(
+                (result) => {
+                    setItems(result);
+                },
+                (error) => {
+                    console.log(error);
+                }
+            )
+    }
+    const onChecked = (id) => {
+        fetch('http://localhost:3001/done', {
+            method: 'POST',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({id: id})
+        }).then(res => res.json())
+            .then(
+                (result) => {
+                    setItems(result);
+                },
+                (error) => {
+                    console.log(error);
+                }
+            )
+    };
+
+    return (<>
+        <Title>To-Do List</Title>
+        <AddToDoItem onChange={onAdd}/>
+        <TaskListContainer className="App">
+            <ItemList items={items} onChange={onChecked}/>
+        </TaskListContainer>
+    </>);
+}

frontend/src/index.css

@@ -1,6 +1,6 @@
 body {
   margin: 0 auto;
-  max-width: 800px;
+  max-width: 700px;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;

frontend/src/index.js

@@ -2,16 +2,10 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+);