✨ Basic oppsett av app router med støtte for flere språk, gjemt bak f…

…eaturetoggling som skjuler visning i prod
navikt · Jan 14, 2025 · 31dbdef · 31dbdef
1 parent 3d16ad9
commit 31dbdef
Show file tree

Hide file tree

Showing 11 changed files with 124 additions and 0 deletions.
diff --git a/app/dev/[lang]/dictionaries.ts b/app/dev/[lang]/dictionaries.ts
@@ -0,0 +1,8 @@
+import 'server-only';
+
+const dictionaries = {
+  nb: () => import('../../../lib/translations/nb.json').then((module) => module.default),
+  nn: () => import('../../../lib/translations/nn.json').then((module) => module.default),
+};
+
+export const getDictionary = async (locale: 'nb' | 'nn' = 'nb') => dictionaries[locale]();
diff --git a/app/dev/[lang]/layout.module.css b/app/dev/[lang]/layout.module.css
@@ -0,0 +1,3 @@
+.mainContainer {
+  /*margin-bottom: var(--a-spacing-32);*/
+}
diff --git a/app/dev/[lang]/layout.tsx b/app/dev/[lang]/layout.tsx
@@ -0,0 +1,7 @@
+import styles from './layout.module.css';
+
+const Layout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
+  return <main className={styles.mainContainer}>{children}</main>;
+};
+
+export default Layout;
diff --git a/app/dev/[lang]/page.tsx b/app/dev/[lang]/page.tsx
@@ -0,0 +1,34 @@
+import { Heading } from '@navikt/ds-react';
+import { getDictionary } from 'app/dev/[lang]/dictionaries';
+import { DokumentoversiktMedDatafetching } from 'components/DokumentoversiktNy/DokumentoversiktMedDatafetching';
+import { ForsideIngress } from 'components/Forside/Ingress/ForsideIngress';
+import { PageComponentFlexContainer } from 'components/PageComponentFlexContainer/PageComponentFlexContainer';
+import { isProduction } from 'lib/utils/environments';
+import { notFound } from 'next/navigation';
+
+interface PageParams {
+  lang: 'nb' | 'nn';
+}
+
+const Page = async ({ params }: Readonly<{ params: Promise<PageParams> }>) => {
+  const lang = (await params).lang;
+  const dict = await getDictionary(lang);
+
+  if (isProduction()) {
+    return notFound();
+  }
+
+  return (
+    <div>
+      <PageComponentFlexContainer>
+        <Heading level="1" size="large" spacing>
+          {dict.appTittelMedSkille /* TODO: Add shy */}
+        </Heading>
+        <ForsideIngress>{dict.appIngress}</ForsideIngress>
+      </PageComponentFlexContainer>
+      <DokumentoversiktMedDatafetching />
+    </div>
+  );
+};
+
+export default Page;
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,28 @@
+import '@navikt/ds-css';
+import { fetchDecoratorReact } from '@navikt/nav-dekoratoren-moduler/ssr';
+import { getEnvironment } from 'lib/utils/environments';
+import Script from 'next/script';
+
+export const metadata = {
+  title: 'Mine AAP',
+  //description: 'Generated by Next.js',
+};
+const RootLayout = async ({ children }: Readonly<{ children: React.ReactNode }>) => {
+  const Decorator = await fetchDecoratorReact({ env: getEnvironment() });
+
+  return (
+    <html lang="nb">
+      <head>
+        <Decorator.HeadAssets />
+      </head>
+      <body>
+        <Decorator.Header />
+        {children}
+        <Decorator.Footer />
+        <Decorator.Scripts loader={Script} />
+      </body>
+    </html>
+  );
+};
+
+export default RootLayout;
diff --git a/components/DokumentoversiktNy/Dokumentoversikt.tsx b/components/DokumentoversiktNy/Dokumentoversikt.tsx
@@ -1,3 +1,4 @@
+'use client';
 import styles from './Dokumentoversikt.module.css';
 import { Checkbox, Pagination, Select } from '@navikt/ds-react';
 import { Dokument } from 'lib/types/types';

