Ft users should create entries 162330363

package.json

@@ -4,16 +4,20 @@
   "private": true,
   "dependencies": {
     "bootstrap": "^4.1.3",
+    "history": "^4.7.2",
     "jquery": "^3.3.1",
     "popper.js": "^1.14.5",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
     "react-flash-message": "^1.0.2",
+    "react-medium-editor": "^1.8.1",
     "react-redux": "^5.1.0",
+    "react-render-html": "^0.6.0",
     "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.1",
     "react-toastify": "^4.4.3",
     "redux": "^4.0.1",
+    "redux-mock-store": "^1.5.3",
     "redux-thunk": "^2.3.0",
     "yarn": "^1.12.3"
   },

src/App.css

@@ -1,6 +1,7 @@
  html {
   width:100%;
-  height:100%;
+  min-height:100%;
+  max-height:auto;
 }
 body{
   background-image: url('./images/image.jpg');

src/App.js

@@ -3,6 +3,10 @@ import { Provider } from 'react-redux';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import store from './store';
 import Landingpage from './container/landingpage';
+import CreateEntries from './component/CreateEntry';
+import UpdateEntry from './component/UpdateEntry';
+import GetEntries from './component/GetEntries';
+import ViewEntry from './component/SingleEntry';
 import notFound from './component/Notfound';
 import './App.css';
 
@@ -14,6 +18,10 @@ class App extends Component {
           <BrowserRouter>
           <Switch>
             <Route exact path="/" component={Landingpage} />
+            <Route exact path="/createEntry" component={CreateEntries} />
+            <Route exact path="/entry/:id/edit" component={UpdateEntry} />
+            <Route exact path="/allEntries" component={GetEntries} />
+            <Route exact path="/entry/:id" component={ViewEntry} />
             <Route component={notFound} />
           </Switch>
         </BrowserRouter>

src/actions/ActionTypes.jsx

@@ -0,0 +1,6 @@
+export const SIGNUP = 'SIGNUP';
+export const LOGIN = 'LOGIN';
+export const CREATE_ENTRY = 'CREATE_ENTRY';
+export const FETCH_ENTRIES = 'FETCH_ENTRIES';
+export const SINGLE_ENTRY = 'SINGLE_ENTRY';
+export const UPDATE_ENTRY = 'UPDATE_ENTRY';

src/actions/AuthAction.jsx

@@ -0,0 +1,117 @@
+
+import {
+  SIGNUP, LOGIN, CREATE_ENTRY, FETCH_ENTRIES, SINGLE_ENTRY, UPDATE_ENTRY,
+} from './ActionTypes';
+
+
+const baseurl = 'http://localhost:5000';
+
+// const myHeaders = new Headers({
+//   Accept: 'application/json',
+//   'Content-type': 'application/json',
+//   Token: localStorage.getItem('token'),
+// });
+
+export const signUpUser = userData => dispatch => fetch(`${baseurl}/API/v1/auth/user/signup`, {
+  method: 'POST',
+  headers: {
+    Accept: 'application/json',
+    'Content-type': 'application/json',
+  },
+  body: JSON.stringify(userData),
+})
+  .then(res => res.json())
+  .then((data) => {
+    dispatch({
+      type: SIGNUP,
+      payload: data,
+    });
+  });
+
+export const loginUser = loginData => dispatch => fetch(`${baseurl}/API/v1/auth/users/login`, {
+  method: 'POST',
+  headers: {
+    Accept: 'application/json',
+    'Content-type': 'application/json',
+  },
+  body: JSON.stringify(loginData),
+})
+  .then(res => res.json())
+  .then((data) => {
+    dispatch({
+      type: LOGIN,
+      payload: data,
+    });
+  });
+
+export const CreateEntries = entryData => dispatch => fetch(`${baseurl}/API/v1/entries`, {
+  method: 'POST',
+  cache: 'no-cache',
+  headers: {
+    Accept: 'application/json',
+    'Content-type': 'application/json',
+    Authorization: `Bearer ${localStorage.getItem('token')}`,
+  },
+  body: JSON.stringify(entryData),
+})
+  .then(res => res.json())
+  .then((data) => {
+    dispatch({
+      type: CREATE_ENTRY,
+      payload: data,
+    });
+  });
+
+export const fetchEntries = () => dispatch => fetch(`${baseurl}/API/v1/entries`, {
+  method: 'GET',
+  cache: 'no-cache',
+  headers: {
+    Accept: 'application/json',
+    'Content-type': 'application/json',
+    Authorization: `Bearer ${localStorage.getItem('token')}`,
+  },
+})
+  .then(res => res.json())
+  .then(data => dispatch({
+    type: FETCH_ENTRIES,
+    payload: data,
+  }));
+
+export const singleEntry = id => dispatch => fetch(`${baseurl}/API/v1/entries/${id}`, {
+  method: 'GET',
+  cache: 'no-cache',
+  headers: {
+    Accept: 'application/json',
+    'Content-type': 'application/json',
+    Authorization: `Bearer ${localStorage.getItem('token')}`,
+  },
+})
+  .then((res) => {
+    if (res.status === 404) {
+      window.location = '/404';
+    } else {
+      return res.json();
+    }
+  })
+  .then(data => dispatch({
+    type: SINGLE_ENTRY,
+    payload: data,
+  }));
+
+export const UpdateEntries = (updateData, id) => dispatch => fetch(`${baseurl}/API/v1/entries/${id}`, {
+  method: 'PUT',
+  cache: 'no-cache',
+  headers: {
+    Accept: 'application/json',
+    'Content-type': 'application/json',
+    Authorization: `Bearer ${localStorage.getItem('token')}`,
+  },
+  body: JSON.stringify(updateData),
+})
+  .then(res => res.json())
+  .then((data) => {
+    dispatch({
+      type: UPDATE_ENTRY,
+      payload: data,
+    });
+  });

src/component/CreateEntry.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Main from './Main';
+const CreateEntries = props => (
+  <div>
+    <Main
+                actionType="CREATE A NEW ENTRY"
+                buttonAction="CREATE ENTRY"
+                action_to_main="create_entry"
+                {...props}
+              />
+  </div>
+);
+
+export default CreateEntries;

src/component/EntryForm.jsx

@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import Navbar from './Navbar'
+import Footer from './Footer'
+import Editor from 'react-medium-editor';
+require('medium-editor/dist/css/medium-editor.css');
+require('medium-editor/dist/css/themes/default.css');
+class EntryForm extends Component {
+    state = { };
+    render() { 
+        return ( 
+                 <div><div className="entry_row">{this.props.actionType}</div>
+                     <div class="jumbotron">
+                <form method="POST" onSubmit={this.props.onhandleSubmit}>
+                    <div class="form-group">
+                        <input type="text" name="title" className="form-control border-0" defaultValue={this.props.title} onChange={this.props.change} placeholder="Title here" required/>
+                    </div>
+                    <div class="form-group"> 
+                    <Editor
+                    text={this.props.body}
+                    placeholder="body here"
+                    onChange={this.props.handleChange}
+                    style={{ padding: 10 }}
+                    options={{toolbar: {buttons: ['bold', 'italic', 'underline','anchor','h2','h3','highlighter']},}}
+
+                    />
+                    </div>
+                    <center><button type="submit" class="btn btn-success">{this.props.buttonAction}</button></center>
+                </form>
+            </div>
+            </div>
+         );
+    }
+}
+
+export default EntryForm;

src/component/Footer.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Footer = () => (
+  <div className="text-center">
+    <span>Keno 2018</span>
+  </div>
+);
+
+export default Footer;

src/component/GetEntries.jsx

@@ -0,0 +1,69 @@
+import React, { Component } from 'react';
+import {connect} from 'react-redux';
+import { Link } from 'react-router-dom';
+import renderHTML from 'react-render-html';
+import Navbar from './Navbar'
+import Footer from './Footer';
+import Menu from './menu';
+import {
+    fetchEntries,
+  } from '../actions/AuthAction';
+class GetEntries extends Component {
+    state = { 
+        title:"",
+        body:""
+     }
+     componentWillMount(){
+         this.props.fetchEntries()
+     }
+
+    render() { 
+       const data=this.props.entry.entries.result;
+       console.log(data)
+       let showArticles;
+       if(data){
+        showArticles = data.map(entry => (
+        <div key={entry.id}>
+            <div class="card">
+            <Link to={`/entry/${entry.id}`}>
+            <div class="card-header title">{entry.title}</div>
+              </Link>
+                <p class="card-body entry_body truncate">{renderHTML(entry.body)}</p> 
+                <div class="card-footer">
+                    <div class="row entry_footer">
+                        <div class="col-lg-4">CREATED DATE: {entry.entry_date}</div>
+                        <div class="col-lg-4">CREATED TIME: {entry.entry_time}</div>
+                        <div class="col-lg-4">UPDATED AT: {entry.updated}</div>
+                    </div>
+                </div>
+            </div><br />
+        </div>
+      ));
+    }
+
+        return ( 
+            <div>
+                <Navbar />
+                <div class="container">
+                <Menu /><br />
+                <div className="scroll">
+                {showArticles}
+                </div>
+                </div>
+                <div className="fixed-bottom link">
+                    <Footer />
+                </div>
+            </div>
+         );
+    }
+}
+const mapStateToProps= state =>({
+    entry:state.entries,
+})
+
+export default connect(
+    mapStateToProps,
+    {
+        fetchEntries
+    }
+  )(GetEntries);