Added features

homeworks/homework-1/app/src/App.css

@@ -1,13 +1,4 @@
-.App-logo {
-  height: 200px;
-}
-
-.App-header {
-  background-color: rgb(108, 182, 39);
-  height: 260px;
-  padding: 10px;
-  color: white;
-}
+
 
 
 

homeworks/homework-1/app/src/App.js

@@ -3,9 +3,9 @@ import {
   Route,
   BrowserRouter
 } from "react-router-dom";
-import {Login} from "./components/Login";
-import {Course} from "./components/Course";
-import {CourseList} from "./components/CourseList";
+import {LoginPage} from "./features/LoginPage";
+import {CourseEditPage} from "./features/CourseEditPage";
+import {CourseListPage} from "./features/CourseListPage";
 import './App.css';
 
 class App extends React.Component {
@@ -15,9 +15,9 @@ class App extends React.Component {
       <div className="App">
         <BrowserRouter>
           <div className="content">
-            <Route exact path="/" component={Login}/>
-            <Route exact path="/course" component={Course}/>
-            <Route exact path="/courses" component={CourseList}/>
+            <Route exact path="/" component={LoginPage}/>
+            <Route exact path="/course" component={CourseEditPage}/>
+            <Route exact path="/courses" component={CourseListPage}/>
           </div>
         </BrowserRouter>
       </div>

homeworks/homework-1/app/src/components/CourseForm.css

@@ -0,0 +1,3 @@
+.button--cancel {
+    margin-left: 10px;
+}

homeworks/homework-1/app/src/components/CourseForm.jsx

@@ -0,0 +1,64 @@
+import React from "react";
+import {
+	Button,
+	Col,
+	ControlLabel,
+	Form,
+	FormControl,
+	FormGroup
+} from "react-bootstrap";
+import './CourseForm.css';
+
+class CourseForm extends React.Component {
+
+	render() {
+		return (
+			<Form horizontal>
+				<FormGroup controlId="title">
+					<Col componentClass={ControlLabel} sm={4}>
+						Title
+					</Col>
+					<Col sm={2}>
+						<FormControl type="text" placeholder="Title"/>
+					</Col>
+				</FormGroup>
+
+				<FormGroup controlId="Description">
+					<Col componentClass={ControlLabel} sm={4}>
+						Description
+					</Col>
+					<Col sm={2}>
+						<FormControl componentClass="textarea" placeholder="Text area"/>
+					</Col>
+				</FormGroup>
+
+				<FormGroup controlId="date">
+					<Col componentClass={ControlLabel} sm={4}>
+						Date
+					</Col>
+					<Col sm={2}>
+						<FormControl type="text" placeholder="Date"/>
+					</Col>
+				</FormGroup>
+
+				<FormGroup controlId="duration">
+					<Col componentClass={ControlLabel} sm={4}>
+						Duration
+					</Col>
+					<Col sm={1}>
+						<FormControl type="number" min="0" placeholder="Min"/>
+					</Col>
+				</FormGroup>
+
+				<FormGroup>
+					<Col smOffset={4} sm={4}>
+						<Button type="submit">Save</Button>
+						<Button className="button--cancel" type="submit">Cancel</Button>
+					</Col>
+				</FormGroup>
+			</Form>
+		);
+	}
+}
+
+export {CourseForm};

homeworks/homework-1/app/src/components/CourseListItem.jsx

@@ -12,7 +12,7 @@ class CourseListItem extends React.Component {
   render() {
     return (
       <Grid>
-          <Col sm={10}>
+          <Col sm={8}>
             <Row>
               <Col sm={4}>
                 <b>{this.props.title}</b>
@@ -40,7 +40,7 @@ class CourseListItem extends React.Component {
 CourseListItem.propTypes = {
 	title: PropTypes.string,
 	duration: PropTypes.number,
-	date: PropTypes.string,
+	date: PropTypes.instanceOf(Date),
 	description: PropTypes.string
 };
 

homeworks/homework-1/app/src/components/LoginForm.jsx

@@ -0,0 +1,58 @@
+import React from "react";
+import {
+	Button,
+	Form,
+	FormGroup,
+	FormControl,
+	ControlLabel,
+	Col
+} from "react-bootstrap";
+
+class LoginForm extends React.Component {
+
+	constructor(props) {
+		super(props);
+		this.state = {
+			hintEmail: "*enter your email",
+			hintPassword: "*enter your password"
+		}
+	}
+
+	render() {
+		return (
+			<Form horizontal>
+				<FormGroup controlId="email">
+					<Col componentClass={ControlLabel} sm={4}>
+						Email
+					</Col>
+					<Col sm={2}>
+						<FormControl type="email" placeholder="Email"/>
+					</Col>
+					<Col componentClass={ControlLabel}>
+						{this.state.hintEmail}
+					</Col>
+				</FormGroup>
+
+				<FormGroup controlId="password">
+					<Col componentClass={ControlLabel} sm={4}>
+						Password
+					</Col>
+					<Col sm={2}>
+						<FormControl type="password" placeholder="Password"/>
+					</Col>
+					<Col componentClass={ControlLabel}>
+						{this.state.hintPassword}
+					</Col>
+				</FormGroup>
+
+				<FormGroup>
+					<Col smOffset={4} sm={4}>
+						<Button type="submit">Sign in</Button>
+					</Col>
+				</FormGroup>
+			</Form>
+		);
+	}
+}
+
+export {LoginForm};

homeworks/homework-1/app/src/components/common/Header.css

@@ -0,0 +1,11 @@
+.header {
+    background-color: rgb(108, 182, 39);
+    height: 260px;
+    padding: 10px;
+    color: white;
+}
+
+.header__logo {
+    height: 200px;
+    margin-right: 20px;
+}

homeworks/homework-1/app/src/components/common/Header.jsx

@@ -5,13 +5,14 @@ import {
 } from "react-bootstrap";
 import PropTypes from 'prop-types';
 import logo from "../../logo.jpg";
+import './Header.css';
 
 class Header extends React.Component {
 
   render() {
     return (
-      <PageHeader className="App-header">
-        <Image src={logo} className="App-logo"/>{' '}{this.props.pageTitle}
+      <PageHeader className="header">
+        <Image src={logo} className="header__logo"/>{this.props.pageTitle}
       </PageHeader>
     );
   }

homeworks/homework-1/app/src/features/CourseEditPage.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import {Header} from "../components/common/Header"
+import {CourseForm} from "../components/CourseForm";
+
+class CourseEditPage extends React.Component {
+
+	constructor(props) {
+		super(props);
+		this.state = {
+			title: "Edit course"
+		}
+	}
+
+	render() {
+		return (
+			<div>
+				<Header pageTitle={this.state.title}/>
+				<CourseForm/>
+			</div>
+		);
+	}
+}
+
+export {CourseEditPage};

homeworks/homework-1/app/src/features/CourseListPage.css

@@ -0,0 +1,4 @@
+.form-group {
+    margin-left: 20px;
+    margin-right: 20px;
+}