Skip to content

Commit d6d1c7e

Browse files
author
Fabien Callot
committed
test
1 parent acb8629 commit d6d1c7e

File tree

9 files changed

+225
-169
lines changed

9 files changed

+225
-169
lines changed

‎.vscode/settings.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"dotenv.enableAutocloaking": false
3+
}

‎client/package.json

+6-5
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,15 @@
88
"@testing-library/jest-dom": "^5.14.1",
99
"@testing-library/react": "^13.0.0",
1010
"@testing-library/user-event": "^13.2.1",
11+
"axios": "^0.27.2",
12+
"prop-types": "^15.8.1",
1113
"react": "^18.2.0",
14+
"react-beautiful-dnd": "^13.1.1",
1215
"react-dom": "^18.2.0",
16+
"react-icons": "^4.4.0",
1317
"react-router-dom": "6",
1418
"react-scripts": "5.0.1",
15-
"web-vitals": "^2.1.0",
16-
"axios": "^0.27.2",
17-
"react-icons": "^4.4.0",
18-
"prop-types": "^15.8.1"
19+
"web-vitals": "^2.1.0"
1920
},
2021
"scripts": {
2122
"start": "react-scripts start",
@@ -42,4 +43,4 @@
4243
]
4344
},
4445
"proxy": "http://localhost:3018"
45-
}
46+
}

‎client/src/Requests/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import axios from 'axios';
22
const apiAxios = axios.create({
3-
baseURL: 'https://kanban-node-react-app.herokuapp.com/',
3+
baseURL: 'kanban-node-react-app-production.up.railway.app/',
44
});
55

66
export default apiAxios;

‎client/src/components/Home.jsx

+42-36
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
1-
import * as React from 'react';
2-
import { useState, useEffect } from 'react';
3-
import List from './List';
4-
import getAllLists from '../Requests/getAllLists';
5-
import Modal from './Modal';
6-
import Spinner from './Spinner';
1+
import * as React from "react";
2+
import { useState, useEffect } from "react";
3+
import List from "./List";
4+
import getAllLists from "../Requests/getAllLists";
5+
import Modal from "./Modal";
6+
import Spinner from "./Spinner";
7+
import { DragDropContext } from "react-beautiful-dnd";
78

