tech test

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    ["env"],
+    "react"
+  ]
+}

package.json

@@ -0,0 +1,34 @@
+{
+			"name": "Tech-test-wild-code-school",
+			"version": "1.0.0",
+			"main": "index.js",
+			"author": "François Van Eesbeeck",
+			"scripts": {
+						"start": "webpack-dev-server --hot --inline --config webpack.dev.js",
+						"build": "webpack --config webpack.prod.js"
+			},
+			"dependencies": {
+						"axios": "^0.18.0",
+						"babel-preset-env": "^1.7.0",
+						"history": "^4.7.2",
+						"package.json": "^2.0.1",
+						"path": "^0.12.7",
+						"react": "^15.6.1",
+						"react-async-script-loader": "^0.3.0",
+						"react-dom": "^15.6.1",
+						"react-modal": "^2.3.2",
+						"react-router-dom": "^4.3.1",
+						"redux": "^4.0.1"
+			},
+			"devDependencies": {
+						"babel-core": "^6.26.0",
+						"babel-loader": "^7.1.2",
+						"babel-preset-react": "^6.24.1",
+						"html-webpack-plugin": "^2.30.1",
+						"react-hot-loader": "^1.3.1",
+						"uglifyjs-webpack-plugin": "^0.4.6",
+						"webpack": "^3.8.1",
+						"webpack-dev-server": "^2.7.1",
+						"webpack-merge": "^4.1.0"
+			}
+}

src/apicalls/index.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import axios from 'axios';
+
+export default class Apicalls {
+    getPosts(cb) {
+	axios.get('https://jsonplaceholder.typicode.com/posts')
+            .then(function(res) {
+		cb(null, res);
+            })
+            .catch(function(err) {
+                console.log(err);
+                cb(err);
+            });
+    }
+    getComments(cb) {
+	axios.get('https://jsonplaceholder.typicode.com/comments')
+            .then(function(res) {
+		cb(null, res);
+            })
+            .catch(function(err) {
+                console.log(err);
+                cb(err);
+            });
+    }
+    getUsers(cb) {
+	axios.get('https://jsonplaceholder.typicode.com/users')
+            .then(function(res) {
+		cb(null, res);
+            })
+            .catch(function(err) {
+		console.log(err);
+                cb(err);
+            });
+    }
+};

src/components/AbstractPost.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+export default class AbstractPost extends React.Component {
+    constructor(props, context) {
+	super(props, context);
+
+	this.handleDelete = this.handleDelete.bind(this);
+    }
+
+    handleDelete() {
+	this.props.onDelete(this.props.id);
+    }
+
+    displayButtons() {
+	if(this.props.user.email)
+	    return (
+		<div>
+		  <Link to={"/posts/"+this.props.id} onClick={this.login}>
+		    <button type="button" className="btn btn-primary">Edit</button>
+		  </Link>
+		  <button style={{marginLeft:'10px'}} onClick={this.handleDelete} type="button" className="btn btn-primary">Delete</button>
+		</div>
+	    );
+	else
+	    return (
+		<div>
+		  <Link to={"/posts/"+this.props.id} onClick={this.login}>
+		    <button type="button" className="btn btn-primary">Read more</button>
+		  </Link>
+		</div>
+	    );
+    }
+
+    render () {
+	return (
+	    <div style={{border: "solid black 1px", marginTop: "10px", padding:'10px'}}>
+	      <h4>{this.props.title}</h4>
+	      <p>{this.props.body.length > 80?this.props.body.substring(0,80)+'...':this.props.body}</p>
+	      {this.displayButtons()}
+	    </div>
+	);
+    }
+}

src/components/Comment.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export default class Comment extends React.Component {
+    constructor(props, context) {
+	super(props, context);
+    }
+
+    render () {
+	return (
+	    <div style={{border: "solid black 1px", marginTop: "10px", padding:'10px'}}>
+	      <p><strong>{this.props.name}</strong></p>
+	      <p><strong>Author: {this.props.email}</strong></p>
+	      <p>{this.props.body}</p>
+	    </div>
+	);
+    }
+}

src/components/Loader.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+export default function Navbar({ title, user }) {
+    return (
+	<div style={{marginTop: "25px"}} className="d-flex justify-content-center">
+	  <div className="spinner-border" role="status">
+	    <span className="sr-only">Loading...</span>
+	  </div>
+	</div>
+    );
+}

src/components/Navbar.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+export default function Navbar({ title, user, onLogout, onBack, onSearchChange }) {
+    var loginLogoutLink;
+    var displayableTitle;
+    // if user is not logged
+    if(user.email) {
+	displayableTitle = "Welcome "+user.email;
+	loginLogoutLink = (
+	    <li className="nav-item">
+	      <NavLink className="nav-link" to="/posts" onClick={onLogout}>Logout</NavLink>
+	    </li>
+	);
+    } else {
+	displayableTitle = title;
+	loginLogoutLink = (
+	    <li className="nav-item">
+	      <NavLink className="nav-link" to="/login">Login</NavLink>
+	    </li>
+	);
+    }
+    return (
+	<nav style={{minHeight :"55px !important"}} className="navbar navbar-expand-sm navbar-dark fixed-top bg-dark">
+	  <button type="button" style={{marginRight:"15px"}} onClick={onBack} className="btn btn-primary">Back</button>
+	  <NavLink className="navbar-brand" to="/posts">{ displayableTitle }</NavLink>
+          <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
+	    <span className="navbar-toggler-icon" />
+          </button>
+          <div className="collapse navbar-collapse" id="navbar">
+	    <ul className="navbar-nav mr-auto">
+	      <li className="nav-item">
+		<NavLink className="nav-link" to="/posts">Posts</NavLink>
+	      </li>
+	      {loginLogoutLink}
+	    </ul>
+	    <form className="form-inline my-2 my-md-0">
+	      <input onChange={onSearchChange} className="form-control" type="text" placeholder="Search" />
+	    </form>
+          </div>
+	</nav>
+    );
+}

