SWR and License

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Iskandar Kurbanov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

components/ProductForm.js

@@ -1,10 +1,28 @@
-import { useState, useContext } from "react"
+import { useState, useContext, useEffect } from "react"
 import { formatter } from '../utils/helpers'
 import ProductOptions from "./ProductOptions"
 import { CartContext } from "../context/shopContext"
+import useSWR from "swr"
+import axios from "axios"
+
+const fetcher = (url, id) => (
+ axios.get(url, {
+ params: {
+ id: id
+ }
+ }).then((res) => res.data)
+)
 
 export default function ProductForm({ product }) {
 
+ const { data: productInventory } = useSWR(
+ ['/api/available', product.handle],
+ (url, id) => fetcher(url, id),
+ { errorRetryCount: 3 }
+ )
+
+ const [available, setAvailable] = useState(true)
+
  const { addToCart } = useContext(CartContext)
 
  const allVariantOptions = product.variants.edges?.map(variant => {
@@ -36,7 +54,7 @@ export default function ProductForm({ product }) {
 
  function setOptions(name, value) {
  setSelectedOptions(prevState => {
- return { ...prevState, [name]: value}
+ return { ...prevState, [name]: value }
  })
 
  const selection = {
@@ -51,14 +69,26 @@ export default function ProductForm({ product }) {
  })
  }
 
+ useEffect(() => {
+ if (productInventory) {
+ const checkAvailable = productInventory?.variants.edges.filter(item => item.node.id === selectedVariant.id)
+
+ if (checkAvailable[0].node.availableForSale) {
+ setAvailable(true)
+ } else {
+ setAvailable(false)
+ }
+ }
+ }, [productInventory, selectedVariant])
+
 
  return (
  <div className="rounded-2xl p-4 shadow-lg flex flex-col w-full md:w-1/3">
  <h2 className="text-2xl font-bold">{product.title}</h2>
  <span className="pb-3">{formatter.format(product.variants.edges[0].node.priceV2.amount)}</span>
  {
- product.options.map(({ name, values}) => (
- <ProductOptions 
+ product.options.map(({ name, values }) => (
+ <ProductOptions
  key={`key-${name}`}
  name={name}
  values={values}
@@ -67,11 +97,21 @@ export default function ProductForm({ product }) {
  />
  ))
  }
- <button 
- onClick={() => {
- addToCart(selectedVariant)
- }}
- className="bg-black rounded-lg text-white px-2 py-3 mt-3 hover:bg-gray-800">Add To Card</button>
+ {
+ available ?
+ <button
+ onClick={() => {
+ addToCart(selectedVariant)
+ }}
+ className="bg-black rounded-lg text-white px-2 py-3 mt-3 hover:bg-gray-800">
+ Add To Card
+ </button>
+ :
+ <button
+ className="rounded-lg text-white px-2 py-3 mt-3 bg-gray-800 cursor-not-allowed">
+ Sold out!
+ </button>
+ }
  </div>
  )
 }