Fixed eslint issues in multiple files

components/product/ProductOptions/ProductOptions.tsx

@@ -1,50 +1,52 @@
+import { memo } from 'react'
 import { Swatch } from '@components/product'
 import type { ProductOption } from '@commerce/types/product'
 import { SelectedOptions } from '../helpers'
-import React from 'react'
+
 interface ProductOptionsProps {
   options: ProductOption[]
   selectedOptions: SelectedOptions
   setSelectedOptions: React.Dispatch<React.SetStateAction<SelectedOptions>>
 }
 
-const ProductOptions: React.FC<ProductOptionsProps> = React.memo(
-  ({ options, selectedOptions, setSelectedOptions }) => {
-    return (
-      <div>
-        {options.map((opt) => (
-          <div className="pb-4" key={opt.displayName}>
-            <h2 className="uppercase font-medium text-sm tracking-wide">
-              {opt.displayName}
-            </h2>
-            <div className="flex flex-row py-4">
-              {opt.values.map((v, i: number) => {
-                const active = selectedOptions[opt.displayName.toLowerCase()]
-                return (
-                  <Swatch
-                    key={`${opt.id}-${i}`}
-                    active={v.label.toLowerCase() === active}
-                    variant={opt.displayName}
-                    color={v.hexColors ? v.hexColors[0] : ''}
-                    label={v.label}
-                    onClick={() => {
-                      setSelectedOptions((selectedOptions) => {
-                        return {
-                          ...selectedOptions,
-                          [opt.displayName.toLowerCase()]:
-                            v.label.toLowerCase(),
-                        }
-                      })
-                    }}
-                  />
-                )
-              })}
-            </div>
+const ProductOptions: React.FC<ProductOptionsProps> = ({
+  options,
+  selectedOptions,
+  setSelectedOptions,
+}) => {
+  return (
+    <div>
+      {options.map((opt) => (
+        <div className="pb-4" key={opt.displayName}>
+          <h2 className="uppercase font-medium text-sm tracking-wide">
+            {opt.displayName}
+          </h2>
+          <div className="flex flex-row py-4">
+            {opt.values.map((v, i: number) => {
+              const active = selectedOptions[opt.displayName.toLowerCase()]
+              return (
+                <Swatch
+                  key={`${opt.id}-${i}`}
+                  active={v.label.toLowerCase() === active}
+                  variant={opt.displayName}
+                  color={v.hexColors ? v.hexColors[0] : ''}
+                  label={v.label}
+                  onClick={() => {
+                    setSelectedOptions((selectedOptions) => {
+                      return {
+                        ...selectedOptions,
+                        [opt.displayName.toLowerCase()]: v.label.toLowerCase(),
+                      }
+                    })
+                  }}
+                />
+              )
+            })}
           </div>
-        ))}
-      </div>
-    )
-  }
-)
+        </div>
+      ))}
+    </div>
+  )
+}
 
-export default ProductOptions
+export default memo(ProductOptions)

components/product/ProductSidebar/ProductSidebar.tsx

@@ -23,7 +23,7 @@ const ProductSidebar: FC<ProductSidebarProps> = ({ product, className }) => {
 
   useEffect(() => {
     selectDefaultOptionFromProduct(product, setSelectedOptions)
-  }, [])
+  }, [product])
 
   const variant = getProductVariant(product, selectedOptions)
   const addToCart = async () => {

components/product/ProductSlider/ProductSlider.tsx

@@ -66,17 +66,13 @@ const ProductSlider: React.FC<ProductSliderProps> = ({
         event.preventDefault()
     }
 
-    sliderContainerRef.current!.addEventListener(
-      'touchstart',
-      preventNavigation
-    )
+    const slider = sliderContainerRef.current!
+
+    slider.addEventListener('touchstart', preventNavigation)
 
     return () => {
-      if (sliderContainerRef.current) {
-        sliderContainerRef.current!.removeEventListener(
-          'touchstart',
-          preventNavigation
-        )
+      if (slider) {
+        slider.removeEventListener('touchstart', preventNavigation)
       }
     }
   }, [])

components/product/ProductSliderControl/ProductSliderControl.tsx

@@ -1,31 +1,30 @@
+import { FC, MouseEventHandler, memo } from 'react'
 import cn from 'classnames'
-import React from 'react'
 import s from './ProductSliderControl.module.css'
 import { ArrowLeft, ArrowRight } from '@components/icons'
 
 interface ProductSliderControl {
-  onPrev: React.MouseEventHandler<HTMLButtonElement>
-  onNext: React.MouseEventHandler<HTMLButtonElement>
+  onPrev: MouseEventHandler<HTMLButtonElement>
+  onNext: MouseEventHandler<HTMLButtonElement>
 }
 
-const ProductSliderControl: React.FC<ProductSliderControl> = React.memo(
-  ({ onPrev, onNext }) => (
-    <div className={s.control}>
-      <button
-        className={cn(s.leftControl)}
-        onClick={onPrev}
-        aria-label="Previous Product Image"
-      >
-        <ArrowLeft />
-      </button>
-      <button
-        className={cn(s.rightControl)}
-        onClick={onNext}
-        aria-label="Next Product Image"
-      >
-        <ArrowRight />
-      </button>
-    </div>
-  )
+const ProductSliderControl: FC<ProductSliderControl> = ({ onPrev, onNext }) => (
+  <div className={s.control}>
+    <button
+      className={cn(s.leftControl)}
+      onClick={onPrev}
+      aria-label="Previous Product Image"
+    >
+      <ArrowLeft />
+    </button>
+    <button
+      className={cn(s.rightControl)}
+      onClick={onNext}
+      aria-label="Next Product Image"
+    >
+      <ArrowRight />
+    </button>
+  </div>
 )
-export default ProductSliderControl
+
+export default memo(ProductSliderControl)