From f8e7866e80b722982a378bc82adf7893dd6c01f0 Mon Sep 17 00:00:00 2001 From: Pooria Setayesh Date: Wed, 22 May 2024 22:40:09 +0330 Subject: [PATCH] refactor: keep hooks DRY! --- src/hooks/useAddOrUpdateCartItem.ts | 34 +---------------- src/hooks/useCartQuery.ts | 15 +++----- src/hooks/useCartUtils.ts | 58 +++++++++++++++++++++++++++++ src/hooks/useRmoveCartItem.ts | 38 ++----------------- 4 files changed, 68 insertions(+), 77 deletions(-) create mode 100644 src/hooks/useCartUtils.ts diff --git a/src/hooks/useAddOrUpdateCartItem.ts b/src/hooks/useAddOrUpdateCartItem.ts index ddbef08..363c8ae 100644 --- a/src/hooks/useAddOrUpdateCartItem.ts +++ b/src/hooks/useAddOrUpdateCartItem.ts @@ -2,18 +2,12 @@ import { ADD_TO_CART_MUTATION, UPDATE_CART_ITEMS_QUANTITIES_MUTATION, } from '@/graphql/queries/cart'; -import { getFragmentData } from '@/graphql/types'; import { AddToCartMutation, - CartContentFragmentDoc, - CartItemContentFragmentDoc, - GetCartQuery, - ProductVariationContentSliceFragmentDoc, UpdateCartItemQuantitiesMutation, } from '@/graphql/types/graphql'; -import { ICartAtom, cartAtom } from '@/store/atoms'; import { useMutation } from '@apollo/client'; -import { useAtom } from 'jotai'; +import useCartUtils from './useCartUtils'; export interface MutateCartFunction { (values: { @@ -32,31 +26,7 @@ export interface IUseAddOrUpdateCartItem { } const useAddOrUpdateCartItem: IUseAddOrUpdateCartItem = () => { - const [cart, setCart] = useAtom(cartAtom); - - const findInCart = ({ variationId }: { variationId: number }) => { - cart?.contents?.nodes.find((item) => { - const { variation } = getFragmentData(CartItemContentFragmentDoc, item); - const productContent = getFragmentData( - ProductVariationContentSliceFragmentDoc, - variation?.node, - )!; - return productContent?.databaseId == variationId; - }); - - return { quantity: 0, key: 0 }; - }; - - const setCartAtom = (value: GetCartQuery['cart']) => { - const _value: ICartAtom = { - ...value, - productsCount: - getFragmentData(CartContentFragmentDoc, value)?.contents?.nodes - ?.length ?? 0, - }; - - setCart(_value); - }; + const { findInCart, setCartAtom } = useCartUtils(); const [addToCart, { loading: addToCartLoading }] = useMutation(ADD_TO_CART_MUTATION, { diff --git a/src/hooks/useCartQuery.ts b/src/hooks/useCartQuery.ts index 94df134..79956d1 100644 --- a/src/hooks/useCartQuery.ts +++ b/src/hooks/useCartQuery.ts @@ -1,19 +1,14 @@ import { GET_CART_QUERY } from '@/graphql/queries/cart'; -import { getFragmentData } from '@/graphql/types'; -import { CartContentFragmentDoc, GetCartQuery } from '@/graphql/types/graphql'; -import { cartAtom } from '@/store/atoms'; +import { GetCartQuery } from '@/graphql/types/graphql'; import { useQuery } from '@apollo/client'; -import { useSetAtom } from 'jotai'; +import useCartUtils from './useCartUtils'; const useCartQuery = () => { - const setCart = useSetAtom(cartAtom); + const { setCartAtom } = useCartUtils(); + return useQuery(GET_CART_QUERY, { onCompleted: (data) => { - const cart = getFragmentData(CartContentFragmentDoc, data.cart); - setCart({ - ...cart, - productsCount: cart?.contents?.nodes.length ?? 0, - }); + setCartAtom(data.cart); }, fetchPolicy: 'network-only', }); diff --git a/src/hooks/useCartUtils.ts b/src/hooks/useCartUtils.ts new file mode 100644 index 0000000..9b3989f --- /dev/null +++ b/src/hooks/useCartUtils.ts @@ -0,0 +1,58 @@ +import { getFragmentData } from '@/graphql/types'; +import { + CartContentFragmentDoc, + CartItemContentFragmentDoc, + GetCartQuery, + ProductVariationContentSliceFragmentDoc, +} from '@/graphql/types/graphql'; +import { ICartAtom, cartAtom } from '@/store/atoms'; +import { useAtom } from 'jotai'; + +export interface ReturnTypeOfUseCartUtils { + findInCart: (args: { variationId: number }) => { + quantity: number; + key: string; + }; + setCartAtom: (value: GetCartQuery['cart']) => void; +} + +export interface IUseCartUtils { + (): ReturnTypeOfUseCartUtils; +} + +const useCartUtils: IUseCartUtils = () => { + const [cart, setCart] = useAtom(cartAtom); + + const findInCart: ReturnTypeOfUseCartUtils['findInCart'] = ({ + variationId, + }) => { + cart?.contents?.nodes.find((item) => { + const { variation } = getFragmentData(CartItemContentFragmentDoc, item); + const productContent = getFragmentData( + ProductVariationContentSliceFragmentDoc, + variation?.node, + )!; + return productContent?.databaseId == variationId; + }); + + return { quantity: 0, key: '' }; + }; + + const setCartAtom: ReturnTypeOfUseCartUtils['setCartAtom'] = (value) => { + const _value: ICartAtom = { + ...value, + productsCount: + getFragmentData(CartContentFragmentDoc, value)?.contents?.nodes + ?.length ?? 0, + }; + + setCart(_value); + }; + + return { + findInCart, + setCartAtom, + }; +}; + +export default useCartUtils; diff --git a/src/hooks/useRmoveCartItem.ts b/src/hooks/useRmoveCartItem.ts index 6d2418c..b90a5d2 100644 --- a/src/hooks/useRmoveCartItem.ts +++ b/src/hooks/useRmoveCartItem.ts @@ -1,15 +1,7 @@ import { REMOVE_ITEMS_FROM_CART_MUTATION } from '@/graphql/queries/cart'; -import { getFragmentData } from '@/graphql/types'; -import { - CartContentFragmentDoc, - CartItemContentFragmentDoc, - GetCartQuery, - ProductVariationContentSliceFragmentDoc, - RemoveItemsFromCartMutation, -} from '@/graphql/types/graphql'; -import { ICartAtom, cartAtom } from '@/store/atoms'; +import { RemoveItemsFromCartMutation } from '@/graphql/types/graphql'; import { useMutation } from '@apollo/client'; -import { useAtom } from 'jotai'; +import useCartUtils from './useCartUtils'; export interface RemoveCartItemMutate { (values: { variationId: number }): Promise; @@ -23,31 +15,7 @@ export interface IUseRemoveCartItem { } const useRemoveCartItem: IUseRemoveCartItem = () => { - const [cart, setCart] = useAtom(cartAtom); - - const findInCart = ({ variationId }: { variationId: number }) => { - cart?.contents?.nodes.find((item) => { - const { variation } = getFragmentData(CartItemContentFragmentDoc, item); - const productContent = getFragmentData( - ProductVariationContentSliceFragmentDoc, - variation?.node, - )!; - return productContent?.databaseId == variationId; - }); - - return { quantity: 0, key: 0 }; - }; - - const setCartAtom = (value: GetCartQuery['cart']) => { - const _value: ICartAtom = { - ...value, - productsCount: - getFragmentData(CartContentFragmentDoc, value)?.contents?.nodes - ?.length ?? 0, - }; - - setCart(_value); - }; + const { findInCart, setCartAtom } = useCartUtils(); const [removeCartItem, { loading }] = useMutation(REMOVE_ITEMS_FROM_CART_MUTATION, {