refactor localization: include translations in build (instead of load…

…ing them) + remove extra common namespace (#956)

src/components/CollectionBar/CollectionBar.tsx

@@ -35,7 +35,7 @@ export const CollectionBar = ({
   proceedToPath,
   disabledProceedButton,
 }: CollectionBarProps) => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const navigate = useNavigate();
 
   const proceedClick = () => {

src/components/CompactDeletableListItem/CompactDeletableListItem.tsx

@@ -32,7 +32,7 @@ export const CompactDeletableListItem = ({
   startIcon,
   contentColor = ListTextColor.primary,
 }: CompactDeletableListItemProps) => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const isSm = useMediaQuery('(max-width: 768px)');
 
   return (

src/components/DeletableListItem/DeletableListItem.tsx

@@ -28,7 +28,7 @@ export const DeletableListItem = ({
   isEditable,
   scopes,
 }: DeletableListItemProps) => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const isSm = useMediaQuery('(max-width: 768px)');
 
   const isEditableActions = (

src/components/ErrorPanel/ErrorPanel.tsx

@@ -11,7 +11,7 @@ export interface ErrorPanelProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 export const ErrorPanel = ({ title, message, statusCode, ...props }: ErrorPanelProps) => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   const currentDate = new Date();
 

src/components/Filter/Filter.tsx

@@ -93,7 +93,7 @@ export const Filter = ({
   const [checkedFilters, setCheckedFilters] = useState<string[]>(values ?? []);
   const [hasChanges, setHasChanges] = useState(false);
   const filterButtonID = useId();
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   // Update selected values when there are external changes
   const prevvalues = usePrevious(values);

src/components/Filter/OptionDisplay.tsx

@@ -49,7 +49,7 @@ export const OptionDisplay = ({
 }: OptionDisplayProps) => {
   const [selectedValues, setSelectedValues] = useState<string[]>(values ?? []);
   const [sortedOptions, setSortedOptions] = useState<FilterOption[]>(options);
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   // Update selected values when there are external changes
   const prevvalues = usePrevious(values);

src/components/PageContainer/PageContainer.tsx

@@ -13,7 +13,7 @@ export interface PageContainerProps {
 }
 
 export const PageContainer = ({ children }: PageContainerProps) => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   return (
     <div className={classes.background}>

src/components/RestartPrompter/RestartPrompter.tsx

@@ -29,7 +29,7 @@ export const RestartPrompter = ({
   restartPath,
 }: RestartPrompterProps) => {
   const navigate = useNavigate();
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   return (
     <Alert

src/features/amUI/users/UsersPage.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { PageWrapper } from '@/components';
 
 export const UsersPage = () => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   useDocumentTitle(t('users_page.page_title'));
   return <PageWrapper>Hello world!</PageWrapper>;
 };

src/features/apiDelegation/components/ApiActionBar/ApiActionBar.tsx

@@ -40,7 +40,7 @@ export const ApiActionBar = ({
   const [actionBarColor, setActionBarColor] = useState<'success' | 'danger' | 'neutral'>(
     variant === 'remove' ? 'success' : 'neutral',
   );
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const resourceRef: ResourceReference = { resource: api.authorizationReference };
   const partyId = getCookie('AltinnPartyId');
 

src/features/apiDelegation/components/OverviewPageContent/OrgDelegationActionBar/OrgDelegationActionBar.tsx

@@ -32,7 +32,7 @@ export const OrgDelegationActionBar = ({
   setScreenreaderMsg,
 }: OrgDelegationActionBarProps) => {
   const [open, setOpen] = useState(false);
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const numberOfAccesses = organization.apiList.length.toString();
   const dispatch = useAppDispatch();
   const isSm = useMediaQuery('(max-width: 768px)');

src/features/apiDelegation/components/OverviewPageContent/OverviewPageContent.tsx

@@ -41,7 +41,7 @@ export const OverviewPageContent = ({
 }: OverviewPageContentInterface) => {
   const [saveDisabled, setSaveDisabled] = useState(false);
   const [isEditable, setIsEditable] = useState(false);
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
   const overviewOrgs = useAppSelector((state) => state.overviewOrg.overviewOrgs);

src/features/apiDelegation/offered/ChooseApiPage/ApiSearchResult.tsx

@@ -31,7 +31,7 @@ export const ApiSearchResults = ({
   chosenApis,
   addApi,
 }: ApiSearchResultsProps) => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   const { statusMessage, unchosenApis } = useMemo(() => {
     const unchosenApis = searchResults?.filter(

src/features/apiDelegation/offered/ChooseApiPage/ChooseApiPage.tsx

@@ -39,7 +39,7 @@ export const ChooseApiPage = () => {
   const [showSkeleton, setShowSkeleton] = useState(true);
   const [filters, setFilters] = useState<string[]>([]);
   const isSm = useMediaQuery('(max-width: 768px)');
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const partyId = getCookie('AltinnPartyId');
   const navigate = useNavigate();
   const [urlParams, setUrlParams] = useSearchParams();

src/features/apiDelegation/offered/ChooseOrgPage/ChooseOrgInfoPanel.tsx

@@ -20,7 +20,7 @@ export const ChooseOrgInfoPanel = ({
   searchOrgNotExist,
   searchLoading,
 }: InfoPanelProps) => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const reporteeOrgNumber = useAppSelector((state) => state.userInfo.reporteeOrgNumber);
   if (reporteeOrgNumber === searchString && searchString.length > 0) {
     return (

src/features/apiDelegation/offered/ChooseOrgPage/ChooseOrgPage.tsx

@@ -36,7 +36,7 @@ export const ChooseOrgPage = () => {
   const [chosenItemsStatusMessage, setChosenItemsStatusMessage] = useState('');
   const navigate = useNavigate();
 
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   const { matches: displayOrgs, error, isFetching } = useOrgSearch(overviewOrgs, searchString);
 

src/features/apiDelegation/offered/ChooseOrgPage/ChosenItems.tsx

@@ -22,7 +22,7 @@ export const ChosenItems = ({
   handleSoftRemove,
   setChosenItemsStatusMessage,
 }: ChosenItemsProps) => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   return (
     <ul className={common.unstyledList}>
       {chosenOrgs.map((org: Organization, index: Key | null | undefined) => {

src/features/apiDelegation/offered/ChooseOrgPage/DelegableOrgItems.tsx

@@ -22,7 +22,7 @@ export const DelegableOrgItems = ({
   setChosenItemsStatusMessage,
 }: DelegatableOrgItemsProps) => {
   const dispatch = useAppDispatch();
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   return (
     <ul className={common.unstyledList}>

src/features/apiDelegation/offered/ConfirmationPage/ConfirmationPage.tsx

@@ -42,7 +42,7 @@ export const ConfirmationPage = () => {
   const loading = useAppSelector((state) => state.delegationRequest.loading);
   const [isProcessingDelegations, setIsProcessingDelegations] = useState(false);
   const isSm = useMediaQuery('(max-width: 768px)');
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
   useDocumentTitle(t('api_delegation.delegate_page_title'));

src/features/apiDelegation/offered/OverviewPage/OverviewPage.tsx

@@ -10,7 +10,7 @@ import { OverviewPageContent } from '../../components/OverviewPageContent';
 import { LayoutState } from '../../components/LayoutState';
 
 export const OverviewPage = () => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const isSm = useMediaQuery('(max-width: 768px)');
   useDocumentTitle(t('api_delegation.delegate_page_title'));
 

src/features/apiDelegation/offered/ReceiptPage/ReceiptPage.tsx

@@ -31,7 +31,7 @@ export const ReceiptPage = () => {
   const successfulApiDelegations = useAppSelector(
     (state) => state.delegationRequest.succesfulApiDelegations,
   );
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const isSm = useMediaQuery('(max-width: 768px)');
   const navigate = useNavigate();

src/features/apiDelegation/received/OverviewPage/OverviewPage.tsx

@@ -10,7 +10,7 @@ import { OverviewPageContent } from '../../components/OverviewPageContent';
 import { LayoutState } from '../../components/LayoutState';
 
 export const OverviewPage = () => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const isSm = useMediaQuery('(max-width: 768px)');
   useDocumentTitle(t('api_delegation.received_page_title'));
 

src/features/singleRight/components/RecipientErrorAlert/RecipientErrorAlert.tsx

@@ -8,7 +8,7 @@ type RecipientErrorAlertProps = {
 };
 
 export const RecipientErrorAlert = ({ userUUID, partyUUID }: RecipientErrorAlertProps) => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   if (!userUUID && !partyUUID) {
     return (

src/features/singleRight/components/ResourceActionBar/ResourceActionBar.tsx

@@ -45,7 +45,7 @@ export const ResourceActionBar = ({
   compact = false,
   isLoading = false,
 }: ResourceActionBarProps) => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const [open, setOpen] = useState(false);
 
   const previousStatus = usePrevious(status);

src/features/singleRight/components/ResourceCollectionBar/ResourceCollectionBar.tsx

@@ -41,7 +41,7 @@ export const ResourceCollectionBar = ({
   onRemove,
   compact = false,
 }: ResourceCollectionBarProps) => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   const selectedResourcesActionBars = resources.map((resource, index) => (
     <ActionBar

src/features/singleRight/components/SearchSection/SearchSection.tsx

@@ -44,7 +44,7 @@ export interface SearchSectionParams {
 const searchResultsPerPage = 10;
 
 export const SearchSection = ({ onAdd, onUndo }: SearchSectionParams) => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const isSm = useMediaQuery('(max-width: 768px)');
   const [filters, setFilters] = useState<string[]>([]);
   const [searchString, setSearchString] = useState('');

src/features/singleRight/delegate/ChooseRightsPage/ChooseRightsPage.tsx

@@ -54,7 +54,7 @@ type Service = {
 };
 
 export const ChooseRightsPage = () => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
   const [urlParams] = useSearchParams();

src/features/singleRight/delegate/ChooseRightsPage/RightsActionBar/RightsActionBar.tsx

@@ -25,7 +25,7 @@ export const RightsActionBar = ({
   defaultOpen,
   compact = false,
 }: RightsActionBarProps) => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   const removeButton = (
     <Button

src/features/singleRight/delegate/ChooseRightsPage/RightsActionBarContent/RightsActionBarContent.tsx

@@ -48,7 +48,7 @@ export const RightsActionBarContent = ({
   serviceIdentifier,
   serviceType,
 }: RightsActionBarContentProps) => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const hasUndelegableRights =
     rights.some((r) => r.delegable === false) && serviceType !== 'AltinnApp';
   const [errorList, setErrorList] = useState<string[]>([]);

src/features/singleRight/delegate/ChooseServicePage/ChooseServicePage.tsx

@@ -29,7 +29,7 @@ import classes from './ChooseServicePage.module.css';
 import { NavigationSection } from '../../components/NavigationSection/NavigationSection';
 
 export const ChooseServicePage = () => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const isSm = useMediaQuery('(max-width: 768px)');
   const dispatch = useAppDispatch();

src/features/singleRight/request/ChooseServicePage/ChooseServicePage.tsx

@@ -23,7 +23,7 @@ import { NavigationSection } from '../../components/NavigationSection/Navigation
 import classes from './ChooseServicePage.module.css';
 
 export const ChooseServicePage = () => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const isSm = useMediaQuery('(max-width: 768px)');
   const dispatch = useAppDispatch();
   const reporteeName = useAppSelector((state) => state.userInfo.reporteeName);

src/main.jsx

@@ -1,19 +1,20 @@
 /* eslint-disable @typescript-eslint/no-floating-promises */
-import * as React from 'react';
-import * as ReactDOM from 'react-dom/client';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { RouterProvider } from 'react-router-dom';
 import { initReactI18next } from 'react-i18next';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { use } from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
-
+import no_nb from './localizations/no_nb.json';
+import no_nn from './localizations/no_nn.json';
+import en from './localizations/en.json';
 import { RefreshToken } from '@/resources/Token/RefreshToken';
 import { Router } from '@/routes/Router/Router';
 
 import { getConfig } from '../config';
 
-import LoadLocalizations from './resources/LoadLocalizations';
 import store from './rtk/app/store';
 
 import '@digdir/designsystemet-css';
@@ -31,33 +32,31 @@ const queryClientDevDefaults = {
 // Initialise i18next; start application when ready
 use(LanguageDetector)
   .use(initReactI18next)
-  .init(
-    {
-      fallbackLng: getConfig('defaultLocale'),
-      ns: ['common'],
-      defaultNS: 'common',
-      returnNull: false,
-    },
-
-    () => {
-      // Configure react-query
-      const queryClient = new QueryClient({
-        defaultOptions: import.meta.env.DEV ? queryClientDevDefaults : undefined,
-      });
-
-      ReactDOM.createRoot(document.getElementById('root')).render(
-        // if you ever wonder why the components render twice it's because of React.StrictMode
-        // comment it out if it causes trouble: https://react.dev/reference/react/StrictMode
-        <React.StrictMode>
-          <Provider store={store}>
-            <QueryClientProvider client={queryClient}>
-              <LoadLocalizations>
-                <RefreshToken />
-                <RouterProvider router={Router}></RouterProvider>
-              </LoadLocalizations>
-            </QueryClientProvider>
-          </Provider>
-        </React.StrictMode>,
-      );
+  .init({
+    resources: {
+      no_nb: { translation: no_nb },
+      no_nn: { translation: no_nn },
+      en: { translation: en },
     },
-  );
+    fallbackLng: getConfig('defaultLocale'),
+    keySeparator: '.',
+    returnNull: false,
+  });
+
+// Configure react-query
+const queryClient = new QueryClient({
+  defaultOptions: import.meta.env.DEV ? queryClientDevDefaults : undefined,
+});
+
+createRoot(document.getElementById('root')).render(
+  // if you ever wonder why the components render twice it's because of React.StrictMode
+  // comment it out if it causes trouble: https://react.dev/reference/react/StrictMode
+  <React.StrictMode>
+    <Provider store={store}>
+      <QueryClientProvider client={queryClient}>
+        <RefreshToken />
+        <RouterProvider router={Router}></RouterProvider>
+      </QueryClientProvider>
+    </Provider>
+  </React.StrictMode>,
+);