13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
25 |
26 | );
27 | };
28 |
29 | export default App;
30 |
--------------------------------------------------------------------------------
/src/components/AddTodoForm.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | //Redux
3 | import { useDispatch } from "react-redux";
4 | import { addTodo } from "../redux/todoSlice";
5 |
6 | const AddTodoForm = () => {
7 | const [value, setValue] = useState("");
8 | const dispatch = useDispatch();
9 | const onSubmit = (event) => {
10 | event.preventDefault();
11 | if (value) {
12 | dispatch(addTodo({ title: value }));
13 | }
14 | };
15 | return (
16 |
28 | );
29 | };
30 |
31 | export default AddTodoForm;
32 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 Ekaterine (Catherine) Mitagvaria
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/src/redux/todoSlice.js:
--------------------------------------------------------------------------------
1 | import { createSlice } from "@reduxjs/toolkit";
2 | //Random ID
3 | import { v4 as uuid } from "uuid";
4 |
5 | export const todoSlice = createSlice({
6 | name: "todos",
7 | initialState: [
8 | { id: uuid(), title: "Make a to do list", completed: false },
9 | { id: uuid(), title: "Check off the first item", completed: false },
10 | {
11 | id: uuid(),
12 | title: "Realize you already did two things on the list",
13 | completed: false,
14 | },
15 | {
16 | id: uuid(),
17 | title: "Reward yourself with a nice cup of coffee",
18 | completed: false,
19 | },
20 | ],
21 | reducers: {
22 | addTodo: (state, action) => {
23 | const todo = {
24 | id: uuid(),
25 | title: action.payload.title,
26 | completed: false,
27 | };
28 | state.push(todo);
29 | },
30 | markComplete: (state, action) => {
31 | const index = state.findIndex((todo) => todo.id === action.payload.id);
32 | state[index].completed = action.payload.completed;
33 | },
34 | deleteItem: (state, action) => {
35 | return state.filter((todo) => todo.id !== action.payload.id);
36 | },
37 | },
38 | });
39 |
40 | export const { addTodo, markComplete, deleteItem } = todoSlice.actions;
41 |
42 | export default todoSlice.reducer;
43 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "todo-app",
3 | "version": "0.1.0",
4 | "homepage": "https://catherineisonline.github.io/what-todo",
5 | "dependencies": {
6 | "@reduxjs/toolkit": "^1.5.0",
7 | "@testing-library/jest-dom": "^5.11.4",
8 | "@testing-library/react": "^11.1.0",
9 | "@testing-library/user-event": "^12.1.10",
10 | "bootstrap": "^4.6.0",
11 | "react": "^17.0.1",
12 | "react-dom": "^17.0.1",
13 | "react-icons": "^4.3.1",
14 | "react-redux": "^7.2.2",
15 | "react-router-dom": "^6.3.0",
16 | "react-scripts": "^5.0.1",
17 | "redux-logger": "^3.0.6",
18 | "web-vitals": "^1.0.1"
19 | },
20 | "scripts": {
21 | "start": "react-scripts start",
22 | "build": "react-scripts build",
23 | "test": "react-scripts test",
24 | "eject": "react-scripts eject",
25 | "predeploy": "npm run build",
26 | "deploy": "gh-pages -d build"
27 | },
28 | "eslintConfig": {
29 | "extends": [
30 | "react-app",
31 | "react-app/jest"
32 | ]
33 | },
34 | "browserslist": {
35 | "production": [
36 | ">0.2%",
37 | "not dead",
38 | "not op_mini all"
39 | ],
40 | "development": [
41 | "last 1 chrome version",
42 | "last 1 firefox version",
43 | "last 1 safari version"
44 | ]
45 | },
46 | "devDependencies": {
47 | "gh-pages": "^6.1.1"
48 | }
49 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | # What Todo - A simple to do list
4 |
5 | What Todo is a simple to-do list application that was created as a practice project to introduce the use of Redux for the first time.
6 | The project is built using React and CSS. The application allows users to create and manage a list of tasks, and can include features such as adding new tasks, editing existing tasks, marking tasks as completed, and deleting tasks. Additionally, the project is built with Redux, a JavaScript library for managing application state, making it easy to manage the state of the to-do list, and providing a predictable and consistent way of handling updates and changes to the data. The goal of this project is to provide a simple and easy to use to-do list application while practicing the use of Redux and its concepts such as actions, reducers, and store.
7 |
8 |
9 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
10 |
11 | ### Available Scripts
12 |
13 | In the project directory, you can run:
14 |
15 | ##### `npm start`
16 |
17 | Runs the app in the development mode.\
18 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
19 |
20 | The page will reload when you make changes.\
21 | You may also see any lint errors in the console.
22 |
23 | ##### `npm test`
24 |
25 | Launches the test runner in the interactive watch mode.\
26 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
27 |
28 | ##### `npm run build`
29 |
30 | Builds the app for production to the `build` folder.\
31 | It correctly bundles React in production mode and optimizes the build for the best performance.
32 |
33 | The build is minified and the filenames include the hashes.\
34 | Your app is ready to be deployed!
35 |
36 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
37 |
--------------------------------------------------------------------------------
/src/components/TodoItem.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useState } from "react";
3 | //Redux
4 | import { useDispatch } from "react-redux";
5 | import { markComplete, deleteItem } from "../redux/todoSlice";
6 | const TodoItem = ({ id, title, completed }) => {
7 | const dispatch = useDispatch();
8 | const [isActive, setActive] = useState(false);
9 | const markCompleteds = () => {
10 | dispatch(markComplete({ id, completed: !completed }));
11 | setActive(!isActive);
12 | };
13 | const deleteAction = () => {
14 | dispatch(deleteItem({ id }));
15 | };
16 | return (
17 | <>
18 | {isActive ? (
19 |
2 |
3 | # What Todo - A simple to do list
4 |
5 | What Todo is a simple to-do list application that was created as a practice project to introduce the use of Redux for the first time.
6 | The project is built using React and CSS. The application allows users to create and manage a list of tasks, and can include features such as adding new tasks, editing existing tasks, marking tasks as completed, and deleting tasks. Additionally, the project is built with Redux, a JavaScript library for managing application state, making it easy to manage the state of the to-do list, and providing a predictable and consistent way of handling updates and changes to the data. The goal of this project is to provide a simple and easy to use to-do list application while practicing the use of Redux and its concepts such as actions, reducers, and store.
7 |
8 |
9 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
10 |
11 | ### Available Scripts
12 |
13 | In the project directory, you can run:
14 |
15 | ##### `npm start`
16 |
17 | Runs the app in the development mode.\
18 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
19 |
20 | The page will reload when you make changes.\
21 | You may also see any lint errors in the console.
22 |
23 | ##### `npm test`
24 |
25 | Launches the test runner in the interactive watch mode.\
26 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
27 |
28 | ##### `npm run build`
29 |
30 | Builds the app for production to the `build` folder.\
31 | It correctly bundles React in production mode and optimizes the build for the best performance.
32 |
33 | The build is minified and the filenames include the hashes.\
34 | Your app is ready to be deployed!
35 |
36 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
37 |
--------------------------------------------------------------------------------
/src/components/TodoItem.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useState } from "react";
3 | //Redux
4 | import { useDispatch } from "react-redux";
5 | import { markComplete, deleteItem } from "../redux/todoSlice";
6 | const TodoItem = ({ id, title, completed }) => {
7 | const dispatch = useDispatch();
8 | const [isActive, setActive] = useState(false);
9 | const markCompleteds = () => {
10 | dispatch(markComplete({ id, completed: !completed }));
11 | setActive(!isActive);
12 | };
13 | const deleteAction = () => {
14 | dispatch(deleteItem({ id }));
15 | };
16 | return (
17 | <>
18 | {isActive ? (
19 |