Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 17 additions & 14 deletions db.json
Original file line number Diff line number Diff line change
@@ -1,23 +1,26 @@
{
"tasks": [
{
"id": "gdfgfg564",
"tasks":[
{
"id":1,
"name": "Task 1",
"assignee": "Ivan Ivanov",
"start_date": "10 april",
"due_date": "11 april"
"assignee":"Ivan Ivanov",
"start_date":"2020-04-25T13:25:00.000Z",
"due_date": "2020-05-06T00:00:00.000Z"

},
{
"id":2,
"name": "Task 2",
"assignee": "Ivan Petrov",
"start_date": "10 may",
"due_date": "11 may"
"assignee":"Petr Sidorov",
"start_date":"2020-05-20T00:00:00.000Z",
"due_date": "2020-05-25T00:00:00.000Z"
},
{
"id":3,
"name": "Task 3",
"assignee": "Petr Ivanov",
"start_date": "10 april",
"due_date": "11 april"
"assignee":"Guy Ritchie",
"start_date":"2020-05-26T00:00:00.000Z",
"due_date": "2020-06-01T00:00:00.000Z"
}
]
}
]
}
4,191 changes: 2,592 additions & 1,599 deletions package-lock.json

Large diffs are not rendered by default.

71 changes: 12 additions & 59 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,65 +1,23 @@
{
"name": "project",
"name": "traffic-light",
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

кажется, название стоит изменить )

"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/core": "7.8.4",
"@svgr/webpack": "4.3.3",
"babel-eslint": "10.0.3",
"babel-jest": "^24.9.0",
"babel-loader": "8.0.6",
"babel-plugin-named-asset-import": "^0.3.6",
"babel-preset-react-app": "^9.1.1",
"camelcase": "^5.3.1",
"case-sensitive-paths-webpack-plugin": "2.3.0",
"classnames": "^2.2.6",
"css-loader": "3.4.2",
"dotenv": "8.2.0",
"dotenv-expand": "5.1.0",
"eslint": "^6.6.0",
"eslint-config-react-app": "^5.2.0",
"eslint-loader": "3.0.3",
"eslint-plugin-flowtype": "4.6.0",
"eslint-plugin-import": "2.20.0",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "7.18.0",
"eslint-plugin-react-hooks": "^1.6.1",
"file-loader": "4.3.0",
"fs-extra": "^8.1.0",
"html-webpack-plugin": "4.0.0-beta.11",
"identity-obj-proxy": "3.0.0",
"jest": "24.9.0",
"jest-environment-jsdom-fourteen": "1.0.1",
"jest-resolve": "24.9.0",
"jest-watch-typeahead": "0.4.2",
"mini-css-extract-plugin": "0.9.0",
"optimize-css-assets-webpack-plugin": "5.0.3",
"pnp-webpack-plugin": "1.6.0",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-normalize": "8.0.1",
"postcss-preset-env": "6.7.0",
"postcss-safe-parser": "4.0.1",
"react": "^16.12.0",
"react-app-polyfill": "^1.0.6",
"react-datepicker": "^2.14.0",
"react-dev-utils": "^10.2.0",
"react-dom": "^16.12.0",
"resolve": "1.15.0",
"resolve-url-loader": "3.1.1",
"sass-loader": "8.0.2",
"semver": "6.3.0",
"style-loader": "0.23.1",
"terser-webpack-plugin": "2.3.4",
"url-loader": "2.3.0",
"webpack": "4.41.5",
"webpack-dev-server": "3.10.2",
"webpack-manifest-plugin": "2.2.0",
"workbox-webpack-plugin": "4.3.1"
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-scripts": "3.4.0"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js"
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"mock:api": "json-server --watch db.json --port 4000"
},
"eslintConfig": {
"extends": "react-app"
Expand All @@ -76,11 +34,6 @@
"last 1 safari version"
]
},
"babel": {
"presets": [
"react-app"
]
},
"devDependencies": {
"json-server": "^0.16.1"
}
Expand Down
31 changes: 14 additions & 17 deletions src/components/App/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,40 +2,37 @@ import React, {Component} from 'react';
import styles from './App.module.css';
import {Header} from '../Header/Header';
import {Filters} from '../Filters/Filters';
import {Table} from '../Table/Table';

