Skip to content

Commit 9d7a36b

Browse files
NikitaSysoevNikitaSysoev
committed
add screen-page DnD
1 parent 1860a4a commit 9d7a36b

File tree

12 files changed

+129
-54
lines changed

12 files changed

+129
-54
lines changed

‎package-lock.json‎

Lines changed: 7 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
{
22
"name": "react-tracker",
3-
"version": "1.0.1",
3+
"version": "1.0.2",
44
"private": true,
55
"dependencies": {
66
"@fortawesome/fontawesome-svg-core": "^1.2.18",
77
"@fortawesome/free-solid-svg-icons": "^5.8.2",
88
"@fortawesome/react-fontawesome": "^0.1.4",
99
"bootstrap": "^4.3.1",
10+
"prop-types": "^15.7.2",
1011
"react": "^16.8.6",
1112
"react-bootstrap": "^1.0.0-beta.9",
1213
"react-dom": "^16.8.6",

‎public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<meta name="theme-color" content="#000000" />
8-
<title>React Tracker</title>
8+
<title>task-tracker by React</title>
99
</head>
1010
<body>
1111
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/App.css‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎src/App.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from 'react';
22
import { Container } from 'react-bootstrap';
33
import { Route, HashRouter as Router } from 'react-router-dom';
44

5-
import './App.css';
65
import Header from './components/header';
76
const Home = React.lazy(() => import('./screens/Home'));
87
const DnD = React.lazy(() => import('./screens/DnD'));

‎src/api/newid.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
let id = 0;
2+
3+
export default function(prefix = 'id') {
4+
id++;
5+
return `${prefix}${id}`;
6+
}

‎src/components/form/index.jsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ export default class TaskForm extends React.Component {
66
constructor(props) {
77
super(props);
88
this.state = {
9+
taskid: null,
910
taskname: '',
1011
taskdesciption: '',
1112
date: null,
@@ -25,7 +26,8 @@ export default class TaskForm extends React.Component {
2526
this.setState({ ...this.initialState })
2627
}
2728

28-
handleAddTask = () => {
29+
handleAddTask = (e) => {
30+
e.preventDefault();
2931
const { taskName, taskdesciption, date, urgent, status } = this.state;
3032
if (taskName && date !== null) {
3133
console.log(this.state)
@@ -79,8 +81,9 @@ export default class TaskForm extends React.Component {
7981
placeholder="Date"
8082
/>
8183
</div>
82-
<small className="form-text text-muted"
83-
>Это поле обязательное для заполнения</small>
84+
<small className="form-text text-muted">
85+
Это поле обязательное для заполнения
86+
</small>
8487
</div>
8588

8689
<div className="form-group form-check">
@@ -92,7 +95,7 @@ export default class TaskForm extends React.Component {
9295
className="form-check-input"
9396
/>
9497
<label className="form-check-label" >
95-
<FontAwesomeIcon icon={faExclamationTriangle} />Urgent
98+
<FontAwesomeIcon icon={faExclamationTriangle} /> Urgent
9699
</label>
97100
</div>
98101

‎src/components/header/index.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 { Link } from 'react-router-dom';
33

4-
const Header = () => {
4+
const Header = (props) => {
55
return (
66
<ul className="nav nav-tabs">
77
<li className="nav-item">

‎src/components/taskList/index.jsx‎

Lines changed: 40 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,48 @@
11
import React from 'react';
2+
import Task from './task';
23

34
export default class TaskList extends React.Component {
4-
constructor(props){
5+
constructor(props) {
56
super(props);
6-
this.state ={
7-
7+
this.state = {
8+
tasks: []
89
}
910
}
10-
render(){
11-
return null;
11+
12+
handleDeleteAll = () => {
13+
console.log('delete all')
14+
}
15+
16+
handleOpenModal = () => {
17+
18+
}
19+
20+
render() {
21+
return (
22+
<div className="card" style={{ marginTop: '20px' }}>
23+
<div className="card-body">
24+
<div className="form-group">
25+
<h3>List of tasks</h3>
26+
<ul id="taksList" className="list-group">
27+
{
28+
this.state.tasks.length ? this.state.tasks.map(item => {
29+
return <Task />
30+
}) : <li className="list-group-item">
31+
<strong className="text-secondary">Список пуст</strong>
32+
</li>
33+
}
34+
</ul>
35+
<button
36+
type="button"
37+
className="btn btn-outline-danger"
38+
onClick={this.handleDeleteAll}
39+
style={{ marginTop: '20px' }}
40+
>
41+
Clear List
42+
</button>
43+
</div>
44+
</div>
45+
</div>
46+
);
1247
}
1348
}

‎src/components/taskList/task.jsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4+
import { faEdit, faTimes, faStar } from '@fortawesome/free-solid-svg-icons';
5+
6+
const Task = ({ openModal, taskname, taskdesciption, date, urgent, status }) => {
7+
return (
8+
<li class="list-group-item">
9+
<a onClick={openModal} href="#">{taskname}</a>
10+
<br />
11+
<span class="text-muted">
12+
<small>{date}</small>
13+
</span>
14+
<br />
15+
<span class="edit_ico">
16+
<FontAwesomeIcon icon={faStar} />
17+
</span>
18+
<span class="edit_ico">
19+
<FontAwesomeIcon icon={faEdit} onClick={openModal} />
20+
</span>
21+
<span class="delete_ico">
22+
<FontAwesomeIcon icon={faTimes} onClick={openModal} />
23+
</span>
24+
</li>
25+
)
26+
}
27+
28+
export default React.memo(Task);

0 commit comments

Comments
 (0)