add brands to header

package.json

@@ -9,6 +9,7 @@
     "bootstrap": "^4.0.0",
     "classnames": "^2.2.5",
     "express": "^4.16.2",
+    "lodash": "4.17.10",
     "mongoose": "^4.13.6",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",

src/client/components/App.js

@@ -16,7 +16,8 @@ export default class App extends React.Component {
           <Switch>
             <Route exact path="/" component={Home} />
             <Route exact path="/products" component={Products} />
-            <Route path="/products/:id" component={Product} />
+            <Route exact path="/products/:id(\d+)" component={Product} />
+            <Route exact path="/products/:brand(\w+)" component={Products} />
             <Route path="/cart" component={Cart} />
           </Switch>
         </Container>

src/client/redux/reducers/products.js

@@ -1,4 +1,5 @@
 import * as actionTypes from "../actionTypes";
+import merge from "lodash/merge";
 
 const initialState = {
   byId: {},
@@ -13,13 +14,16 @@ export default function productsReducer(state = initialState, action) {
     case actionTypes.GET_CART_ITEMS_REQUEST:
       return {
         ...state,
+        byId: {},
+        ids: [],
         isLoading: true
       };
 
     case actionTypes.GET_PRODUCTS_SUCCESS:
       return {
         ...state,
-        ...action.payload,
+        byId: merge({}, state.byId, action.payload.byId),
+        ids: [...state.ids, action.payload.ids],
         isLoading: false
       };
 

src/server/connectors/index.js

@@ -12,6 +12,14 @@ let products = [
     description: "Ergonomic keyboard",
     price: 3000,
     url: "/img/keyboard.jpeg"
+  },
+  {
+    id: 3,
+    name: "Keyboard",
+    brand: "Samsung",
+    description: "Ergonomic keyboard",
+    price: 3000,
+    url: "/img/keyboard.jpeg"
   }
 ];
 
@@ -33,6 +41,12 @@ export function getProduct(id) {
   return [products.find(product => product.id === id)];
 }
 
+export function getProductsByBrand(brand) {
+  return products.filter(
+    product => product.brand.toLowerCase() === brand.toLowerCase()
+  );
+}
+
 export function getCartItem(id) {
   return cartItems.find(c => c.id === id);
 }

src/server/index.js

@@ -4,7 +4,8 @@ import morgan from "morgan";
 import {
   getUser,
   getProducts,
-  getProduct,
+  getProductById,
+  getProductsByBrand,
   getCartItems,
   getCartItem,
   addToCart,
@@ -43,9 +44,13 @@ app.get("/api/products", function(req, res) {
   res.json(getProducts());
 });
 
-app.get("/api/products/:id", function(req, res) {
+app.get("/api/products/:id(\\d+)/", function(req, res) {
   const id = parseInt(req.params.id, 10);
-  res.json(getProduct(id));
+  res.json(getProductById(id));
+});
+
+app.get("/api/products/:brand(\\w+)/", function(req, res) {
+  getProductsByBrand(req.params.brand).then(response => res.json(response));
 });
 
 app.get("/api/cart-items", function(req, res) {

yarn.lock

@@ -4969,6 +4969,10 @@ lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
+lodash@4.17.10:
+  version "4.17.10"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
+
 "lodash@>=3.5 <5", lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0:
   version "4.17.5"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"