Merge 25c5018 into 65a37aa

db/db.json

@@ -0,0 +1,9 @@
+{
+  "users": [
+    {
+      "id": 1,
+      "username": "foo",
+      "password": "bar"
+    }
+  ]
+}

db/jsonServer.js

@@ -0,0 +1,60 @@
+import jsonServer from "json-server";
+import passport from "passport";
+import passportLocal from "passport-local";
+import db from "./db";
+import { findByUsername, findById } from "./users";
+
+const LocalStrategy = passportLocal.Strategy;
+
+passport.use(
+  new LocalStrategy((username, password, done) => {
+    process.nextTick(() => {
+      findByUsername(username, (err, user) => {
+        if (err) {
+          return done(err);
+        }
+        if (!user) {
+          return done(null, false, { message: `Unknown user ${username}` });
+        }
+        if (user.password !== password) {
+          return done(null, false, { message: "Invalid password" });
+        }
+        return done(null, user);
+      });
+    });
+  })
+);
+
+passport.serializeUser((user, cb) => {
+  cb(null, user.id);
+});
+
+passport.deserializeUser((id, cb) => {
+  findById(id, (err, user) => {
+    if (err) {
+      return cb(err);
+    }
+    return cb(null, user);
+  });
+});
+
+const server = jsonServer.create();
+
+const router = jsonServer.router(db);
+const middlewares = jsonServer.defaults();
+
+server.use(middlewares);
+server.use(passport.initialize());
+server.use(jsonServer.bodyParser);
+
+server.post(
+  "/login",
+  passport.authenticate("local", {
+    successRedirect: "/",
+  })
+);
+
+server.use(router);
+server.listen(3001, () => {
+  console.log("JSON Server is running");
+});

db/users.js

@@ -0,0 +1,27 @@
+import db from "./db";
+
+const { users } = db;
+
+const findById = (id, fn) => {
+  const idx = id - 1;
+  if (users[idx]) {
+    fn(null, users[idx]);
+  } else {
+    fn(new Error(`User ${id} does not exist`));
+  }
+};
+
+const findByUsername = (username, cb) => {
+  process.nextTick(() => {
+    for (let i = 0, len = users.length; i < len; i += 1) {
+      const user = users[i];
+      if (user.username === username) {
+        console.log("FOUND");
+        return cb(null, user);
+      }
+    }
+    return cb(null, null);
+  });
+};
+
+export { findByUsername, findById };

index.js