class App extends Component {
constructor(props) {
import{Table} from '../Table/Table';
class App extends Component{
constructor(props){
super(props);

this.state = {
this.state={
startDate: null,
dueDate: null
dueDate:null
}
}

onStartDateChange = (val) => {
this.setState({startDate: val});
};

onDueDateChange = (val) => {
this.setState({dueDate: val});
};
onStartDateChange = (val) =>{
this.setState({startDate:val})
}
onDueDateChange = (val) =>{
this.setState({dueDate:val})
}

render() {
return (
<div className={styles.container}>
<Header />
<Filters
startDate={this.state.startDate}
dueDate={this.state.dueDate}
dueDate = {this.state.dueDate}
onStartDateChange={this.onStartDateChange}
onDueDateChange={this.onDueDateChange}
/>
/>
<Table />
</div>
)
}
}

export {App};
export {App}
2 changes: 1 addition & 1 deletion src/components/App/App.module.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
.container {
.container{
padding: 40px 30px;
}
13 changes: 0 additions & 13 deletions src/components/Button/Button.jsx

This file was deleted.

18 changes: 0 additions & 18 deletions src/components/Button/Button.module.css

This file was deleted.

9 changes: 9 additions & 0 deletions src/components/Buttons/Buttons.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import React, {Component} from 'react';
import cn from 'classnames';
import styles from './Buttons.module.css';
const Buttons = (props)=>{
return(
<button className={cn(styles.button, props.type === 'grey' ? styles.button__grey : '')}>{props.children}</button>
)
}
export {Buttons}
15 changes: 15 additions & 0 deletions src/components/Buttons/Buttons.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
.button{
border-radius: 4px;
padding:8px;
background: #4a90e2;
color:#fff;
text-transform: uppercase;
font-weight: 700px;
font-size:12px;
line-height: 1em;
cursor:pointer;
}
.button__grey{
background: #ccc;
color: #354354;
}
48 changes: 26 additions & 22 deletions src/components/Filters/Filters.jsx
Original file line number Diff line number Diff line change
@@ -1,45 +1,49 @@
import React from 'react';
import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";
import React, {Component} from 'react';
import styles from './Filters.module.css';
import {Select} from '../Select/Select';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

const selectValues = [
{
value: 1,
label: "My first value"
},
{
value: 2,
label: "My second value"
}
{
value:1,
label:'My first value'
},
{
value:2,
label:'My second value'
},
{
value:3,
label:'My third value'
}
];

class Filters extends React.Component {
render() {
return (
class Filters extends Component{
render(){
return(
<div className={styles.container}>
<div className={styles["filter-item"]}>
<div className={styles.label}>Assignee</div>
<div className={styles.label}>Asignee</div>
<Select values={selectValues} />
</div>
<div className={styles["filter-item"]}>
<div className={styles.label}>Starting Date</div>
<DatePicker
<DatePicker
selected={this.props.startDate}
onChange={date => this.props.onStartDateChange(date)}
/>
onChange={date => this.props.onStartDateChange(date)}
/>
</div>
<div className={styles["filter-item"]}>
<div className={styles.label}>Due Date</div>
<DatePicker
selected={this.props.dueDate}
onChange={date => this.props.onDueDateChange(date)}
onChange={date => this.props.onDueDateChange(date)}
/>
</div>

</div>
)
)
}
}

export {Filters}
export {Filters}
16 changes: 7 additions & 9 deletions src/components/Filters/Filters.module.css
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
.container {
.container{
display: flex;
margin: 12px 0 20px;
margin:12px 0 20px;
}

.label {
.label{
font-size: 16px;
color: #9aa1a9;
margin-bottom: 4px;
font-weight: 700;
color: grey;
margin-bottom: 5px;
font-weight: 700px;
}

.filter-item + .filter-item {
margin-left: 12px;
margin:5px;
}
18 changes: 8 additions & 10 deletions src/components/Header/Header.jsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
import React from 'react';
import React, {Component} from 'react';
import styles from './Header.module.css';
import {Button} from '../Button/Button';

const Header = () => {
return (
import {Buttons} from '../Buttons/Buttons'
const Header = () =>{
return(
<div className={styles.container}>
<h1 className={styles.title}>Tasks</h1>
<Button>+ add</Button>
<h1 className='title'>Tasks</h1>
<Buttons>+ Add</Buttons>
</div>
)
)
}

export {Header}
export {Header}
11 changes: 5 additions & 6 deletions src/components/Header/Header.module.css
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
.container {
.container{
display: flex;
justify-content: space-between;
padding-bottom: 16px;
border-bottom: 1px solid #ccc;
border-bottom: 1px solid #CCC;
}

.title {
font-weight: 900;
margin: 0;
.title{
margin:0;
font-weight: 900px;
}
Loading