Editor function update

src/App.js

@@ -3,7 +3,7 @@ import { BrowserRouter, Switch, Route } from 'react-router-dom'
 import Album from './components/album/Album';
 import Register from './components/register/Register'
 import Appbar from './components/layout/Appbar'
-
+import SignIn from './components/signin/SignIn'
 
 class App extends Component {
   render() {
@@ -14,6 +14,7 @@ class App extends Component {
           <Switch>
             <Route exact path = "/" component={Album} />  
             <Route exact path = "/register" component={Register} />
+            <Route exact path = "/signin" component={SignIn} />
           </Switch>
 
         </div>
@@ -22,4 +23,4 @@ class App extends Component {
   }
 }
 
-export default App;
+export default App;

src/components/Posting/PostingLayout.js

@@ -0,0 +1,16 @@
+import React,{Component} from 'react';
+import PostingLayoutForm from './PostingLayoutForm';
+
+class PostingLayout extends Component {
+    render(){
+        return(
+            <div>
+                <PostingLayoutForm/>
+            </div>
+
+        );  
+
+
+    }
+}
+export default PostingLayout;

src/components/Posting/PostingLayoutForm.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'material-ui/Card';
+import FlatButton from 'material-ui/FlatButton';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
+import tellme from'./tellme.jpg';
+import avata from'./avatar.jpg';
+import {Editor, EditorState} from 'draft-js';
+class PostingLayoutFrom extends Component{
+  constructor(props) {
+    super(props);
+    this.state = {editorState: EditorState.createEmpty()};
+    this.onChange = (editorState) => this.setState({editorState});
+  }
+  render(){
+    return (
+<div>
+<MuiThemeProvider>
+  <Card>
+    <CardHeader
+      title="URL Avatar"
+      subtitle="Subtitle"
+      avatar={avata}
+    />
+    <CardMedia
+      overlay={<CardTitle title="Overlay title" subtitle="Overlay subtitle" />}
+    >
+      <img src={tellme} alt="" />
+    </CardMedia>
+    <CardTitle title="Card title" subtitle="Card subtitle" />
+    <Editor editorState={this.state.editorState} onChange={this.onChange} />
+    <CardActions>
+      <FlatButton label="Action1" />
+      <FlatButton label="Action2" />
+    </CardActions>
+  </Card>
+  </MuiThemeProvider>
+</div>
+    );
+  }
+}
+
+
+export default PostingLayoutFrom;

src/components/layout/SignedOutLinks.js

@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom'
 const SignedOutLinks = () => {
   return (
     <div>
-        <Button color="inherit">Sign In</Button>
+        <Button color="inherit" component={Link} to="/signin">Sign In</Button>
         <Button color="inherit" component={Link} to="/register">Register</Button>
     </div>
   )

src/components/signin/BasicSignInForm.css

@@ -0,0 +1,21 @@
+.login-form {
+    width: 340px;
+    margin: 50px auto;
+}
+.login-form form {
+    margin-bottom: 15px;
+    background: #f7f7f7;
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
+    padding: 30px;
+}
+.login-form h2 {
+    margin: 0 0 15px;
+}
+.form-control, .btn {
+    min-height: 38px;
+    border-radius: 2px;
+}
+.btn {
+    font-size: 15px;
+    font-weight: bold;
+}

src/components/signin/BasicSignInForm.js

@@ -0,0 +1,34 @@
+import React,{Component} from 'react';
+import './BasicSignInForm.css';
+class BasicSignInForm extends Component {
+    render(){
+        return(
+            <div>
+                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
+                <style type="text/css">
+                </style>
+                <div className="login-form">
+                    <form action="/examples/actions/confirmation.php" method="post">
+                        <h2 className="text-center">Log in</h2>
+                        <div className="form-group">
+                            <input type="text" className="form-control" placeholder="Username" required="required" />
+                        </div>
+                        <div className="form-group">
+                            <input type="password" className="form-control" placeholder="Password" required="required" />
+                        </div>
+                        <div className="form-group">
+                            <button type="submit" className="btn btn-primary btn-block">Log in</button>
+                        </div>
+                        <div className="clearfix">
+                            <label className="pull-left checkbox-inline"><input type="checkbox"/> Remember me</label>
+                            <a href="#" className="pull-right">Forgot Password?</a>
+                        </div>
+                    </form>
+                    <p className="text-center"><a href="#">Create an Account</a></p>
+                </div>
+            </div>
+
+        );
+    }
+}
+export default BasicSignInForm;

src/components/signin/SignIn.js

@@ -0,0 +1,16 @@
+import React,{Component} from 'react';
+import BasicSignInForm from './BasicSignInForm';
+
+class SignIn extends Component {
+    render(){
+        return(
+            <div>
+                <BasicSignInForm/>
+            </div>
+
+        );
+
+
+    }
+}
+export default SignIn;