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

@@ -7,9 +7,6 @@ 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/components/server/card/card.tsx

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

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

@@ -3,9 +3,6 @@ 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/components/server/cards/cards.tsx

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

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

@@ -3,9 +3,6 @@ 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/components/server/latest-invoices/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/controller/latest-invoices.controller";
+import latestInvoicesController from "@/app/[lang]/dashboard/components/server/latest-invoices/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/revenue-chart.controller.ts

@@ -3,9 +3,6 @@ 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/components/server/revenue-chart/revenue-chart.tsx

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

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

@@ -1,27 +0,0 @@
-"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/loading.tsx

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

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

@@ -1,5 +1,6 @@
 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
@@ -7,6 +8,9 @@ import di from "@/bootstrap/di/init-di";
 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";
+} from "@/app/[lang]/dashboard/components/server/skeletons/skeletons";
-import CardWrapper from "@/app/[lang]/dashboard/components/server/cards";
+import CardWrapper from "@/app/[lang]/dashboard/components/server/cards/cards";
-import RevenueChart from "@/app/[lang]/dashboard/components/server/revenue-chart";
+import LatestInvoices from "@/app/[lang]/dashboard/components/server/latest-invoices/latest-invoices";
+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,11 +1,10 @@
-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/create-invoice.usecase";
+import createInvoiceUsecase from "@/feature/core/invoice/domain/usecase/create-invoice.usecase";
 import { faker } from "@faker-js/faker";
 import { useRouter } from "next/navigation";
 import { useTranslation } from "react-i18next";
@@ -16,11 +15,11 @@ import { useTranslation } from "react-i18next";
  *  in this layer.
  */
 export default class CreateRandomInvoiceButtonVM extends BaseVM<ButtonVm> {
-  private createInvoice: CreateInvoiceUsecase;
+  private createInvoice: typeof createInvoiceUsecase;
 
   constructor() {
     super();
-    this.createInvoice = createInvoiceController;
+    this.createInvoice = this.di.resolve(createInvoiceUsecase.name);
   }
 
   useVM(): ButtonVm {

src/app/[lang]/layout.tsx

@@ -20,7 +20,7 @@ export default async function layout(
 ) {
   const { params, children } = props;
   const { lang } = await params;
-  await getI18n({ lng: lang });
+  const { resources } = await getI18n({ lng: lang });
   return (
     <html lang={lang} suppressHydrationWarning>
       <body
@@ -32,7 +32,9 @@ export default async function layout(
           enableSystem
           disableTransitionOnChange
         >
-          <TranslationsProvider lng={lang}>{children}</TranslationsProvider>
+          <TranslationsProvider lng={lang} resources={resources}>
+            {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 { createInvoiceUsecaseKey } from "@/feature/core/invoice/domain/usecase/create-invoice/create-invoice.usecase";
+import createInvoiceUsecase from "@/feature/core/invoice/domain/usecase/create-invoice.usecase";
 import type { Meta } from "@storybook/react";
 import { useRef } from "react";
 
@@ -36,32 +36,30 @@ export const Primary: Story = {
 export const WithVM: Story = {
   decorators: [
     (Story) => {
-      const di = useRef(
+      const di = mockedModuleDi([
-        mockedModuleDi([
         {
           token: CreateRandomInvoiceButtonVM,
           provider: CreateRandomInvoiceButtonVM,
         },
         {
-            token: createInvoiceUsecaseKey,
+          token: createInvoiceUsecase.name,
           // 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: () => {
+  render: (_, globalProps) => {
     function Child() {
       const di = useDI();
       const vm = useRef(di.resolve(CreateRandomInvoiceButtonVM));
       return <Button vm={vm.current} memoizedByVM={false} />;
     }
-    return <Child />;
+    return (
+      <DiContext.Provider value={globalProps.di}>
+        <Child />
+      </DiContext.Provider>
+    );
   },
 };

src/bootstrap/i18n/i18n-provider.tsx

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

@@ -1,9 +0,0 @@
-"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,3 +1,4 @@
+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,3 +1,4 @@
+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,3 +1,4 @@
+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,16 +1,11 @@
 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,4 +1,3 @@
-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.usecase.ts

@@ -1,3 +1,5 @@
+"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";
@@ -9,13 +11,12 @@ 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";
 
-const createInvoiceUsecase: CreateInvoiceUsecase = async (
+export default async function createInvoiceUsecase(
   params: InvoiceParam,
-): Promise<ApiEither<string>> => {
+): Promise<ApiEither<string>> {
   const repo = serverDi(invoiceModuleKey).resolve<InvoiceRepo>(invoiceRepoKey);
 
   return pipe(
@@ -28,6 +29,4 @@ const createInvoiceUsecase: CreateInvoiceUsecase = async (
     }),
     chain((params) => repo.createInvoice(params)),
   )();
-};
+}
-
-export default createInvoiceUsecase;

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

@@ -1,8 +0,0 @@
-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,3 +1,4 @@
+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,3 +1,4 @@
+import "server-only";
 import serverDi from "@/feature/common/server.di";
 import InvoiceRepo, {
   invoiceRepoKey,

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

@@ -1,3 +1,4 @@
+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,3 +1,4 @@
+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";