forked from crowetic/commerce
Improve error handling for hooks
This commit is contained in:
parent
e4a99601f5
commit
3644d637dd
@ -4,6 +4,7 @@ import {
|
|||||||
CommerceProvider as CoreCommerceProvider,
|
CommerceProvider as CoreCommerceProvider,
|
||||||
useCommerce as useCoreCommerce,
|
useCommerce as useCoreCommerce,
|
||||||
} from 'lib/commerce'
|
} from 'lib/commerce'
|
||||||
|
import { FetcherError } from '@lib/commerce/utils/errors'
|
||||||
|
|
||||||
async function getText(res: Response) {
|
async function getText(res: Response) {
|
||||||
try {
|
try {
|
||||||
@ -16,9 +17,9 @@ async function getText(res: Response) {
|
|||||||
async function getError(res: Response) {
|
async function getError(res: Response) {
|
||||||
if (res.headers.get('Content-Type')?.includes('application/json')) {
|
if (res.headers.get('Content-Type')?.includes('application/json')) {
|
||||||
const data = await res.json()
|
const data = await res.json()
|
||||||
return data.errors[0]
|
return new FetcherError({ errors: data.errors, status: res.status })
|
||||||
}
|
}
|
||||||
return { message: await getText(res) }
|
return new FetcherError({ message: await getText(res), status: res.status })
|
||||||
}
|
}
|
||||||
|
|
||||||
export const bigcommerceConfig: CommerceConfig = {
|
export const bigcommerceConfig: CommerceConfig = {
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import { useCallback } from 'react'
|
import { useCallback } from 'react'
|
||||||
import { HookFetcher } from '@lib/commerce/utils/types'
|
import { CommerceError } from '@lib/commerce/utils/errors'
|
||||||
|
import type { HookFetcher } from '@lib/commerce/utils/types'
|
||||||
import useCommerceSignup from '@lib/commerce/use-signup'
|
import useCommerceSignup from '@lib/commerce/use-signup'
|
||||||
import type { SignupBody } from './api/customers/signup'
|
import type { SignupBody } from './api/customers/signup'
|
||||||
|
|
||||||
@ -16,9 +17,10 @@ export const fetcher: HookFetcher<null, SignupBody> = (
|
|||||||
fetch
|
fetch
|
||||||
) => {
|
) => {
|
||||||
if (!(firstName && lastName && email && password)) {
|
if (!(firstName && lastName && email && password)) {
|
||||||
throw new Error(
|
throw new CommerceError({
|
||||||
'A first name, last name, email and password are required to signup'
|
message:
|
||||||
)
|
'A first name, last name, email and password are required to signup',
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
return fetch({
|
return fetch({
|
||||||
|
40
lib/commerce/utils/errors.ts
Normal file
40
lib/commerce/utils/errors.ts
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
export type ErrorData = {
|
||||||
|
message: string
|
||||||
|
code?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export type ErrorProps = {
|
||||||
|
code?: string
|
||||||
|
} & (
|
||||||
|
| { message: string; errors?: never }
|
||||||
|
| { message?: never; errors: ErrorData[] }
|
||||||
|
)
|
||||||
|
|
||||||
|
export class CommerceError extends Error {
|
||||||
|
code?: string
|
||||||
|
errors: ErrorData[]
|
||||||
|
|
||||||
|
constructor({ message, code, errors }: ErrorProps) {
|
||||||
|
const error: ErrorData = message
|
||||||
|
? { message, ...(code ? { code } : {}) }
|
||||||
|
: errors![0]
|
||||||
|
|
||||||
|
super(error.message)
|
||||||
|
this.errors = message ? [error] : errors!
|
||||||
|
|
||||||
|
if (error.code) this.code = error.code
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class FetcherError extends CommerceError {
|
||||||
|
status: number
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
options: {
|
||||||
|
status: number
|
||||||
|
} & ErrorProps
|
||||||
|
) {
|
||||||
|
super(options)
|
||||||
|
this.status = options.status
|
||||||
|
}
|
||||||
|
}
|
@ -1,7 +1,29 @@
|
|||||||
|
import useSignup from '@lib/bigcommerce/use-signup'
|
||||||
import { Layout } from '@components/core'
|
import { Layout } from '@components/core'
|
||||||
import { Logo, Modal, Button } from '@components/ui'
|
import { Logo, Modal, Button } from '@components/ui'
|
||||||
|
|
||||||
export default function Login() {
|
export default function Login() {
|
||||||
|
const signup = useSignup()
|
||||||
|
// TODO: use this method
|
||||||
|
const handleSignup = async () => {
|
||||||
|
// TODO: validate the password and email before calling the signup
|
||||||
|
// Passwords must be at least 7 characters and contain both alphabetic
|
||||||
|
// and numeric characters.
|
||||||
|
try {
|
||||||
|
await signup({
|
||||||
|
// This account already exists, so it will throw the "duplicated_email" error
|
||||||
|
email: 'luis@vercel.com',
|
||||||
|
firstName: 'Luis',
|
||||||
|
lastName: 'Alvarez',
|
||||||
|
password: 'luis123',
|
||||||
|
})
|
||||||
|
} catch (error) {
|
||||||
|
if (error.code === 'duplicated_email') {
|
||||||
|
// TODO: handle duplicated email
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="pb-20">
|
<div className="pb-20">
|
||||||
<Modal close={() => {}}>
|
<Modal close={() => {}}>
|
||||||
@ -22,7 +44,9 @@ export default function Login() {
|
|||||||
className="focus:outline-none focus:shadow-outline-gray border-none py-2 px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10"
|
className="focus:outline-none focus:shadow-outline-gray border-none py-2 px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<Button variant="slim">Log In</Button>
|
<Button variant="slim" onClick={handleSignup}>
|
||||||
|
Log In
|
||||||
|
</Button>
|
||||||
<span className="pt-3 text-center text-sm">
|
<span className="pt-3 text-center text-sm">
|
||||||
<span className="text-accents-7">Don't have an account?</span>
|
<span className="text-accents-7">Don't have an account?</span>
|
||||||
{` `}
|
{` `}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user