refactor: internalize view within the module

hosts/web/src/App.tsx

@@ -1,16 +1,12 @@
-import {
-	DependencyInjection as CatalogDependencyInjection,
-	QuoteEntityGateway,
-} from "@clean-architecture/catalog";
-
-import { GetQuote } from "./GetQuote";
+// eslint-disable-next-line import-x/no-namespace
+import * as Catalog from "@clean-architecture/catalog";
 
 export const App = () => {
 	return (
-		<CatalogDependencyInjection
-			quoteEntityGateway={new QuoteEntityGateway()}
+		<Catalog.DependencyInjection
+			quoteEntityGateway={new Catalog.QuoteEntityGateway()} // TODO: move it internally?
 		>
-			<GetQuote />
-		</CatalogDependencyInjection>
+			<Catalog.GetQuoteView />
+		</Catalog.DependencyInjection>
 	);
 };

modules/catalog/src/frameworks/web/useGetQuote.ts → modules/catalog/src/frameworks/web/GetQuoteView.tsx

@@ -1,12 +1,34 @@
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import { GetQuoteUseCase } from "../../useCases/GetQuoteUseCase";
 import type { GetQuoteViewModel } from "../../adapters/GetQuoteViewModel";
 import { GetQuotePresenter } from "../../adapters/GetQuotePresenter";
 import { GetQuoteController } from "../../adapters/GetQuoteController";
 import { useDependencyInjection } from "./useDependencyInjection";
 
-export const useGetQuote = () => {
+export const GetQuoteView = () => {
+	const { controller, viewModel } = useGetQuote();
+
+	useEffect(() => {
+		void controller.execute({ id: "todo" });
+	}, [controller]);
+
+	if (viewModel.error) {
+		return <p>Error: {String(viewModel.error)}</p>;
+	}
+
+	if (viewModel.data) {
+		return (
+			<section>
+				<h3>{viewModel.data}</h3>
+			</section>
+		);
+	}
+
+	return null;
+};
+
+const useGetQuote = () => {
 	const { quoteEntityGateway } = useDependencyInjection();
 	const [viewModel, setViewModel] = useState<GetQuoteViewModel>({});
 	const presenter = useMemo(() => new GetQuotePresenter(setViewModel), []);

modules/catalog/src/frameworks/web/index.ts

@@ -1,2 +1,2 @@
 export { DependencyInjection } from "./useDependencyInjection";
-export { useGetQuote } from "./useGetQuote";
+export { GetQuoteView } from "./GetQuoteView";

modules/catalog/src/index.ts

@@ -2,4 +2,4 @@ export { GetQuotePresenter } from "./adapters/GetQuotePresenter";
 export { GetQuoteController } from "./adapters/GetQuoteController";
 export { QuoteEntityGateway } from "./adapters/QuoteEntityGateway";
 export { GetQuoteUseCase } from "./useCases/GetQuoteUseCase";
-export { DependencyInjection, useGetQuote } from "./frameworks/web";
+export { DependencyInjection, GetQuoteView } from "./frameworks/web";

modules/shared-kernel/src/Presenter.ts

@@ -1,7 +1,6 @@
-import type { Result } from "@open-vanilla/result";
-
 import type { ViewModel } from "./ViewModel";
 import type { UseCaseOutputPort } from "./UseCase";
+import type { ResponseModel } from "./ResponseModel";
 
 /**
  * A presenter maps data structures returned by the use case interactor into data structures most convenient for the view.
@@ -10,11 +9,13 @@ import type { UseCaseOutputPort } from "./UseCase";
  * @example
  */
 export abstract class Presenter<
-	RM extends Result<unknown>,
+	RM extends ResponseModel<unknown>,
 	VM extends ViewModel,
 > implements UseCaseOutputPort<RM>
 {
-	public constructor(protected onViewModelChange: (vm: VM) => void) {}
+	public constructor(private readonly onViewModelChange: (vm: VM) => void) {}
+
+	public abstract toViewModel(responseModel: RM): VM;
 
 	private setViewModel(responseModel: RM) {
 		this.onViewModelChange(this.toViewModel(responseModel));
@@ -39,6 +40,4 @@ export abstract class Presenter<
 
 		this.setViewModel(responseModel);
 	}
-
-	public abstract toViewModel(responseModel: RM): VM;
 }