diff --git a/components/DokumentoversiktNy/DokumentoversiktMedDatafetching.tsx b/components/DokumentoversiktNy/DokumentoversiktMedDatafetching.tsx
@@ -0,0 +1,28 @@
+import { Heading, BodyShort, ReadMore } from '@navikt/ds-react';
+import { getDictionary } from 'app/dev/[lang]/dictionaries';
+//import { Dokumentoversikt } from 'components/DokumentoversiktNy/Dokumentoversikt';
+import { PageComponentFlexContainer } from 'components/PageComponentFlexContainer/PageComponentFlexContainer';
+//import { Dokument } from 'lib/types/types';
+//import { hentDokumenterFraOppslag } from 'pages/api/dokumenter';
+
+export const DokumentoversiktMedDatafetching = async () => {
+  //const dokumenter = (await hentDokumenterFraOppslag()) as Dokument[];
+
+  const dict = await getDictionary('nb');
+
+  return (
+    <PageComponentFlexContainer subtleBackground>
+      <div style={{ maxWidth: '600px' }}>
+        <Heading level="2" size="medium" spacing>
+          {dict.dokumentoversikt.tittel}
+        </Heading>
+        <BodyShort spacing>{dict.dokumentoversikt.tekst}</BodyShort>
+        <ReadMore header={dict.dokumentoversikt.manglendeDokument.header}>
+          <BodyShort spacing>{dict.dokumentoversikt.manglendeDokument.tekst}</BodyShort>
+        </ReadMore>
+
+        {/*<Dokumentoversikt dokumenter={dokumenter} />*/}
+      </div>
+    </PageComponentFlexContainer>
+  );
+};
diff --git a/lib/locale/locale.ts b/lib/locale/locale.ts
@@ -0,0 +1,3 @@
+import { DecoratorLocale } from '@navikt/nav-dekoratoren-moduler';
+
+export const availableLanguages: DecoratorLocale[] = ['nb', 'nn'];
diff --git a/lib/translations/nb.json b/lib/translations/nb.json
@@ -1,5 +1,6 @@
 {
   "appTittel": "Mine arbeidsavklarings{shy}penger",
+  "appTittelMedSkille": "Mine arbeidsavklaringspenger",
   "appIngress": "Se status på søknaden din, se innsendte dokumenter, ettersend dokumenter eller gi beskjed om eventuelle endringer.",
   "forside": {
     "heading": "Velkommen til Mine AAP!",

diff --git a/lib/translations/nn.json b/lib/translations/nn.json
@@ -1,5 +1,6 @@
 {
   "appTittel": "Mine arbeidsavklarings{shy}pengar",
+  "appTittelMedSkille": "Mine arbeidsavklaringspengar",
   "appIngress": "Sjå status på søknaden din, sjå innsendte dokument, ettersend dokument eller gi beskjed om eventuelle endringar.",
   "forside": {
     "heading": "Velkommen til Mine AAP!",

diff --git a/lib/utils/environments.ts b/lib/utils/environments.ts
@@ -1,3 +1,13 @@
 const MOCK_ENVIRONMENTS = ['localhost'];
 
 export const isMock = () => MOCK_ENVIRONMENTS.includes(process.env.NEXT_PUBLIC_ENVIRONMENT ?? '');
+
+export const isProduction = () => process.env.NEXT_PUBLIC_ENVIRONMENT === 'prod';
+
+export function getEnvironment(): 'prod' | 'dev' {
+  if (isProduction()) {
+    return 'prod';
+  } else {
+    return 'dev';
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { DecoratorLocale } from '@navikt/nav-dekoratoren-moduler';

		export const availableLanguages: DecoratorLocale[] = ['nb', 'nn'];