Separate useCart and useSetCart

components/card/card.js

@@ -1,12 +1,13 @@
 import React from 'react'
 import Link from 'next/link'
 
-import useCart from '~/hooks/useCart'
+import useCart, {useSetCart} from '~/hooks/useCart'
 import styles from './style.module.css'
 import axios from 'axios'
 
 export default function Card({item}) {
-  const [cart, setCart] = useCart()
+  const cart = useCart()
+  const setCart = useSetCart()
   const numInCart = cart?.items?.find(i => i.item.uuid === item.uuid)?.count || 0
   let featuredImage = item.images.find(i=>i.featured) || item.images[0]
 

components/header/header.js

@@ -10,7 +10,7 @@ import styles from './style.module.css'
 
 const Header = () => {
   const user = useUser()
-  const [cart] = useCart()
+  const cart = useCart()
   const cartSize = (cart && cart.items.length) ? cart.items.map(item => item.count).reduce((sum, current) => (sum + current)) : 0
   const isAdminPage = useIsAdminPage()
 

hooks/useCart.js

@@ -3,4 +3,13 @@ import React, {useContext} from 'react'
 const CartContext = React.createContext(null);
 
 export const CartContextProvider = CartContext.Provider;
-export default () => useContext(CartContext)
+
+export default function useCart(){
+  const [cart, setCart] = useContext(CartContext)
+  return cart
+}
+
+export function useSetCart() {
+  const [cart, setCart] = useContext(CartContext)
+  return setCart
+}

pages/store/cart.js

@@ -4,12 +4,13 @@ import Link from 'next/link'
 import axios from 'axios'
 import Head from 'next/head'
 
-import useCart from '~/hooks/useCart'
+import useCart, {useSetCart} from '~/hooks/useCart'
 import {FormController, Input, Button} from '~/components/form'
 import Table from '~/components/table'
 
 export default function Cart(){
-  const [cart, setCart] = useCart()
+  const cart = useCart()
+  const setCart = useSetCart()
   const numItems = (cart?.items) ? cart.items.length : 0
   const allInStock = !cart?.items?.some(item => !item.item.number_in_stock || item.item.number_in_stock < 1)
   const allHaveEnough = !cart?.items?.some(item => item.count > item.item.number_in_stock)

pages/store/item/[slug].js

@@ -4,7 +4,7 @@ import Router from 'next/router'
 import {FormController, IntegerInput, Button} from '~/components/form'
 import isNum from 'validator/lib/isNumeric'
 
-import useCart from '~/hooks/useCart'
+import useCart, {useSetCart} from '~/hooks/useCart'
 import styles from './style.module.css'
 
 Item.getInitialProps = async function({ctx: {axios, query: {slug}}}){
@@ -21,7 +21,8 @@ Item.getInitialProps = async function({ctx: {axios, query: {slug}}}){
 
 // TODO: Modal with full image size on clicking preview
 export default function Item({item}){
-  const [cart, setCart] = useCart()
+  const cart = useCart()
+  const setCart = useSetCart()
   // Pick first one with featured flag or 0
   const featuredIndex = item.images.reduce((p, im, i) => ((p !== undefined) ? p : (im.featured ? i : undefined)), undefined) || 0
   const [selectedIndex, setSelected] = useState(featuredIndex);