refactor: usecase usage example for calling with interface between controller and usecases

fix: Not showing create invoice button for server usecase

src/app/[lang]/dashboard/components/server/card.tsx

@@ -1,4 +1,4 @@
-import cardController from "@/app/[lang]/dashboard/components/server/card/card.controller";
+import cardController from "@/app/[lang]/dashboard/controller/card.controller";
 
 export function Card({
   title,

src/app/[lang]/dashboard/components/server/cards.tsx

@@ -1,5 +1,5 @@
-import { Card } from "@/app/[lang]/dashboard/components/server/card/card";
+import { Card } from "@/app/[lang]/dashboard/components/server/card";
-import cardsController from "@/app/[lang]/dashboard/components/server/cards/cards.controller";
+import cardsController from "@/app/[lang]/dashboard/controller/cards.controller";
 
 export default async function CardWrapper() {
   const { customersNumber, invoicesNumber, invoicesSummary } =

src/app/[lang]/dashboard/components/server/latest-invoices.tsx

@@ -1,5 +1,5 @@
 import CreateRandomInvoiceContainer from "@/app/[lang]/dashboard/components/client/create-random-invoice/create-random-invoice";
-import latestInvoicesController from "@/app/[lang]/dashboard/components/server/latest-invoices/latest-invoices.controller";
+import latestInvoicesController from "@/app/[lang]/dashboard/controller/latest-invoices.controller";
 import { ArrowPathIcon } from "@heroicons/react/24/outline";
 import clsx from "clsx";
 import { isLeft } from "fp-ts/lib/Either";

src/app/[lang]/dashboard/components/server/revenue-chart.tsx

@@ -1,4 +1,4 @@
-import revenueChartController from "@/app/[lang]/dashboard/components/server/revenue-chart/revenue-chart.controller";
+import revenueChartController from "@/app/[lang]/dashboard/controller/revenue-chart.controller";
 import { CalendarIcon } from "@heroicons/react/24/outline";
 
 export default async function RevenueChart() {

src/app/[lang]/dashboard/controller/card.controller.ts

@@ -7,6 +7,9 @@ import {
 
 /**
  * Controllers are bridge between feature layer and application layer.
+ * They decide, feature layer will be cached or not, where to run in client or server
+ * Or connect multiple usecases and run them, handle their failure, hydrate and store data in
+ *  client state managements.
  */
 export default function cardController(props: {
   type: "invoices" | "customers" | "pending" | "collected";

src/app/[lang]/dashboard/controller/cards.controller.ts

@@ -3,6 +3,9 @@ import { connection } from "next/server";
 
 /**
  * Controllers are bridge between feature layer and application layer.
+ * They decide, feature layer will be cached or not, where to run in client or server
+ * Or connect multiple usecases and run them, handle their failure, hydrate and store data in
+ *  client state managements.
  */
 export default function cardsController() {
   connection();

src/app/[lang]/dashboard/controller/create-invoice.controller.ts

@@ -0,0 +1,27 @@
+"use server";
+
+import { ApiEither } from "@/feature/common/data/api-task";
+import serverDi from "@/feature/common/server.di";
+import { InvoiceParam } from "@/feature/core/invoice/domain/param/invoice.param";
+import {
+  CreateInvoiceUsecase,
+  createInvoiceUsecaseKey,
+} from "@/feature/core/invoice/domain/usecase/create-invoice/create-invoice.usecase";
+import { invoiceModuleKey } from "@/feature/core/invoice/invoice.module-key";
+import { connection } from "next/server";
+
+/**
+ * Controllers are bridge between feature layer and application layer.
+ * They decide, feature layer will be cached or not, where to run in client or server
+ * Or connect multiple usecases and run them, handle their failure, hydrate and store data in
+ *  client state managements.
+ */
+export default async function createInvoiceController(
+  params: InvoiceParam,
+): Promise<ApiEither<string>> {
+  connection();
+  const usecase = serverDi(invoiceModuleKey).resolve<CreateInvoiceUsecase>(
+    createInvoiceUsecaseKey,
+  );
+  return usecase(params);
+}

src/app/[lang]/dashboard/controller/latest-invoices.controller.ts

@@ -3,6 +3,9 @@ import { connection } from "next/server";
 
 /**
  * Controllers are bridge between feature layer and application layer.
+ * They decide, feature layer will be cached or not, where to run in client or server
+ * Or connect multiple usecases and run them, handle their failure, hydrate and store data in
+ *  client state managements.
  */
 export default function latestInvoicesController() {
   connection();

src/app/[lang]/dashboard/controller/revenue-chart.controller.ts

@@ -3,6 +3,9 @@ import fetchRevenuesUsecase from "@/feature/core/revenue/domain/usecase/fetch-re
 
 /**
  * Controllers are bridge between feature layer and application layer.
+ * They decide, feature layer will be cached or not, where to run in client or server
+ * Or connect multiple usecases and run them, handle their failure, hydrate and store data in
+ *  client state managements.
  */
 export default async function revenueChartController() {
   const revenue = await fetchRevenuesUsecase();

src/app/[lang]/dashboard/loading.tsx

@@ -1,4 +1,4 @@
-import DashboardSkeleton from "@/app/[lang]/dashboard/components/server/skeletons/skeletons";
+import DashboardSkeleton from "@/app/[lang]/dashboard/components/server/skeletons";
 
 export default function Loading() {
   return <DashboardSkeleton />;

src/app/[lang]/dashboard/module/dashboard.app-module.ts

@@ -1,6 +1,5 @@
 import CreateRandomInvoiceButtonVM from "@/app/[lang]/dashboard/vm/create-random-invoice-button-vm";
 import di from "@/bootstrap/di/init-di";
-import createInvoiceUsecase from "@/feature/core/invoice/domain/usecase/create-invoice.usecase";
 
 /**
  * Each page can have its own di to connect all vms, usecases or controllers
@@ -8,9 +7,6 @@ import createInvoiceUsecase from "@/feature/core/invoice/domain/usecase/create-i
 export default function dashboardAppModule() {
   const dashboardDi = di.createChildContainer();
 
-  dashboardDi.register(createInvoiceUsecase.name, {
-    useValue: createInvoiceUsecase,
-  });
   dashboardDi.register(
     CreateRandomInvoiceButtonVM,
     CreateRandomInvoiceButtonVM,

src/app/[lang]/dashboard/page.tsx

@@ -1,13 +1,13 @@
 import {
   LatestInvoicesSkeleton,
   RevenueChartSkeleton,
-} from "@/app/[lang]/dashboard/components/server/skeletons/skeletons";
+} from "@/app/[lang]/dashboard/components/server/skeletons";
-import CardWrapper from "@/app/[lang]/dashboard/components/server/cards/cards";
+import CardWrapper from "@/app/[lang]/dashboard/components/server/cards";
-import LatestInvoices from "@/app/[lang]/dashboard/components/server/latest-invoices/latest-invoices";
+import RevenueChart from "@/app/[lang]/dashboard/components/server/revenue-chart";
-import RevenueChart from "@/app/[lang]/dashboard/components/server/revenue-chart/revenue-chart";
 import { Suspense } from "react";
 import { getServerTranslation, LANGS } from "@/bootstrap/i18n/i18n";
 import langKey from "@/bootstrap/i18n/dictionaries/lang-key";
+import LatestInvoices from "@/app/[lang]/dashboard/components/server/latest-invoices";
 
 export default async function Dashboard(props: {
   params: Promise<{ lang: LANGS }>;

src/app/[lang]/dashboard/vm/create-random-invoice-button-vm.ts

@@ -1,10 +1,11 @@
+import createInvoiceController from "@/app/[lang]/dashboard/controller/create-invoice.controller";
 import ButtonVm from "@/app/components/button/button.i-vm";
 import { useServerAction } from "@/bootstrap/helpers/hooks/use-server-action";
 import useThrottle from "@/bootstrap/helpers/hooks/use-throttle";
 import BaseVM from "@/bootstrap/helpers/vm/base-vm";
 import langKey from "@/bootstrap/i18n/dictionaries/lang-key";
 import { InvoiceParam } from "@/feature/core/invoice/domain/param/invoice.param";
-import createInvoiceUsecase from "@/feature/core/invoice/domain/usecase/create-invoice.usecase";
+import { CreateInvoiceUsecase } from "@/feature/core/invoice/domain/usecase/create-invoice/create-invoice.usecase";
 import { faker } from "@faker-js/faker";
 import { useRouter } from "next/navigation";
 import { useTranslation } from "react-i18next";
@@ -15,11 +16,11 @@ import { useTranslation } from "react-i18next";
  *  in this layer.
  */
 export default class CreateRandomInvoiceButtonVM extends BaseVM<ButtonVm> {
-  private createInvoice: typeof createInvoiceUsecase;
+  private createInvoice: CreateInvoiceUsecase;
 
   constructor() {
     super();
-    this.createInvoice = this.di.resolve(createInvoiceUsecase.name);
+    this.createInvoice = createInvoiceController;
   }
 
   useVM(): ButtonVm {

src/app/[lang]/layout.tsx

@@ -20,7 +20,7 @@ export default async function layout(
 ) {
   const { params, children } = props;
   const { lang } = await params;
-  const { resources } = await getI18n({ lng: lang });
+  await getI18n({ lng: lang });
   return (
     <html lang={lang} suppressHydrationWarning>
       <body
@@ -32,9 +32,7 @@ export default async function layout(
           enableSystem
           disableTransitionOnChange
         >
-          <TranslationsProvider lng={lang} resources={resources}>
+          <TranslationsProvider lng={lang}>{children}</TranslationsProvider>
-            {children}
-          </TranslationsProvider>
         </ThemeProvider>
       </body>
     </html>

src/app/components/button/stories/Button.stories.tsx

@@ -4,7 +4,7 @@ import { DiContext, useDI } from "@/bootstrap/di/di-context";
 import mockedModuleDi from "@/bootstrap/di/mocked-module-di";
 import Story from "@/bootstrap/helpers/view/storybook-base-template-type";
 import getArgVM from "@/bootstrap/helpers/view/storybook-with-arg-vm";
-import createInvoiceUsecase from "@/feature/core/invoice/domain/usecase/create-invoice.usecase";
+import { createInvoiceUsecaseKey } from "@/feature/core/invoice/domain/usecase/create-invoice/create-invoice.usecase";
 import type { Meta } from "@storybook/react";
 import { useRef } from "react";
 
@@ -36,30 +36,32 @@ export const Primary: Story = {
 export const WithVM: Story = {
   decorators: [
     (Story) => {
-      const di = mockedModuleDi([
+      const di = useRef(
-        {
+        mockedModuleDi([
-          token: CreateRandomInvoiceButtonVM,
+          {
-          provider: CreateRandomInvoiceButtonVM,
+            token: CreateRandomInvoiceButtonVM,
-        },
+            provider: CreateRandomInvoiceButtonVM,
-        {
+          },
-          token: createInvoiceUsecase.name,
+          {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any, no-console
+            token: createInvoiceUsecaseKey,
-          provider: (args: any) => console.log("clicked", args),
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any, no-console
-        },
+            provider: (args: any) => console.log("clicked", args),
-      ]);
+          },
-      return <Story di={di} />;
+        ]),
+      );
+      return (
+        <DiContext.Provider value={di.current}>
+          <Story di={di.current} />
+        </DiContext.Provider>
+      );
     },
   ],
-  render: (_, globalProps) => {
+  render: () => {
     function Child() {
       const di = useDI();
       const vm = useRef(di.resolve(CreateRandomInvoiceButtonVM));
       return <Button vm={vm.current} memoizedByVM={false} />;
     }
-    return (
+    return <Child />;
-      <DiContext.Provider value={globalProps.di}>
-        <Child />
-      </DiContext.Provider>
-    );
   },
 };

src/bootstrap/i18n/i18n-provider.tsx

@@ -1,17 +1,24 @@
 "use client";
 
 import { I18nextProvider } from "react-i18next";
-import { i18nInstance, getI18n, LANGS } from "@/bootstrap/i18n/i18n";
+import { getI18n, LANGS } from "@/bootstrap/i18n/i18n";
-import { Resource } from "i18next";
+import { PropsWithChildren, useEffect, useState } from "react";
-import { PropsWithChildren } from "react";
+import { i18n } from "i18next";
+import storeLang from "@/bootstrap/i18n/store-lang-action";
 
 export default function TranslationsProvider({
   children,
   lng,
-  resources,
+}: PropsWithChildren & { lng: LANGS }) {
-}: PropsWithChildren & { lng: LANGS; resources: Resource }) {
+  const [i18n, setI18n] = useState<i18n>();
-  if (!resources) return children;
-  getI18n({ lng, resources });
 
-  return <I18nextProvider i18n={i18nInstance}>{children}</I18nextProvider>;
+  useEffect(() => {
+    (async () => {
+      storeLang(lng);
+      setI18n((await getI18n({ lng })).i18n);
+    })();
+  }, [lng]);
+
+  if (!i18n) return null;
+  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
 }

src/bootstrap/i18n/store-lang-action.ts

@@ -0,0 +1,9 @@
+"use server";
+
+import { LANGS } from "@/bootstrap/i18n/i18n";
+import { cookieName } from "@/bootstrap/i18n/settings";
+import { cookies } from "next/headers";
+
+export default async function storeLang(lng: LANGS) {
+  (await cookies()).set(cookieName, lng);
+}

src/feature/core/customer-invoice/domain/usecase/fetch-customer-invoices.usecase.ts

@@ -1,4 +1,3 @@
-import "server-only";
 import { ApiEither } from "@/feature/common/data/api-task";
 import serverDi from "@/feature/common/server.di";
 import CustomerInvoice from "@/feature/core/customer-invoice/domain/entity/customer-invoice.entity";

src/feature/core/customer/domain/usecase/fetch-customers-amount-usecase.ts

@@ -1,4 +1,3 @@
-import "server-only";
 import serverDi from "@/feature/common/server.di";
 import { customerKey } from "@/feature/core/customer/customer-key";
 import CustomerRepo, {

src/feature/core/customer/domain/usecase/fetch-customers-usecase.ts

@@ -1,4 +1,3 @@
-import "server-only";
 import { ApiEither } from "@/feature/common/data/api-task";
 import serverDi from "@/feature/common/server.di";
 import { customerKey } from "@/feature/core/customer/customer-key";

src/feature/core/invoice/data/module/invoice.di.ts

@@ -1,11 +1,16 @@
 import di from "@/bootstrap/di/init-di";
 import invoiceDbRepo from "@/feature/core/invoice/data/repo/invoice-db.repo";
 import { invoiceRepoKey } from "@/feature/core/invoice/domain/i-repo/invoice.i-repo";
+import createInvoiceUsecase from "@/feature/core/invoice/domain/usecase/create-invoice/create-invoice-impl.usecase";
+import { createInvoiceUsecaseKey } from "@/feature/core/invoice/domain/usecase/create-invoice/create-invoice.usecase";
 import { DependencyContainer } from "tsyringe";
 
 export default function getInvoiceDi(): DependencyContainer {
   const invoiceDi = di.createChildContainer();
 
   invoiceDi.register(invoiceRepoKey, invoiceDbRepo);
+  invoiceDi.register(createInvoiceUsecaseKey, {
+    useValue: createInvoiceUsecase,
+  });
   return invoiceDi;
 }

src/feature/core/invoice/data/repo/invoice-db.repo.ts

@@ -1,3 +1,4 @@
+import "server-only";
 import { sql } from "@/bootstrap/boundaries/db/db";
 import ApiTask from "@/feature/common/data/api-task";
 import { failureOr } from "@/feature/common/failures/failure-helpers";

src/feature/core/invoice/domain/usecase/create-invoice/create-invoice-impl.usecase.ts

@@ -1,5 +1,3 @@
-"use server";
-
 import { ApiEither } from "@/feature/common/data/api-task";
 import ParamsFailure from "@/feature/common/failures/params.failure";
 import serverDi from "@/feature/common/server.di";
@@ -11,12 +9,13 @@ import {
   invoiceSchema,
 } from "@/feature/core/invoice/domain/param/invoice.param";
 import { invoiceModuleKey } from "@/feature/core/invoice/invoice.module-key";
+import { CreateInvoiceUsecase } from "@/feature/core/invoice/domain/usecase/create-invoice/create-invoice.usecase";
 import { pipe } from "fp-ts/lib/function";
 import { chain, fromNullable, left, map, right } from "fp-ts/lib/TaskEither";
 
-export default async function createInvoiceUsecase(
+const createInvoiceUsecase: CreateInvoiceUsecase = async (
   params: InvoiceParam,
-): Promise<ApiEither<string>> {
+): Promise<ApiEither<string>> => {
   const repo = serverDi(invoiceModuleKey).resolve<InvoiceRepo>(invoiceRepoKey);
 
   return pipe(
@@ -29,4 +28,6 @@ export default async function createInvoiceUsecase(
     }),
     chain((params) => repo.createInvoice(params)),
   )();
-}
+};
+
+export default createInvoiceUsecase;

src/feature/core/invoice/domain/usecase/create-invoice/create-invoice.usecase.ts

@@ -0,0 +1,8 @@
+import { ApiEither } from "@/feature/common/data/api-task";
+import { InvoiceParam } from "@/feature/core/invoice/domain/param/invoice.param";
+
+export type CreateInvoiceUsecase = (
+  param: InvoiceParam,
+) => Promise<ApiEither<string>>;
+
+export const createInvoiceUsecaseKey = "createInvoiceUsecaseKey";

src/feature/core/invoice/domain/usecase/fetch-all-invoices-amount.usecase.ts

@@ -1,4 +1,3 @@
-import "server-only";
 import serverDi from "@/feature/common/server.di";
 import InvoiceRepo, {
   invoiceRepoKey,

src/feature/core/invoice/domain/usecase/fetch-invoices-status-summary.usecase.ts

@@ -1,4 +1,3 @@
-import "server-only";
 import serverDi from "@/feature/common/server.di";
 import InvoiceRepo, {
   invoiceRepoKey,

src/feature/core/revenue/domain/usecase/fetch-revenues.usecase.ts

@@ -1,4 +1,3 @@
-import "server-only";
 import serverDi from "@/feature/common/server.di";
 import Revenue from "@/feature/core/revenue/domain/entity/revenue.entity";
 import RevenueRepo, {

src/feature/core/summary-info/domain/usecase/fetch-summary-info.usecase.ts

@@ -1,4 +1,3 @@
-import "server-only";
 import serverDi from "@/feature/common/server.di";
 import fetchCustomersAmountUsecase from "@/feature/core/customer/domain/usecase/fetch-customers-amount-usecase";
 import fetchAllInvoicesAmountUsecase from "@/feature/core/invoice/domain/usecase/fetch-all-invoices-amount.usecase";