Active Product Page back to working again

This commit is contained in:
Belen Curcio 2020-10-19 12:02:17 -03:00
parent 06234ae6c4
commit ab51207548
5 changed files with 39 additions and 18 deletions

View File

@ -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,
}
})
}
}}
/>
)
})}

View File

@ -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

View File

@ -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

View File

@ -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",

View File

@ -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"