Skip to content

Commit 652bc47

Browse files
bharat407bharat407
committed
To_Do Web Application
0 parents  commit 652bc47

File tree

12 files changed

+851
-0
lines changed

12 files changed

+851
-0
lines changed

‎.gitignore

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
2+
# dependencies
3+
/node_modules
4+
/.pnp
5+
.pnp.js
6+
7+
# testing
8+
/coverage
9+
10+
# production
11+
/build
12+
13+
# misc
14+
.DS_Store
15+
.env.local
16+
.env.development.local
17+
.env.test.local
18+
.env.production.local
19+
package-lock.json
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*

‎package.json

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{
2+
"name": "react-todo-list",
3+
"version": "1.0.0",
4+
"private": true,
5+
"dependencies": {
6+
"@chakra-ui/react": "^1.8.5",
7+
"@emotion/react": "^11.8.1",
8+
"@emotion/styled": "^11.8.1",
9+
"@testing-library/jest-dom": "^5.16.2",
10+
"@testing-library/react": "^12.1.3",
11+
"@testing-library/user-event": "^13.5.0",
12+
"framer-motion": "^6.2.8",
13+
"nanoid": "^3.3.1",
14+
"nodemon": "^2.0.20",
15+
"react": "17.0.2",
16+
"react-dom": "17.0.2",
17+
"react-icons": "^4.3.1",
18+
"react-scripts": "5.0.0",
19+
"web-vitals": "^2.1.4"
20+
},
21+
"scripts": {
22+
"start": "react-scripts start",
23+
"build": "react-scripts build",
24+
"test": "react-scripts test",
25+
"eject": "react-scripts eject"
26+
},
27+
"eslintConfig": {
28+
"extends": [
29+
"react-app",
30+
"react-app/jest"
31+
]
32+
},
33+
"browserslist": {
34+
"production": [
35+
">0.2%",
36+
"not dead",
37+
"not op_mini all"
38+
],
39+
"development": [
40+
"last 1 chrome version",
41+
"last 1 firefox version",
42+
"last 1 safari version"
43+
]
44+
}
45+
}

‎public/favicon.ico

22.9 KB
Binary file not shown.

‎public/index.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-br">
3+
4+
<head>
5+
<title>Todo list</title>
6+
<meta charset="utf-8" />
7+
<link rel="shortcut icon" type="image/x-icon" href="%PUBLIC_URL%/favicon.ico">
8+
<meta name="viewport" content="width=device-width, initial-scale=1" />
9+
<meta name="theme-color" content="#1A203C" />
10+
<meta name="description" content="React tasks list" />
11+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.ico" />
12+
</head>
13+
14+
<body>
15+
<div id="root"></div>
16+
</body>
17+
18+
</html>

‎public/robots.txt

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# https://www.robotstxt.org/robotstxt.html
2+
User-agent: *
3+
Disallow:

‎src/App.js

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import {
2+
Heading,
3+
IconButton,
4+
VStack,
5+
useColorMode,
6+
useToast,
7+
} from "@chakra-ui/react";
8+
import TaskList from "./components/tasks";
9+
import AddTask from "./components/AddTask";
10+
import { FaSun, FaMoon } from "react-icons/fa";
11+
import { useState, useEffect } from "react";
12+
13+
function App() {
14+
const toast = useToast();
15+
const [tasks, setTasks] = useState(
16+
() => JSON.parse(localStorage.getItem("tasks")) || []
17+
);
18+
19+
useEffect(() => {
20+
localStorage.setItem("tasks", JSON.stringify(tasks));
21+
}, [tasks]);
22+
23+
function deleteTask(id) {
24+
const newTasks = tasks.filter((task) => {
25+
return task.id !== id;
26+
});
27+
setTasks(newTasks);
28+
}
29+
30+
function deleteTaskAll() {
31+
setTasks([]);
32+
}
33+
34+
function checkTask(id) {
35+
const newTasksCheck = tasks.map((task, index, array) => {
36+
if (task.id === id) {
37+
task.check = !task.check;
38+
}
39+
return task;
40+
});
41+
setTasks(newTasksCheck);
42+
}
43+
44+
function updateTask(id, body, onClose) {
45+
const info = body.trim();
46+
47+
if (!info) {
48+
toast({
49+
title: "Enter your task",
50+
position: "top",
51+
status: "warning",
52+
duration: 2000,
53+
isClosable: true,
54+
});
55+
return;
56+
}
57+
58+
const newTasksUpdate = tasks.map((task, index, array) => {
59+
if (task.id === id) {
60+
task.body = body;
61+
task.check = false;
62+
}
63+
return task;
64+
});
65+
setTasks(newTasksUpdate);
66+
onClose();
67+
}
68+
69+
function addTask(task) {
70+
setTasks([...tasks, task]);
71+
}
72+
73+
const { colorMode, toggleColorMode } = useColorMode();
74+
75+
return (
76+
<VStack p={4} minH='100vh' pb={28}>
77+
<IconButton
78+
icon={colorMode === "light" ? <FaSun /> : <FaMoon />}
79+
isRound='true'
80+
size='md'
81+
alignSelf='flex-end'
82+
onClick={toggleColorMode}
83+
aria-label='toogle-dark-mode'
84+
/>
85+
86+
<Heading
87+
p='5'
88+
fontWeight='extrabold'
89+
size='xl'
90+
bgGradient='linear(to-r, red.500, yellow.500)'
91+
bgClip='text'
92+
>
93+
Todo list
94+
</Heading>
95+
<AddTask addTask={addTask} />
96+
<TaskList
97+
tasks={tasks}
98+
updateTask={updateTask}
99+
deleteTask={deleteTask}
100+
deleteTaskAll={deleteTaskAll}
101+
checkTask={checkTask}
102+
/>
103+
</VStack>
104+
);
105+
}
106+
107+
export default App;

