add markup

src/Reducers/todo.js

@@ -1,63 +1,13 @@
-import * as types from "../constants/actionTypes";
+// import * as types from "../constants/actionTypes";
+
+import data from "../utils/fakeData";
 
 const initState = {
-	inputData: "",
-	list: []
+	list: data
 };
 
 export default (state = initState, { type, payload }) => {
 	switch (type) {
-		case types.CHANGE_INPUT_VALUE: {
-			return {
-				...state,
-				inputData: payload
-			};
-		}
-		case types.ADD_TO_LIST: {
-			const newData = {
-				value: state.inputData,
-				edit: false,
-				id: new Date().getTime()
-			};
-
-			return {
-				...state,
-				inputData: "",
-				list: state.list.concat(newData)
-			};
-		}
-		case types.TOGGLE_EDIT_FIELD: {
-			console.log("TOGGLE_EDIT_FIELD", payload);
-
-			const list = state.list.map(el => (el.id === payload ? { ...el, edit: !el.edit } : el));
-
-			// const list = state.list.map(el => {
-			// 	if(el.id === payload) {
-			// 		return {...el, edit: !el.edit}
-			// 	} else {
-			// 		return el
-			// 	}
-			// })
-
-			return {
-				...state,
-				list
-			};
-		}
-
-		case types.CHANGE_LIST_VALUE: {
-			const { id, value } = payload;
-			const list = state.list.map(el => (el.id === id ? { ...el, value: value } : el));
-
-			return { ...state, list };
-		}
-
-		case types.DELETE_ITEM_LIST: {
-			const list = state.list.filter(el => el.id !== payload);
-
-			return { ...state, list };
-		}
-
 		default:
 			return state;
 	}

src/actions/todo.js

@@ -1,26 +1,26 @@
-import * as types from "../constants/actionTypes";
+// import * as types from "../constants/actionTypes";
 
-export const changeInputValue = payload => ({
-	type: types.CHANGE_INPUT_VALUE,
-	payload
-});
+// export const changeInputValue = payload => ({
+// 	type: types.CHANGE_INPUT_VALUE,
+// 	payload
+// });
 
-export const addToList = payload => ({
-	type: types.ADD_TO_LIST,
-	payload
-});
+// export const addToList = payload => ({
+// 	type: types.ADD_TO_LIST,
+// 	payload
+// });
 
-export const toggleEditField = payload => ({
-	type: types.TOGGLE_EDIT_FIELD,
-	payload
-});
+// export const toggleEditField = payload => ({
+// 	type: types.TOGGLE_EDIT_FIELD,
+// 	payload
+// });
 
-export const changelistValue = payload => ({
-	type: types.CHANGE_LIST_VALUE,
-	payload
-});
+// export const changelistValue = payload => ({
+// 	type: types.CHANGE_LIST_VALUE,
+// 	payload
+// });
 
-export const deleteItemList = payload => ({
-	type: types.DELETE_ITEM_LIST,
-	payload
-});
+// export const deleteItemList = payload => ({
+// 	type: types.DELETE_ITEM_LIST,
+// 	payload
+// });

src/components/form/index.js

@@ -1,36 +0,0 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-
-export default class Form extends Component {
-	static contextTypes = {
-		name: PropTypes.string,
-		age: PropTypes.number,
-		children: PropTypes.bool
-	};
-
-	componentDidMount() {
-		console.log("this", this.context);
-	}
-
-	submit = () => {
-		const { addToList } = this.props;
-		addToList();
-	};
-
-	handleChange = e => {
-		const { changeInputValue } = this.props;
-		changeInputValue(e.target.value);
-	};
-
-	render() {
-		const { inputData } = this.props;
-		return (
-			<div>
-				<input type="text" value={inputData} onChange={this.handleChange} />
-				<button type="submit" onClick={this.submit}>
-					LETS GO
-				</button>
-			</div>
-		);
-	}
-}

src/components/header/index.js

@@ -2,10 +2,14 @@ import React from "react";
 import { Link } from "react-router-dom";
 
 export default () => (
-	<header>
-		<nav>
-			<Link to="/">home</Link>
-			<Link to="/fetch">fetch</Link>
+	<header className="header">
+		<nav className="header__nav">
+			<Link className="header__nav-item" to="/">
+				Home
+			</Link>
+			<Link className="header__nav-item" to="/fetch">
+				Weather
+			</Link>
 		</nav>
 	</header>
 );

src/components/list/index.js

@@ -1,51 +0,0 @@
-import React, { Component } from "react";
-
-import { Consumer } from "../../utils";
-
-export default class List extends Component {
-	static contextType = Consumer;
-
-	change = ({ id, value }) => {
-		const { changelistValue } = this.props;
-		changelistValue({ id, value });
-	};
-
-	deleteItem = (e, id) => {
-		e.stopPropagation();
-		const { deleteItemList } = this.props;
-		deleteItemList(id);
-	};
-
-	render() {
-		const { list, toggleEditField } = this.props;
-		console.log("sf", this.context);
-		return (
-			<div className="list">
-				<ul className="list__ul">
-					{list.map(el =>
-						el.edit ? (
-							<li className="list__item" key={el.id}>
-								<input
-									className="list__input"
-									type="text"
-									value={el.value}
-									onChange={e => this.change({ id: el.id, value: e.target.value })}
-								/>
-								<button className="list__btn list__btn--edit" onClick={toggleEditField.bind(null, el.id)}>
-									SAVE MEEEEE
-								</button>
-							</li>
-						) : (
-							<li className="list__item" onClick={toggleEditField.bind(null, el.id)} key={el.id}>
-								{el.value}
-								<button className="list__btn list__btn--remove" onClick={e => this.deleteItem(e, el.id)}>
-									x
-								</button>
-							</li>
-						)
-					)}
-				</ul>
-			</div>
-		);
-	}
-}

src/components/page/index.js

@@ -1,31 +0,0 @@
-import React, { Component, Fragment } from "react";
-
-import List from "../list";
-import Form from "../form";
-import "./style.css";
-
-export default class Page extends Component {
-	render() {
-		const {
-			list,
-			inputData,
-			addToList,
-			changeInputValue,
-			toggleEditField,
-			changelistValue,
-			deleteItemList
-		} = this.props;
-		console.log("list", list);
-		return (
-			<Fragment>
-				<Form changeInputValue={changeInputValue} addToList={addToList} inputData={inputData} />
-				<List
-					deleteItemList={deleteItemList}
-					changelistValue={changelistValue}
-					toggleEditField={toggleEditField}
-					list={list}
-				/>
-			</Fragment>
-		);
-	}
-}

src/components/page/style.css

@@ -1,3 +0,0 @@
-.container {
-	display: flex;
-}

src/components/weather/index.js

@@ -1,17 +0,0 @@
-import React, { Component } from "react";
-
-import { Consumer } from "../../utils";
-
-export default class Add extends Component {
-	render() {
-		console.log("render", this);
-		return (
-			<Consumer>
-				{value => {
-					console.log("val", value);
-					return <div>Hello </div>;
-				}}
-			</Consumer>
-		);
-	}
-}

src/constants/actionTypes.js

@@ -1,8 +1,8 @@
-export const CHANGE_INPUT_VALUE = "CHANGE_INPUT_VALUE";
-export const ADD_TO_LIST = "ADD_TO_LIST";
-export const TOGGLE_EDIT_FIELD = "TOGGLE_EDIT_FIELD";
-export const CHANGE_LIST_VALUE = "CHANGE_LIST_VALUE";
-export const DELETE_ITEM_LIST = "DELETE_ITEM_LIST";
+// export const CHANGE_INPUT_VALUE = "CHANGE_INPUT_VALUE";
+// export const ADD_TO_LIST = "ADD_TO_LIST";
+// export const TOGGLE_EDIT_FIELD = "TOGGLE_EDIT_FIELD";
+// export const CHANGE_LIST_VALUE = "CHANGE_LIST_VALUE";
+// export const DELETE_ITEM_LIST = "DELETE_ITEM_LIST";
 
 export const WEATHER_REQUEST = "WEATHER_REQUEST";
 export const WEATHER_REQUEST_SUCCESS = "WEATHER_REQUEST_SUCCESS";

src/container/App.css

@@ -1,32 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/container/App.js

@@ -1,67 +1,48 @@
 import React, { Component } from "react";
-import { string, number, bool } from "prop-types";
 import { bindActionCreators } from "redux";
 import { connect } from "react-redux";
 
-import Page from "../components/page";
+import { Button, Icon } from "antd";
+
 import * as actions from "../actions/todo";
 
 class App extends Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			name: "tony",
-			age: 26,
-			children: false
-		};
-
-		console.log("constructor");
-	}
-
-	componentDidMount() {
-		console.log("componentDidMount");
-	}
-
-	componentDidUpdate(prevProps, prevState, prevContext) {
-		if (this.props.error && !prevProps.error) console.log("componentDidUpdate");
-	}
-
-	shouldComponentUpdate(nextProp, nextState, nextContext) {
-		console.log("shouldComponentUpdate");
-		return true;
-	}
-
-	componentWillUnmount() {
-		console.log("componentWillUnmount");
-	}
-
-	static childContextTypes = {
-		name: string,
-		age: number,
-		children: bool
-	};
-
-	getChildContext() {
-		const { name, age, children } = this.state;
-		return {
-			name,
-			age,
-			children
-		};
-	}
-
 	render() {
-		console.log("render");
+		const { list } = this.props;
 		return (
-			<div className="container">
-				<Page {...this.props} />
+			<div className="todo">
+				<div className="list">
+					{list.map(el => (
+						<div key={el.id} className="list__item">
+							<div className="list__info">
+								<div className="list__address">
+									<span className="list__origin">{el.origin}</span>
+									<Icon type="arrow-right" />
+									<span className="list__destination">{el.destination}</span>
+								</div>
+								<div className="list__driver">
+									<span className="list__driver-name">Контактное лицо: {el.contactName}</span>
+									<span className="list__driver-night">Тип рейса: {el.night ? "Ночьной" : "Дневной"}</span>
+									<span className="list__driver-body">Тип кузова: {el.bodyType}</span>
+								</div>
+							</div>
+							<div className="list__buttons">
+								<Button size="small" type="primary">
+									<Icon type="edit" />
+								</Button>
+								<Button size="small" type="danger">
+									<Icon type="close" />
+								</Button>
+							</div>
+						</div>
+					))}
+				</div>
 			</div>
 		);
 	}
 }
 
 const mapStateToProps = state => ({
-	inputData: state.todo.inputData,
 	list: state.todo.list
 });
 

