Merge pull request #42 from navikt/layers-selector

Layers selector

Author: talepre

xp-archive/client/contentTree/NavigationBar.tsx

@@ -1,22 +1,39 @@
 import React from 'react';
-import { Alert, Heading, Loader } from '@navikt/ds-react';
-import { useContentTree } from '../hooks/useContentTree';
-import { NavigationItem } from './contentTreeEntry/NavigationItem';
-import { SimpleTreeView } from '@mui/x-tree-view';
+import { Alert, Heading, Tabs } from '@navikt/ds-react';
+import { LayerPanel } from './layerPanel/LayerPanel';
+import { useAppState } from 'client/context/appState/useAppState';
+
+const locales = ['no', 'en', 'nn', 'se'] as const;
+export type Locale = (typeof locales)[number];
+
+const getLabel = (locale: Locale) => {
+    const translations: Record<Locale, string> = {
+        no: 'Norsk',
+        en: 'Engelsk',
+        nn: 'Nynorsk',
+        se: 'Samisk',
+    };
+    return translations[locale];
+};
 
 export const NavigationBar = () => {
-    const { data, isLoading } = useContentTree('/', 'no');
+    const { setSelectedLocale } = useAppState();
 
     return (
         <div>
             <Heading size={'small'}>{'Innhold'}</Heading>
-            {isLoading ? (
-                <Loader />
-            ) : (
-                <SimpleTreeView>
-                    {data?.children.map((entry) => <NavigationItem entry={entry} key={entry.id} />)}
-                </SimpleTreeView>
-            )}
+            <Tabs defaultValue="no" onChange={(locale) => setSelectedLocale(locale as Locale)}>
+                <Tabs.List>
+                    {locales.map((locale) => (
+                        <Tabs.Tab key={locale} value={locale} label={getLabel(locale)} />
+                    ))}
+                </Tabs.List>
+                {locales.map((locale) => (
+                    <Tabs.Panel key={locale} value={locale}>
+                        <LayerPanel locale={locale} />
+                    </Tabs.Panel>
+                ))}
+            </Tabs>
             <Alert variant={'warning'} size={'small'} inline={true} style={{ marginTop: '1.5rem' }}>
                 {'Obs: dette arkivet er under utvikling og er ikke klart til bruk!'}
             </Alert>

xp-archive/client/contentTree/layerPanel/LayerPanel.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Loader } from '@navikt/ds-react';
+import { useContentTree } from 'client/hooks/useContentTree';
+import { SimpleTreeView } from '@mui/x-tree-view';
+import { NavigationItem } from '../contentTreeEntry/NavigationItem';
+import { Locale } from '../NavigationBar';
+
+export const LayerPanel = ({ locale }: { locale: Locale }) => {
+    const { data, isLoading } = useContentTree('/', locale);
+
+    return (
+        <>
+            {isLoading ? (
+                <Loader />
+            ) : (
+                <SimpleTreeView>
+                    {data?.children.map((entry) => <NavigationItem entry={entry} key={entry.id} />)}
+                </SimpleTreeView>
+            )}
+        </>
+    );
+};

xp-archive/client/contentView/ContentView.tsx

@@ -26,12 +26,13 @@ const getDisplayComponent = (viewVariant: ViewVariant, data: ContentServiceRespo
 };
 
 export const ContentView = () => {
-    const { selectedContentId, selectedVersion } = useAppState();
+    const { selectedContentId, selectedLocale, selectedVersion } = useAppState();
 
     const fetchId = selectedVersion?.nodeId ?? selectedContentId;
 
     const { data, isLoading } = useFetchContent({
         id: fetchId || '',
+        locale: selectedLocale,
         versionId: selectedVersion?.versionId ?? undefined,
     });
 

xp-archive/client/context/appState/AppStateContext.ts

@@ -1,14 +1,19 @@
 import { createContext } from 'react';
 import { SelectedVersion } from './AppStateProvider';
+import { Locale } from 'client/contentTree/NavigationBar';
 
 export type AppState = {
     selectedContentId?: string;
     setSelectedContentId: (contentId: string) => void;
+    selectedLocale: Locale;
+    setSelectedLocale: (locale: Locale) => void;
     selectedVersion?: SelectedVersion;
     setSelectedVersion: (selectedVersion: SelectedVersion | undefined) => void;
 };
 
 export const AppStateContext = createContext<AppState>({
     setSelectedContentId: () => ({}),
+    selectedLocale: 'no',
+    setSelectedLocale: () => ({}),
     setSelectedVersion: () => ({}),
 });

xp-archive/client/context/appState/AppStateProvider.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { AppStateContext } from './AppStateContext';
+import { Locale } from 'client/contentTree/NavigationBar';
 
 type Props = {
     children: React.ReactNode;
@@ -12,9 +13,13 @@ export type SelectedVersion = {
 
 export const AppStateProvider = ({ children }: Props) => {
     const [selectedContentId, setSelectedContentId] = useState<string>();
+    const [selectedLocale, setSelectedLocale] = useState<Locale>('no');
     const [selectedVersion, setSelectedVersion] = useState<SelectedVersion>();
 
     const setSelectedContentIdMemoized = useCallback(setSelectedContentId, [setSelectedContentId]);
+
+    const setSelectedLocaleMemoized = useCallback(setSelectedLocale, [setSelectedLocale]);
+
     const setSelectedVersionMemoized = useCallback(setSelectedVersion, [setSelectedVersion]);
     const selectedVersionMemoized = useMemo(() => selectedVersion, [selectedVersion]);
 
@@ -25,6 +30,8 @@ export const AppStateProvider = ({ children }: Props) => {
                 setSelectedContentId: setSelectedContentIdMemoized,
                 selectedVersion: selectedVersionMemoized,
                 setSelectedVersion: setSelectedVersionMemoized,
+                selectedLocale,
+                setSelectedLocale: setSelectedLocaleMemoized,
             }}
         >
             {children}

xp-archive/client/context/appState/useAppState.ts

@@ -2,12 +2,20 @@ import { useContext } from 'react';
 import { AppStateContext } from './AppStateContext';
 
 export const useAppState = () => {
-    const { selectedContentId, selectedVersion, setSelectedContentId, setSelectedVersion } =
-        useContext(AppStateContext);
+    const {
+        selectedContentId,
+        selectedVersion,
+        selectedLocale,
+        setSelectedLocale,
+        setSelectedContentId,
+        setSelectedVersion,
+    } = useContext(AppStateContext);
 
     return {
         selectedContentId,
         selectedVersion,
+        selectedLocale,
+        setSelectedLocale,
         setSelectedContentId,
         setSelectedVersion,
     };

xp-archive/client/hooks/useFetchContent.ts

@@ -4,15 +4,15 @@ import { ContentServiceResponse } from '../../shared/types';
 
 const CONTENT_API = `${import.meta.env.VITE_APP_ORIGIN}/xp/api/content`;
 
-type FetchContentParams = { id: string; versionId?: string };
+type FetchContentParams = { id: string; locale: string; versionId?: string };
 
 const fetchContent = async (params: FetchContentParams) => {
     if (!params.id) return;
     return fetchJson<ContentServiceResponse>(CONTENT_API, {
-        params: { ...params, locale: 'no' },
+        params,
     });
 };
 
-export const useFetchContent = ({ id, versionId }: FetchContentParams) => {
-    return useSWRImmutable({ id, versionId }, fetchContent);
+export const useFetchContent = ({ id, locale, versionId }: FetchContentParams) => {
+    return useSWRImmutable({ id, locale, versionId }, fetchContent);
 };