ALL: Improve Code Reusability in Nx Monorepo

[robert-s-hogan]

Description

This ticket outlines several tasks to improve code reusability in our Nx monorepo. The goal is to create shared libraries for common hooks, Redux slices, styles, utilities, data access, and TypeScript types.

Tasks

Shared Hooks

• [x] Create a useModal hook to manage the visibility and content of a modal dialog.
• [x] Create a useFetch hook to fetch data from an API and handle loading/error states.
• [x] Create a useDebounce hook to debounce a value, useful for search input fields.
• [x] Create a useLocalStorage hook to interact with the browser's local storage.

Redux Toolkit Slices

• [x] Create a cartSlice to manage the shopping cart, including adding/removing items and calculating the total price.
• [x] Create a productsSlice to manage the list of available products, including fetching products from an API.
• [ ] Create a userSlice to manage user authentication and profile information.
• [ ] Create an ordersSlice to manage user orders, including creating and fetching orders.

Shared Styles with Tailwind CSS

• [ ] Create a library to store shared styles and Tailwind CSS configurations.
• [ ] Add shared styles and utility classes to the library.
• [ ] Configure Tailwind CSS to include the shared styles directory in the purge option of each app.
• [ ] Import and use the shared styles in applications.

Shared Utilities

• [x] Create a formatPrice utility to format prices with the correct currency symbol and decimal places.
• [ ] Create a validateEmail utility to validate email addresses.
• [ ] Create a sortProducts utility to sort products by price, rating, or other criteria.

Data Access for API Calls

• [ ] Create a library to handle data access and API calls.
• [ ] Add functions or hooks for fetching data from APIs to the library.
• [ ] Use libraries like Axios or the Fetch API to make HTTP requests.
• [ ] Use the useSWR hook to handle caching and revalidation of data.

Shared TypeScript Types

• [x] Create a library to store shared TypeScript types and interfaces.
• [x] Add TypeScript files with shared types to the library.
• [x] Export the types from the library's index.ts file.
• [x] Import and use the shared types in applications and other libraries.

Acceptance Criteria

• All tasks are completed and tested.
• Shared code is organized into libraries and can be easily reused across applications.

[robert-s-hogan]

productsSlice in : libs/store/products useModal: in libs/react-hooks/useModal types: libs/types

[robert-s-hogan]

cartSlice in: libs/store/cart

[robert-s-hogan]

react-hooks in: /libs/react-hooks