chore: refactor frontend api client

packages/mern-sample-app/app-node-express/src/ExpressApp.ts

@@ -178,7 +178,7 @@ export class ExpressApp {
   }
 
   #initializeErrorHandlerMiddleware() {
-    const errorHandler: express.ErrorRequestHandler = (error: unknown, req, res, next) => {
+    const errorHandler: express.ErrorRequestHandler = (error: unknown, _req, res, next) => {
       const err = getTypedError(error);
       if (res.headersSent) {
         log.warn(`Headers sent before reaching main error handler`, err);

packages/mern-sample-app/app-node-express/src/infrastructure/controllers/UserController.ts

@@ -2,8 +2,9 @@ import type { UserService } from "@org/app-node-express/infrastructure/service/U
 import type { RouteInput, RouteOutput } from "@org/app-node-express/lib/@ts-rest";
 import type { TODO } from "@org/lib-commons";
 
-import { autowired, contract, inject } from "@org/app-node-express/infrastructure/decorators";
+import { contract } from "@org/app-node-express/infrastructure/decorators";
 import { withRouteSecured } from "@org/app-node-express/infrastructure/middleware/withRouteSecured";
+import { autowired, inject } from "@org/app-node-express/ioc";
 import { contracts } from "@org/lib-api-client";
 
 @inject("UserController")

packages/mern-sample-app/app-node-express/src/infrastructure/decorators/contract.ts

@@ -1,36 +1,16 @@
-import type { AppRoute } from "@ts-rest/core";
+import type { RouteHandler, RouteMiddlewareFactory } from "@org/app-node-express/lib/@ts-rest";
+import type { AppRoute } from "@org/lib-api-client";
 
-import { IocRegistry } from "@org/app-node-express/ioc";
-import * as TsRest from "@org/app-node-express/lib/@ts-rest";
-import { MongoDatabaseService } from "@org/app-node-express/lib/mongodb";
-import { getTypedError } from "@org/lib-api-client";
+import { TsRestRouterService, createContractHandler } from "@org/app-node-express/lib/@ts-rest";
 
-export function contract<const Route extends AppRoute, This, Fn extends TsRest.RouteHandler<Route>>(
+export function contract<const Route extends AppRoute, This, Fn extends RouteHandler<Route>>(
   contract: Route,
-  ...middlewareData: (TsRest.RouteMiddlewareFactory | TsRest.RouteMiddlewareFactory[])[]
+  ...middlewareData: (RouteMiddlewareFactory | RouteMiddlewareFactory[])[]
 ) {
-  const middlewareFactories = middlewareData.flat();
-
   return function (target: Fn, context: ClassMethodDecoratorContext<This, Fn>) {
-    async function handler(data: unknown): Promise<unknown> {
-      const databaseService = MongoDatabaseService.getInstance();
-      const session = databaseService.client.startSession();
-      try {
-        databaseService.startTransaction(session);
-        const container = IocRegistry.getInstance().inject(context);
-        const result = await target.call(container, data as TsRest.RouteInput<Route>);
-        await databaseService.commitTransaction(session);
-        return result;
-      } catch (error: unknown) {
-        await databaseService.rollbackTransaction(session);
-        const typedError = getTypedError(error);
-        return { status: typedError.content.status, body: typedError.content };
-      } finally {
-        session.endSession();
-      }
-    }
-
-    TsRest.TsRestRouterService.getInstance().addRouter(contract, handler, middlewareFactories);
+    const middleware = middlewareData.flat();
+    const handler = createContractHandler({ contract, middleware, context, target });
+    TsRestRouterService.getInstance().addRouter(contract, handler, middleware);
     return handler as Fn;
   };
 }

packages/mern-sample-app/app-node-express/src/infrastructure/decorators/createContractHandler.ts

@@ -0,0 +1,41 @@
+import type {
+  RouteHandler,
+  RouteInput,
+  RouteMiddlewareFactory,
+} from "@org/app-node-express/lib/@ts-rest";
+import type { AppRoute } from "@org/lib-api-client";
+
+import { IocRegistry } from "@org/app-node-express/ioc";
+import { MongoDatabaseService } from "@org/app-node-express/lib/mongodb";
+import { getTypedError } from "@org/lib-api-client";
+
+export type ContractEndpointProps<Route extends AppRoute, This, Fn extends RouteHandler<Route>> = {
+  contract: Route;
+  middleware: RouteMiddlewareFactory[];
+  target: Fn;
+  context: ClassMethodDecoratorContext<This, Fn>;
+};
+
+export function createContractHandler<
+  const Route extends AppRoute,
+  This,
+  Fn extends RouteHandler<Route>,
+>({ context, target }: ContractEndpointProps<Route, This, Fn>) {
+  return async function (data: unknown): Promise<unknown> {
+    const databaseService = MongoDatabaseService.getInstance();
+    const session = databaseService.client.startSession();
+    try {
+      databaseService.startTransaction(session);
+      const container = IocRegistry.getInstance().inject(context);
+      const result = await target.call(container, data as RouteInput<Route>);
+      await databaseService.commitTransaction(session);
+      return result;
+    } catch (error: unknown) {
+      await databaseService.rollbackTransaction(session);
+      const typedError = getTypedError(error);
+      return { status: typedError.content.status, body: typedError.content };
+    } finally {
+      session.endSession();
+    }
+  };
+}

packages/mern-sample-app/app-node-express/src/infrastructure/decorators/index.ts

@@ -52,6 +52,5 @@
  * ```
  */
 
-export * from "./autowired";
 export * from "./contract";
-export * from "./inject";
+export * from "./createContractHandler";

packages/mern-sample-app/app-node-express/src/infrastructure/middleware/withAuthorization.ts

@@ -3,8 +3,7 @@ import type { RequestHandler } from "express";
 import type { Keycloak as KeycloakType, KeycloakConfig } from "keycloak-connect";
 
 import { env } from "@org/app-node-express/env";
-import { inject } from "@org/app-node-express/infrastructure/decorators/inject";
-import { IocRegistry } from "@org/app-node-express/ioc";
+import { IocRegistry, inject } from "@org/app-node-express/ioc";
 import { keycloakMemoryStore } from "@org/app-node-express/lib/keycloak";
 import { RestError } from "@org/lib-api-client";
 import Keycloak from "keycloak-connect";

packages/mern-sample-app/app-node-express/src/infrastructure/middleware/withMorgan.ts

@@ -6,8 +6,7 @@
 import type { RouteMiddlewareFactory } from "@org/app-node-express/lib/@ts-rest";
 import type { RequestHandler } from "express";
 
-import { inject } from "@org/app-node-express/infrastructure/decorators";
-import { IocRegistry } from "@org/app-node-express/ioc";
+import { IocRegistry, inject } from "@org/app-node-express/ioc";
 import { createStream, log } from "@org/app-node-express/lib/winston";
 import morgan from "morgan";
 

packages/mern-sample-app/app-node-express/src/infrastructure/middleware/withRouteContext.ts

@@ -8,8 +8,7 @@ import type { ClientSession } from "mongodb";
 
 import { AsyncLocalStorage } from "async_hooks";
 
-import { inject } from "@org/app-node-express/infrastructure/decorators";
-import { IocRegistry } from "@org/app-node-express/ioc";
+import { IocRegistry, inject } from "@org/app-node-express/ioc";
 import { MongoDatabaseService } from "@org/app-node-express/lib/mongodb/MongoDatabaseService";
 
 type RouteContextProps = {

packages/mern-sample-app/app-node-express/src/infrastructure/middleware/withRouteSecured.ts

@@ -4,8 +4,7 @@ import type { RouteMiddlewareFactory } from "@org/app-node-express/lib/@ts-rest"
 import type { Role } from "@org/lib-api-client";
 import type { RequestHandler } from "express";
 
-import { autowired, inject } from "@org/app-node-express/infrastructure/decorators";
-import { IocRegistry } from "@org/app-node-express/ioc";
+import { IocRegistry, autowired, inject } from "@org/app-node-express/ioc";
 import { RestError, getTypedError } from "@org/lib-api-client";
 import jwt from "jsonwebtoken";
 

packages/mern-sample-app/app-node-express/src/infrastructure/middleware/withRouteSession.ts

@@ -5,8 +5,7 @@
 import type { RouteMiddlewareFactory } from "@org/app-node-express/lib/@ts-rest";
 import type { RequestHandler } from "express";
 
-import { inject } from "@org/app-node-express/infrastructure/decorators";
-import { IocRegistry } from "@org/app-node-express/ioc";
+import { IocRegistry, inject } from "@org/app-node-express/ioc";
 import { buildKeycloakSession } from "@org/app-node-express/lib/keycloak";
 
 const IOC_KEY = "withRouteSession";

packages/mern-sample-app/app-node-express/src/infrastructure/repository/UserRepository.ts

@@ -1,6 +1,6 @@
 import type { ApiKeycloakRoles, ApiKeycloakUser } from "@org/lib-api-client";
 
-import { inject } from "@org/app-node-express/infrastructure/decorators/inject";
+import { inject } from "@org/app-node-express/ioc";
 import { KeycloakDao } from "@org/app-node-express/lib/keycloak";
 
 export interface AuthorizationRepository {

packages/mern-sample-app/app-node-express/src/infrastructure/service/UserService.ts

@@ -2,7 +2,7 @@ import type { AuthorizationRepository } from "../repository/UserRepository";
 import type { ApiKeycloakUser, Role, TypedPaginationResponse, User } from "@org/lib-api-client";
 import type { TODO, zod } from "@org/lib-commons";
 
-import { autowired, inject } from "@org/app-node-express/infrastructure/decorators";
+import { autowired, inject } from "@org/app-node-express/ioc";
 import { RestError, ROLE_LIST } from "@org/lib-api-client";
 
 @inject("UserService")

packages/mern-sample-app/app-node-express/src/infrastructure/decorators/autowired.ts → packages/mern-sample-app/app-node-express/src/ioc/decorators/autowired.ts

@@ -1,4 +1,5 @@
-import { IocClassMetadata, IocRegistry } from "@org/app-node-express/ioc";
+import { IocClassMetadata } from "@org/app-node-express/ioc/IocClassMetadata";
+import { IocRegistry } from "@org/app-node-express/ioc/IocRegistry";
 
 export function autowired(name?: string) {
   return function (_target: undefined, context: ClassFieldDecoratorContext) {

packages/mern-sample-app/app-node-express/src/ioc/decorators/index.ts

@@ -0,0 +1,2 @@
+export * from "./autowired";
+export * from "./inject";

packages/mern-sample-app/app-node-express/src/infrastructure/decorators/inject.ts → packages/mern-sample-app/app-node-express/src/ioc/decorators/inject.ts

@@ -1,6 +1,6 @@
 import type { NoArgsClass } from "@org/lib-commons";
 
-import { IocClassMetadata } from "@org/app-node-express/ioc";
+import { IocClassMetadata } from "@org/app-node-express/ioc/IocClassMetadata";
 
 export function inject<T extends NoArgsClass>(name?: string) {
   return function (target: T, context: ClassDecoratorContext<T>) {

packages/mern-sample-app/app-node-express/src/ioc/index.ts

@@ -40,3 +40,4 @@
 export * from "./IocRegistry";
 export * from "./IocClassMetadata";
 export * from "./IocScanner";
+export * from "./decorators";

packages/mern-sample-app/app-node-express/src/lib/@ts-rest/TsRestContractHandler.ts

@@ -0,0 +1,41 @@
+import type {
+  RouteHandler,
+  RouteInput,
+  RouteMiddlewareFactory,
+} from "@org/app-node-express/lib/@ts-rest";
+import type { AppRoute } from "@org/lib-api-client";
+
+import { IocRegistry } from "@org/app-node-express/ioc";
+import { MongoDatabaseService } from "@org/app-node-express/lib/mongodb";
+import { getTypedError } from "@org/lib-api-client";
+
+export type ContractEndpointProps<Route extends AppRoute, This, Fn extends RouteHandler<Route>> = {
+  contract: Route;
+  middleware: RouteMiddlewareFactory[];
+  target: Fn;
+  context: ClassMethodDecoratorContext<This, Fn>;
+};
+
+export function createContractHandler<
+  const Route extends AppRoute,
+  This,
+  Fn extends RouteHandler<Route>,
+>({ context, target }: ContractEndpointProps<Route, This, Fn>) {
+  return async function (data: unknown): Promise<unknown> {
+    const databaseService = MongoDatabaseService.getInstance();
+    const session = databaseService.client.startSession();
+    try {
+      databaseService.startTransaction(session);
+      const container = IocRegistry.getInstance().inject(context);
+      const result = await target.call(container, data as RouteInput<Route>);
+      await databaseService.commitTransaction(session);
+      return result;
+    } catch (error: unknown) {
+      await databaseService.rollbackTransaction(session);
+      const typedError = getTypedError(error);
+      return { status: typedError.content.status, body: typedError.content };
+    } finally {
+      session.endSession();
+    }
+  };
+}

packages/mern-sample-app/app-node-express/src/lib/@ts-rest/TsRestExpressRouteTypes.ts

@@ -6,7 +6,7 @@
  * @why These types standardize how route input, output, and middleware are defined and handled in the application, ensuring strong typing and consistency across routes.
  */
 
-import type { AppRoute, ServerInferResponses } from "@ts-rest/core";
+import type { AppRoute, ServerInferResponses } from "@org/lib-api-client";
 import type { AppRouteImplementation } from "@ts-rest/express";
 import type { RequestHandler } from "express";
 

packages/mern-sample-app/app-node-express/src/lib/@ts-rest/TsRestRouterService.ts

@@ -1,5 +1,5 @@
 import type { RouteMiddlewareFactory } from "./TsRestExpressRouteTypes";
-import type { AppRoute } from "@ts-rest/core";
+import type { AppRoute } from "@org/lib-api-client";
 import type { RouterImplementation } from "@ts-rest/express/src/lib/types";
 import type { RequestHandler } from "express";
 

packages/mern-sample-app/app-node-express/src/lib/@ts-rest/index.ts

@@ -51,3 +51,4 @@
 export * from "./TsRestRouterService";
 export * from "./TsRestExpressRouteTypes";
 export * from "./TsRestExpressService";
+export * from "./TsRestContractHandler";

packages/mern-sample-app/app-vite-react/.env.development

@@ -1,2 +1,6 @@
-VITE_API_CLIENT_URL=https://monorepo-mern-railway-starter-backend.up.railway.app
+# Railway development server 
+#VITE_API_CLIENT_URL=https://monorepo-mern-railway-starter-backend.up.railway.app
+
+# Local
+VITE_API_CLIENT_URL=http://localhost:8081
 VITE_API_KEYCLOAK_URL=http://localhost:8080

packages/mern-sample-app/app-vite-react/src/app/components/Header/LogoutButton.tsx

@@ -0,0 +1,32 @@
+import type { FC } from "react";
+
+import { Logout } from "@mui/icons-material";
+import { MenuItem, ListItemIcon, Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+
+interface LogoutMenuItemProps {
+  handleLogout: () => void;
+}
+
+const LogoutButton: FC<LogoutMenuItemProps> = ({ handleLogout }) => {
+  const theme = useTheme();
+
+  return (
+    <MenuItem
+      onClick={handleLogout}
+      sx={{
+        color: theme.palette.warning.main,
+        justifyContent: "center", // Added justifyContent: center
+        "&:hover": {
+          //backgroundColor: theme.palette.warning.light,
+        },
+      }}
+    >
+      <Typography variant="inherit" sx={{ fontWeight: "bold", textAlign: "center" }}>
+        Logout
+      </Typography>
+    </MenuItem>
+  );
+};
+
+export default LogoutButton;