HW2

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

@@ -1,11 +1,14 @@
 import React from 'react';
 import {
   Route,
-  BrowserRouter
+  BrowserRouter,
+  Switch,
+  Redirect
 } from "react-router-dom";
 import { LoginPage } from "./features/LoginPage";
-import { CourseEditPage } from "./features/CourseEditPage";
+import { CoursePage } from "./features/CoursePage";
 import { CourseListPage } from "./features/CourseListPage";
+import { PrivateRoute } from './features/privateRoute/PrivateRoute';
 import './App.css';
 
 class App extends React.Component {
@@ -15,9 +18,13 @@ class App extends React.Component {
       <div className="App">
         <BrowserRouter>
           <div className="content">
-            <Route exact path="/" component={LoginPage} />
-            <Route exact path="/course" component={CourseEditPage} />
-            <Route exact path="/courses" component={CourseListPage} />
+          <Switch>
+            <Route exact path="/login" component={LoginPage} />
+            <PrivateRoute path="/courses/new" component={CoursePage} />
+            <PrivateRoute path="/courses/:id" component={CoursePage} />
+            <PrivateRoute path="/courses" component={CourseListPage} />
+            <Redirect to="/courses" />
+          </Switch>   
           </div>
         </BrowserRouter>
       </div>

homeworks/homework-1/app/src/components/course-list-item/CourseListItem.jsx

@@ -5,24 +5,27 @@ import {
   Row,
   Col
 } from "react-bootstrap";
+import { Link } from 'react-router-dom';
 import PropTypes from "prop-types";
 
 class CourseListItem extends React.Component {
 
   static get propTypes() {
     return {
+      id: PropTypes.number,
       title: PropTypes.string,
       duration: PropTypes.number,
-      date: PropTypes.instanceOf(Date),
+      date: PropTypes.string,
       description: PropTypes.string
     };
   }
 
   static get defaultProps() {
     return {
+      id: 123456687989,
       title: "New Course",
       duration: 60,
-      date: new Date(),
+      date: "12.12.12",
       description: "Amazing, jaw-dropping, fascinating and simply awesome course :)"
     }
   }
@@ -47,8 +50,10 @@ class CourseListItem extends React.Component {
           </Row>
         </Col>
         <Col>
-          <Button type="submit">Edit</Button>
-          <Button type="submit">Delete</Button>
+          <Button type="submit" bsStyle="success">
+            <Link to={`/courses/${this.props.id}`}>Edit</Link>
+          </Button>
+          <Button type="submit" bsStyle="danger">Delete</Button>
         </Col>
       </Grid>
     );

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

@@ -7,12 +7,30 @@ import {
 	ControlLabel,
 	Col
 } from "react-bootstrap";
+import { withRouter } from "react-router-dom";
 
 class LoginForm extends React.Component {
 
+	constructor(props) {
+		super(props);
+		this.state = {
+			input: {
+				login: '',
+				password: ''
+			}
+		};
+	}
+
+	handleSubmit = event => {
+		event.preventDefault();
+		localStorage.setItem('login', this.state.input.login);
+		localStorage.setItem('authenticated', true);
+		this.props.history.push("/courses");
+	}
+
 	render() {
 		return (
-			<Form horizontal>
+			<Form horizontal onSubmit={this.handleSubmit}>
 				<FormGroup controlId="email">
 					<Col componentClass={ControlLabel} sm={4}>
 						Email
@@ -51,4 +69,4 @@ class LoginForm extends React.Component {
 	}
 }
 
-export { LoginForm };
+export const LoginFormWithRouter = withRouter(LoginForm)

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

@@ -6,8 +6,9 @@ import {
   FormControl,
   FormGroup,
 } from 'react-bootstrap';
-import { CourseListItem } from "../components/index";
-import { Header } from "../components/index";
+import { Link } from 'react-router-dom';
+import { CourseListItem } from "../components";
+import { Header } from "../components";
 import './CourseListPage.css';
 
 class CourseListPage extends React.Component {
@@ -19,21 +20,21 @@ class CourseListPage extends React.Component {
         {
           id: 1,
           title: 'CourseForm 1',
-          duration: '180',
+          duration: 180,
           date: '12.12.12',
           description: 'Description1'
         },
         {
           id: 2,
           title: 'CourseForm 2',
-          duration: '20',
+          duration: 20,
           date: '12.12.12',
           description: 'Description2'
         },
         {
           id: 3,
           title: 'CourseForm 3',
-          duration: '100',
+          duration: 100,
           date: '12.12.12',
           description: 'Description3'
         }
@@ -57,8 +58,10 @@ class CourseListPage extends React.Component {
               type="text"
               placeholder="enter name or date" />
           </FormGroup>
-          <Button type="submit">Search</Button>
-          <Button type="submit">Add course</Button>
+          <Button type="submit" bsStyle="info">Search</Button>
+          <Button type="submit" bsStyle="info">
+            <Link to={'/courses/new'}>Add course</Link>
+          </Button>
         </Form>
 
         <ListGroup componentClass="ul">
@@ -74,6 +77,7 @@ class CourseListPage extends React.Component {
       description={course.description}
       duration={course.duration}
       date={course.date}
+      id={course.id}
       key={index + '-key'}
     />;
   }

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

@@ -0,0 +1,22 @@
+import React from "react";
+import { Header } from "../components"
+import { CourseForm } from "../components";
+
+class CoursePage extends React.Component {
+
+	constructor(props) {
+		super(props);
+		this.routeParam = props.match.params.id;
+	}
+
+	render() {
+		return (
+			<div>
+				<Header pageTitle={this.routeParam} />
+				<CourseForm />
+			</div>
+		);
+	}
+}
+
+export { CoursePage };

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { Header } from "../components/index"
-import { LoginForm } from "../components/index";
+import { Header } from "../components"
+import { LoginFormWithRouter } from "../components";
 
 class LoginPage extends React.Component {
 
@@ -10,7 +10,7 @@ class LoginPage extends React.Component {
 				<Header
 					pageTitle="Welcome"
 				/>
-				<LoginForm />
+				<LoginFormWithRouter />
 			</div>
 		);
 	}

homeworks/homework-1/app/src/features/privateRoute/PrivateRoute.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Redirect, Route } from 'react-router-dom';
+
+export const PrivateRoute = ({ component: Component, ...rest }) => (
+  <Route {...rest} render={(props) => (
+    isAuthenticated()
+      ? <Component {...props} />
+      : <Redirect to='/login' />
+  )} />
+)
+
+export const isAuthenticated = () => {
+  return JSON.parse(localStorage.getItem('authenticated'));
+};
+