implement endpoint for loading products

Author: jdnichollsc

README.md

@@ -13,6 +13,7 @@
 ## Notable Links 🤓
 
 - [Get started with Temporal and TypeScript](https://github.com/temporalio/sdk-typescript)
+- [Workflow Messages - TypeScript SDK](https://docs.temporal.io/develop/typescript/message-passing)
 
 ### Public Courses
 
@@ -209,6 +210,17 @@ docker-compose up -d
 docker-compose down --volumes
 ```
 
+## Payment Providers
+
+- Stripe:
+  - [Webhooks](https://docs.stripe.com/webhooks?lang=node)
+  - [Stripe Webhook integration](https://docs.stripe.com/api/webhook_endpoints)
+  - [Stripe Checkout](https://docs.stripe.com/payments/checkout)
+  - [Webhooks Dashboard](https://dashboard.stripe.com/test/workbench/webhooks)
+  - [Automatic fulfillment Orders](https://docs.stripe.com/checkout/fulfillment)
+  - [Interactive webhook endpoint builder](https://docs.stripe.com/webhooks/quickstart)
+  - [Trigger webhook events with the Stripe CLI](https://docs.stripe.com/stripe-cli/triggers)
+
 ## Supporting 🍻
 I believe in Unicorns 🦄
 Support [me](http://www.paypal.me/jdnichollsc/2), if you do too.

apps/order/src/app/app.service.ts

@@ -162,6 +162,7 @@ export class AppService {
       // Signal the workflow
       await handle.signal(paymentWebHookEventSignal, webhookEvent);
 
+      // Return true to indicate the webhook was received
       return { received: true };
     } catch (err) {
       this.logger.error('Webhook Error:', err.message);

apps/product/project.json

@@ -5,6 +5,31 @@
   "projectType": "application",
   "tags": [],
   "targets": {
+    "build": {
+      "executor": "@nx/webpack:webpack",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "target": "node",
+        "compiler": "tsc",
+        "outputPath": "dist/apps/product",
+        "main": "apps/product/src/main.ts",
+        "tsConfig": "apps/product/tsconfig.app.json",
+        "assets": [
+          "apps/product/src/assets"
+        ],
+        "isolatedConfig": true,
+        "webpackConfig": "apps/product/webpack.config.js"
+      },
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "mode": "production"
+        }
+      }
+    },
     "serve": {
       "executor": "@nx/js:node",
       "defaultConfiguration": "development",

apps/product/src/app/app.service.ts

@@ -1,36 +1,19 @@
 import { Injectable, Logger } from '@nestjs/common';
-import { ProductDto, ProductStatus } from '@projectx/models';
+import { ProductRepositoryService } from '@projectx/db';
+import { ProductDto } from '@projectx/models';
 
 @Injectable()
 export class AppService {
   readonly logger = new Logger(AppService.name);
 
+  constructor(private readonly productRepository: ProductRepositoryService) {}
+
   /**
    * Retrieves all available products.
    * @returns Array of ProductDto containing the product information.
    */
-  getProducts(): ProductDto[] {
+  async getProducts(): Promise<ProductDto[]> {
     this.logger.log('getProducts() - retrieving all products');
-    // TODO: Replace with actual database query
-    return [
-      new ProductDto({
-        id: 1,
-        name: 'Sample Product 1',
-        description: 'This is a sample product',
-        estimatedPrice: 99.99,
-        status: ProductStatus.Active,
-        createdAt: new Date(),
-        updatedAt: new Date(),
-      }),
-      new ProductDto({
-        id: 2,
-        name: 'Sample Product 2',
-        description: 'This is another sample product',
-        estimatedPrice: 149.99,
-        status: ProductStatus.Active,
-        createdAt: new Date(),
-        updatedAt: new Date(),
-      }),
-    ];
+    return await this.productRepository.findProducts();
   }
 }

apps/web/app/config/app.config.server.ts

@@ -1,4 +1,4 @@
-import { Environment } from '@projectx/models';
+import type { Environment } from '@projectx/models';
 
 import { getRequiredServerEnvVar } from './utils.server';
 
@@ -7,5 +7,6 @@ export const sessionSecret = getRequiredServerEnvVar(
   'SESSION_SECRET',
   'MY_SECRET_KEY'
 );
-export const authAPIUrl = getRequiredServerEnvVar('AUTH_API_URL');
-export const orderAPIUrl = getRequiredServerEnvVar('ORDER_API_URL');
+export const authAPIUrl = getRequiredServerEnvVar('AUTH_API_URL', 'http://localhost:8081');
+export const orderAPIUrl = getRequiredServerEnvVar('ORDER_API_URL', 'http://localhost:8082');
+export const productAPIUrl = getRequiredServerEnvVar('PRODUCT_API_URL', 'http://localhost:8083');

apps/web/app/config/env.server.ts

@@ -1,11 +1,11 @@
-import { authAPIUrl, environment, orderAPIUrl } from './app.config.server';
+import { authAPIUrl, environment, orderAPIUrl, productAPIUrl } from './app.config.server';
 
 export function getEnv() {
-  console.log(authAPIUrl);
   return {
     NODE_ENV: environment,
     AUTH_API_URL: authAPIUrl,
     ORDER_API_URL: orderAPIUrl,
+    PRODUCT_API_URL: productAPIUrl,
   };
 }
 

apps/web/app/config/security.server.ts

@@ -34,6 +34,7 @@ export const imgSrc = replaceNewLinesWithSpaces(`
   https://*.unsplash.com
   https://placehold.co
   https://gravatar.com
+  https://*.githubusercontent.com
 `);
 
 export const contentSecurityPolicy = replaceNewLinesWithSpaces(`

apps/web/app/constants/api.server.ts

@@ -1,4 +1,3 @@
-export * from './api.server';
 export * from './links';
 export * from './navigation';
 export * from './theme';

apps/web/app/constants/index.ts

@@ -0,0 +1,36 @@
+import type { ProductDto } from '@projectx/models';
+import { useInfiniteQuery } from '@tanstack/react-query';
+import axios from 'axios';
+
+const PRODUCTS_QUERY_KEY = 'products';
+const MAX_RETRY_ATTEMPTS = 3;
+
+export const useProducts = ({
+  initialData = [] as ProductDto[],
+  size = 10,
+}) => {
+  return useInfiniteQuery<ProductDto[]>({
+    queryKey: [PRODUCTS_QUERY_KEY],
+    queryFn: async ({ pageParam = 1 }) => {
+      // TODO: Use limit and offset to load more products from the endpoint
+      const response = await axios.get<ProductDto[]>(`${window.ENV.PRODUCT_API_URL}/product`);
+      return response.data;
+    },
+    enabled: true,
+    refetchOnWindowFocus: true,
+    retry: (failureCount) => failureCount <= MAX_RETRY_ATTEMPTS,
+    getNextPageParam: (lastPage: ProductDto[], pages: ProductDto[][]) => {
+      if (lastPage.length === size) {
+        return pages.length + 1;
+      }
+      return undefined;
+    },
+    initialPageParam: 1,
+    ...(!!initialData?.length && {
+      initialData: {
+        pages: [initialData],
+        pageParams: [null],
+      },
+    }),
+  });
+};