refactor #14: Moved localstorage to loginPage

package.json

@@ -16,12 +16,20 @@
     "extends": "react-app"
   },
   "dependencies": {
+    "@babel/core": "^7.5.5",
+    "@babel/register": "^7.5.5",
+    "@material-ui/core": "^4.4.0",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-react-app": "^9.0.1",
+    "bcrypt": "^3.0.6",
     "bootstrap": "^4.3.1",
     "bson": "^4.0.2",
     "dotenv": "^8.1.0",
     "express": "^4.17.1",
+    "ignore-styles": "^5.0.1",
     "immer": "^2.1.5",
     "jquery": "^3.4.1",
+    "jsonwebtoken": "^8.5.1",
     "popper.js": "^1.15.0",
     "prop-types": "^15.7.2",
     "react": "^16.9.0",
@@ -35,7 +43,7 @@
     "redux-thunk": "^2.3.0",
     "remarkable": "^2.0.0",
     "reselect": "^4.0.0",
-    "typescript": "^3.5.3"
+    "typescript": "^3.6.2"
   },
   "devDependencies": {
     "cssnano": "^4.1.10",

server/bootstrap.js

@@ -0,0 +1,8 @@
+require("ignore-styles");
+
+require("@babel/register")({
+	ignore: [/(node_modules)/],
+	presets: ["@babel/preset-env", "react-app"]
+});
+
+require("./index");

server/index.js

@@ -0,0 +1,31 @@
+import express from "express";
+
+// we'll talk about this in a minute:
+import serverRenderer from "./middleware/renderer";
+
+const PORT = 3000;
+const path = require("path");
+
+// initialize the application and create the routes
+const app = express();
+const router = express.Router();
+
+// root (/) should always serve our server rendered page
+router.use("^/$", serverRenderer);
+
+// other static resources should just be served as they are
+router.use(
+	express.static(path.resolve(__dirname, "..", "build"), { maxAge: "30d" })
+);
+
+// tell the app to use the above rules
+app.use(router);
+
+// start the app
+app.listen(PORT, error => {
+	if (error) {
+		return console.log("something bad happened", error);
+	}
+
+	console.log("listening on " + PORT + "...");
+});

server/middleware/renderer.js

@@ -0,0 +1,28 @@
+import React from "react";
+import ReactDOMServer from "react-dom/server";
+
+// import our main App component
+import App from "../../src/components/App";
+
+const path = require("path");
+const fs = require("fs");
+
+export default (req, res, next) => {
+	// point to the html file created by CRA's build tool
+	const filePath = path.resolve(__dirname, "..", "..", "build", "index.html");
+
+	fs.readFile(filePath, "utf8", (err, htmlData) => {
+		if (err) {
+			console.error("err", err);
+			return res.status(404).end();
+		}
+
+		// render the app as a string
+		const html = ReactDOMServer.renderToString(<App />);
+
+		// inject the rendered app into our html and send it
+		return res.send(
+			htmlData.replace('<div id="root"></div>', `<div id="root">${html}</div>`)
+		);
+	});
+};

src/api/authApi.js

@@ -10,9 +10,8 @@ function login(userName, password) {
 
 	return fetch(baseUrl + "/login", requestOptions)
 		.then(handleResponse)
-		.then(auth => {
-			localStorage.setItem("trelloid_token", JSON.stringify(auth.token));
-			return auth.user;
+		.then(({ token, user }) => {
+			return { token, user };
 		})
 		.catch(handleError);
 }

src/components/auth/LoginPage.js

@@ -10,6 +10,7 @@ class LoginPage extends Component {
 		super(props, context);
 
 		this.state = {
+			auth: {},
 			user: {},
 			errors: {},
 			saving: false
@@ -43,7 +44,9 @@ class LoginPage extends Component {
 		this.setState({ saving: true });
 		this.props.actions
 			.login(this.state.user)
-			.then(() => {
+			.then(auth => {
+				this.setState({ auth: auth });
+				localStorage.setItem("jwt_auth", JSON.stringify(auth));
 				this.props.history.push("/");
 			})
 			.catch(error => {

src/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { renderToString } from "react-dom/server";
+import { render } from "react-dom";
 import { BrowserRouter as Router } from "react-router-dom";
 import App from "./components/App";
 import { Provider } from "react-redux";
@@ -11,7 +11,7 @@ import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
 const store = configureStore();
 store.dispatch(loadUsers());
 
-renderToString(
+render(
 	<Provider store={store}>
 		<Router>
 			<App />

src/redux/actions/authActions.js

@@ -10,23 +10,23 @@ export function loginRequest(user) {
 	return { type: actionTypes.LOGIN_REQUEST, user: user };
 }
 
-export function loginSuccess(user) {
-	return { type: actionTypes.LOGIN_SUCCESS, user: user };
+export function loginSuccess(auth) {
+	return { type: actionTypes.LOGIN_SUCCESS, auth: auth };
 }
 
 export function logoutSuccess(user) {
 	return { type: actionTypes.LOGOUT_SUCCESS };
 }
 
-export function login(user) {
+export function login(loginDetails) {
 	return function(dispatch) {
 		dispatch(beginApiCall());
-		dispatch(loginRequest({ user }));
-		const { userName, password } = user;
+		dispatch(loginRequest({ loginDetails }));
+		const { userName, password } = loginDetails;
 		return authApi
 			.login(userName, password)
-			.then(() => {
-				dispatch(loginSuccess(user));
+			.then(({ token, user }) => {
+				dispatch(loginSuccess({ token, user }));
 			})
 			.catch(err => {
 				dispatch(loginFailure(err));

src/redux/reducers/authReducer.js

@@ -5,7 +5,7 @@ export default function authentication(state = {}, action) {
 		case actionTypes.LOGIN_REQUEST:
 			return { loggingIn: true, user: action.user };
 		case actionTypes.LOGIN_SUCCESS:
-			return { loggedIn: true, user: action.user };
+			return { loggedIn: true, auth: action.auth };
 		default:
 			return state;
 	}

src/tools/apiServer.js

@@ -42,7 +42,7 @@ server.post("/auth/login", function(req, res, next) {
 	const user = isAuthenticated(userName, password);
 	if (user) {
 		const tokenValue = createToken({ userName, password });
-		res.status(200).json({ token: tokenValue, user });
+		res.status(200).json({ token: tokenValue, user: user });
 	} else {
 		const status = 401;
 		const message = "Incorrect email or password";