├── .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 |
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 |
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
--------------------------------------------------------------------------------