Remove hardcoded values (#13)

* Remove harcoding of base url Ensure all HTMX targets can be fetched from a single constant source * Purge unnecessary try catch blocks * get application port and JWT secret from .env file
nigelnindodev · Mar 2, 2024 · db6a9ab · db6a9ab
1 parent 88a6e17
commit db6a9ab
Show file tree

Hide file tree

Showing 24 changed files with 192 additions and 180 deletions.
diff --git a/.env b/.env
diff --git a/.gitignore b/.gitignore
@@ -39,4 +39,7 @@ yarn-error.log*
 **/*.tgz
 **/*.log
 package-lock.json
-**/*.bun
+**/*.bun
+
+# remove .env files
+.env
diff --git a/public/htmx_debug.js b/public/htmx_debug.js
@@ -0,0 +1,11 @@
+htmx.defineExtension('debug', {
+	onEvent: function(name, evt) {
+		if (console.debug) {
+			console.debug(name, evt);
+		} else if (console) {
+			console.log("DEBUG:", name, evt);
+		} else {
+			throw "NO CONSOLE SUPPORTED"
+		}
+	}
+});
diff --git a/src/components/common/constants.ts b/src/components/common/constants.ts
@@ -0,0 +1,10 @@
+export enum HtmxTargets {
+  CREATE_ORDER_SECTION = "create-order-section",
+  INVENTORY_SECTION = "inventory-section",
+  INVENTORY_DATA_LIST = "inventory-data-list",
+  INVENTORY_SUBMIT_RESULT_VIEW = "inventory-submit-result-view",
+  LOGIN_SUBMIT_RESULT_VIEW = "login-submit-result-view",
+  MAIN_SECTION = "main-section",
+  ORDERS_SECTION = "orders-section",
+  ROOT_DIV = "root-div",
+}
diff --git a/src/components/pages/auth/login.tsx b/src/components/pages/auth/login.tsx
@@ -1,9 +1,12 @@
+import { getConfig } from "../../..";
+import { HtmxTargets } from "../../common/constants";
+
 export const LoginComponent = () => {
     return (
         <div>
             <nav class="container-fluid">
                 <ul>
-                    <li><a href="http://localhost:3000" aria-label="Back home"><svg aria-hidden="true" focusable="false" role="img"
+                    <li><a href={getConfig().baseUrl} aria-label="Back home"><svg aria-hidden="true" focusable="false" role="img"
                         xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" height="56px">
                         <path fill="currentColor"
                             d="M633.43 429.23c0 118.38-49.76 184.72-138.87 184.72-53 0-92.04-25.37-108.62-67.32h-2.6v203.12H250V249.7h133.67v64.72h2.28c17.24-43.9 55.3-69.92 107-69.92 90.4 0 140.48 66.02 140.48 184.73zm-136.6 0c0-49.76-22.1-81.96-56.9-81.96s-56.9 32.2-57.24 82.28c.33 50.4 22.1 81.63 57.24 81.63 35.12 0 56.9-31.87 56.9-81.95zM682.5 547.5c0-37.32 30.18-67.5 67.5-67.5s67.5 30.18 67.5 67.5S787.32 615 750 615s-67.5-30.18-67.5-67.5z" />
@@ -13,13 +16,13 @@ export const LoginComponent = () => {
             </nav>
             <main class="container">
                 <h3>Log in to get started.</h3>
-                <div id="login-info" />
+                <div id={HtmxTargets.LOGIN_SUBMIT_RESULT_VIEW} />
                 <form>
                     <label for="username">Username</label>
                     <input type="username" id="username" name="username" placeholder="Username" required />
                     <label for="password">Password</label>
                     <input type="password" id="password" name="password" placeholder="Password" required />
-                    <button type="submit" hx-post="/auth/login" hx-target="#login-info">Login</button>
+                    <button type="submit" hx-post="/auth/login" hx-target={`#${HtmxTargets.LOGIN_SUBMIT_RESULT_VIEW}`}>Login</button>
                 </form>
             </main>
         </div>

diff --git a/src/components/pages/index_component.tsx b/src/components/pages/index_component.tsx
@@ -1,11 +1,13 @@
+import { getConfig } from "../..";
 import { UsersEntity } from "../../postgres/entities";
+import { HtmxTargets } from "../common/constants";
 
 export const IndexComponent = (user: UsersEntity) => {
     return (
         <div>
             <nav class="container-fluid">
                 <ul>
-                    <li><a href="http://localhost:3000" aria-label="Back home"><svg aria-hidden="true" focusable="false" role="img"
+                    <li><a href={getConfig().baseUrl} aria-label="Back home"><svg aria-hidden="true" focusable="false" role="img"
                         xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" height="56px">
                         <path fill="currentColor"
                             d="M633.43 429.23c0 118.38-49.76 184.72-138.87 184.72-53 0-92.04-25.37-108.62-67.32h-2.6v203.12H250V249.7h133.67v64.72h2.28c17.24-43.9 55.3-69.92 107-69.92 90.4 0 140.48 66.02 140.48 184.73zm-136.6 0c0-49.76-22.1-81.96-56.9-81.96s-56.9 32.2-57.24 82.28c.33 50.4 22.1 81.63 57.24 81.63 35.12 0 56.9-31.87 56.9-81.95zM682.5 547.5c0-37.32 30.18-67.5 67.5-67.5s67.5 30.18 67.5 67.5S787.32 615 750 615s-67.5-30.18-67.5-67.5z" />
@@ -22,8 +24,8 @@ export const IndexComponent = (user: UsersEntity) => {
                     <ul>
                     </ul>
                     <ul>
-                        <li><a hx-get="/orders" hx-target="#main-view">Orders</a></li>
-                        <li><a hx-get="/payments" hx-target="#main-view">Payments</a></li>
+                        <li><a hx-get="/orders" hx-target={`#${HtmxTargets.MAIN_SECTION}`}>Orders</a></li>
+                        <li><a hx-get="/payments" hx-target={`#${HtmxTargets.MAIN_SECTION}`}>Payments</a></li>
                         {
                             /**
                              * The following sections are blocked from access in the UI.
@@ -32,15 +34,15 @@ export const IndexComponent = (user: UsersEntity) => {
                              */
                             user.is_admin ?
                                 <div>
-                                    <li><a hx-get="/inventory" hx-target="#main-view">Inventory</a></li>
-                                    <li><a hx-get="/users" hx-target="#main-view">Users</a></li>
+                                    <li><a hx-get="/inventory" hx-target={`#${HtmxTargets.MAIN_SECTION}`}>Inventory</a></li>
+                                    <li><a hx-get="/users" hx-target={`#${HtmxTargets.MAIN_SECTION}`}>Users</a></li>
                                 </div>
                                 :
                                 ""
                         }
                     </ul>
                 </nav>
-                <div id="main-view" hx-get="/orders" hx-trigger="load" />
+                <div id={HtmxTargets.MAIN_SECTION} hx-get="/orders" hx-trigger="load" />
             </main>
         </div>
     );

diff --git a/src/components/pages/inventory/create_or_update_inventory_item.tsx b/src/components/pages/inventory/create_or_update_inventory_item.tsx
@@ -1,4 +1,5 @@
 import { InventoryEntity } from "../../../postgres/entities";
+import { HtmxTargets } from "../../common/constants";
 
 export const CreateOrUpdateInventoryComponent = (inventoryItem?: InventoryEntity) => {
     return (
@@ -8,7 +9,7 @@ export const CreateOrUpdateInventoryComponent = (inventoryItem?: InventoryEntity
                     <li><strong>{inventoryItem === undefined ? "Create" : "Update"} Inventory</strong></li>
                 </ul>
                 <ul>
-                    <li><a hx-get="/inventory/list" hx-target="#inventory-section" >&lt Back</a></li>
+                    <li><a hx-get="/inventory/list" hx-target={`#${HtmxTargets.INVENTORY_SECTION}`} >&lt Back</a></li>
                 </ul>
             </nav>
             <form>
@@ -23,7 +24,7 @@ export const CreateOrUpdateInventoryComponent = (inventoryItem?: InventoryEntity
                         <input value={inventoryItem?.price.toString()} type="number" id="price" name="price" placeholder="Price" required />
                     </label>
                 </div>
-                <button id="inventory-submit" type="submit" hx-post={inventoryItem === undefined ? "/inventory/create" : `/inventory/edit/{${inventoryItem.id}}`} hx-swap="outerHTML" hx-target="#inventory-submit">Submit</button>
+                <button id={HtmxTargets.INVENTORY_SUBMIT_RESULT_VIEW} type="submit" hx-post={inventoryItem === undefined ? "/inventory/create" : `/inventory/edit/{${inventoryItem.id}}`} hx-swap="outerHTML" hx-target={`#${HtmxTargets.INVENTORY_SUBMIT_RESULT_VIEW}`}>Submit</button>
             </form>
         </div>
     );

diff --git a/src/components/pages/inventory/index.tsx b/src/components/pages/inventory/index.tsx
@@ -1,3 +1,5 @@
+import { HtmxTargets } from "../../common/constants";
+
 export const InventoryPage = (
     <article>
         <header>
@@ -6,7 +8,7 @@ export const InventoryPage = (
             </h1>
         </header>
         <body>
-            <div id="inventory-section" hx-get="/inventory/list" hx-trigger="load" />
+            <div id={HtmxTargets.INVENTORY_SECTION} hx-get="/inventory/list" hx-trigger="load" />
         </body>
     </article>
 );
diff --git a/src/components/pages/inventory/inventory.tsx b/src/components/pages/inventory/inventory.tsx
@@ -1,20 +1,22 @@
+import { HtmxTargets } from "../../common/constants"
+
 export const ViewInventorySection = () => {
     return (
         <div>
             <div class="grid">
                 <div>
-                    <input type="search" id="search" name="search" placeholder="Search Inventory" hx-get="/inventory/list/search" hx-trigger="keyup changed delay:500ms" hx-target="#inventory-data"/>
+                    <input type="search" id="search" name="search" placeholder="Search Inventory" hx-get="/inventory/list/search" hx-trigger="keyup changed delay:500ms" hx-target={`#${HtmxTargets.INVENTORY_DATA_LIST}`} />
                 </div>
                 <div>
                     <div class="grid">
                         <div></div>
                         <div>
-                            <button role="button" class="outline" hx-get="/inventory/create" hx-target="#inventory-section">Add New</button>
+                            <button role="button" class="outline" hx-get="/inventory/create" hx-target={`#${HtmxTargets.INVENTORY_SECTION}`}>Add New</button>
                         </div>
                     </div>
                 </div>
             </div>
-            <div id="inventory-data" hx-get="/inventory/list/all" hx-trigger="load" />
+            <div id={HtmxTargets.INVENTORY_DATA_LIST} hx-get="/inventory/list/all" hx-trigger="load" />
         </div>
     );
 };
diff --git a/src/components/pages/inventory/inventory_list.tsx b/src/components/pages/inventory/inventory_list.tsx
@@ -1,4 +1,5 @@
 import { InventoryEntity } from "../../../postgres/entities";
+import { HtmxTargets } from "../../common/constants";
 
 export const inventoryList = (inventoryItems: InventoryEntity[]) => {
     return (
@@ -20,7 +21,7 @@ export const inventoryList = (inventoryItems: InventoryEntity[]) => {
                                 <td>{inventoryItem.id}</td>
                                 <td>{inventoryItem.name}</td>
                                 <td><strong>{inventoryItem.price}.00 KES</strong></td>
-                                <td><button role="button" class="secondary" hx-get={`/inventory/orders/${inventoryItem.id}`} hx-target="#inventory-section">View Orders</button><button role="button" class="contrast outline" hx-get={`/inventory/edit/${inventoryItem.id}`} hx-target="#inventory-section">Edit</button></td>
+                                <td><button role="button" class="secondary" hx-get={`/inventory/orders/${inventoryItem.id}`} hx-target={`#${HtmxTargets.INVENTORY_SECTION}`}>View Orders</button><button role="button" class="contrast outline" hx-get={`/inventory/edit/${inventoryItem.id}`} hx-target={`#${HtmxTargets.INVENTORY_SECTION}`}>Edit</button></td>
                             </tr>
                         );
                     })}

diff --git a/src/components/pages/inventory/view_inventory_orders.tsx b/src/components/pages/inventory/view_inventory_orders.tsx
@@ -1,5 +1,6 @@
 import { InventoryEntity, OrdersEntity } from "../../../postgres/entities/index"
 import { createOrderItemsDescription, getTotalOrderCost } from "../../../services/common";
+import { HtmxTargets } from "../../common/constants";
 import { InfoWrapper } from "../../common/info_wrapper";
 
 export const ViewInventoryItemOrdersComponent = (inventoryItem: InventoryEntity, orders: OrdersEntity[]) => {
@@ -10,7 +11,7 @@ export const ViewInventoryItemOrdersComponent = (inventoryItem: InventoryEntity,
                     <li><strong>Orders for: {inventoryItem.name}</strong></li>
                 </ul>
                 <ul>
-                    <li><a hx-get="/inventory/list" hx-target="#inventory-section">&lt Back</a></li>
+                    <li><a hx-get="/inventory/list" hx-target={`#${HtmxTargets.INVENTORY_SECTION}`}>&lt Back</a></li>
                 </ul>
             </nav>
             {

diff --git a/src/components/pages/orders/active_order_items.tsx b/src/components/pages/orders/active_order_items.tsx
@@ -1,6 +1,7 @@
 import { PaymentTypes } from "../../../postgres/common/constants";
 import { OrderItemEntity, PaymentEntity } from "../../../postgres/entities";
 import { getTotalOrderCost } from "../../../services/common";
+import { HtmxTargets } from "../../common/constants";
 
 export const ActiveOrderItems = (orderId: number, orderItems: OrderItemEntity[], paymentEntity: PaymentEntity) => {
     return (
@@ -75,7 +76,7 @@ export const ActiveOrderItems = (orderId: number, orderItems: OrderItemEntity[],
                 </fieldset>
             </blockquote>
             <progress id="confirm-progress-indicator" class="htmx-indicator" />
-            {orderItems.length === 0 ? "" : <button class="contrast outline" hx-target="#create-order-section" hx-post={`/orders/confirm/${orderId}/${paymentEntity.id}`} hx-indicator="#confirm-progress-indicator">CONFIRM ORDER</button>}
+            {orderItems.length === 0 ? "" : <button class="contrast outline" hx-target={`#${HtmxTargets.CREATE_ORDER_SECTION}`} hx-post={`/orders/confirm/${orderId}/${paymentEntity.id}`} hx-indicator="#confirm-progress-indicator">CONFIRM ORDER</button>}
         </details>
     );
 };
diff --git a/src/components/pages/orders/create.tsx b/src/components/pages/orders/create.tsx
@@ -1,5 +1,6 @@
 import { InventoryEntity, OrderItemEntity } from "../../../postgres/entities";
 import { ServerHxTriggerEvents } from "../../../services/common/constants";
+import { HtmxTargets } from "../../common/constants";
 import { InventoryItemSelectDuringOrder } from "./inventory_item_select_during_order";
 
 export const CreateOrUpdateOrderSection = (orderId: number, inventoryData: InventoryEntity[], orderItemsInOrder: OrderItemEntity[]) => {
@@ -10,10 +11,10 @@ export const CreateOrUpdateOrderSection = (orderId: number, inventoryData: Inven
                     <li><strong>Create Order</strong></li>
                 </ul>
                 <ul>
-                    <li><a class="contrast" hx-get="/orders/list" hx-target="#orders-section">&lt Back</a></li>
+                    <li><a class="contrast" hx-get="/orders/list" hx-target={`#${HtmxTargets.ORDERS_SECTION}`}>&lt Back</a></li>
                 </ul>
             </nav>
-            <div id="create-order-section">
+            <div id={HtmxTargets.CREATE_ORDER_SECTION}>
                 {InventoryItemSelectDuringOrder(orderId, inventoryData, orderItemsInOrder)}
                 <div id="active-items" hx-get={`/orders/active/${orderId}`} hx-trigger={`load, ${ServerHxTriggerEvents.REFRESH_ORDER} from:body`} />
             </div>

diff --git a/src/components/pages/orders/index.tsx b/src/components/pages/orders/index.tsx
@@ -1,3 +1,5 @@
+import { HtmxTargets } from "../../common/constants";
+
 export const OrdersPage = (
     <article>
         <header>
@@ -6,7 +8,7 @@ export const OrdersPage = (
             </h1>
         </header>
         <body>
-            <div id="orders-section" hx-get="/orders/list" hx-trigger="load" />
+            <div id={HtmxTargets.ORDERS_SECTION} hx-get="/orders/list" hx-trigger="load" />
         </body>
     </article>
 );
diff --git a/src/components/pages/orders/order_create_success.tsx b/src/components/pages/orders/order_create_success.tsx
@@ -1,6 +1,8 @@
+import { HtmxTargets } from "../../common/constants"
+
 export const orderCreateSuccess = () => {
     return (
-        <div hx-get="/orders/list" hx-target="#orders-section" hx-trigger="load delay:2s">
+        <div hx-get="/orders/list" hx-target={`#${HtmxTargets.ORDERS_SECTION}`} hx-trigger="load delay:2s">
             <ins>Order Created successfully.</ins>
         </div>
     )

diff --git a/src/components/pages/orders/order_tailwind.tsx b/src/components/pages/orders/order_tailwind.tsx
@@ -1,10 +1,12 @@
+import { getConfig } from "../../..";
+
 export const OrderExampleTailwindComponent = () => {
   return (
     <html>
 
       <head>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <script src="http://localhost:3000/public/tailwind.js"></script>
+        <script src={`${getConfig().baseUrl}/public/tailwind.js`}></script>
       </head>
 
       <body>

diff --git a/src/components/pages/orders/orders.tsx b/src/components/pages/orders/orders.tsx
@@ -1,11 +1,13 @@
+import { HtmxTargets } from "../../common/constants"
+
 export const ViewOrdersSection = () => {
     return (
         <div>
             <div class="grid">
                 <div />
                 <div />
                 <div>
-                    <button role="button" class="outline" hx-get="/orders/create" hx-target="#orders-section">Create order</button>
+                    <button role="button" class="outline" hx-get="/orders/create" hx-target={`#${HtmxTargets.ORDERS_SECTION}`}>Create order</button>
                 </div>
             </div>
             <div id="orders-data" hx-get="/orders/list/all" hx-trigger="load" />

diff --git a/src/components/pages/orders/unfinished_orders.tsx b/src/components/pages/orders/unfinished_orders.tsx
@@ -1,5 +1,6 @@
 import { OrdersEntity, OrderItemEntity } from "../../../postgres/entities";
 import { createOrderItemsDescription, filterOrderItemsForActiveItems, getTotalOrderCost } from "../../../services/common";
+import { HtmxTargets } from "../../common/constants";
 
 const unfinishedItemRowDescription = (orderItems: OrderItemEntity[]): string => {
     // We should have some active items due to 'getUnfinishedOrderItems' query
@@ -23,7 +24,7 @@ export const UnfinishedOrdersComponent = (unfinishedOrderitems: OrdersEntity[])
                             <tr>
                                 <td>{unfinishedItemRowDescription(item.order_items)}</td>
                                 <td><strong>{getTotalOrderCost(filterOrderItemsForActiveItems(item.order_items))}.00 KES</strong></td>
-                                <td><button role="button" class="secondary outline" hx-get={`/orders/resume/${item.id}`} hx-target="#orders-section">Resume</button></td>
+                                <td><button role="button" class="secondary outline" hx-get={`/orders/resume/${item.id}`} hx-target={`#${HtmxTargets.ORDERS_SECTION}`}>Resume</button></td>
                             </tr>
                         )
                     })}

diff --git a/src/components/pages/root_page.tsx b/src/components/pages/root_page.tsx
@@ -1,5 +1,9 @@
+import { getConfig } from "../..";
+import { HtmxTargets } from "../../components/common/constants"
 import { ServerHxTriggerEvents } from "../../services/common/constants";
 
+const config = getConfig();
+
 /**
  * Root page of the application. It's responsible for:
  * - Loading application CSS markup and JS files required.
@@ -14,16 +18,16 @@ export const RootPage = () => {
         <html data-theme="dark">
             <head>
                 <title>Business Name</title>
-                <link rel="stylesheet" href="http://localhost:3000/public/pico.min.css" />
-                <link rel="stylesheet" href="http://localhost:3000/public/tailwind.css" />
-                <link rel="stylesheet" href="http://localhost:3000/public/custom.css" />
-                <script src="http://localhost:3000/public/htmx.min.js" />
-                <script src="http://localhost:3000/public/theme_switcher.js" />
+                <link rel="stylesheet" href={`${config.baseUrl}/public/pico.min.css`} />
+                <link rel="stylesheet" href={`${config.baseUrl}/public/tailwind.css`} />
+                <link rel="stylesheet" href={`${config.baseUrl}/public/custom.css`} />
+                <script src={`${config.baseUrl}/public/htmx.min.js`} />
+                <script src={`${config.baseUrl}/public/htmx_debug.js`} />
             </head>
             <body>
-                <div id="root-div" />
-                <div hx-get="/root" hx-trigger={`load, ${ServerHxTriggerEvents.LOGIN_STATUS_CHANGE} from:body`} hx-target="#root-div" />
-                <div hx-get="/todo" hx-trigger={`${ServerHxTriggerEvents.GENERAL_ERROR} from:body`} hx-target="#root-div" />
+                <div id={HtmxTargets.ROOT_DIV} />
+                <div hx-get="/root" hx-trigger={`load, ${ServerHxTriggerEvents.LOGIN_STATUS_CHANGE} from:body`} hx-target={`#${HtmxTargets.ROOT_DIV}`} />
+                <div hx-get="/todo" hx-trigger={`${ServerHxTriggerEvents.GENERAL_ERROR} from:body`} hx-target={`#${HtmxTargets.ROOT_DIV}`} />
             </body>
         </html>
     );

diff --git a/src/components/pages/tailwind.tsx b/src/components/pages/tailwind.tsx
@@ -1,9 +1,11 @@
+import { getConfig } from "../..";
+
 export const TailWindComponent = () => {
     return (
         <html>
             <head>
                 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-                <script src="http://localhost:3000/public/tailwind.js"></script>
+                <script src={`${getConfig().baseUrl}/public/tailwind.js`}></script>
             </head>
             <body>
                 <div class="flex h-screen">