From 693f07528e08d5cff2333893ef1d9e883d1aefb1 Mon Sep 17 00:00:00 2001 From: behnam Date: Fri, 7 Mar 2025 10:53:01 +0300 Subject: [PATCH 1/2] fix: Fix translation issue for not switching the lang --- .../client/theme-provider/theme-provider.tsx | 9 ++++--- src/app/[lang]/layout.tsx | 6 ++--- src/bootstrap/i18n/i18n-provider.tsx | 26 ++++++++++++------- src/bootstrap/i18n/store-lang-action.ts | 9 +++++++ 4 files changed, 33 insertions(+), 17 deletions(-) create mode 100644 src/bootstrap/i18n/store-lang-action.ts diff --git a/src/app/[lang]/dashboard/components/client/theme-provider/theme-provider.tsx b/src/app/[lang]/dashboard/components/client/theme-provider/theme-provider.tsx index 6a1ffe4..08ad43b 100644 --- a/src/app/[lang]/dashboard/components/client/theme-provider/theme-provider.tsx +++ b/src/app/[lang]/dashboard/components/client/theme-provider/theme-provider.tsx @@ -1,11 +1,12 @@ -"use client" +"use client"; -import * as React from "react" -import { ThemeProvider as NextThemesProvider } from "next-themes" +import * as React from "react"; +import { ThemeProvider as NextThemesProvider } from "next-themes"; export function ThemeProvider({ children, ...props }: React.ComponentProps) { - return {children} + // eslint-disable-next-line react/jsx-props-no-spreading + return {children}; } diff --git a/src/app/[lang]/layout.tsx b/src/app/[lang]/layout.tsx index 89037c1..7eeae97 100644 --- a/src/app/[lang]/layout.tsx +++ b/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 initI18next({ lng: lang }); + await initI18next({ lng: lang }); return ( - - {children} - + {children} diff --git a/src/bootstrap/i18n/i18n-provider.tsx b/src/bootstrap/i18n/i18n-provider.tsx index ed50a29..73d732b 100644 --- a/src/bootstrap/i18n/i18n-provider.tsx +++ b/src/bootstrap/i18n/i18n-provider.tsx @@ -2,16 +2,24 @@ import { I18nextProvider } from "react-i18next"; import { i18nInstance, initI18next, LANGS } from "@/bootstrap/i18n/i18n"; -import { Resource } from "i18next"; -import { PropsWithChildren } from "react"; +import { PropsWithChildren, useEffect, useState } from "react"; +import storeLang from "@/bootstrap/i18n/store-lang-action"; +import { i18n } from "i18next"; -export default function TranslationsProvider({ - children, - lng, - resources, -}: PropsWithChildren & { lng: LANGS; resources: Resource }) { - if (!resources) return children; - initI18next({ lng, resources }); +export default function TranslationsProvider( + props: PropsWithChildren & { lng: LANGS }, +) { + const { lng, children } = props; + const [i18n, setI18n] = useState(); + + useEffect(() => { + (async () => { + storeLang(lng); + setI18n((await initI18next({ lng })).i18n); + })(); + }, [lng]); + + if (!i18n) return null; return {children}; } diff --git a/src/bootstrap/i18n/store-lang-action.ts b/src/bootstrap/i18n/store-lang-action.ts new file mode 100644 index 0000000..2ef60ce --- /dev/null +++ b/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); +} From 86732339eac2b3428110f6b7c687a10ef5c27f1c Mon Sep 17 00:00:00 2001 From: behnam Date: Fri, 7 Mar 2025 11:38:10 +0300 Subject: [PATCH 2/2] fix: Not showing create invoice button for server usecase --- .../dashboard/module/dashboard-app-module.ts | 5 ++- .../vm/create-random-invoice-button-vm.ts | 9 +++-- .../button/stories/Button.stories.tsx | 40 ++++++++++--------- .../create-invoice-impl.usecase.ts} | 11 ++--- .../create-invoice/create-invoice.usecase.ts | 8 ++++ 5 files changed, 44 insertions(+), 29 deletions(-) rename src/feature/core/invoice/domain/usecase/{create-invoice-usecase.ts => create-invoice/create-invoice-impl.usecase.ts} (81%) create mode 100644 src/feature/core/invoice/domain/usecase/create-invoice/create-invoice.usecase.ts diff --git a/src/app/[lang]/dashboard/module/dashboard-app-module.ts b/src/app/[lang]/dashboard/module/dashboard-app-module.ts index 323a2f2..ffd92a1 100644 --- a/src/app/[lang]/dashboard/module/dashboard-app-module.ts +++ b/src/app/[lang]/dashboard/module/dashboard-app-module.ts @@ -1,11 +1,12 @@ 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"; +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"; export default function dashboardAppModule() { const dashboardDi = di.createChildContainer(); - dashboardDi.register(createInvoiceUsecase.name, { + dashboardDi.register(createInvoiceUsecaseKey, { useValue: createInvoiceUsecase, }); dashboardDi.register( diff --git a/src/app/[lang]/dashboard/vm/create-random-invoice-button-vm.ts b/src/app/[lang]/dashboard/vm/create-random-invoice-button-vm.ts index 44abdcb..ed42813 100644 --- a/src/app/[lang]/dashboard/vm/create-random-invoice-button-vm.ts +++ b/src/app/[lang]/dashboard/vm/create-random-invoice-button-vm.ts @@ -4,17 +4,20 @@ 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, + createInvoiceUsecaseKey, +} 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"; export default class CreateRandomInvoiceButtonVM extends BaseVM { - private createInvoice: typeof createInvoiceUsecase; + private createInvoice: CreateInvoiceUsecase; constructor() { super(); - this.createInvoice = this.di.resolve(createInvoiceUsecase.name); + this.createInvoice = this.di.resolve(createInvoiceUsecaseKey); } useVM(): ButtonVm { diff --git a/src/app/components/button/stories/Button.stories.tsx b/src/app/components/button/stories/Button.stories.tsx index d7739ae..a68137b 100644 --- a/src/app/components/button/stories/Button.stories.tsx +++ b/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([ - { - token: CreateRandomInvoiceButtonVM, - provider: CreateRandomInvoiceButtonVM, - }, - { - token: createInvoiceUsecase.name, - // eslint-disable-next-line @typescript-eslint/no-explicit-any, no-console - provider: (args: any) => console.log("clicked", args), - }, - ]); - return ; + const di = useRef( + mockedModuleDi([ + { + token: CreateRandomInvoiceButtonVM, + provider: CreateRandomInvoiceButtonVM, + }, + { + token: createInvoiceUsecaseKey, + // eslint-disable-next-line @typescript-eslint/no-explicit-any, no-console + provider: (args: any) => console.log("clicked", args), + }, + ]), + ); + return ( + + + + ); }, ], - render: (_, globalProps) => { + render: () => { function Child() { const di = useDI(); const vm = useRef(di.resolve(CreateRandomInvoiceButtonVM)); return