From 28a67c4d49f8ec4c80bffaed32c2889ba5bddc1d Mon Sep 17 00:00:00 2001 From: Richard van der Dys Date: Fri, 11 Sep 2020 16:45:58 +0300 Subject: [PATCH] Working mock cart (#135) Added a cart store which uses a cookie for item storage Update, add, and remove now work --- package.json | 2 +- src/mock-connector/addToCart.js | 11 ++---- src/mock-connector/cart.js | 9 ++--- src/mock-connector/index.js | 1 + src/mock-connector/removeCartItem.js | 6 ++-- src/mock-connector/session.js | 9 ++--- src/mock-connector/updateCartItem.js | 4 ++- src/mock-connector/utils/cartStore.js | 49 +++++++++++++++++++++++++++ 8 files changed, 65 insertions(+), 26 deletions(-) create mode 100644 src/mock-connector/utils/cartStore.js diff --git a/package.json b/package.json index 99b37ab0..4fe90c5a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-storefront", - "version": "8.16.2", + "version": "8.16.3", "description": "Build and deploy e-commerce progressive web apps (PWAs) in record time.", "module": "./index.js", "license": "Apache-2.0", diff --git a/src/mock-connector/addToCart.js b/src/mock-connector/addToCart.js index 28943aa1..28620efe 100644 --- a/src/mock-connector/addToCart.js +++ b/src/mock-connector/addToCart.js @@ -1,10 +1,5 @@ -export default async function addToCart({ color, size, product }, req, res) { - const { id, quantity } = product +import { addItem } from './utils/cartStore' - console.log('product id: ', id) - console.log('color id: ', color || 'Not provided') - console.log('size id: ', size || 'Not provided') - console.log('quantity ', quantity || 1) - - return { added: true, id } +export default async function addToCart({ color, size, product, quantity }, req, res) { + return { cart: { items: addItem(product.id, quantity, req, res) } } } diff --git a/src/mock-connector/cart.js b/src/mock-connector/cart.js index ce09adc0..37db794d 100644 --- a/src/mock-connector/cart.js +++ b/src/mock-connector/cart.js @@ -1,10 +1,8 @@ -import createProduct from './utils/createProduct' import fulfillAPIRequest from '../props/fulfillAPIRequest' import createAppData from './utils/createAppData' +import { getProducts } from './utils/cartStore' export default async function cart(req, res) { - const products = [createProduct(1), createProduct(2), createProduct(3)] - return fulfillAPIRequest(req, { appData: createAppData, pageData: () => @@ -17,10 +15,7 @@ export default async function cart(req, res) { }, ], cart: { - items: products.map((item, i) => ({ - ...item, - quantity: 1, - })), + items: getProducts(req, res), }, }), }) diff --git a/src/mock-connector/index.js b/src/mock-connector/index.js index 54f5620c..57ec7b31 100644 --- a/src/mock-connector/index.js +++ b/src/mock-connector/index.js @@ -2,6 +2,7 @@ export { default as cart } from './cart.js' export { default as account } from './account.js' export { default as addToCart } from './addToCart.js' export { default as updateCartItem } from './updateCartItem.js' +export { default as removeCartItem } from './removeCartItem.js' export { default as home } from './home.js' export { default as product } from './product.js' export { default as productMedia } from './productMedia.js' diff --git a/src/mock-connector/removeCartItem.js b/src/mock-connector/removeCartItem.js index dce9d334..3ff46cc3 100644 --- a/src/mock-connector/removeCartItem.js +++ b/src/mock-connector/removeCartItem.js @@ -1,3 +1,5 @@ -export default function removeCartItem(item, req, res) { - return {} +import { removeItem } from './utils/cartStore' + +export default async function removeCartItem(item, req, res) { + return { cart: { items: removeItem(item.id, req, res) } } } diff --git a/src/mock-connector/session.js b/src/mock-connector/session.js index fd02f3d9..bb976d8d 100644 --- a/src/mock-connector/session.js +++ b/src/mock-connector/session.js @@ -1,16 +1,11 @@ -import createProduct from './utils/createProduct' +import { getProducts } from './utils/cartStore' export default async function session(req, res) { - const products = [createProduct(1), createProduct(2), createProduct(3)] - return { name: 'Mark', email: 'mark@domain.com', cart: { - items: products.map((item, i) => ({ - ...item, - quantity: 1, - })), + items: getProducts(req, res), }, currency: 'USD', } diff --git a/src/mock-connector/updateCartItem.js b/src/mock-connector/updateCartItem.js index 55a2ab72..90f93d12 100644 --- a/src/mock-connector/updateCartItem.js +++ b/src/mock-connector/updateCartItem.js @@ -1,3 +1,5 @@ +import { updateItem } from './utils/cartStore' + export default function updateCartItem(item, quantity, req, res) { - return {} + return { cart: { items: updateItem(item.id, quantity, req, res) } } } diff --git a/src/mock-connector/utils/cartStore.js b/src/mock-connector/utils/cartStore.js new file mode 100644 index 00000000..deb69586 --- /dev/null +++ b/src/mock-connector/utils/cartStore.js @@ -0,0 +1,49 @@ +import createProduct from './createProduct' + +const CART_COOKIE = 'rsf_mock_cart' + +const initialStore = [ + { id: 1, quantity: 1 }, + { id: 2, quantity: 1 }, +] + +function getStore(req, res) { + if (!req.cookies[CART_COOKIE]) { + res.setHeader('Set-Cookie', `${CART_COOKIE}=${JSON.stringify(initialStore)}; Path=/`) + } + const store = req.cookies[CART_COOKIE] || initialStore + try { + return JSON.parse(store) + } catch (err) { + console.log('Failed parsing store from cookie', req.cookies[CART_COOKIE]) + return [] + } +} + +function toProduct({ id, quantity }) { + return { ...createProduct(id), quantity } +} + +export function getProducts(req, res) { + return getStore(req, res).map(toProduct) +} + +export function updateItem(id, quantity, req, res) { + const newStore = [...getStore(req, res)] + const item = newStore.find(e => e.id === id) + item.quantity = quantity + res.setHeader('Set-Cookie', `${CART_COOKIE}=${JSON.stringify(newStore)}; Path=/`) + return newStore.map(toProduct) +} + +export function removeItem(id, req, res) { + const newStore = [...getStore(req, res)].filter(e => e.id !== id) + res.setHeader('Set-Cookie', `${CART_COOKIE}=${JSON.stringify(newStore)}; Path=/`) + return newStore.map(toProduct) +} + +export function addItem(id, quantity, req, res) { + const newStore = [{ id, quantity }, ...getStore(req, res)] + res.setHeader('Set-Cookie', `${CART_COOKIE}=${JSON.stringify(newStore)}; Path=/`) + return newStore.map(toProduct) +}