Skip to content

Commit 92d54c5

Browse files
pmochalovpmochalov
committed
update slice
1 parent 77fb159 commit 92d54c5

File tree

14 files changed

+152
-121
lines changed

14 files changed

+152
-121
lines changed

‎README.md

Lines changed: 20 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,33 @@
1-
# Getting Started with Create React App
1+
# Канбан-доска
22

3-
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
3+
Учебное приложение для изучения state-менеджера Redux(Redux toolkit).
44

5-
## Available Scripts
5+
Канбан-доска - это инструмент управления проектами и задачами. Представляет собой таблицу, состоящую из столбцов и строк.
66

7-
In the project directory, you can run:
7+
**[Демо](https://mchlv.ru/projects/kanban)**
88

9-
### `npm start`
9+
![](cover.png)
1010

11-
Runs the app in the development mode.\
12-
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
11+
## Возможности
12+
- Добавлениеи и редактирование задач;
13+
- Добавление и редактирование групп;
14+
- Редактирование названия доски.
15+
- ... список дополняется 🙂
1316

14-
The page will reload when you make changes.\
15-
You may also see any lint errors in the console.
17+
## Стек
18+
- React.js
19+
- Redux Toolkit
20+
- Bootstrap
1621

17-
### `npm test`
22+
## Запуск
1823

19-
Launches the test runner in the interactive watch mode.\
20-
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
24+
Действия стандартные для запуска create-react-app:
2125

22-
### `npm run build`
26+
#### `npm start`
2327

24-
Builds the app for production to the `build` folder.\
25-
It correctly bundles React in production mode and optimizes the build for the best performance.
28+
Запускает приложение в режиме разработки.
2629

27-
The build is minified and the filenames include the hashes.\
28-
Your app is ready to be deployed!
30+
#### `npm run build`
2931

30-
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
32+
Формирует production-версию приложения и выгружает файлы в папку `build`.
3133

32-
### `npm run eject`
33-
34-
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
35-
36-
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37-
38-
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
39-
40-
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
41-
42-
## Learn More
43-
44-
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45-
46-
To learn React, check out the [React documentation](https://reactjs.org/).
47-
48-
### Code Splitting
49-
50-
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51-
52-
### Analyzing the Bundle Size
53-
54-
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55-
56-
### Making a Progressive Web App
57-
58-
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59-
60-
### Advanced Configuration
61-
62-
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63-
64-
### Deployment
65-
66-
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67-
68-
### `npm run build` fails to minify
69-
70-
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

‎cover.png

25.8 KB
Loading

‎public/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27-
<title>Todo</title>
27+
<title>Канбан</title>
2828

2929
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
3030

‎src/App.js

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
import React from "react";
2-
import { useSelector } from "react-redux";
32

43
import { Title } from "./components/TItle/Title";
54
import { Todos } from "./components/Todos/Todos";
65

76
function App() {
8-
9-
107
return (
118
<div className="container">
129
<div className="row py-4">

‎src/components/TItle/Title.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
22
import { useSelector, useDispatch } from "react-redux";
33

4-
import { update } from "../../appSlice";
4+
import { update } from "./../../slices/appSlice";
55

66
export const Title = () => {
77
const app = useSelector((state) => state.app);

‎src/components/Todos/Card.jsx

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { TodosNotFounded } from "./TodosNotFounded";
44
import { Todo } from "./Todo";
55

66
import { useDispatch } from "react-redux";
7-
import { add } from "../../todosSlice";
7+
import { add } from "../../slices/todosSlice";
88

99
export const Card = ({
1010
todos,
@@ -42,16 +42,17 @@ export const Card = ({
4242
setIsNewAdded(false);
4343
};
4444

45+
const cardClass = `card mb-3 bg-${category.theme} bg-opacity-25 border-${category.theme} border-opacity-25`;
46+
const headerClass = `card-header bg-${category.theme} bg-opacity-25 border-0 d-flex justify-content-between align-items-center`;
47+
4548
return (
4649
<div
47-
className={`card mb-3 bg-${category.theme} bg-opacity-25 border-${category.theme} border-opacity-25`}
50+
className={cardClass}
4851
onDragOver={handleDragOver}
4952
onDragLeave={handleDragLeave}
5053
data-card-id={category.id}
5154
>
52-
<div
53-
className={`card-header bg-${category.theme} bg-opacity-25 border-0 d-flex justify-content-between align-items-center`}
54-
>
55+
<div className={headerClass}>
5556
<div className='fw-bold'>
5657
<span>{category.title}</span>&nbsp;
5758
<small className='fw-normal text-muted'>
@@ -69,7 +70,7 @@ export const Card = ({
6970
</div>
7071
<ul className='list-group list-group-flush'>
7172
{isNewAdded && (
72-
<li className='list-group-item d-flex flex-column'>
73+
<li className='list-group-item d-flex flex-column px-2'>
7374
<div>
7475
<textarea
7576
value={todo}
@@ -95,7 +96,9 @@ export const Card = ({
9596
</li>
9697
)}
9798

98-
{todos.length === 0 && <TodosNotFounded theme={category.theme}/>}
99+
{todos.length === 0 && (
100+
<TodosNotFounded theme={category.theme} />
101+
)}
99102

100103
{todos.map((item) => (
101104
<Todo

‎src/components/Todos/CardNew.jsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import React from "react";
2-
import { useDispatch } from "react-redux";
3-
import { add } from "../../categoriesSlice";
4-
5-
const themes = ["success", "primary", "danger", "warning"];
2+
import { useDispatch, useSelector } from "react-redux";
3+
import { add } from "./../../slices/categoriesSlice";
64

75
export const CardNew = () => {
86
const dispatch = useDispatch();
7+
const { themes } = useSelector((store) => store.app);
98

109
const [title, setTitle] = React.useState("");
1110
const [theme, setTheme] = React.useState(themes[0]);

‎src/components/Todos/Todo.jsx

Lines changed: 49 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
22

33
import { useSelector, useDispatch } from "react-redux";
4-
import { update, remove } from "../../todosSlice";
4+
import { update, remove } from "./../../slices/todosSlice";
55

66
export const Todo = ({ item, handleDragStart, handleDragEnd }) => {
77
const todos = useSelector((state) => state.todos);
@@ -14,19 +14,8 @@ export const Todo = ({ item, handleDragStart, handleDragEnd }) => {
1414
dispatch(remove(item.id));
1515
};
1616

17-
const handleTodoEdit = (e) => {
18-
if (!e.currentTarget.dataset.id) {
19-
return;
20-
}
21-
22-
const todoId = +e.currentTarget.dataset.id;
23-
const todoById = todos.find((todo) => todo.id === todoId);
24-
25-
if (!todoById) {
26-
return;
27-
}
28-
29-
setTodoEdit({ ...todoById });
17+
const handleTodoEdit = () => {
18+
setTodoEdit({ ...item });
3019
setIsEditing(true);
3120
};
3221

@@ -46,9 +35,18 @@ export const Todo = ({ item, handleDragStart, handleDragEnd }) => {
4635
setIsEditing(false);
4736
};
4837

38+
const handleTodoDone = () => {
39+
dispatch(
40+
update({
41+
id: item.id,
42+
obj: { ...item, done: !item.done },
43+
})
44+
);
45+
};
46+
4947
if (isEditing) {
5048
return (
51-
<li className='list-group-item d-flex flex-column'>
49+
<li className='list-group-item d-flex flex-column px-2'>
5250
<div>
5351
<textarea
5452
value={todoEdit.todo}
@@ -78,31 +76,41 @@ export const Todo = ({ item, handleDragStart, handleDragEnd }) => {
7876
);
7977
}
8078

81-
if (!isEditing) {
82-
return (
83-
<li
84-
onDoubleClick={handleTodoEdit}
85-
className='list-group-item d-flex justify-content-between align-items-center'
86-
data-id={item.id}
87-
draggable='true'
88-
onDragStart={handleDragStart}
89-
onDragEnd={handleDragEnd}
90-
>
91-
<div className='d-flex flex-column'>
92-
<div>{item.todo}</div>
93-
<div className='mt-2'>
94-
<small className='text-muted'>
95-
{new Date(item.date).toLocaleString("ru-RU")}
96-
</small>
97-
</div>
98-
</div>
99-
<button
100-
onClick={handleRemove}
101-
className='btn btn-light btn-sm align-self-start'
79+
return (
80+
<li
81+
data-id={item.id}
82+
onDoubleClick={handleTodoEdit}
83+
className='list-group-item d-flex justify-content-between align-items-center px-2'
84+
draggable='true'
85+
onDragStart={handleDragStart}
86+
onDragEnd={handleDragEnd}
87+
>
88+
<div className='align-self-start'>
89+
<input
90+
type='checkbox'
91+
onChange={handleTodoDone}
92+
checked={item.done}
93+
className='form-check-input'
94+
/>
95+
</div>
96+
<div className='d-flex flex-column flex-grow-1 px-2'>
97+
<div
98+
className={item.done ? "text-decoration-line-through" : ""}
10299
>
103-
&times;
104-
</button>
105-
</li>
106-
);
107-
}
100+
{item.todo}
101+
</div>
102+
<div className='mt-2'>
103+
<small className='text-muted'>
104+
{new Date(item.date).toLocaleString("ru-RU")}
105+
</small>
106+
</div>
107+
</div>
108+
<button
109+
onClick={handleRemove}
110+
className='btn btn-light btn-sm align-self-start'
111+
>
112+
&times;
113+
</button>
114+
</li>
115+
);
108116
};

‎src/components/Todos/Todos.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from "react";
33
import { useDispatch, useSelector } from "react-redux";
44
import { Card } from "./Card";
55
import { CardNew } from "./CardNew";
6-
import { update } from "../../todosSlice";
6+
import { update } from "./../../slices/todosSlice";
77

88
export const Todos = () => {
99
const dispatch = useDispatch();

‎src/data.js

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
export const initialState = [
2+
{
3+
id: 1,
4+
done: false,
5+
todo: 'Купить 🥛молока',
6+
category: 1,
7+
date: 1683107877047
8+
},
9+
{
10+
id: 2,
11+
done: true,
12+
todo: 'Заказать новые кроссовки',
13+
category: 1,
14+
date: 1686017877047
15+
},
16+
{
17+
id: 3,
18+
done: true,
19+
todo: 'Покататься на велосипеде по ночному городу',
20+
category: 3,
21+
date: 1685527877047
22+
},
23+
{
24+
id: 4,
25+
done: false,
26+
todo: 'Прыгнуть с парашютом',
27+
category: 1,
28+
date: 1695012877147
29+
},
30+
{
31+
id: 5,
32+
done: false,
33+
todo: 'Обновить резюме',
34+
category: 3,
35+
date: 1679912877147
36+
},
37+
{
38+
id: 6,
39+
done: false,
40+
todo: 'Почесать 🐱кота',
41+
category: 2,
42+
date: 1680012877147
43+
},
44+
{
45+
id: 7,
46+
done: true,
47+
todo: 'Пошуршать 🍁листьями в осеннем лесу',
48+
category: 3,
49+
date: 1680012877147
50+
},
51+
{
52+
id: 8,
53+
done: true,
54+
todo: '😴😴😴',
55+
category: 3,
56+
date: 1680922877147
57+
},
58+
]

0 commit comments

Comments
 (0)