From ab51207548af314788be745ba6b96c1fd42b1099 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 19 Oct 2020 12:02:17 -0300
Subject: [PATCH] Active Product Page back to working again

---
 .../product/ProductView/ProductView.tsx       | 25 +++++++------------
 components/product/Swatch/Swatch.tsx          |  3 ++-
 lib/logger.ts                                 | 15 ++++++++++-
 package.json                                  |  2 ++
 yarn.lock                                     | 12 +++++++++
 5 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index e8f91c99b..71d874a25 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -15,19 +15,12 @@ interface Props {
   product: Product
 }
 
-interface Choices {
-  size?: string | null
-  color?: string | null
-}
-
 const ProductView: FC<Props> = ({ product, className }) => {
-  const options = getProductOptions(product)
-  // console.log(options)
-
   const addItem = useAddItem()
   const { openSidebar } = useUI()
+  const options = getProductOptions(product)
 
-  const [choices, setChoices] = useState<Choices>({
+  const [choices, setChoices] = useState<Record<string, any>>({
     size: null,
     color: null,
   })
@@ -48,9 +41,6 @@ const ProductView: FC<Props> = ({ product, className }) => {
     }
   }
 
-  const activeSize = choices.size
-  const activeColor = choices.color
-
   return (
     <Container>
       <NextSeo
@@ -88,6 +78,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
               {/** TODO: Change with Image Component */}
               {product.images.edges?.map((image, i) => (
                 <img
+                  key={image?.node.urlSmall}
                   className="w-full object-cover"
                   src={image?.node.urlXL}
                   loading={i === 0 ? 'eager' : 'lazy'}
@@ -104,25 +95,27 @@ const ProductView: FC<Props> = ({ product, className }) => {
         <div className="flex-1 flex flex-col pt-24">
           <section>
             {options?.map((opt: any) => (
-              <div className="pb-4">
+              <div className="pb-4" key={opt.displayName}>
                 <h2 className="uppercase font-medium">{opt.displayName}</h2>
                 <div className="flex flex-row py-4">
                   {opt.values.map((v: any) => {
+                    const active = choices[opt.displayName]
+
                     return (
                       <Swatch
                         key={v.entityId}
-                        active={v.label === activeColor}
+                        active={v.label === active}
                         variant={opt.displayName}
                         color={v.hexColors ? v.hexColors[0] : ''}
                         label={v.label}
-                        onClick={() =>
+                        onClick={() => {
                           setChoices((choices) => {
                             return {
                               ...choices,
                               [opt.displayName]: v.label,
                             }
                           })
-                        }
+                        }}
                       />
                     )
                   })}
diff --git a/components/product/Swatch/Swatch.tsx b/components/product/Swatch/Swatch.tsx
index 3085e6e0a..6d8a7dfb2 100644
--- a/components/product/Swatch/Swatch.tsx
+++ b/components/product/Swatch/Swatch.tsx
@@ -24,7 +24,7 @@ const Swatch: FC<Props & ButtonProps> = ({
 }) => {
   variant = variant?.toLowerCase()
   label = label?.toLowerCase()
-  // console.log(variant)
+
   const rootClassName = cn(
     s.root,
     {
@@ -38,6 +38,7 @@ const Swatch: FC<Props & ButtonProps> = ({
     <Button
       className={rootClassName}
       style={color ? { backgroundColor: color } : {}}
+      {...props}
     >
       {variant === 'color' && active && (
         <span
diff --git a/lib/logger.ts b/lib/logger.ts
index 0871a3177..eeda2c325 100644
--- a/lib/logger.ts
+++ b/lib/logger.ts
@@ -1,5 +1,18 @@
 import bunyan from 'bunyan'
+import PrettyStream from 'bunyan-prettystream'
 
-const log = bunyan.createLogger({ name: 'Next.js - Commerce' })
+const prettyStdOut = new PrettyStream()
+
+const log = bunyan.createLogger({
+  name: 'Next.js - Commerce',
+  level: 'debug',
+  streams: [
+    {
+      level: 'debug',
+      type: 'raw',
+      stream: prettyStdOut,
+    },
+  ],
+})
 
 export default log
diff --git a/package.json b/package.json
index ca288630a..82d2d5ee4 100644
--- a/package.json
+++ b/package.json
@@ -22,10 +22,12 @@
     "@headlessui/react": "^0.2.0",
     "@tailwindcss/ui": "^0.6.2",
     "@types/bunyan": "^1.8.6",
+    "@types/bunyan-prettystream": "^0.1.31",
     "@types/classnames": "^2.2.10",
     "@types/react-swipeable-views": "^0.13.0",
     "animate.css": "^4.1.1",
     "bunyan": "^1.8.14",
+    "bunyan-prettystream": "^0.1.3",
     "classnames": "^2.2.6",
     "cookie": "^0.4.1",
     "js-cookie": "^2.2.1",
diff --git a/yarn.lock b/yarn.lock
index c749e9a09..701291839 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2095,6 +2095,13 @@
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
   integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
 
+"@types/bunyan-prettystream@^0.1.31":
+  version "0.1.31"
+  resolved "https://registry.yarnpkg.com/@types/bunyan-prettystream/-/bunyan-prettystream-0.1.31.tgz#3864836abb907ab151f7edf7c64c323c9609e1d1"
+  integrity sha512-NE7fq2ZcX7OSMK+VhTNJkVEHlo+hm0uVXpuLeH1ifGm52Qwuo/kLD2GHo7UcEXMFu3duKver/AFo8C4TME93zw==
+  dependencies:
+    "@types/node" "*"
+
 "@types/bunyan@^1.8.6":
   version "1.8.6"
   resolved "https://registry.yarnpkg.com/@types/bunyan/-/bunyan-1.8.6.tgz#6527641cca30bedec5feb9ab527b7803b8000582"
@@ -2977,6 +2984,11 @@ bufferutil@^4.0.1:
   dependencies:
     node-gyp-build "~3.7.0"
 
+bunyan-prettystream@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/bunyan-prettystream/-/bunyan-prettystream-0.1.3.tgz#6c3b713266f6ad32007c7b6ab1e998a245349d98"
+  integrity sha1-bDtxMmb2rTIAfHtqsemYokU0nZg=
+
 bunyan@^1.8.14:
   version "1.8.14"
   resolved "https://registry.yarnpkg.com/bunyan/-/bunyan-1.8.14.tgz#3d8c1afea7de158a5238c7cb8a66ab6b38dd45b4"