Excellent-Echo · anggapw · Apr 2, 2021 · Apr 2, 2021 · Apr 2, 2021 · Apr 2, 2021
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,7 @@
+{
+	"semi": false,
+	"trailingComma": "none",
+	"tabWidth": 4,
+	"singleQuote": true,
+	"printWidth": 140
+  }
diff --git a/README.md b/README.md
@@ -1 +1,4 @@
-# todo-list-application
+# todo-list-application
+
+## URL
+[To Do List React](https://todolist-react-anggapw.netlify.app/)
diff --git a/package.json b/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "todolist-react",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "bootstrap": "^4.6.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3",
+    "reactstrap": "^8.9.0",
+    "web-vitals": "^1.0.1"
+  },
+  "scripts": {
+    "start": "BROWSER='google-chrome-stable' react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#000000" />
+        <meta name="description" content="Web site created using create-react-app" />
+        <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+        <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+        <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+        <title>React App</title>
+    </head>
+    <body>
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <div id="root"></div>
+        <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    --></body>
+
+    <script src="https://kit.fontawesome.com/6645177271.js" crossorigin="anonymous"></script>
+</html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,94 @@
+/* .App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.Input-data {
+  display: flex;
+  justify-content: center;
+} */
+
+/* body{
+  background: rgb(255, 173, 65);
+  }
+
+  .todo-container{
+  background: rgb(41, 33, 33);
+  width: 40vw;
+  margin: 10em auto;
+  border-radius: 15px;
+  padding: 20px 10px;
+  color: white;
+  border: 3px solid rgb(36, 110, 194);
+  }
+
+  .task{
+  border: 1px solid white;
+  border-radius: 5px;
+  padding: 0.5em;
+  margin: 0.5em;
+  }
+
+  .task button{
+  background: rgb(12, 124, 251);
+  border-radius: 5px;
+  margin: 0px 5px;
+  padding: 3px 5px;
+  border: none;
+  cursor: pointer;
+  color: white;
+  float: right;
+  }
+
+  .header{
+  margin: 0.5em;
+  font-size: 2em;
+  text-align: center;
+  }
+
+  .create-task input[type=text]{
+  margin: 2.5em 2em;
+  width: 80%;
+  outline: none;
+  border: none;
+  padding: 0.7em;
+  } */
+
+.Card-btn {
+  display: flex;
+  justify-content: space-around;
+}
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,55 @@
+import React, { useState, useEffect } from 'react'
+import { Container } from 'reactstrap'
+
+import InputData from './components/InputData'
+import TaskList from './components/TaskList'
+import './App.css'
+
+const App = () => {
+    const [tasks, setTasks] = useState([])
+    const [tasksRemaining, setTasksRemaining] = useState(0)
+
+    console.log(tasks)
+
+    useEffect(() => {
+        setTasksRemaining(tasks.filter((task) => !task.completed).length)
+    }, [tasks])
+
+    const addTask = (title, role) => {
+        const newTasks = [...tasks, { title, role, completed: false }]
+        setTasks(newTasks)
+    }
+
+    const completeTask = (index) => {
+        const newTasks = [...tasks]
+        newTasks[index].completed = true
+        setTasks(newTasks)
+    }
+
+    const removeTask = (index) => {
+        const newTasks = [...tasks]
+        newTasks.splice(index, 1)
+        setTasks(newTasks)
+    }
+
+    const editTask = (index) => {
+        console.log('===> set todo => ', index)
+        setTasks(index)
+    }
+
+    return (
+        <Container>
+            <InputData addTask={addTask} />
+
+            <TaskList
+                tasks={tasks}
+                removeTask={removeTask}
+                editTask={editTask}
+                completeTask={completeTask}
+                tasksRemaining={tasksRemaining}
+            />
+        </Container>
+    )
+}
+
+export default App
diff --git a/src/App.test.js b/src/App.test.js
@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});
diff --git a/src/components/InputData.jsx b/src/components/InputData.jsx
@@ -0,0 +1,52 @@
+import React, { useState } from 'react'
+import { Button, Form, FormGroup, Label, Input, Container, Row, Col } from 'reactstrap'
+
+const InputData = ({ addTask }) => {
+    const [task, setTask] = useState('')
+    const [role, setRole] = useState('Office Boy')
+
+    const handleForm = (e) => {
+        if (!task) {
+            alert('Mohon lengkapi data')
+        } else {
+            e.preventDefault()
+            addTask(task, role)
+            setTask('')
+        }
+    }
+
+    return (
+        <Container>
+            <Row className="Input-data mt-3 mb-5">
+                <Col sm="6">
+                    <Form onSubmit={handleForm}>
+                        <FormGroup>
+                            <Label for="exampleInput">Task</Label>
+                            <Input
+                                type="text"
+                                name="addTask"
+                                id="inputData"
+                                placeholder="input your task"
+                                onChange={(e) => setTask(e.target.value)}
+                                value={task}
+                            />
+                        </FormGroup>
+
+                        <FormGroup>
+                            <Label for="exampleSelect">Role</Label>
+                            <Input type="select" name="select" id="exampleSelect" onChange={(e) => setRole(e.target.value)} value={role}>
+                                <option value="Office Boy">Office Boy</option>
+                                <option value="Security">Security</option>
+                                <option value="Driver">Driver</option>
+                            </Input>
+                        </FormGroup>
+
+                        <Button>Submit</Button>
+                    </Form>
+                </Col>
+            </Row>
+        </Container>
+    )
+}
+
+export default InputData
diff --git a/src/components/TaskCard.jsx b/src/components/TaskCard.jsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { Card, CardText, Container } from 'reactstrap'
+
+const TaskCard = ({ task, index, completeTask, editTask, removeTask }) => {
+    return (
+        <Container className="mb-3">
+            <Card body inverse color={task.completed ? 'success' : 'danger'}>
+                <CardText>{task.title}</CardText>
+                <p></p>
+                <div className="Card-btn">
+                    <i className="fas fa-check-circle fa-2x fa-fw" onClick={() => completeTask(index)}></i>
+                    <i className="fas fa-pen fa-2x fa-fw" onClick={() => editTask(index)}></i>
+                    <i className="fas fa-trash-alt fa-2x fa-fw" onClick={() => removeTask(index)}></i>
+                </div>
+            </Card>
+        </Container>
+    )
+}
+
+export default TaskCard