@@ -1,4 +1,5 @@
-require('@babel/register')({
-  presets: ['@babel/preset-env'],
+require("@babel/register")({
+  presets: ["@babel/preset-env"],
 });
-require('./src/server');
+require("./src/server");
+require("./db/jsonServer");

jest.config.js

@@ -22,10 +22,14 @@ module.exports = {
 
   // An array of glob patterns indicating a set of files for which coverage information
   // should be collected
-  // collectCoverageFrom: null,
+  collectCoverageFrom: [
+    "src/**/*.js",
+    "!src/**/*/index.js",
+    "!src/{client,server}.js",
+  ],
 
   // The directory where Jest should output its coverage files
-  coverageDirectory: 'coverage',
+  coverageDirectory: "coverage",
 
   // An array of regexp pattern strings used to skip coverage collection
   // coveragePathIgnorePatterns: [

package.json

@@ -25,13 +25,20 @@
     "@material-ui/icons": "^3.0.2",
     "axios": "^0.18.0",
     "compression": "^1.7.3",
+    "cors": "^2.8.5",
     "express": "^4.16.4",
     "history": "^4.7.2",
     "jss": "^9.8.7",
+    "passport": "^0.4.0",
+    "passport-local": "^1.0.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "react-jss": "^8.6.1",
+    "react-redux": "^6.0.0",
     "react-router-dom": "^4.3.1",
+    "redux": "^4.0.1",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.3.0",
     "styled-components": "^4.1.3"
   },
   "devDependencies": {

src/actions/index.js

@@ -0,0 +1,19 @@
+import {
+  USER_REGISTER_REQUEST,
+  USER_REGISTER_SUCCESS,
+  USER_REGISTER_FAILURE,
+  register,
+} from "./register";
+
+import { LOGIN_REQUEST, LOGIN_SUCCESS, LOGIN_FAILURE, login } from "./login";
+
+export {
+  USER_REGISTER_REQUEST,
+  USER_REGISTER_SUCCESS,
+  USER_REGISTER_FAILURE,
+  LOGIN_REQUEST,
+  LOGIN_SUCCESS,
+  LOGIN_FAILURE,
+  register,
+  login,
+};

src/actions/login.js

@@ -0,0 +1,36 @@
+import { loginUser } from "../services";
+
+export const LOGIN_REQUEST = "LOGIN_REQUEST";
+export const LOGIN_SUCCESS = "LOGIN_SUCCESS";
+export const LOGIN_FAILURE = "LOGIN_FAILURE";
+
+const request = () => ({
+  type: LOGIN_REQUEST,
+});
+
+const success = user => ({
+  type: LOGIN_SUCCESS,
+  user,
+});
+
+const failure = error => ({
+  type: LOGIN_FAILURE,
+  error,
+});
+
+export const login = (username, password) => {
+  return dispatch => {
+    dispatch(request());
+
+    loginUser(username, password).then(
+      loggedUser => {
+        console.log("Loging succesful!");
+        dispatch(success(loggedUser));
+      },
+      error => {
+        console.log("ERROR: ", error);
+        dispatch(failure(error));
+      }
+    );
+  };
+};

src/actions/register.js

@@ -0,0 +1,35 @@
+import { registerUser } from "../services";
+
+export const USER_REGISTER_REQUEST = "USER_REGISTER_REQUEST";
+export const USER_REGISTER_SUCCESS = "USER_REGISTER_SUCCESS";
+export const USER_REGISTER_FAILURE = "USER_REGISTER_FAILURE";
+
+const request = user => ({
+  type: USER_REGISTER_REQUEST,
+  user,
+});
+
+const success = user => ({
+  type: USER_REGISTER_SUCCESS,
+  user,
+});
+
+const failure = error => ({
+  type: USER_REGISTER_FAILURE,
+  error,
+});
+
+export const register = user => {
+  return dispatch => {
+    dispatch(request(user));
+
+    registerUser(user).then(
+      registeredUser => {
+        dispatch(success(registeredUser));
+      },
+      error => {
+        dispatch(failure(error));
+      }
+    );
+  };
+};

src/client.js

@@ -1,16 +1,33 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import { createStore, applyMiddleware, compose } from "redux";
+import { Provider } from "react-redux";
 import JssProvider from "react-jss/lib/JssProvider";
 import {
   MuiThemeProvider,
   createMuiTheme,
   createGenerateClassName,
 } from "@material-ui/core/styles";
 import { BrowserRouter } from "react-router-dom";
+import thunk from "redux-thunk";
 
 import App from "./components/App";
+import defaultState from "./reducers";
 
-const app = document.getElementById("app");
+// eslint-disable-next-line no-underscore-dangle
+const preloadedState = window.__PRELOADED_STATE__;
+
+// eslint-disable-next-line no-underscore-dangle
+delete window.__PRELOADED_STATE__;
+
+// eslint-disable-next-line no-underscore-dangle
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+
+const store = createStore(
+  defaultState,
+  preloadedState,
+  composeEnhancers(applyMiddleware(thunk))
+);
 
 const theme = createMuiTheme({
   typography: {
@@ -21,12 +38,14 @@ const theme = createMuiTheme({
 const generateClassName = createGenerateClassName();
 
 ReactDOM.hydrate(
-  <BrowserRouter>
-    <JssProvider generateClassName={generateClassName}>
-      <MuiThemeProvider theme={theme}>
-        <App />
-      </MuiThemeProvider>
-    </JssProvider>
-  </BrowserRouter>,
-  app
+  <Provider store={store}>
+    <BrowserRouter>
+      <JssProvider generateClassName={generateClassName}>
+        <MuiThemeProvider theme={theme}>
+          <App />
+        </MuiThemeProvider>
+      </JssProvider>
+    </BrowserRouter>
+  </Provider>,
+  document.getElementById("app")
 );