feat: support multiple carts (#46)

* feat: support multiple carts

* chore: test on pr

Author: notrab

.github/workflows/test.yml

@@ -0,0 +1,17 @@
+name: Test
+on: [push, pull_request]
+jobs:
+  test:
+    name: Release
+    runs-on: ubuntu-18.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v1
+      - name: Setup Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - name: Install dependencies
+        run: npm install
+      - name: Test package
+        run: npm test

README.md

@@ -113,7 +113,7 @@ ReactDOM.render(
 
 #### Props
 
-- `id`: (_optional_) `id` for your cart to enable automatic cart retrieval via `window.localStorage`
+- `id`: (_optional_) `id` for your cart to enable automatic cart retrieval via `window.localStorage`. If you pass a `id` then you can use multiple instances of `CartProvider`.
 - `onSetItems`: Triggered only when `setItems` invoked
 - `onItemAdd`: Triggered on items added to your cart, unless the item already exists, then `onItemUpdate` will be invoked
 - `onItemUpdate`: Triggered on items updated in your cart, unless you are setting the quantity to `0`, then `onItemRemove` will be invoked

src/index.js renamed to index.js

@@ -17,6 +17,9 @@ export const initialState = {
   isEmpty: true,
 };
 
+export const createCartIdentifier = (len = 12) =>
+  [...Array(len)].map(() => (~~(Math.random() * 36)).toString(36)).join("");
+
 export const useCart = () => useContext(CartContext);
 
 function reducer(state, action) {
@@ -88,18 +91,18 @@ const calculateUniqueItems = (items = []) => items.length;
 
 export function CartProvider({
   children,
-  id = [...Array(12)]
-    .map((i) => (~~(Math.random() * 36)).toString(36))
-    .join(""),
+  id: cartId,
   defaultItems = [],
   onSetItems,
   onItemAdd,
   onItemUpdate,
   onItemRemove,
   storage = useLocalStorage,
 }) {
+  const id = cartId ? cartId : createCartIdentifier();
+
   const [savedCart, saveCart] = storage(
-    `react-use-cart`,
+    id ? `react-use-cart-${id}` : `react-use-cart`,
     JSON.stringify({
       id,
       ...initialState,

src/index.test.js renamed to index.test.js

@@ -1,11 +1,55 @@
 import React from "react";
 import { renderHook, act } from "@testing-library/react-hooks";
 
-import { CartProvider, useCart, initialState } from "./";
+import { CartProvider, useCart, initialState, createCartIdentifier } from ".";
 
 afterEach(() => window.localStorage.clear());
 
+describe("createCartIdentifier", () => {
+  test("returns a 12 character string by default", () => {
+    const id = createCartIdentifier();
+
+    expect(id).toHaveLength(12);
+  });
+
+  test("returns a custom length string", () => {
+    const id = createCartIdentifier(20);
+
+    expect(id).toHaveLength(20);
+  });
+
+  test("created id is unique", () => {
+    const id = createCartIdentifier();
+    const id2 = createCartIdentifier();
+
+    expect(id).not.toEqual(id2);
+  });
+});
+
 describe("CartProvider", () => {
+  test("uses ID for cart if provided", () => {
+    const wrapper = ({ children }) => (
+      <CartProvider id="test">{children}</CartProvider>
+    );
+
+    const { result } = renderHook(() => useCart(), {
+      wrapper,
+    });
+
+    expect(result.current.id).toEqual("test");
+  });
+
+  test("creates an ID for cart if non provided", () => {
+    const wrapper = ({ children }) => <CartProvider>{children}</CartProvider>;
+
+    const { result } = renderHook(() => useCart(), {
+      wrapper,
+    });
+
+    expect(result.current.id).toBeDefined();
+    expect(result.current.id).toHaveLength(12);
+  });
+
   test("initial cart meta state is set", () => {
     const wrapper = ({ children }) => (
       <CartProvider id="test">{children}</CartProvider>

rollup.config.js

@@ -1,30 +1,30 @@
-import external from 'rollup-plugin-peer-deps-external'
-import resolve from 'rollup-plugin-node-resolve'
-import babel from 'rollup-plugin-babel'
-import commonjs from 'rollup-plugin-commonjs'
+import external from "rollup-plugin-peer-deps-external";
+import resolve from "rollup-plugin-node-resolve";
+import babel from "rollup-plugin-babel";
+import commonjs from "rollup-plugin-commonjs";
 
-import pkg from './package.json'
+import pkg from "./package.json";
 
 export default {
-  input: 'src/index.js',
+  input: "index.js",
   output: [
     {
       file: pkg.main,
-      format: 'cjs',
+      format: "cjs",
       sourcemap: true,
     },
     {
       file: pkg.module,
-      format: 'es',
+      format: "es",
       sourcemap: true,
     },
   ],
   plugins: [
     external(),
     resolve(),
     babel({
-      exclude: 'node_modules/**',
+      exclude: "node_modules/**",
     }),
     commonjs(),
   ],
-}
+};