AlejandroYanes

src/
├── api/
│   ├── productsApi.ts
│   └── cartApi.ts
├── components/
│   ├── base/
│   │   ├── Button/
│   │   ├── Input/
│   │   ├── Modal/
│   │   ├── Text/

AlejandroYanes

const [state, dispatch] = useReducer(productDetailsReducer, {
  showModal: false,
  quantity: 1,
});

AlejandroYanes

ProductDetails/
├── components/
│   └── ...
├── state/
│   ├── actions/
│   │   ├── add-to-cart.ts
│   │   ├── get-current-cart.ts
│   │   └── resolve-error-message.ts
│   ├── index.ts
│   ├── reducer.ts

AlejandroYanes

<ProductDetailsProvider
  product={product}
  quantity={quantity}
  increaseQuantity={increaseQuantity}
  decreaseQuantity={decreaseQuantity}
>
  {/* ...your components */}
</ProductDetailsProvider>

AlejandroYanes

import { createContext, PropsWithChildren, useContext } from 'react';
import { ProductDetailContext } from './types';

const context = createContext<ProductDetailContext>(undefined);
const { Provider } = context;

const ProductDetailsProvider = (props: PropsWithChildren<ProductDetailContext>) => {
  const { children, ...rest } = props;

  return (

AlejandroYanes

// this should go on the types.ts file discussed previously
export interface ProductDetailContext {
  product: ProductModel;
  quantity: number;
  increaseQuantity: () => void;
  decreaseQuantity: () => void;
}

AlejandroYanes

export default function actionGenerator(
  dispatch: CustomDispatch,
  <...extraParamsNeeded>,
) {
  // the actual action to be called by the UI
  return (<...paramsToReceivedFromUI>) => {}
}

AlejandroYanes

export default handleFormChange(dispatch: CustomDispatch) {
  return (newValues: FormState) => {
    dispatch({ type: 'update_form_state', values: newValues });
  };
}

AlejandroYanes

const ProductDetailsPage = () => {
  const {
    isLoading,
    product,
    error,
    quantity,
    showModal,
    goBack,
    openModal,
    closeModal,

AlejandroYanes

import { useReducer } from 'react';
import { useHistory } from 'react-router-dom';
import { useParams } from 'react-router';
import { useQuery } from 'react-query';
import { AppwriteException } from 'appwrite';
import productsApi from 'api/products';
import { QueryKey } from 'components/providers/Query';
import productDetailsReducer from './reducer';
import addToCart from './actions/add-to-cart';