- Updated translation utility to improve consistency and reduce redundancy. - Removed deprecated useTrans hook and related code. - Introduced a new Zustand store for managing translations and locale settings. - Cleaned up unused hooks and files related to localization.
83 lines
2.6 KiB
TypeScript
83 lines
2.6 KiB
TypeScript
import { axiosAdapter, router } from "@inertiajs/core";
|
|
import { createInertiaApp } from "@inertiajs/react";
|
|
import CookieNotice from "@ldc-web/cookie-notice";
|
|
import axios from "axios";
|
|
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
|
|
import type { ComponentType } from "react";
|
|
import { createRoot } from "react-dom/client";
|
|
import recaptcha from "./hooks/use-recaptcha";
|
|
import useI18nStore, {
|
|
isValidLocale,
|
|
isValidTranslations,
|
|
} from "./store/i18n-store";
|
|
|
|
// ASSETS
|
|
import.meta.glob("../../assets/images/**/*");
|
|
|
|
type PageComponent = ComponentType<Record<string, unknown>>;
|
|
|
|
interface PageModule {
|
|
default: PageComponent;
|
|
}
|
|
|
|
const appName = import.meta.env.VITE_APP_NAME || "Laravel";
|
|
const appPages = import.meta.glob<PageModule>("./*/Pages/**/*.tsx");
|
|
|
|
const nonce =
|
|
document.querySelector<HTMLMetaElement>('meta[name="csp-nonce"]')?.content ??
|
|
"";
|
|
|
|
void createInertiaApp({
|
|
nonce,
|
|
http: axiosAdapter(window.axios),
|
|
title: (title) => (title ? `${title} - ${appName}` : appName),
|
|
resolve: async (name) => {
|
|
const page = await resolvePageComponent<PageModule>(
|
|
`./${name}.tsx`,
|
|
appPages,
|
|
);
|
|
return page.default;
|
|
},
|
|
setup({ el, App, props }) {
|
|
const root = createRoot(el);
|
|
|
|
// * Setup initial locale and translations
|
|
const initialAppEnv = props.initialPage.props.appEnv as
|
|
{ locale?: string } | undefined;
|
|
if (initialAppEnv?.locale && isValidLocale(initialAppEnv.locale)) {
|
|
useI18nStore.getState().setLocale(initialAppEnv.locale);
|
|
}
|
|
|
|
const pageTranslations = props.initialPage.props.translations;
|
|
if (isValidTranslations(pageTranslations)) {
|
|
useI18nStore.getState().setTranslations(pageTranslations);
|
|
}
|
|
|
|
// * On navigate
|
|
router.on("navigate", (event) => {
|
|
// * Update locale and translations on navigation
|
|
const pageAppEnv = event.detail.page.props.appEnv as
|
|
{ locale?: string } | undefined;
|
|
if (pageAppEnv?.locale && isValidLocale(pageAppEnv.locale)) {
|
|
useI18nStore.getState().setLocale(pageAppEnv.locale);
|
|
}
|
|
|
|
const pageTranslations = event.detail.page.props.translations;
|
|
if (isValidTranslations(pageTranslations)) {
|
|
useI18nStore.getState().setTranslations(pageTranslations);
|
|
}
|
|
});
|
|
|
|
// eslint-disable-next-line react/jsx-filename-extension, react/jsx-props-no-spreading
|
|
root.render(<App {...props} />);
|
|
},
|
|
progress: {
|
|
color: "#4B5563",
|
|
},
|
|
});
|
|
|
|
window.axios = axios;
|
|
window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
|
|
|
|
window.CookieNotice = CookieNotice;
|
|
window.Recaptcha = recaptcha;
|