From dfbca746b23d7c52785adc0e38aa956b14dd7708 Mon Sep 17 00:00:00 2001
From: Bel Curcio <curciobel@gmail.com>
Date: Tue, 8 Jun 2021 11:48:55 -0300
Subject: [PATCH] More perf changes

---
 .../ProductSlider/ProductSlider.module.css    | 30 ------------------
 .../product/ProductSlider/ProductSlider.tsx   | 24 +++-----------
 .../ProductSliderControl.module.css           | 29 +++++++++++++++++
 .../ProductSliderControl.tsx                  | 31 +++++++++++++++++++
 .../product/ProductSliderControl/index.ts     |  1 +
 5 files changed, 66 insertions(+), 49 deletions(-)
 create mode 100644 components/product/ProductSliderControl/ProductSliderControl.module.css
 create mode 100644 components/product/ProductSliderControl/ProductSliderControl.tsx
 create mode 100644 components/product/ProductSliderControl/index.ts

diff --git a/components/product/ProductSlider/ProductSlider.module.css b/components/product/ProductSlider/ProductSlider.module.css
index a175f0b95..58434ac33 100644
--- a/components/product/ProductSlider/ProductSlider.module.css
+++ b/components/product/ProductSlider/ProductSlider.module.css
@@ -12,36 +12,6 @@
   opacity: 1;
 }
 
-.control {
-  @apply bg-violet absolute bottom-10 right-10 flex flex-row
-  border-accent-0 border text-accent-0 z-30 shadow-xl select-none;
-  height: 48px;
-}
-
-.leftControl,
-.rightControl {
-  @apply px-9 cursor-pointer;
-  transition: background-color 0.2s ease;
-}
-
-.leftControl:hover,
-.rightControl:hover {
-  background-color: var(--violet-dark);
-}
-
-.leftControl:focus,
-.rightControl:focus {
-  @apply outline-none;
-}
-
-.rightControl {
-  @apply border-l border-accent-0;
-}
-
-.leftControl {
-  margin-right: -1px;
-}
-
 .thumb {
   @apply transition-transform transition-colors
   ease-linear duration-75 overflow-hidden inline-block
diff --git a/components/product/ProductSlider/ProductSlider.tsx b/components/product/ProductSlider/ProductSlider.tsx
index c3aa80a93..2a2f39d74 100644
--- a/components/product/ProductSlider/ProductSlider.tsx
+++ b/components/product/ProductSlider/ProductSlider.tsx
@@ -10,7 +10,7 @@ import React, {
 import cn from 'classnames'
 import { a } from '@react-spring/web'
 import s from './ProductSlider.module.css'
-import { ArrowLeft, ArrowRight } from '@components/icons'
+import ProductSliderControl from '../ProductSliderControl'
 
 const ProductSlider: FC = ({ children }) => {
   const [currentSlide, setCurrentSlide] = useState(0)
@@ -73,30 +73,16 @@ const ProductSlider: FC = ({ children }) => {
     }
   }, [])
 
+  const onPrev = React.useCallback(() => slider.prev(), [slider])
+  const onNext = React.useCallback(() => slider.next(), [slider])
+
   return (
     <div className={s.root} ref={sliderContainerRef}>
       <div
         ref={ref}
         className={cn(s.slider, { [s.show]: isMounted }, 'keen-slider')}
       >
-        {slider && (
-          <div className={s.control}>
-            <button
-              className={cn(s.leftControl)}
-              onClick={slider.prev}
-              aria-label="Previous Product Image"
-            >
-              <ArrowLeft />
-            </button>
-            <button
-              className={cn(s.rightControl)}
-              onClick={slider.next}
-              aria-label="Next Product Image"
-            >
-              <ArrowRight />
-            </button>
-          </div>
-        )}
+        {slider && <ProductSliderControl onPrev={onPrev} onNext={onNext} />}
         {Children.map(children, (child) => {
           // Add the keen-slider__slide className to children
           if (isValidElement(child)) {
diff --git a/components/product/ProductSliderControl/ProductSliderControl.module.css b/components/product/ProductSliderControl/ProductSliderControl.module.css
new file mode 100644
index 000000000..c744e7598
--- /dev/null
+++ b/components/product/ProductSliderControl/ProductSliderControl.module.css
@@ -0,0 +1,29 @@
+.control {
+  @apply bg-violet absolute bottom-10 right-10 flex flex-row
+  border-accent-0 border text-accent-0 z-30 shadow-xl select-none;
+  height: 48px;
+}
+
+.leftControl,
+.rightControl {
+  @apply px-9 cursor-pointer;
+  transition: background-color 0.2s ease;
+}
+
+.leftControl:hover,
+.rightControl:hover {
+  background-color: var(--violet-dark);
+}
+
+.leftControl:focus,
+.rightControl:focus {
+  @apply outline-none;
+}
+
+.rightControl {
+  @apply border-l border-accent-0;
+}
+
+.leftControl {
+  margin-right: -1px;
+}
diff --git a/components/product/ProductSliderControl/ProductSliderControl.tsx b/components/product/ProductSliderControl/ProductSliderControl.tsx
new file mode 100644
index 000000000..4e767b5db
--- /dev/null
+++ b/components/product/ProductSliderControl/ProductSliderControl.tsx
@@ -0,0 +1,31 @@
+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>
+}
+
+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>
+  )
+)
+export default ProductSliderControl
diff --git a/components/product/ProductSliderControl/index.ts b/components/product/ProductSliderControl/index.ts
new file mode 100644
index 000000000..5b63c466f
--- /dev/null
+++ b/components/product/ProductSliderControl/index.ts
@@ -0,0 +1 @@
+export { default } from './ProductSliderControl'