Skip to content

Commit

Permalink
💬 Fjerner useFeatureToggleIntl og bytter den ut med useIntl
Browse files Browse the repository at this point in the history
Co-authored-by: Øivind Stensrud <[email protected]>
Co-authored-by: Tor Idland <[email protected]>
Co-authored-by: Halvor Grizzly Bjørn <[email protected]>
  • Loading branch information
4 people authored Oct 18, 2023
2 parents 2899f69 + e250e58 commit e48415e
Show file tree
Hide file tree
Showing 10 changed files with 124 additions and 149 deletions.
13 changes: 8 additions & 5 deletions components/AppHeader/AppHeader.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
import { Heading } from '@navikt/ds-react';
import { useFeatureToggleIntl } from 'lib/hooks/useFeatureToggleIntl';
import styles from 'components/AppHeader/AppHeader.module.css';
import { useIntl } from 'react-intl';

export const AppHeader = () => {
const intl = useFeatureToggleIntl();
const { formatMessage } = useIntl();

return (
<header className={styles.appHeader}>
<div className={styles.container}>
<Heading level="1" size="xlarge">
{intl.formatElement('appTittel', {
shy: <>&shy;</>,
})}
{formatMessage(
{ id: 'appTittel' },
{
shy: <>&shy;</>,
}
)}
</Heading>
</div>
</header>
Expand Down
20 changes: 10 additions & 10 deletions components/Dokumentoversikt/Dokumentoversikt.tsx
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
import { ReadMore, Panel, Heading, BodyShort, Accordion } from '@navikt/ds-react';
import { Accordion, BodyShort, Heading, Panel, ReadMore } from '@navikt/ds-react';
import { VerticalFlexContainer } from 'components/FlexContainer/VerticalFlexContainer';
import { useFeatureToggleIntl } from 'lib/hooks/useFeatureToggleIntl';
import { Dokument } from 'lib/types/types';
import { formatFullDate } from 'lib/utils/date';
import Link from 'next/link';
import { useIntl } from 'react-intl';

interface Props {
dokumenter: Dokument[];
}

export const Dokumentoversikt = ({ dokumenter }: Props) => {
const { formatMessage } = useFeatureToggleIntl();
const { formatMessage } = useIntl();
return (
<Panel border>
<Heading level="2" size="medium" spacing>
{formatMessage('dokumentoversikt.tittel')}
{formatMessage({ id: 'dokumentoversikt.tittel' })}
</Heading>
<ReadMore header={formatMessage('dokumentoversikt.manglendeDokument.header')}>
<BodyShort>{formatMessage('dokumentoversikt.manglendeDokument.tekst')}</BodyShort>
{formatMessage('dokumentoversikt.manglendeDokument.bulletsTekst')}
<ReadMore header={formatMessage({ id: 'dokumentoversikt.manglendeDokument.header' })}>
<BodyShort>{formatMessage({ id: 'dokumentoversikt.manglendeDokument.tekst' })}</BodyShort>
{formatMessage({ id: 'dokumentoversikt.manglendeDokument.bulletsTekst' })}
<ul>
<li>{formatMessage('dokumentoversikt.manglendeDokument.bullet1')}</li>
<li>{formatMessage('dokumentoversikt.manglendeDokument.bullet2')}</li>
<li>{formatMessage('dokumentoversikt.manglendeDokument.bullet3')}</li>
<li>{formatMessage({ id: 'dokumentoversikt.manglendeDokument.bullet1' })}</li>
<li>{formatMessage({ id: 'dokumentoversikt.manglendeDokument.bullet2' })}</li>
<li>{formatMessage({ id: 'dokumentoversikt.manglendeDokument.bullet3' })}</li>
</ul>
</ReadMore>
<VerticalFlexContainer>
Expand Down
8 changes: 4 additions & 4 deletions components/FormErrorSummary/FormErrorSummary.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useRef } from 'react';
import { ErrorSummary } from '@navikt/ds-react';
import * as classes from 'components/FormErrorSummary/FormErrorSummary.module.css';
import { useFeatureToggleIntl } from 'lib/hooks/useFeatureToggleIntl';
import { useIntl } from 'react-intl';

export interface Error {
path: string;
Expand All @@ -15,15 +15,15 @@ interface Props {
}

const FormErrorSummary = ({ id, errors }: Props) => {
const { formatMessage } = useFeatureToggleIntl();
const { formatMessage } = useIntl();

const errorSummaryElement = useRef(null);

if (errors?.length < 1) {
return (
<ErrorSummary
ref={errorSummaryElement}
heading={formatMessage('errorSummary.title')}
heading={formatMessage({ id: 'errorSummary.title' })}
role={'alert'}
aria-hidden={errors?.length === 0}
className={errors?.length === 0 ? classes?.visuallyHidden : ''}
Expand All @@ -38,7 +38,7 @@ const FormErrorSummary = ({ id, errors }: Props) => {
<div className={classes.container}>
<ErrorSummary
ref={errorSummaryElement}
heading={formatMessage('errorSummary.title')}
heading={formatMessage({ id: 'errorSummary.title' })}
role={'alert'}
aria-hidden={errors?.length === 0}
className={errors?.length === 0 ? classes?.visuallyHidden : ''}
Expand Down
14 changes: 7 additions & 7 deletions components/NavDecorator/NavDecorator.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import {
onBreadcrumbClick,
onLanguageSelect,
setAvailableLanguages,
setBreadcrumbs,
onLanguageSelect,
onBreadcrumbClick,
} from '@navikt/nav-dekoratoren-moduler';
import { useRouter } from 'next/router';
import React, { useEffect } from 'react';
import { useFeatureToggleIntl } from 'lib/hooks/useFeatureToggleIntl';
import { useIntl } from 'react-intl';

export const NavDecorator = ({ children }: { children: React.ReactNode }) => {
const { formatMessage } = useFeatureToggleIntl();
const { formatMessage } = useIntl();

const router = useRouter();
const { pathname, asPath, query } = router;
Expand All @@ -33,18 +33,18 @@ export const NavDecorator = ({ children }: { children: React.ReactNode }) => {

useEffect(() => {
const breadcrumbs = [
{ title: formatMessage('breadcrumbs.mineAAP'), url: router.basePath, handleInApp: true },
{ title: formatMessage({ id: 'breadcrumbs.mineAAP' }), url: router.basePath, handleInApp: true },
];
if (router.asPath.endsWith('ettersendelse/')) {
breadcrumbs.push({
title: formatMessage('breadcrumbs.ettersending'),
title: formatMessage({ id: 'breadcrumbs.ettersending' }),
url: router.asPath,
handleInApp: true,
});
}
if (router.asPath.endsWith('soknader/')) {
breadcrumbs.push({
title: formatMessage('breadcrumbs.mineAAPSoknader'),
title: formatMessage({ id: 'breadcrumbs.mineAAPSoknader' }),
url: router.asPath,
handleInApp: true,
});
Expand Down
34 changes: 17 additions & 17 deletions components/SoknadPanel/SoknadPanel.tsx
Original file line number Diff line number Diff line change
@@ -1,45 +1,45 @@
import { Heading, Panel, BodyShort, Alert, Button, Label, Link } from '@navikt/ds-react';
import { useFeatureToggleIntl } from 'lib/hooks/useFeatureToggleIntl';
import { Alert, BodyShort, Button, Heading, Label, Link, Panel } from '@navikt/ds-react';
import { Søknad } from 'lib/types/types';
import { formatFullDate } from 'lib/utils/date';
import router from 'next/router';
import NextLink from 'next/link';
import * as styles from 'components/SoknadPanel/SoknadPanel.module.css';
import { useIntl } from 'react-intl';

interface Props {
søknad: Søknad;
}

export const SoknadPanel = ({ søknad }: Props) => {
const { formatMessage } = useFeatureToggleIntl();
const { formatMessage } = useIntl();

return (
<Panel className={styles.panel}>
<Heading level="3" size="small">
{formatMessage('sisteSøknad.søknad.heading')}
{formatMessage({ id: 'sisteSøknad.søknad.heading' })}
</Heading>
<BodyShort spacing>
{formatMessage('sisteSøknad.søknad.mottatt', {
date: formatFullDate(søknad.innsendtDato),
})}
{formatMessage(
{ id: 'sisteSøknad.søknad.mottatt' },
{
date: formatFullDate(søknad.innsendtDato),
}
)}
</BodyShort>
<BodyShort spacing>
<Link
target="_blank"
href="https://www.nav.no/saksbehandlingstider#arbeidsavklaringspenger-aap"
>
{formatMessage('sisteSøknad.søknad.saksbehandlingstid')}
<Link target="_blank" href="https://www.nav.no/saksbehandlingstider#arbeidsavklaringspenger-aap">
{formatMessage({ id: 'sisteSøknad.søknad.saksbehandlingstid' })}
</Link>
</BodyShort>
{(søknad.manglendeVedlegg?.length ?? 0) > 0 && (
<div className={styles.alert}>
<Alert variant="warning">{formatMessage('sisteSøknad.søknad.alert.message')}</Alert>
<Alert variant="warning">{formatMessage({ id: 'sisteSøknad.søknad.alert.message' })}</Alert>
</div>
)}

{(søknad.innsendteVedlegg?.length ?? 0) > 0 && (
<>
<Label as="p">{formatMessage('sisteSøknad.dokumentasjon.mottatt')}</Label>
<Label as="p">{formatMessage({ id: 'sisteSøknad.dokumentasjon.mottatt' })}</Label>
<ul>
{søknad.innsendteVedlegg?.map((krav) => (
<li key={krav.innsendingsId}>
Expand All @@ -56,17 +56,17 @@ export const SoknadPanel = ({ søknad }: Props) => {
)}
{(søknad.manglendeVedlegg?.length ?? 0) > 0 && (
<>
<Label>{formatMessage('sisteSøknad.dokumentasjon.mangler')}</Label>
<Label>{formatMessage({ id: 'sisteSøknad.dokumentasjon.mangler' })}</Label>
<ul>
{søknad.manglendeVedlegg?.map((krav) => (
<li key={krav}>{formatMessage(`ettersendelse.vedleggstyper.${krav}.heading`)}</li>
<li key={krav}>{formatMessage({ id: `ettersendelse.vedleggstyper.${krav}.heading` })}</li>
))}
</ul>
</>
)}

<Button variant="primary" onClick={() => router.push(`/${søknad.søknadId}/ettersendelse/`)}>
{formatMessage('sisteSøknad.søknad.button.text')}
{formatMessage({ id: 'sisteSøknad.søknad.button.text' })}
</Button>
</Panel>
);
Expand Down
44 changes: 0 additions & 44 deletions lib/hooks/useFeatureToggleIntl.tsx

This file was deleted.

44 changes: 26 additions & 18 deletions pages/[uuid]/ettersendelse/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { LucaGuidePanel, ScanningGuide, Vedlegg } from '@navikt/aap-felles-react
import { GetServerSidePropsResult, NextPageContext } from 'next';
import PageHeader from 'components/PageHeader';
import { Section } from 'components/Section/Section';
import { useFeatureToggleIntl } from 'lib/hooks/useFeatureToggleIntl';
import { Søknad, VedleggType } from 'lib/types/types';
import * as styles from 'pages/[uuid]/ettersendelse/Ettersendelse.module.css';
import { getSøknad } from 'pages/api/soknader/[uuid]';
Expand All @@ -26,7 +25,7 @@ interface PageProps {
}

const Index = ({ søknad }: PageProps) => {
const { formatMessage, formatElement } = useFeatureToggleIntl();
const { formatMessage } = useIntl();
const { locale } = useIntl();

const [errors, setErrors] = useState<Error[]>([]);
Expand All @@ -49,15 +48,21 @@ const Index = ({ søknad }: PageProps) => {
<>
<Head>
<title>
{`${formatElement('ettersendelse.appTittel', {
shy: '',
})} - nav.no`}
{`${formatMessage(
{ id: 'ettersendelse.appTittel' },
{
shy: '',
}
)} - nav.no`}
</title>
</Head>
<PageHeader align="center" variant="guide">
{formatElement('ettersendelse.appTittel', {
shy: <>&shy;</>,
})}
{formatMessage(
{ id: 'ettersendelse.appTittel' },
{
shy: <>&shy;</>,
}
)}
</PageHeader>
<main className={styles.main}>
<Section>
Expand All @@ -68,31 +73,34 @@ const Index = ({ søknad }: PageProps) => {
</Link>
</NextLink>
<Heading level="2" size="large" spacing>
{formatMessage('ettersendelse.heading')}
{formatMessage({ id: 'ettersendelse.heading' })}
</Heading>
<LucaGuidePanel>
<BodyShort spacing>{formatMessage('ettersendelse.guide')}</BodyShort>
<BodyShort spacing>{formatMessage({ id: 'ettersendelse.guide' })}</BodyShort>
</LucaGuidePanel>
<Label>
{formatMessage('ettersendelse.gjeldendeSøknad', {
dateTime: formatFullDate(søknad.innsendtDato),
})}
{formatMessage(
{ id: 'ettersendelse.gjeldendeSøknad' },
{
dateTime: formatFullDate(søknad.innsendtDato),
}
)}
</Label>
{(manglendeVedlegg.length ?? 0) > 0 && (
<div className={styles?.manglendeVedlegg}>
<BodyShort spacing>{formatMessage('ettersendelse.manglerDokumentasjon')}</BodyShort>
<BodyShort spacing>{formatMessage({ id: 'ettersendelse.manglerDokumentasjon' })}</BodyShort>
<ul>
{manglendeVedlegg.map((krav) => (
<li key={krav}>
<Label>{formatMessage(`ettersendelse.vedleggstyper.${krav}.heading`)}</Label>
<Label>{formatMessage({ id: `ettersendelse.vedleggstyper.${krav}.heading` })}</Label>
</li>
))}
</ul>
</div>
)}
<div>
<BodyShort>{formatMessage('ettersendelse.slikTarDuBildeBeskrivelse')}</BodyShort>
<ReadMore header={formatMessage('ettersendelse.slikTarDuBilde')}>
<BodyShort>{formatMessage({ id: 'ettersendelse.slikTarDuBildeBeskrivelse' })}</BodyShort>
<ReadMore header={formatMessage({ id: 'ettersendelse.slikTarDuBilde' })}>
<ScanningGuide locale={locale} />
</ReadMore>
</div>
Expand Down Expand Up @@ -124,7 +132,7 @@ const Index = ({ søknad }: PageProps) => {
<Section>
<div>
<Button icon={<ArrowLeftIcon />} variant="tertiary" onClick={() => router.push('/')}>
{formatMessage('tilbakeTilMineAAPKnapp')}
{formatMessage({ id: 'tilbakeTilMineAAPKnapp' })}
</Button>
</div>
</Section>
Expand Down
Loading

0 comments on commit e48415e

Please sign in to comment.