refactor: clean up code with ts-pattern

Makefile

@@ -2,7 +2,7 @@ include .env
 export
 
 .PHONY: publish
-publish-all-dockers: publish-api publish-identity publish-storefront publish-backoffice
+publish-all-dockers: publish-api publish-identity publish-storefront publish-backoffice publish-bff
 
 .PHONY: publish-api
 publish-api:
@@ -25,6 +25,13 @@ publish-storefront:
 	docker rmi rookieshop-storefront:latest
 	docker push ghcr.io/foxminchan/rookieshop/rookieshop-storefront:${VERSION}
 
+.PHONY: publish-bff
+publish-bff:
+	dotnet publish ./src/RookieShop.Bff/RookieShop.Bff.csproj --os linux --arch x64 /t:PublishContainer -c Release
+	docker tag rookieshop-bff:latest ghcr.io/foxminchan/rookieshop/rookieshop-bff:${VERSION}
+	docker rmi rookieshop-bff:latest
+	docker push ghcr.io/foxminchan/rookieshop/rookieshop-bff:${VERSION}
+
 .PHONY: publish-backoffice
 publish-backoffice:
 	docker build -f ./ui/backoffice/Dockerfile . --tag ghcr.io/foxminchan/rookieshop/rookieshop-backoffice:${VERSION}

ui/backoffice/components/tables/order/columns.tsx

@@ -4,6 +4,7 @@ import Image from "next/image"
 import { Order, PaymentMethod } from "@/features/order/order.type"
 import { ColumnDef } from "@tanstack/react-table"
 import { format } from "date-fns"
+import { match } from "ts-pattern"
 
 import { Badge } from "@/components/ui/badge"
 import { Icons } from "@/components/custom/icons"
@@ -58,24 +59,13 @@ export const columns: ColumnDef<Order>[] = [
     header: "STATUS",
     cell: (props) => {
       const status = props.getValue() as string
-      let badgeClass = ""
-      switch (status) {
-        case "Pending":
-          badgeClass = "bg-yellow-700 text-white"
-          break
-        case "Shipping":
-          badgeClass = "bg-blue-700 text-white"
-          break
-        case "Completed":
-          badgeClass = "bg-green-700 text-white"
-          break
-        case "Cancelled":
-          badgeClass = "bg-red-700 text-white"
-          break
-        default:
-          badgeClass = "bg-gray-700 text-white"
-          break
-      }
+      const badgeClass = match(status)
+        .with("Pending", () => "bg-yellow-700 text-white")
+        .with("Shipping", () => "bg-blue-700 text-white")
+        .with("Completed", () => "bg-green-700 text-white")
+        .with("Cancelled", () => "bg-red-700 text-white")
+        .otherwise(() => "bg-gray-700 text-white")
+
       return (
         <Badge
           variant="secondary"

ui/backoffice/components/tables/product/columns.tsx

@@ -6,6 +6,7 @@ import { Product } from "@/features/product/product.type"
 import { ColumnDef } from "@tanstack/react-table"
 import { format } from "date-fns"
 import parse from "html-react-parser"
+import { match } from "ts-pattern"
 
 import { Badge } from "@/components/ui/badge"
 import {
@@ -48,14 +49,12 @@ export const columns: ColumnDef<Product>[] = [
     header: "STATUS",
     cell: (props) => {
       const status = props.getValue() as string
-      let badgeClass = ""
-      if (status === "InStock") {
-        badgeClass = "bg-green-500 text-white"
-      } else if (status === "OutOfStock") {
-        badgeClass = "bg-yellow-500 text-white"
-      } else {
-        badgeClass = "bg-red-500 text-white"
-      }
+
+      const badgeClass = match(status)
+        .with("InStock", () => "bg-green-500 text-white")
+        .with("OutOfStock", () => "bg-yellow-500 text-white")
+        .otherwise(() => "bg-red-500 text-white")
+
       return (
         <Badge
           variant="secondary"
@@ -93,15 +92,19 @@ export const columns: ColumnDef<Product>[] = [
     header: "QUANTITY",
     cell: (props) => {
       const quantity = props.getValue() as number
-      let className = ""
       const MEDIUM_QTY = 20
-      if (quantity >= MEDIUM_QTY) {
-        className = "text-green-500"
-      } else if (quantity < MEDIUM_QTY) {
-        className = "text-yellow-500"
-      } else {
-        className = "text-red-500"
-      }
+
+      const className = match(quantity)
+        .when(
+          (quantity) => quantity >= MEDIUM_QTY,
+          () => "text-green-500"
+        )
+        .when(
+          (quantity) => quantity < MEDIUM_QTY,
+          () => "text-yellow-500"
+        )
+        .otherwise(() => "text-red-500")
+
       return <span className={className}>{quantity}</span>
     },
   },

ui/backoffice/instrumentation.node.ts

@@ -1,14 +1,12 @@
-import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-http"
 import { Resource } from "@opentelemetry/resources"
 import { NodeSDK } from "@opentelemetry/sdk-node"
-import { SimpleSpanProcessor } from "@opentelemetry/sdk-trace-node"
 import { SEMRESATTRS_SERVICE_NAME } from "@opentelemetry/semantic-conventions"
 
 const sdk = new NodeSDK({
   resource: new Resource({
     [SEMRESATTRS_SERVICE_NAME]: "backoffice",
   }),
-  spanProcessor: new SimpleSpanProcessor(new OTLPTraceExporter()),
+  spanProcessors: [],
 })
 
 sdk.start()