‎src/components/AddTask.js

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { useState } from "react";
2+
import { Button, HStack, Input, useToast } from "@chakra-ui/react";
3+
import { nanoid } from "nanoid";
4+
5+
function AddTask({ addTask }) {
6+
const toast = useToast();
7+
const [content, setContent] = useState("");
8+
const [statusInput, setStatusInput] = useState(true);
9+
10+
function handleSubmit(e) {
11+
e.preventDefault();
12+
13+
const taskText = content.trim();
14+
15+
if (!taskText) {
16+
toast({
17+
title: "Enter your task",
18+
position: "top",
19+
status: "warning",
20+
duration: 2000,
21+
isClosable: true,
22+
});
23+
setStatusInput(false);
24+
25+
return setContent("");
26+
}
27+
28+
const task = {
29+
id: nanoid(),
30+
body: taskText,
31+
check: false,
32+
};
33+
34+
addTask(task);
35+
setContent("");
36+
}
37+
38+
if (content && !statusInput) {
39+
setStatusInput(true);
40+
}
41+
42+
return (
43+
<form onSubmit={handleSubmit}>
44+
<HStack mt='4' mb='4'>
45+
<Input
46+
h='46'
47+
borderColor={!statusInput ? "red.300" : "transparent"}
48+
variant='filled'
49+
placeholder='Enter your task'
50+
value={content}
51+
onChange={(e) => setContent(e.target.value)}
52+
/>
53+
<Button
54+
colorScheme='twitter'
55+
px='8'
56+
pl='10'
57+
pr='10'
58+
h='46'
59+
type='submit'
60+
>
61+
Add
62+
</Button>
63+
</HStack>
64+
</form>
65+
);
66+
}
67+
68+
export default AddTask;

‎src/components/DeleteTask.js

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import {
2+
Modal,
3+
ModalOverlay,
4+
ModalContent,
5+
ModalHeader,
6+
ModalFooter,
7+
ModalBody,
8+
Button,
9+
Text,
10+
useDisclosure,
11+
IconButton,
12+
} from "@chakra-ui/react";
13+
import React from "react";
14+
import { FiTrash2 } from "react-icons/fi";
15+
16+
function DeleteAllTask({ deleteTaskAll }) {
17+
const { isOpen, onOpen, onClose } = useDisclosure();
18+
return (
19+
<>
20+
<Button
21+
// colorScheme='red'
22+
px='8'
23+
h='45'
24+
color='red.500'
25+
mt='8'
26+
onClick={onOpen}
27+
>
28+
Delete All
29+
</Button>
30+
31+
<Modal isCentered isOpen={isOpen} onClose={onClose}>
32+
<ModalOverlay />
33+
<ModalContent w='90%'>
34+
<ModalHeader>Do you really want to delete all tasks?</ModalHeader>
35+
<ModalFooter>
36+
<Button mr={3} onClick={onClose}>
37+
No
38+
</Button>
39+
<Button colorScheme='red' onClick={() => deleteTaskAll()}>
40+
Yes
41+
</Button>
42+
</ModalFooter>
43+
</ModalContent>
44+
</Modal>
45+
</>
46+
);
47+
}
48+
49+
function DeleteTask({ task, deleteTask }) {
50+
const { isOpen, onOpen, onClose } = useDisclosure();
51+
52+
return (
53+
<>
54+
<IconButton icon={<FiTrash2 />} isRound='true' onClick={onOpen} />
55+
56+
<Modal isCentered isOpen={isOpen} onClose={onClose}>
57+
<ModalOverlay />
58+
<ModalContent w='90%'>
59+
<ModalHeader>Do you really want to delete the task?</ModalHeader>
60+
<ModalBody>
61+
<Text>{task.body}</Text>
62+
</ModalBody>
63+
<ModalFooter>
64+
<Button mr={3} onClick={onClose}>
65+
No
66+
</Button>
67+
<Button
68+
colorScheme='red'
69+
onClick={() => deleteTask(task.id, onClose)}
70+
>
71+
Yes
72+
</Button>
73+
</ModalFooter>
74+
</ModalContent>
75+
</Modal>
76+
</>
77+
);
78+
}
79+
80+
export { DeleteTask, DeleteAllTask };

0 commit comments

Comments
 (0)