src/error.html

@@ -0,0 +1 @@
+Error

src/history/index.js

@@ -0,0 +1,5 @@
+import { createBrowserHistory } from 'history';
+
+export default createBrowserHistory({
+
+});

src/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html style="height: 100%">
+  <head>
+    <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1">
+    <title>Tech test</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+    <link rel="icon" type="image/png" sizes="32x32" href="img/favicon.png">
+  </head>
+  <body style="height: 100%">
+    <div id="root" style="height: 100%"></div>
+  <script type="text/javascript" src="app.bundle.js"></script></body>
+</html>

src/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+//import { withRouter } from 'react-router';
+import App from './views/App.jsx';
+import store from './reducers';
+
+const render = () => ReactDOM.render(<App />, document.getElementById('root'));
+render();
+store.subscribe(render);

src/reducers/index.js

@@ -0,0 +1,61 @@
+import { createStore } from 'redux';
+
+const store = (store = {user: {}}, action) => {
+    switch (action.type) {
+    case 'SET_USER':
+	store.user = action.user;
+	return store;
+    case 'SET_USERS':
+	store.users = action.users;
+	return store;
+    case 'SET_POSTS':
+	store.posts = action.posts;
+	return store;
+    case 'SET_SEARCH':
+	store.search = action.search;
+	return store;
+    case 'DELETE_POST':
+	store.posts = store.posts.filter(post => post.id !== action.id);
+	return store;
+    case 'CREATE_POST':
+	let posts = store.posts;
+	posts.push({
+	    id: action.id,
+	    userId: store.user.id,
+	    title: "title",
+	    body: "body"
+	});
+	return store;
+    case 'SET_POST':
+	store.posts = store.posts.map(function(post) {
+	    if(post.id == action.id) {
+		return {
+		    id: action.id,
+		    userId: post.userId,
+		    title: action.title,
+		    body: action.body
+		};
+	    }
+	    else
+		return post;
+	});
+	return store;
+    case 'SET_COMMENTS':
+	store.comments = action.comments;
+	return store;
+    case 'CREATE_COMMENT':
+	let comments = store.comments;
+	comments.push({
+	    id: action.id,
+	    postId: action.postId,
+	    email: action.email,
+	    name: action.name,
+	    body: action.body
+	});
+	return store;
+    default:
+	return store;
+    }
+};
+
+export default createStore(store);

src/views/App.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Route, Link, Router, Switch } from 'react-router-dom';
+import Posts from './Posts.jsx';
+import Post from './Post.jsx';
+import Login from './Login.jsx';
+
+import Navbar from '../components/Navbar.jsx';
+
+import store from '../reducers';
+import Apicalls from '../apicalls';
+import history from '../history';
+
+export default class App extends React.Component {
+    constructor(props, context) {
+	super(props, context);
+	this.state = {
+
+	};
+
+	this.render = this.render.bind(this);
+	this.logout = this.logout.bind(this);
+	this.back = this.back.bind(this);
+    }
+
+    componentDidMount() {
+	var apicalls = new Apicalls();
+	if(!store.getState().posts)
+	    apicalls.getPosts(function(err, res) {
+		if(!err)
+		    store.dispatch({ type: 'SET_POSTS', posts: res.data});
+	    });
+	if(!store.getState().comments)
+	    apicalls.getComments(function(err, res) {
+		if(!err)
+		    store.dispatch({ type: 'SET_COMMENTS', comments: res.data});
+	    });
+	if(!store.getState().users)
+	    apicalls.getUsers(function(err, res) {
+		if(!err)
+		    store.dispatch({ type: 'SET_USERS', users: res.data});
+	    });
+	store.subscribe(this.render);
+    }
+
+    logout() {
+	store.dispatch({ type: 'SET_USER', user: {} });
+    }
+
+    back() {
+	history.goBack();
+    }
+
+    handleSearchChange(e) {
+	store.dispatch({ type: 'SET_SEARCH', search: e.target.value });
+    }
+
+    render() {
+	return(
+	    <Router  history={history}>
+	      <div style={{height:'100%'}}>
+		<Navbar title={"Tech test"} user={store.getState().user} onLogout={this.logout} onBack={this.back} onSearchChange={this.handleSearchChange}></Navbar>
+		<div style={{height:'55.97px'}}></div>
+	        <div style={{height:'calc(100% - 55.97px)', overflow:'auto'}} className="scrollbar-deep-purple bordered-deep-purple thin">
+		  <Switch>
+		    <Route exact path="/" component={Posts} />
+		    <Route exact path="/posts" component={Posts} />
+		    <Route path="/posts/:id" component={Post} />
+		    <Route path="/login" component={Login} />
+		  </Switch>
+		</div>
+	      </div>
+	    </Router>
+	);
+    }
+}