├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.css ├── App.js ├── TaskForm.js ├── TaskItem.js ├── TasksHeader.js ├── TasksList.js ├── index.js └── styles.css /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Cours sur React et Redux Toolkit 2 | 3 | 1. Clonez le dépot sur votre propre machine : `git clone https://github.com/liorchamla/cours-redux-toolkit.git` ou alors ouvrez le dans Gitpod :) 4 | 2. Installez les dépendances : `npm install` (fait par défaut sur Gitpod) 5 | 3. Lancez l'application : `npm start` 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cours-redux", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@picocss/pico": "^1.4.4", 7 | "@testing-library/jest-dom": "^5.16.2", 8 | "@testing-library/react": "^12.1.3", 9 | "@testing-library/user-event": "^13.5.0", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "react-scripts": "5.0.0", 13 | "web-vitals": "^2.1.4" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liorchamla/cours-redux-toolkit/8333141aeb74762259e59beb684973fa2ef84e43/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liorchamla/cours-redux-toolkit/8333141aeb74762259e59beb684973fa2ef84e43/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liorchamla/cours-redux-toolkit/8333141aeb74762259e59beb684973fa2ef84e43/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import "./styles.css"; 3 | import TaskForm from "./TaskForm"; 4 | import TasksHeader from "./TasksHeader"; 5 | import TasksList from "./TasksList"; 6 | 7 | export default function App() { 8 | const [tasks, setTasks] = useState([ 9 | { id: 1, text: "Faire les courses", done: false }, 10 | { id: 2, text: "Ménage !", done: true }, 11 | ]); 12 | 13 | const addTask = (text) => { 14 | const newTask = { 15 | text, 16 | id: Date.now(), 17 | done: false, 18 | }; 19 | 20 | setTasks([...tasks, newTask]); 21 | }; 22 | 23 | const deleteTask = (id) => { 24 | const filteredTasks = tasks.filter((t) => t.id !== id); 25 | setTasks(filteredTasks); 26 | }; 27 | 28 | const toggleTask = (id) => { 29 | const realTask = tasks.find((t) => t.id === id); 30 | const index = tasks.findIndex((t) => t.id === id); 31 | const taskCopy = { ...realTask }; 32 | const tasksListCopy = [...tasks]; 33 | 34 | taskCopy.done = !taskCopy.done; 35 | tasksListCopy[index] = taskCopy; 36 | setTasks(tasksListCopy); 37 | }; 38 | 39 | return ( 40 |
41 |
42 | 43 | 48 | 51 |
52 |
53 | ); 54 | } 55 | -------------------------------------------------------------------------------- /src/TaskForm.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | const TaskForm = (props) => { 4 | const [text, setText] = useState(""); 5 | 6 | const handleSubmit = (event) => { 7 | event.preventDefault(); 8 | 9 | props.addTask(text); 10 | 11 | setText(""); 12 | }; 13 | 14 | return ( 15 |
16 | setText(e.target.value)} 21 | /> 22 |
23 | ); 24 | }; 25 | 26 | export default TaskForm; 27 | -------------------------------------------------------------------------------- /src/TaskItem.js: -------------------------------------------------------------------------------- 1 | const TaskItem = (props) => { 2 | const { task, toggleTask, deleteTask } = props; 3 | 4 | return ( 5 |
6 | 22 |
23 | ); 24 | }; 25 | 26 | export default TaskItem; 27 | -------------------------------------------------------------------------------- /src/TasksHeader.js: -------------------------------------------------------------------------------- 1 | const TasksHeader = (props) => { 2 | const undoneTasks = props.tasks.filter((t) => t.done === false); 3 | 4 | return ( 5 |
6 |

React Todo List

7 |

8 | Tâches à faire : {undoneTasks.length} 9 |

10 |
11 | ); 12 | }; 13 | 14 | export default TasksHeader; 15 | -------------------------------------------------------------------------------- /src/TasksList.js: -------------------------------------------------------------------------------- 1 | import TaskItem from "./TaskItem"; 2 | 3 | const TasksList = (props) => { 4 | return ( 5 | <> 6 | {props.tasks.map((t) => ( 7 | 13 | ))} 14 | 15 | ); 16 | }; 17 | 18 | export default TasksList; 19 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import { StrictMode } from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "@picocss/pico"; 4 | 5 | import App from "./App"; 6 | 7 | const rootElement = document.getElementById("root"); 8 | ReactDOM.render( 9 | 10 | 11 | , 12 | rootElement 13 | ); 14 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liorchamla/cours-redux-toolkit/8333141aeb74762259e59beb684973fa2ef84e43/src/styles.css --------------------------------------------------------------------------------