Merge pull request #41 from navikt/version-latest

Versjonsvisning, siste versjon + ulik contentId

Author: talepre

README.md

@@ -42,6 +42,9 @@ npm run dev -C legacy-archive
 npm run dev -C xp-archive
 ```
 
+5. Relaterte applikasjoner
+   Vi bruker tjenester i nav-enonicxp for å hente ut innholdsinformasjon og nav-enonicxp-frontend for å rendre innholdet, så de må kjøres opp lokalt for å få hentet informasjon.
+
 ### Troubleshooting
 
 Hvis du har problemer med at css og js ikke laster ved første oppstart i dev-modus, prøv å start appen i prod-modus en gang og se om det løser problemet.
@@ -50,6 +53,8 @@ Hvis du har problemer med at css og js ikke laster ved første oppstart i dev-mo
 npm run start-local -C xp-archive
 ```
 
+Hvis iframes ikke vises, sjekk om du får cors-issues i srcdoc. Disse vil oppstå hvis du kjører nav-enonicxp-frontend i dev-modus og ikke i prod-modus.
+
 ## <a name="enonic-legacy"></a> Enonic CMS legacy arkiv (2006-2019)
 
 ### Oppsett for utvikling

xp-archive/client/contentHtmlView/ContentHtmlView.tsx

@@ -11,7 +11,7 @@ export const ContentHtmlView = ({ html }: Props) => {
     }
     return (
         <div className={style.content}>
-            <iframe srcDoc={html} title="my-iframe" className={style.iframe}></iframe>
+            <iframe srcDoc={html} className={style.iframe}></iframe>
         </div>
     );
 };

xp-archive/client/contentView/ContentView.tsx

@@ -26,11 +26,13 @@ const getDisplayComponent = (viewVariant: ViewVariant, data: ContentServiceRespo
 };
 
 export const ContentView = () => {
-    const { selectedContentId, selectedVersionId } = useAppState();
+    const { selectedContentId, selectedVersion } = useAppState();
+
+    const fetchId = selectedVersion?.nodeId ?? selectedContentId;
 
     const { data, isLoading } = useFetchContent({
-        id: selectedContentId || '',
-        versionId: selectedVersionId,
+        id: fetchId || '',
+        versionId: selectedVersion?.versionId ?? undefined,
     });
 
     const [selectedView, setSelectedView] = useState<ViewVariant>('json');

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

@@ -1,11 +1,14 @@
 import { createContext } from 'react';
+import { SelectedVersion } from './AppStateProvider';
 
 export type AppState = {
     selectedContentId?: string;
     setSelectedContentId: (contentId: string) => void;
-    selectedVersionId?: string;
-    setSelectedVersionId: (versionId: string) => void;
-
+    selectedVersion?: SelectedVersion;
+    setSelectedVersion: (selectedVersion: SelectedVersion | undefined) => void;
 };
 
-export const AppStateContext = createContext<AppState>({ setSelectedContentId: () => ({}), setSelectedVersionId: () => ({}) });
+export const AppStateContext = createContext<AppState>({
+    setSelectedContentId: () => ({}),
+    setSelectedVersion: () => ({}),
+});

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

@@ -1,27 +1,30 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { AppStateContext } from './AppStateContext';
 
 type Props = {
     children: React.ReactNode;
 };
 
+export type SelectedVersion = {
+    versionId: string;
+    nodeId?: string;
+};
+
 export const AppStateProvider = ({ children }: Props) => {
     const [selectedContentId, setSelectedContentId] = useState<string>();
-    const [selectedVersionId, setSelectedVersionId] = useState<string>();
+    const [selectedVersion, setSelectedVersion] = useState<SelectedVersion>();
 
-    const updateSelectedContentId = useCallback((selectedContentId: string) => {
-        setSelectedVersionId(undefined);
-        setSelectedContentId(selectedContentId);
-    }, []);
-    const setSelectedVersionIdMemoized = useCallback(setSelectedVersionId, [setSelectedVersionId]);
+    const setSelectedContentIdMemoized = useCallback(setSelectedContentId, [setSelectedContentId]);
+    const setSelectedVersionMemoized = useCallback(setSelectedVersion, [setSelectedVersion]);
+    const selectedVersionMemoized = useMemo(() => selectedVersion, [selectedVersion]);
 
     return (
         <AppStateContext.Provider
             value={{
                 selectedContentId,
-                setSelectedContentId: updateSelectedContentId,
-                selectedVersionId,
-                setSelectedVersionId: setSelectedVersionIdMemoized,
+                setSelectedContentId: setSelectedContentIdMemoized,
+                selectedVersion: selectedVersionMemoized,
+                setSelectedVersion: setSelectedVersionMemoized,
             }}
         >
             {children}

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

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

xp-archive/client/versionSelector/VersionSelector.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ChangeEvent } from 'react';
 import { Select } from '@navikt/ds-react';
 import { VersionReference } from 'shared/types';
 import { pruneString } from '@common/shared/pruneString';
@@ -10,18 +10,28 @@ type Props = {
 };
 
 export const VersionSelector = ({ versions }: Props) => {
-    const { selectedVersionId, setSelectedVersionId } = useAppState();
+    const { selectedVersion, setSelectedVersion } = useAppState();
 
     if (versions.length === 0) {
         return null;
     }
 
+    const selectVersion = (e: ChangeEvent<HTMLSelectElement>) => {
+        if (!e.target.value) {
+            setSelectedVersion(undefined);
+        }
+        const versionId = e.target.value;
+        const nodeId = versions.find((v) => v.versionId === versionId)?.nodeId;
+        setSelectedVersion({ nodeId, versionId });
+    };
+
     return (
         <Select
             label={'Versjoner'}
-            onChange={(e) => setSelectedVersionId(e.target.value)}
-            value={selectedVersionId ?? ''}
+            onChange={selectVersion}
+            value={selectedVersion?.versionId ?? ''}
         >
+            <option value={''}>Siste versjon</option>
             {versions.map((version) => (
                 <option key={version.versionId} value={version.versionId}>
                     {`${pruneString(version.displayName, 100)} - [${formatTimestamp(version.timestamp)}]`}