افزودن قابلیت کشیدن و رها کردن به اپلیکیشن React — از صفر تا صد

1import { SET_TASKS } from './actions';
2const setTasks = (tasks) => {
3    return {
4        type: SET_TASKS,
5        payload: tasks
6    }
7};
8export { setTasks };

1const SET_TASKS = 'SET_TASKS';
2export { SET_TASKS };

1import React from 'react';
2import { Router, Route, Link } from "react-router-dom";
3import HomePage from './HomePage';
4import { createBrowserHistory as createHistory } from 'history'
5import Navbar from 'react-bootstrap/Navbar';
6import Nav from 'react-bootstrap/Nav';
7import './App.css';
8const history = createHistory();
9function App() {
10  return (
11    <div className="App">
12      <Router history={history}>
13        <Navbar bg="primary" expand="lg" variant="dark" >
14          <Navbar.Brand href="#home">Drag and Drop App</Navbar.Brand>
15          <Navbar.Toggle aria-controls="basic-navbar-nav" />
16          <Navbar.Collapse id="basic-navbar-nav">
17            <Nav className="mr-auto">
18              <Nav.Link href="/">Home</Nav.Link>
19            </Nav>
20          </Navbar.Collapse>
21        </Navbar>
22        <Route path="/" exact component={HomePage} />
23      </Router>
24    </div>
25  );
26}
27export default App;

1import React from 'react';
2import { useState, useEffect } from 'react';
3import './HomePage.css';
4import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
5import { connect } from 'react-redux';
6import TaskForm from './TaskForm';
7import { editTask, getTasks, deleteTask } from './requests';
8function HomePage({ tasks }) {
9  const [items, setItems] = useState([]);
10  const [todoItems, setTodoItems] = useState([]);
11  const [doneItems, setDoneItems] = useState([]);
12  const [initialized, setInitialized] = useState(false);
13const onDragEnd = async (evt) => {
14    const { source } = evt;
15    let item = {};
16    if (source.droppableId == "todoDroppable") {
17      item = todoItems[source.index];
18      item.done = true;
19    }
20    else {
21      item = doneItems[source.index];
22      item.done = false;
23    }
24    await editTask(item);
25    await getTodos();
26  };
27const setAllItems = (data) => {
28    if (!Array.isArray(data)) {
29      return;
30    }
31    setItems(data);
32    setTodoItems(data.filter(i => !i.done));
33    setDoneItems(data.filter(i => i.done));
34  }
35const getTodos = async () => {
36    const response = await getTasks();
37    setAllItems(response.data);
38    setInitialized(true);
39  }
40const removeTodo = async (task) => {
41    await deleteTask(task.id);
42    await getTodos();
43  }
44useEffect(() => {
45    setAllItems(tasks);
46    if (!initialized) {
47      getTodos();
48    }
49  }, [tasks]);
50return (
51    <div className="App">
52      <div className='col-12'>
53        <TaskForm />
54        <br />
55      </div>
56      <div className='col-12'>
57        <div className='row list'>
58          <DragDropContext onDragEnd={onDragEnd}>
59            <Droppable droppableId="todoDroppable">
60              {(provided, snapshot) => (
61                <div
62                  className='droppable'
63                  ref={provided.innerRef}
64                >
65                   
66                  <h2>To Do</h2>
67                  <div class="list-group">
68                    {todoItems.map((item, index) => (
69                      <Draggable
70                        key={item.id}
71                        draggableId={item.id}
72                        index={index}
73                      >
74                        {(provided, snapshot) => (
75                          <div
76                            className='list-group-item '
77                            ref={provided.innerRef}
78                            {...provided.draggableProps}
79                            {...provided.dragHandleProps}
80                          >
81                            {item.description}
82                            <a onClick={removeTodo.bind(this, item)}>
83                              <i class="fa fa-close"></i>
84                            </a>
85                          </div>
86                        )}
87                      </Draggable>
88                    ))}
89                  </div>
90                  {provided.placeholder}
91                </div>
92              )}
93            </Droppable>
94            <Droppable droppableId="doneDroppable">
95              {(provided, snapshot) => (
96                <div
97                  className='droppable'
98                  ref={provided.innerRef}
99                >
100                   
101                  <h2>Done</h2>
102                  <div class="list-group">
103                    {doneItems.map((item, index) => (
104                      <Draggable
105                        key={item.id}
106                        draggableId={item.id}
107                        index={index}
108                      >
109                        {(provided, snapshot) => (
110                          <div
111                            className='list-group-item'
112                            ref={provided.innerRef}
113                            {...provided.draggableProps}
114                            {...provided.dragHandleProps}
115                          >
116                            {item.description}
117                            <a onClick={removeTodo.bind(this, item)}>
118                              <i class="fa fa-close"></i>
119                            </a>
120                          </div>
121                        )}
122                      </Draggable>
123                    ))}
124                  </div>
125                  {provided.placeholder}
126                </div>
127              )}
128            </Droppable>
129          </DragDropContext>
130        </div>
131      </div>
132    </div>
133  );
134}
135const mapStateToProps = state => {
136  return {
137    tasks: state.tasks,
138  }
139}
140export default connect(
141  mapStateToProps,
142  null
143)(HomePage);

1.item {
2  padding: 20px;
3  border: 1px solid black;
4  width: 40vw;
5}
6.list {
7  margin-left: 0px;
8}
9.list-group-item {
10  display: flex;
11  justify-content: space-between;
12}
13.list-group-item a {
14  cursor: pointer;
15}
16.droppable {
17  min-height: 100px;
18  width: 40vw;
19  margin-right: 9vw;
20}