src/container/fetchPage.js

@@ -3,8 +3,6 @@ import { connect } from "react-redux";
 import { bindActionCreators } from "redux";
 
 import { takeInputValue, getWeather } from "../actions/weather";
-import Add from "../components/weather";
-import { Provider } from "../utils";
 
 class FetchPage extends Component {
 	state = {
@@ -25,22 +23,18 @@ class FetchPage extends Component {
 
 	render() {
 		const { weather, error } = this.props;
-		console.log("weather", weather);
+		// console.log("weather", weather);
 		return (
 			<div className="page">
-				<Provider value={weather}>
-					<input className="page__input page__input--blue" type="text" onChange={this.change} />
-					<button className="page__button" onClick={this.click}>
-						SHOW
-					</button>
+				<input className="page__input page__input--blue" type="text" onChange={this.change} />
+				<button className="page__button" onClick={this.click}>
+					SHOW
+				</button>
 
-					<div>{weather && weather.location && weather.location.city}</div>
-					<div>{error && error}</div>
+				<div>{weather && weather.location && weather.location.city}</div>
+				<div>{error && error}</div>
 
-					<Add />
-
-					<button onClick={this.add}>PUSH ME</button>
-				</Provider>
+				<button onClick={this.add}>PUSH ME</button>
 			</div>
 		);
 	}

src/router.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from "react";
+import React from "react";
 import { Switch, Route } from "react-router-dom";
 import App from "./container/App";
 import FetchPage from "./container/fetchPage";
@@ -6,11 +6,11 @@ import FetchPage from "./container/fetchPage";
 import Header from "./components/header";
 
 export default () => (
-	<Fragment>
+	<div className="container">
 		<Header />
 		<Switch>
 			<Route path="/" exact component={App} />
 			<Route exact path="/fetch" component={FetchPage} />
 		</Switch>
-	</Fragment>
+	</div>
 );

src/style/abstracts/_variables.scss

@@ -1,7 +1,26 @@
+// COLORS
 $color-black: #000;
 $color-white: #fff;
+$color-red: #f00;
+$color-red-dark: #b40000;
+$color-yellow: #f5a623;
+$color-green: #0ea500;
+$color-blue: #008ff7;
+$color-blue-light-dark: #4a90e2;
+$color-blue-dark: #29336f;
+$color-blue-light: #eaf1f9;
+$color-brown: #4c4c4c;
+$color-grey: #51606a;
+$color-grey-light: #999999;
+$color-grey-lighter: #d8d8d8;
+$color-grey-the-lightest: #f9fbfd;
+$color-grey-transparent: rgba(247, 249, 251, 0.7);
 
-$color-grey: #eee;
+//BASE COLORS
+$color-shadow: #d4d4d4;
 
-$color-red: red;
-$color-blue: blue;
+// BASE
+$color-backgtound: #f5f8fb;
+$box-shadow: 0 0 16px 0 $color-shadow;
+$input-box-shadow: 0 8px 16px rgba($color-black, 0.1);
+$layout-border-radius: 2px;

src/style/base/_base.scss

@@ -0,0 +1,97 @@
+*,
+*:after,
+*:before {
+	margin: 0;
+	padding: 0;
+	-webkit-box-sizing: inherit;
+	box-sizing: inherit;
+}
+
+html {
+	font-size: 62.5%;
+}
+
+body,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+pre,
+form,
+fieldset,
+input,
+textarea,
+p,
+blockquote,
+th,
+td {
+	padding: 0;
+	margin: 0;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+fieldset,
+img {
+	border: 0;
+}
+address,
+caption,
+cite,
+code,
+dfn,
+em,
+strong,
+th,
+var {
+	font-weight: normal;
+	font-style: normal;
+}
+ol,
+ul {
+	list-style: none;
+}
+caption,
+th {
+	text-align: left;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-weight: normal;
+	font-size: 100%;
+}
+
+abbr,
+acronym {
+	border: 0;
+}
+
+body {
+	font-family: "roboto", sans-serif;
+	line-height: 1.7;
+	box-sizing: border-box;
+	background: $color-backgtound;
+	min-width: 320px;
+}
+
+a:hover {
+	text-decoration: none;
+}
+
+button {
+	cursor: pointer;
+}

src/style/components/_header.scss

@@ -0,0 +1,20 @@
+.header {
+	background-color: $color-blue-light;
+	padding: 2rem;
+
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+
+	&__nav {
+		margin-right: 3rem;
+	}
+
+	&__nav-item {
+		padding: 2rem 4rem;
+		&:hover {
+			color: $color-white;
+			background-color: $color-blue;
+		}
+	}
+}

src/style/components/_list.scss

@@ -1,40 +1,53 @@
 .list {
-	width: 40%;
+	width: 30%;
 	display: flex;
-	padding: 50px;
-
-	&__ul {
-		list-style: none;
-	}
+	flex-direction: column;
 
 	&__item {
-		padding: 20px 10px;
-		border: 1px solid $color-grey;
-		border-radius: 3px;
+		display: flex;
+		justify-content: space-between;
+		padding: 1rem;
+		border: 1px solid $color-blue-light;
 
 		&:not(:last-child) {
-			margin-bottom: 5px;
+			margin-bottom: 2rem;
 		}
 	}
 
-	&__input {
-		font-size: 16px;
-		font-style: inherit;
+	&__info {
+		width: 80%;
+		display: flex;
+		flex-direction: column;
 	}
 
-	&__btn {
-		background-color: transparent;
-		border-radius: 3px;
-		font-size: 14px;
+	&__address {
+		display: flex;
+		align-items: center;
+	}
 
-		&--remove {
-			background: $color-red;
-			color: $color-white;
-		}
+	&__origin {
+		margin-right: 3rem;
+	}
 
-		&--edit {
-			color: $color-white;
-			background: $color-blue;
-		}
+	&__destination {
+		margin-left: 3rem;
+	}
+
+	&__driver {
+		display: flex;
+		flex-direction: column;
+	}
+
+	&__driver-name {
+		margin-right: 3rem;
+	}
+
+	&__driver-night {
+		font-size: 1.2rem;
+	}
+
+	&__buttons {
+		display: flex;
+		flex-direction: column;
 	}
 }

src/style/index.scss

@@ -1,9 +1,11 @@
-@import "antd/dist/antd.css";
+@import "~antd/dist/antd.css";
 
 @import "abstracts/variables";
 @import "abstracts/mixins";
 
 @import "base/base";
 
+@import "layout/container";
+
 @import "components/list";
-@import "page/home";
+@import "components/header";

src/style/layout/container.scss

@@ -0,0 +1,9 @@
+.container {
+	max-width: 192rem;
+	width: 100%;
+	margin: 0 auto;
+}
+
+.todo {
+	padding: 3rem;
+}

src/utils/fakeData.js

@@ -0,0 +1,32 @@
+export default [
+	{
+		id: 1,
+		origin: "Kharkiv",
+		destination: "Kiev",
+		weight: 1000,
+		contactName: "Anthony",
+		night: true,
+		bodyType: "type1",
+		load: ["some1", "some2", "some3", "some4", "some5"]
+	},
+	{
+		id: 2,
+		origin: "Kiev",
+		destination: "Odessa",
+		weight: 100,
+		contactName: "John",
+		night: false,
+		bodyType: "type2",
+		load: ["some1", "some2", "some3", "some4", "some5"]
+	},
+	{
+		id: 3,
+		origin: "Lviv",
+		destination: "Kiev",
+		weight: 3000,
+		contactName: "Alex",
+		night: true,
+		bodyType: "type3",
+		load: ["some1", "some2", "some3", "some4", "some5"]
+	}
+];

src/utils/index.js

@@ -1,9 +0,0 @@
-import React from "react";
-
-const contextObject = {
-	brain: true,
-	coffe: false
-};
-
-// export const myContext = React.createContext(contextObject);
-export const { Provider, Consumer } = React.createContext(contextObject);