Improved error messages for incorrect content

Author: thejhh

src/views/products/ContentService.ts

@@ -98,6 +98,12 @@ export interface IContentService extends ObservableService<ContentServiceEvent>
  */
 export class ContentService {
 
+    /**
+     *
+     * @private
+     */
+    private static _retryFailedLoadTimeout : number | NodeJS.Timeout | undefined = undefined;
+
     private static _state : ContentServiceState = ContentServiceState.UNINITIALIZED;
     private static _productChangedListeners: ObservableListener<ContentServiceEvent.PRODUCTS_CHANGED>[] = [];
     private static _currentProducts : readonly string[] = [];
@@ -280,7 +286,11 @@ export class ContentService {
         // Schedule failed tasks for retry
         if (failed.length > 0) {
             console.log('Scheduling retry for failed products: ', failed);
-            setTimeout(() => {
+            if (this._retryFailedLoadTimeout !== undefined) {
+                clearTimeout(this._retryFailedLoadTimeout);
+                this._retryFailedLoadTimeout = undefined;
+            }
+            this._retryFailedLoadTimeout = setTimeout(() => {
                 console.warn('Retrying failed products: ', failed);
                 this._loadProductsByNames(failed).catch(err => {
                     console.error('Error loading failed products: ', err);

src/views/products/hooks/useContentView.ts

@@ -57,26 +57,102 @@ export function useContentView (serviceName : string, viewName : string) {
   return view;
 }
 
-function createProductNotFound (viewName: string) : ViewContent {
-  return {
-    name: viewName,
-    type: ContentType.VIEW,
-    body: `Product not found: ${viewName}`
-  };
+function createLoadingView (viewName: string) : ViewContent {
+  return createCardView(viewName, `Loading: ${viewName}`, "Please wait while we load the content.");
 }
 
-function createLoadingView (viewName: string) : ViewContent {
-  return {
-    name: viewName,
-    type: ContentType.VIEW,
-    body: `Loading: ${viewName}`
-  };
+function createProductNotFound (viewName: string) : ViewContent {
+  return createCardView(viewName, `${viewName}`, "The product you are looking for could not be found. Please try again later.");
 }
 
 function createViewNotFound (viewName: string) : ViewContent {
+  return createCardView(viewName, `${viewName}`, "The product you are looking for could not be found. Please try again later.");
+}
+
+function createCardView (
+  viewName: string,
+  title: string,
+  message: string,
+) : ViewContent {
   return {
     name: viewName,
     type: ContentType.VIEW,
-    body: `View not found: ${viewName}`
+    body: [
+      {
+        type: ContentType.DIV,
+        classes: [
+          "cards-container",
+          "flex",
+          "flex-col",
+          "items-center",
+          "justify-center",
+          "mx-2",
+          "h-[calc(100vh",
+          "-",
+          "4rem)]",
+          "md:px-[20%]",
+          "lg:px-[32%]",
+        ],
+        body: [
+          {
+            type: ContentType.DIV,
+            classes: [
+              "flex",
+              "flex-col",
+              "items-center",
+              "justify-center",
+              "bg-backgroundLight",
+              "rounded-lg",
+              "w-full",
+              "max-w-full",
+              "mb-5",
+              "overflow-hidden",
+              "prose",
+              "prose-white",
+            ],
+            body: [
+              {
+                type: ContentType.DIV,
+                classes: [
+                  "flex",
+                  "flex-col",
+                  "items-center",
+                  "justify-center",
+                  "bg-backgroundLight",
+                  "rounded-lg",
+                  "w-full",
+                  "max-w-full",
+                  "mb-5",
+                  "overflow-hidden",
+                  "prose",
+                  "prose-white",
+                ],
+                body: [
+                  {
+                    type: ContentType.H3,
+                    classes: [
+                      "text-xl",
+                      "font-bold",
+                      "mt-1",
+                      "mb-1"
+                    ],
+                    body: title,
+                  },
+                  {
+                    type: ContentType.P,
+                    classes: [
+                      "text-center",
+                      "ml-2",
+                      "mr-2",
+                    ],
+                    body: message
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
   };
 }