1import React from 'react';
2import { Formik } from 'formik';
3import Form from 'react-bootstrap/Form';
4import Col from 'react-bootstrap/Col';
5import Button from 'react-bootstrap/Button';
6import * as yup from 'yup';
7import { addTask, getTasks } from './requests';
8import { connect } from 'react-redux';
9import { setTasks } from './actionCreators';
10import './TaskForm.css';
11const schema = yup.object({
12    description: yup.string().required('Description is required'),
13});
14function ContactForm({ setTasks }) {
15    const handleSubmit = async (evt) => {
16        const isValid = await schema.validate(evt);
17        if (!isValid) {
18            return;
19        }
20        await addTask(evt);
21        const response = await getTasks();
22        setTasks(response.data);
23    }
24return (
25        <div className="form">
26            <Formik
27                validationSchema={schema}
28                onSubmit={handleSubmit}
29            >
30                {({
31                    handleSubmit,
32                    handleChange,
33                    handleBlur,
34                    values,
35                    touched,
36                    isInvalid,
37                    errors,
38                }) => (
39                        <Form noValidate onSubmit={handleSubmit}>
40                            <Form.Row>
41                                <Form.Group as={Col} md="12" controlId="firstName">
42                                    <Form.Label>
43                                        <h4>Add Task</h4>
44                                    </Form.Label>
45                                    <Form.Control
46                                        type="text"
47                                        name="description"
48                                        placeholder="Task Description"
49                                        value={values.description || ''}
50                                        onChange={handleChange}
51                                        isInvalid={touched.description && errors.description}
52                                    />
53                                    <Form.Control.Feedback type="invalid">
54                                        {errors.description}
55                                    </Form.Control.Feedback>
56                                </Form.Group>
57                            </Form.Row>
58                            <Button type="submit" style={{ 'marginRight': '10px' }}>Save</Button>
59                        </Form>
60                    )}
61            </Formik>
62        </div>
63    );
64}
65ContactForm.propTypes = {
66}
67const mapStateToProps = state => {
68    return {
69        tasks: state.tasks,
70    }
71}
72const mapDispatchToProps = dispatch => ({
73    setTasks: tasks => dispatch(setTasks(tasks))
74})
75export default connect(
76    mapStateToProps,
77    mapDispatchToProps
78)(ContactForm);

1import React from 'react';
2import ReactDOM from 'react-dom';
3import './index.css';
4import App from './App';
5import * as serviceWorker from './serviceWorker';
6import { tasksReducer } from './reducers';
7import { Provider } from 'react-redux'
8import { createStore, combineReducers } from 'redux'
9const taskskApp = combineReducers({
10    tasks: tasksReducer,
11})
12const store = createStore(taskskApp);
13ReactDOM.render(
14    <Provider store={store}>
15        <App />
16    </Provider>
17    , document.getElementById('root'));
18// If you want your app to work offline and load faster, you can change
19// unregister() to register() below. Note this comes with some pitfalls.
20// Learn more about service workers: https://bit.ly/CRA-PWA
21serviceWorker.unregister();

1import { SET_TASKS } from './actions';
2function tasksReducer(state = {}, action) {
3    switch (action.type) {
4        case SET_TASKS:
5            state = JSON.parse(JSON.stringify(action.payload));
6            return state;
7        default:
8            return state
9    }
10}
11export { tasksReducer };

1const APIURL = 'http://localhost:3000';
2const axios = require('axios');
3export const getTasks = () => axios.get(`${APIURL}/tasks`);
4export const addTask = (data) => axios.post(`${APIURL}/tasks`, data);
5export const editTask = (data) => axios.put(`${APIURL}/tasks/${data.id}`, data);
6export const deleteTask = (id) => axios.delete(`${APIURL}/tasks/${id}`);

1<!DOCTYPE html>
2
3<html lang="en">
4
5<head>
6
7<meta charset="utf-8" />
8
9<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
10
11<meta name="viewport" content="width=device-width, initial-scale=1" />
12
13<meta name="theme-color" content="#000000" />
14
15<meta name="description" content="Web site created using create-react-app" />
16
17<link rel="apple-touch-icon" href="logo192.png" />
18
19<!--
20
21manifest.json provides metadata used when your web app is installed on a
22
23user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
24
25-->
26
27<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
28
29<!--
30
31Notice the use of%PUBLIC_URL% in the tags above.
32
33It will be replaced with the URL of the `public` folder during the build.
34
35Only files inside the `public` folder can be referenced from the HTML.
36
37Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
38
39work correctly both with client-side routing and a non-root public URL.
40
41Learn how to configure a non-root public URL by running `npm run build`.
42
43-->
44
45<title>React Drag and Drop App</title>
46
47<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
48
49integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
50
51<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
52
53integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
54
55</head>
56
57<body>
58
59<noscript>You need to enable JavaScript to run this app.</noscript>
60
61<div id="root"></div>
62
63<!--
64
65This HTML file is a template.
66
67If you open it directly in the browser, you will see an empty page.
68
69You can add webfonts, meta tags, or analytics to this file.
70
71The build step will place the bundled scripts into the <body> tag.
72
73To begin the development, run `npm start` or `yarn start`.
74
75To create a production bundle, use `npm run build` or `yarn build`.
76
77-->
78
79</body>
80
81</html>

1{
2  "tasks": [
3  ]
4}