Latest Changes - Logger, Size and Colors

This commit is contained in:
Belen Curcio 2020-10-17 09:07:02 -03:00
parent 5e4686bdd4
commit a42c67a898
11 changed files with 147 additions and 70 deletions

View File

@ -20,9 +20,6 @@ interface Choices {
color?: string | null
}
const COLORS: Colors[] = ['pink', 'black', 'white']
const SIZES = ['s', 'm', 'l', 'xl', 'xxl']
const ProductView: FC<Props> = ({ product, className }) => {
const options = getProductOptions(product)
console.log(options)
@ -39,7 +36,6 @@ const ProductView: FC<Props> = ({ product, className }) => {
const addToCart = async () => {
setLoading(true)
try {
await addItem({
productId: product.entityId,
@ -48,7 +44,6 @@ const ProductView: FC<Props> = ({ product, className }) => {
openSidebar()
setLoading(false)
} catch (err) {
// Error err.
setLoading(false)
}
}
@ -86,9 +81,11 @@ const ProductView: FC<Props> = ({ product, className }) => {
{product.prices?.price.currencyCode}
</div>
</div>
<div className="flex-1 px-24 pb-0 relative fit box-border">
<div className="absolute z-10 inset-0 flex items-center justify-center">
<ProductSlider>
{/** TODO: Change with Image Component */}
{product.images.edges?.map((image, i) => (
<img
className="w-full object-cover"
@ -98,16 +95,14 @@ const ProductView: FC<Props> = ({ product, className }) => {
))}
</ProductSlider>
</div>
<div className="absolute z-10 bottom-10 left-1/2 transform -translate-x-1/2 inline-block">
<img src="/slider-arrows.png" />
</div>
<div className={s.squareBg}></div>
</div>
<div className="flex-1 flex flex-col pt-24">
{options?.map((opt) => (
{options?.map((opt: any) => (
<section className="pb-4">
<h2 className="uppercase font-medium">{opt.displayName}</h2>
<div className="flex flex-row py-4">
@ -115,14 +110,15 @@ const ProductView: FC<Props> = ({ product, className }) => {
return (
<Swatch
key={v.entityId}
label={v.label}
active={v.label === activeColor}
variant={opt.displayName}
color={v.hexColors ? v.hexColors[0] : ''}
label={v.label}
onClick={() =>
setChoices((choices) => {
return {
...choices,
[opt.displayName.toLowerCase()]: v.label,
[opt.displayName]: v.label,
}
})
}
@ -130,24 +126,22 @@ const ProductView: FC<Props> = ({ product, className }) => {
)
})}
</div>
<div className="pb-12">
<div
className="break-words"
dangerouslySetInnerHTML={{ __html: product.description }}
/>
<Button
type="button"
className={s.button}
onClick={addToCart}
loading={loading}
>
Add to Cart
</Button>
</div>
</section>
))}
<section className="pb-12">
<div
className="break-words"
dangerouslySetInnerHTML={{ __html: product.description }}
/>
</section>
<section className="">
<Button
type="button"
className={s.button}
onClick={addToCart}
loading={loading}
>
Add to Cart
</Button>
</section>
</div>
</div>
</Container>

View File

@ -1,5 +1,5 @@
.root {
@apply h-12 w-12 bg-primary text-base rounded-full mr-3 inline-flex
@apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
items-center justify-center cursor-pointer transition duration-75 ease-in-out
p-0 shadow-none border-gray-200 border box-border;
}
@ -11,19 +11,3 @@
.root:hover {
@apply transform scale-110 bg-hover;
}
.colorViolet {
@apply bg-violet !important;
}
.colorPink {
@apply bg-pink !important;
}
.colorBlack {
@apply bg-black !important;
}
.colorWhite {
@apply bg-white text-black !important;
}

View File

@ -5,16 +5,18 @@ import { Colors } from '@components/ui/types'
import { Check } from '@components/icon'
import Button, { ButtonProps } from '@components/ui/Button'
interface Props extends ButtonProps {
className?: string
children?: any
interface Props {
active?: boolean
children?: any
className?: string
label?: string
variant?: 'size' | 'color' | string
color?: string
}
const Swatch: FC<Props> = ({
const Swatch: FC<Props & ButtonProps> = ({
className,
color,
label,
variant = 'size',
active,
@ -22,22 +24,21 @@ const Swatch: FC<Props> = ({
}) => {
variant = variant?.toLowerCase()
label = label?.toLowerCase()
console.log(variant)
const rootClassName = cn(
s.root,
{
[s.active]: active,
[s.size]: variant === 'size',
[s.colorPink]: label === 'pink',
[s.colorWhite]: label === 'white',
[s.colorBlack]: label === 'black',
[s.colorViolet]: label === 'violet',
},
className
)
return (
<Button className={rootClassName}>
<Button
className={rootClassName}
style={color ? { backgroundColor: color } : {}}
>
{variant === 'color' && active && (
<span
className={cn('absolute', {

View File

@ -1,8 +1,9 @@
import type { Product } from '@lib/bigcommerce/api/operations/get-product'
export function getProductOptions(product: Product) {
const options = product.options.edges?.map(({ node }: any) => ({
displayName: node.displayName,
console.log(product)
const options = product.productOptions.edges?.map(({ node }: any) => ({
displayName: node.displayName.toLowerCase(),
values: node.values.edges?.map(({ node }: any) => node),
}))

View File

@ -32,6 +32,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
width,
Component = 'button',
loading = false,
style = {},
...rest
} = props
const ref = useRef<typeof Component>(null)
@ -63,6 +64,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
{...buttonProps}
style={{
width,
...style,
}}
data-active={isPressed ? '' : undefined}
>

View File

@ -9,6 +9,24 @@ export const responsiveImageFragment = /* GraphQL */ `
isDefault
}
`
export const multipleChoiceFragment = /* GraphQL */ `
fragment swatchOption on SwatchOptionValue {
isDefault
hexColors
}
fragment multipleChoiceOption on MultipleChoiceOption {
entityId
values {
edges {
node {
label
...swatchOption
}
}
}
}
`
export const productInfoFragment = /* GraphQL */ `
fragment productInfo on Product {
@ -46,24 +64,17 @@ export const productInfoFragment = /* GraphQL */ `
}
}
}
options {
productOptions {
edges {
node {
entityId
displayName
isRequired
values {
edges {
node {
entityId
label
}
}
}
...multipleChoiceOption
}
}
}
}
${responsiveImageFragment}
${multipleChoiceFragment}
`

View File

@ -1,10 +1,12 @@
import { CommerceAPIFetchOptions } from 'lib/commerce/api'
import { getConfig } from '..'
import log from '@lib/logger'
export default async function fetchGraphqlApi<Q, V = any>(
query: string,
{ variables, preview }: CommerceAPIFetchOptions<V> = {}
): Promise<Q> {
log.warn(query)
const config = getConfig()
const res = await fetch(config.commerceUrl + (preview ? '/preview' : ''), {
method: 'POST',

5
lib/logger.ts Normal file
View File

@ -0,0 +1,5 @@
import bunyan from 'bunyan'
const log = bunyan.createLogger({ name: 'Next.js - Commerce' })
export default log

View File

@ -21,9 +21,11 @@
"dependencies": {
"@headlessui/react": "^0.2.0",
"@tailwindcss/ui": "^0.6.2",
"@types/bunyan": "^1.8.6",
"@types/classnames": "^2.2.10",
"@types/react-swipeable-views": "^0.13.0",
"animate.css": "^4.1.1",
"bunyan": "^1.8.14",
"classnames": "^2.2.6",
"cookie": "^0.4.1",
"js-cookie": "^2.2.1",

View File

@ -1,8 +1,5 @@
import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
import { useRouter } from 'next/router'
import Link from 'next/link'
import { Layout } from '@components/core'
import { Container, Grid, Skeleton } from '@components/ui'
import { Container, Skeleton } from '@components/ui'
export default function Search() {
return (
<Container>

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@^1.8.6":
version "1.8.6"
resolved "https://registry.yarnpkg.com/@types/bunyan/-/bunyan-1.8.6.tgz#6527641cca30bedec5feb9ab527b7803b8000582"
integrity sha512-YiozPOOsS6bIuz31ilYqR5SlLif4TBWsousN2aCWLi5233nZSX19tFbcQUPdR7xJ8ypPyxkCGNxg0CIV5n9qxQ==
dependencies:
"@types/node" "*"
"@types/classnames@^2.2.10":
version "2.2.10"
resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.10.tgz#cc658ca319b6355399efc1f5b9e818f1a24bf999"
@ -2970,6 +2977,16 @@ bufferutil@^4.0.1:
dependencies:
node-gyp-build "~3.7.0"
bunyan@^1.8.14:
version "1.8.14"
resolved "https://registry.yarnpkg.com/bunyan/-/bunyan-1.8.14.tgz#3d8c1afea7de158a5238c7cb8a66ab6b38dd45b4"
integrity sha512-LlahJUxXzZLuw/hetUQJmRgZ1LF6+cr5TPpRj6jf327AsiIq2jhYEH4oqUUkVKTor+9w2BT3oxVwhzE5lw9tcg==
optionalDependencies:
dtrace-provider "~0.8"
moment "^2.19.3"
mv "~2"
safe-json-stringify "~1"
bytes@^3.0.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
@ -3857,6 +3874,13 @@ dotenv@^8.2.0:
resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==
dtrace-provider@~0.8:
version "0.8.8"
resolved "https://registry.yarnpkg.com/dtrace-provider/-/dtrace-provider-0.8.8.tgz#2996d5490c37e1347be263b423ed7b297fb0d97e"
integrity sha512-b7Z7cNtHPhH9EJhNNbbeqTcXB8LGFFZhq1PGgEvpeHlzd36bhbdTWoE/Ba/YguqpBSlAPKnARWhVlhunCMwfxg==
dependencies:
nan "^2.14.0"
duplexer3@^0.1.4:
version "0.1.4"
resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
@ -4426,6 +4450,17 @@ glob-to-regexp@^0.4.1:
resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
glob@^6.0.1:
version "6.0.4"
resolved "https://registry.yarnpkg.com/glob/-/glob-6.0.4.tgz#0f08860f6a155127b2fadd4f9ce24b1aab6e4d22"
integrity sha1-DwiGD2oVUSey+t1PnOJLGqtuTSI=
dependencies:
inflight "^1.0.4"
inherits "2"
minimatch "2 || 3"
once "^1.3.0"
path-is-absolute "^1.0.0"
glob@^7.0.0, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
version "7.1.6"
resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
@ -5675,7 +5710,7 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
minimatch@3.0.4, minimatch@^3.0.4:
"minimatch@2 || 3", minimatch@3.0.4, minimatch@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
@ -5752,6 +5787,18 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
mkdirp@~0.5.1:
version "0.5.5"
resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
dependencies:
minimist "^1.2.5"
moment@^2.19.3:
version "2.29.1"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
ms@2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@ -5767,11 +5814,25 @@ mute-stream@0.0.8:
resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
mv@~2:
version "2.1.1"
resolved "https://registry.yarnpkg.com/mv/-/mv-2.1.1.tgz#ae6ce0d6f6d5e0a4f7d893798d03c1ea9559b6a2"
integrity sha1-rmzg1vbV4KT32JN5jQPB6pVZtqI=
dependencies:
mkdirp "~0.5.1"
ncp "~2.0.0"
rimraf "~2.4.0"
nan@^2.12.1:
version "2.14.1"
resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==
nan@^2.14.0:
version "2.14.2"
resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
nanomatch@^1.2.9:
version "1.2.13"
resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@ -5796,6 +5857,11 @@ native-url@0.3.4:
dependencies:
querystring "^0.2.0"
ncp@~2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/ncp/-/ncp-2.0.0.tgz#195a21d6c46e361d2fb1281ba38b91e9df7bdbb3"
integrity sha1-GVoh1sRuNh0vsSgbo4uR6d9727M=
neo-async@2.6.1:
version "2.6.1"
resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
@ -7313,6 +7379,13 @@ rimraf@^3.0.2:
dependencies:
glob "^7.1.3"
rimraf@~2.4.0:
version "2.4.5"
resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.4.5.tgz#ee710ce5d93a8fdb856fb5ea8ff0e2d75934b2da"
integrity sha1-7nEM5dk6j9uFb7Xqj/Di11k0sto=
dependencies:
glob "^6.0.1"
ripemd160@^2.0.0, ripemd160@^2.0.1:
version "2.0.2"
resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.2.tgz#a1c1a6f624751577ba5d07914cbc92850585890c"
@ -7348,6 +7421,11 @@ safe-buffer@~5.1.0, safe-buffer@~5.1.1:
resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
safe-json-stringify@~1:
version "1.2.0"
resolved "https://registry.yarnpkg.com/safe-json-stringify/-/safe-json-stringify-1.2.0.tgz#356e44bc98f1f93ce45df14bcd7c01cda86e0afd"
integrity sha512-gH8eh2nZudPQO6TytOvbxnuhYBOvDBBLW52tz5q6X58lJcd/tkmqFR+5Z9adS8aJtURSXWThWy/xJtJwixErvg==
safe-regex@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"