89
const Home = ({ userId }) => {
910
const [listsData, setListsData] = useState();
1011
const [refreshList, setRefreshList] = useState(false);
1112

13+
const onDragEnd = () => {
14+
console.log("dragged !");
15+
};
16+
1217
useEffect(() => {
1318
getAllLists(setListsData);
1419
if (refreshList) {
@@ -28,41 +33,42 @@ const Home = ({ userId }) => {
2833
<Modal
2934
classNameButton=" list-header-button ml-2 border rounded w-8 h-8 lg:hover:bg-[#373737] lg:hover:border-none lg:hover:scale-125 lg:hover:rotate-90 lg:transition lg:duration-500 lg:hover:duration-1500"
3035
modalId={1}
31-
title={'Create new list'}
36+
title={"Create new list"}
3237
setRefreshList={setRefreshList}
3338
userId={userId}
3439
/>
3540
</div>
3641
</div>
37-
38-
<div>
39-
{listsData ? (
40-
<div className="home-lists flex items-start flex-wrap justify-between">
41-
{listsData
42-
? listsData
43-
.sort((a, b) => (a.id > b.id ? 1 : -1))
44-
.map(
45-
(list) =>
46-
list.user_id === userId && (
47-
<List
48-
key={list.id}
49-
listName={list.name}
50-
listId={list.id}
51-
setRefreshList={setRefreshList}
52-
/>
53-
)
54-
)
55-
: null}
56-
</div>
57-
) : (
58-
<>
59-
<Spinner classNameSpinner=" block mr-auto ml-auto w-20 h-20 text-gray-200 animate-spin dark:text-gray-600 fill-gray-600 dark:fill-gray-300" />
60-
<p className="text-center">
61-
The first load may take some time, so be patient :)
62-
</p>
63-
</>
64-
)}
65-
</div>
42+
<DragDropContext onDragEnd={onDragEnd}>
43+
<div>
44+
{listsData ? (
45+
<div className="home-lists flex items-start flex-wrap justify-between">
46+
{listsData
47+
? listsData
48+
.sort((a, b) => (a.id > b.id ? 1 : -1))
49+
.map(
50+
(list) =>
51+
list.user_id === userId && (
52+
<List
53+
key={list.id}
54+
listName={list.name}
55+
listId={list.id}
56+
setRefreshList={setRefreshList}
57+
/>
58+
)
59+
)
60+
: null}
61+
</div>
62+
) : (
63+
<>
64+
<Spinner classNameSpinner=" block mr-auto ml-auto w-20 h-20 text-gray-200 animate-spin dark:text-gray-600 fill-gray-600 dark:fill-gray-300" />
65+
<p className="text-center">
66+
The first load may take some time, so be patient :)
67+
</p>
68+
</>
69+
)}
70+
</div>
71+
</DragDropContext>
6672
</div>
6773
);
6874
};

‎client/src/components/List.jsx

+39-28
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import { React, useState, useEffect } from 'react';
2-
import { getAllTasksByListId } from '../Requests/getAllTasksByListId';
3-
import { getAllTags } from '../Requests/getAllTags';
4-
import Task from './Task';
5-
import Modal from './Modal';
1+
import { React, useState, useEffect } from "react";
2+
import { getAllTasksByListId } from "../Requests/getAllTasksByListId";
3+
import { getAllTags } from "../Requests/getAllTags";
4+
import Task from "./Task";
5+
import Modal from "./Modal";
6+
import { Droppable } from "react-beautiful-dnd";
67

78
const List = ({ listId, listName, setRefreshList }) => {
89
const [tasksData, setTasksData] = useState(null);
@@ -22,6 +23,7 @@ const List = ({ listId, listName, setRefreshList }) => {
2223
}, [listId, refreshTask, setRefreshList]);
2324
return (
2425
<div
26+
onDrag={console.log("yeees")}
2527
className={`${listId} bg-[#262626] sm:w-[300px] sm:max-w-[300px] w-[80%] max-w-[250px] mx-auto my-4 p-4 rounded-lg h-auto`}
2628
>
2729
<div className="list-header flex justify-between items-center">
@@ -32,7 +34,7 @@ const List = ({ listId, listName, setRefreshList }) => {
3234
<Modal
3335
modalId={3}
3436
classNameButton={`${listId} edit-button`}
35-
title={'Edit list'}
37+
title={"Edit list"}
3638
currentListName={listName}
3739
listId={listId}
3840
setRefreshList={setRefreshList}
@@ -43,35 +45,44 @@ const List = ({ listId, listName, setRefreshList }) => {
4345
<Modal
4446
modalId={2}
4547
classNameButton=" mt-0 mb-0 ml-0 border rounded w-8 h-8 lg:hover:bg-[#373737] lg:hover:border-none lg:hover:scale-125 lg:hover:rotate-90 lg:transition lg:duration-500 lg:hover:duration-1500"
46-
title={'Create new task'}
48+
title={"Create new task"}
4749
listId={listId}
4850
setRefreshTask={setRefreshTask}
4951
tagsData={tagsData}
5052
selectedTag={selectedTag}
5153
setSelectedTag={setSelectedTag}
5254
/>
5355
</div>
54-
<div className="list-tasks">
55-
{tasksData &&
56-
tasksData
57-
.sort((a, b) => (a.id > b.id ? 1 : -1))
58-
.map((task) => (
59-
<Task
60-
//for task
61-
key={task.id}
62-
name={task.description}
63-
taskId={task.id}
64-
bgColor={task.color}
65-
//modal in task
66-
listId={listId}
67-
titleModal={'Edit list'}
68-
setRefreshTask={setRefreshTask}
69-
tagsData={tagsData}
70-
selectedTag={selectedTag}
71-
setSelectedTag={setSelectedTag}
72-
/>
73-
))}
74-
</div>
56+
<Droppable droppableId={listId}>
57+
{(provider) => (
58+
<div
59+
{...provider.droppableProps}
60+
ref={provider.innerRef}
61+
className="list-tasks"
62+
>
63+
{tasksData &&
64+
tasksData
65+
.sort((a, b) => (a.id > b.id ? 1 : -1))
66+
.map((task, index) => (
67+
<Task
68+
//for task
69+
index={index}
70+
key={task.id}
71+
name={task.description}
72+
taskId={task.id}
73+
bgColor={task.color}
74+
//modal in task
75+
listId={listId}
76+
titleModal={"Edit list"}
77+
setRefreshTask={setRefreshTask}
78+
tagsData={tagsData}
79+
selectedTag={selectedTag}
80+
setSelectedTag={setSelectedTag}
81+
/>
82+
))}
83+
</div>
84+
)}
85+
</Droppable>
7586
</div>
7687
);
7788
};

‎client/src/components/Task.jsx

+33-24
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
import { React } from 'react';
2-
import Modal from './Modal';
1+
import { React } from "react";
2+
import Modal from "./Modal";
3+
import { Draggable } from "react-beautiful-dnd";
34

45
const Task = ({
6+
index,
57
name,
68
taskId,
79
setRefreshTask,
@@ -12,28 +14,35 @@ const Task = ({
1214
bgColor,
1315
}) => {
1416
return (
15-
<div
16-
id={taskId}
17-
style={{
18-
backgroundColor: `${bgColor}`,
19-
}}
20-
className={` bg-gray-500 flex justify-between px-4 py-1 mx-auto my-3 rounded text-center`}
21-
>
22-
<p className="text-just leading-10">{name}</p>
23-
<Modal
24-
modalId={4}
25-
classNameButtonModal={`${taskId} edit-button`}
26-
title={'Edit task'}
27-
listId={listId}
28-
taskId={taskId}
29-
setRefreshTask={setRefreshTask}
30-
tagsData={tagsData}
31-
selectedTag={selectedTag}
32-
setSelectedTag={setSelectedTag}
33-
currentTaskName={name && name}
34-
currentTaskColor={bgColor && bgColor}
35-
/>
36-
</div>
17+
<Draggable draggableId={taskId} index={index}>
18+
{(provided) => (
19+
<div
20+
id={taskId}
21+
style={{
22+
backgroundColor: `${bgColor}`,
23+
}}
24+
className={` bg-gray-500 flex justify-between px-4 py-1 mx-auto my-3 rounded text-center`}
25+
{...provided.draggableProps}
26+
{...provided.dragHandleProps}
27+
ref={provided.innerRef}
28+
>
29+
<p className="text-just leading-10">{name}</p>
30+
<Modal
31+
modalId={4}
32+
classNameButtonModal={`${taskId} edit-button`}
33+
title={"Edit task"}
34+
listId={listId}
35+
taskId={taskId}
36+
setRefreshTask={setRefreshTask}
37+
tagsData={tagsData}
38+
selectedTag={selectedTag}
39+
setSelectedTag={setSelectedTag}
40+
currentTaskName={name && name}
41+
currentTaskColor={bgColor && bgColor}
42+
/>
43+
</div>
44+
)}
45+
</Draggable>
3746
);
3847
};
3948
export default Task;

0 commit comments

Comments
 (0)