1stdibs · MadStyleCow · Jul 15, 2018
diff --git a/react/package-lock.json b/react/package-lock.json
diff --git a/react/package.json b/react/package.json
@@ -28,10 +28,17 @@
     },
     "homepage": "https://github.com/1stdibs/front-end-quiz#readme",
     "dependencies": {
+        "bootstrap": "^4.1.2",
+        "cors": "^2.8.4",
         "express": "^4.16.3",
+        "font-awesome": "^4.7.0",
+        "npm": "^6.1.0",
         "react": "^16.4.0",
         "react-dom": "^16.4.0",
-        "react-scripts": "1.1.4"
+        "react-redux": "^5.0.7",
+        "react-scripts": "1.1.4",
+        "redux": "^4.0.0",
+        "redux-thunk": "^2.3.0"
     },
     "devDependencies": {
         "nodemon": "^1.17.5"

diff --git a/react/public/index.html b/react/public/index.html
@@ -2,7 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+      <!-- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> -->
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
     <meta name="theme-color" content="#000000">
     <!--
       manifest.json provides metadata used when your web app is added to the
@@ -19,7 +20,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>React Front End Quiz</title>
   </head>
   <body>
     <noscript>

diff --git a/react/server/classes/InMemoryStorage.js b/react/server/classes/InMemoryStorage.js
@@ -0,0 +1,41 @@
+// An in-memory storage for favorites
+class InMemoryStorage {
+	// constructor
+	constructor() {
+		this.storage = {};
+	};
+
+	// Methods
+	// Retrieve entry
+	retrieveEntry(pUserId) {
+		// Retrieve an entry or remove it
+		if (this.storage[pUserId]) {
+			return this.storage[pUserId];
+		}
+		else {
+			return [];
+		}
+	};
+
+	// Insert entry
+	insertEntry(pUserId, pItemId) {
+		if (this.storage[pUserId]) {
+			// Push an item to the array
+			this.storage[pUserId].push(pItemId);
+		}
+		else {
+			// Create a new entry
+			this.storage[pUserId] = [pItemId];
+		}
+	};
+
+	// Remove entry
+	removeEntry(pUserId, pItemId) {
+		if (this.storage[pUserId] & (this.storage[pUserId].indexOf(pItemId) != -1)) {
+			// Remove an entry from the array
+			this.storage[pUserId].splice(sthis.storage[pUserId].indexOf(pItemId), 1);
+		}
+	};
+};
+
+module.exports = InMemoryStorage;
diff --git a/react/server/data/items.json b/react/server/data/items.json
diff --git a/react/server/index.js b/react/server/index.js
@@ -1,9 +1,18 @@
 const express = require('express');
+const bodyParser = require('body-parser');
 const app = express();
 const port = process.env.PORT || 3001;
 
+// Configure app
+app.use(bodyParser.json());
+app.use(bodyParser.urlencoded({extended: false}));
+
+// Allow requests from all origins
+app.use(require('cors')());
+
 app.use('/browse', require('./routes/browseRouter'));
 app.use('/item', require('./routes/itemRouter'));
+app.use('/favorites', require('./routes/favoriteRouter'));
 
 app.listen(port, function () {
     console.log('Example app listening at localhost:%s', port);

diff --git a/react/server/routes/favoriteRouter.js b/react/server/routes/favoriteRouter.js
@@ -0,0 +1,35 @@
+const express = require('express');
+const InMemoryStorage = require('./../classes/InMemoryStorage');
+
+const favoriteRouter = express.Router();
+const cache = new InMemoryStorage();
+
+const getFavorites = function (userId) {
+	return cache.retrieveEntry(userId);
+};
+
+const insertFavorite = function (userId, itemId) {
+	cache.insertEntry(userId, itemId);
+};
+
+const removeFavorite = function (userId, itemId) {
+	cache.removeEntry(userId, itemId);
+};
+
+/* Routes */
+favoriteRouter.get('/', (req, res) => {
+    const favorites = getFavorites(req.query.userId);
+    res.status(200).json(favorites);
+});
+
+favoriteRouter.post('/add', (req, res) => {
+	insertFavorite(req.body.userId, req.body.itemId);
+	res.status(200).send();
+});
+
+favoriteRouter.delete('/remove', (req, res) => {
+	removeFavorite(req.body.userId, req.body.itemId);
+	res.status(200).send();
+});
+
+module.exports = favoriteRouter;
diff --git a/react/src/App.css b/react/src/App.css
diff --git a/react/src/App.js b/react/src/App.js
diff --git a/react/src/actions/actionTypes.js b/react/src/actions/actionTypes.js
@@ -0,0 +1,17 @@
+/* Action types */
+// Items
+export const RECEIVE_ITEMS = 'RECEIVE_ITEMS';
+export const RECEIVE_ITEMS_LOADING = 'RECEIVE_ITEMS_LOADING';
+export const RECEIVE_ITEMS_FAILURE = 'RECEIVE_ITEMS_FAILURE';
+
+// Item
+export const SELECT_ITEM = 'SELECT_ITEM';
+export const DESELECT_ITEM = 'DESELECT_ITEM';
+export const RECEIVE_ITEM = 'RECEIVE_ITEM';
+export const RECEIVE_ITEM_LOADING = 'RECEIVE_ITEM_LOADING';
+export const RECEIVE_ITEM_FAILURE = 'RECEIVE_ITEM_FAILURE';
+
+// Favorites
+export const FAVORITE_ITEM = 'FAVORITE_ITEM';
+export const DEFAVORITE_ITEM = 'DEFAVORITE_ITEM';
+export const RECEIVE_FAVORITES = 'RECEIVE_FAVORITES';
diff --git a/react/src/actions/favorites.js b/react/src/actions/favorites.js
@@ -0,0 +1,60 @@
+/* Imports */
+import { FAVORITE_ITEM, DEFAVORITE_ITEM, RECEIVE_FAVORITES } from './actionTypes';
+import FavoriteService from './../services/favoriteService';
+
+/* Action generators */
+export function favoriteItem(pId) {
+	return {
+		type: FAVORITE_ITEM,
+		payload: pId
+	}
+};
+
+export function defavoriteItem(pId) {
+	return {
+		type: DEFAVORITE_ITEM,
+		payload: pId
+	}
+};
+
+export function receiveFavorites(pFavorites) {
+	return {
+		type: RECEIVE_FAVORITES,
+		payload: pFavorites
+	}
+};
+
+export function fetchFavorites(pUserId) {
+	return dispatch => {
+		// Request data from the back-end
+		FavoriteService.GetFavorites(pUserId)
+			.then((response) => {
+				// Did the request fail?
+				if (!response.ok) {
+					// Throw an exception
+					throw new Error(response.statusText);
+				}
+
+				// And return the promise, for futher processing
+				return response;
+			})
+			.then((response) => response.json())
+			.then((json) => dispatch(receiveFavorites(json)));
+	};
+};
+
+export function addFavorite(pUserId, pItemId) {
+	return dispatch => {
+		// Send a request
+		FavoriteService.AddFavorite(pUserId, pItemId)
+			.then(() => dispatch(favoriteItem(pItemId)));
+	}
+};
+
+export function removeFavorite(pUserId, pItemId) {
+	return dispatch => {
+	// Send a request
+		FavoriteService.RemoveFavorite(pUserId, pItemId)
+			.then(() => dispatch(defavoriteItem(pItemId)));
+	}
+};
diff --git a/react/src/actions/item.js b/react/src/actions/item.js
@@ -0,0 +1,73 @@
+/* Imports */
+import { SELECT_ITEM, DESELECT_ITEM, RECEIVE_ITEM, RECEIVE_ITEM_LOADING, RECEIVE_ITEM_FAILURE } from './actionTypes';
+import ItemService from './../services/itemService';
+
+/* Action generators */
+// Select item
+// Called when an item is selected
+export function selectItem(pId) {
+	return {
+		type: SELECT_ITEM,
+		payload: pId
+	}
+};
+
+// Deselect item
+// Called when an item is deselected
+export function deselectItem() {
+	return {
+		type: DESELECT_ITEM
+	}
+};
+
+// Receive item
+// Called when an item is received
+export function receiveItemSuccess(pItem) {
+	return {
+		type: RECEIVE_ITEM,
+		payload: pItem
+	}
+};
+
+// Called when item retrieval is in progress
+export function receiveItemProgress(pBool) {
+	return {
+		type: RECEIVE_ITEM_LOADING,
+		payload: pBool
+	}
+};
+
+// Called when item retrieval fails
+export function receiveItemFailure(pBool) {
+	return {
+		type: RECEIVE_ITEM_FAILURE,
+		payload: pBool
+	}
+};
+
+// Fetches item
+export function fetchItem(pId) {
+	return dispatch => {
+		// Indicate that the request is in progress
+		dispatch(receiveItemProgress(true));
+
+		// Request data from the back-end
+		ItemService.GetItemById(pId)
+			.then((response) => {
+				// Did the request fail?
+				if (!response.ok) {
+					// Throw an exception
+					throw new Error(response.statusText);
+				}
+
+				// Otherwise, indicate that we have the data
+				dispatch(receiveItemProgress(false));
+
+				// And return the promise, for futher processing
+				return response;
+			})
+			.then((response) => response.json())
+			.then((json) => dispatch(receiveItemSuccess(json)))
+			.catch(() => dispatch(receiveItemFailure(true)));
+	};
+};
diff --git a/react/src/actions/items.js b/react/src/actions/items.js
@@ -0,0 +1,56 @@
+/* Imports */
+import { RECEIVE_ITEMS, RECEIVE_ITEMS_LOADING, RECEIVE_ITEMS_FAILURE } from './actionTypes';
+import ItemService from './../services/itemService';
+
+/* Action generators */
+// Called when items are retrieved succesfully
+export function receiveItemsSuccess(pItems) {
+	return {
+		type: RECEIVE_ITEMS,
+		payload: pItems
+	}
+};
+
+// Called when item retrieval is in progress
+export function receiveItemsProgress(pBool) {
+	return {
+		type: RECEIVE_ITEMS_LOADING,
+		payload: pBool
+	}
+};
+
+// Called when item retrieval fails
+export function receiveItemsFailure(pBool) {
+	return {
+		type: RECEIVE_ITEMS_FAILURE,
+		payload: pBool
+	}
+};
+
+// Fetches items
+const itemsPerPage = 9;
+export function fetchItems(pCurrentPage = 0) {
+	return dispatch => {
+		// Indicate that the request is in progress
+		dispatch(receiveItemsProgress(true));
+
+		// Request data from the back-end
+		ItemService.GetItems(pCurrentPage * itemsPerPage, itemsPerPage)
+			.then((response) => {
+				// Did the request fail?
+				if (!response.ok) {
+					// Throw an exception
+					throw new Error(response.statusText);
+				}
+
+				// Otherwise, indicate that we have the data
+				dispatch(receiveItemsProgress(false));
+
+				// And return the promise, for futher processing
+				return response;
+			})
+			.then((response) => response.json())
+			.then((json) => dispatch(receiveItemsSuccess(json)))
+			.catch(() => dispatch(receiveItemsFailure(true)));
+	};
+};
diff --git a/react/src/components/App.css b/react/src/components/App.css
@@ -0,0 +1,4 @@
+.app {
+	background-color: rgb(251, 250, 249);
+	min-height: 100vh;
+}