Merge pull request #45 from navikt/files-download

Files download

Author: talepre

xp-archive/client/contentFilesView/ContentFilesView.tsx

@@ -3,16 +3,10 @@ import { collapseAllNested, JsonView } from 'react-json-view-lite';
 import { Content } from 'shared/types';
 import 'react-json-view-lite/dist/index.css';
 
-import style from './ContentJsonView.module.css';
-
 type Props = {
     json: Content;
 };
 
 export const ContentJsonView = ({ json }: Props) => {
-    return (
-        <div className={style.wrapper}>
-            <JsonView data={json} clickToExpandNode={true} shouldExpandNode={collapseAllNested} />
-        </div>
-    );
+    return <JsonView data={json} clickToExpandNode={true} shouldExpandNode={collapseAllNested} />;
 };

xp-archive/client/contentHtmlView/ContentHtmlView.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { HtmlView } from './htmlView/HtmlView';
+import { Content } from 'shared/types';
+import { FilePreviewWrapper } from './filePreview/FilePreviewWrapper';
+
+type Props = {
+    html: string | undefined;
+    content: Content;
+};
+
+export const ContentPreview = ({ html, content }: Props) => {
+    if (content.attachment) {
+        return (
+            <FilePreviewWrapper
+                name={content.attachment.name}
+                id={content._id}
+                versionId={content._versionKey}
+            />
+        );
+    }
+
+    if (html) {
+        return <HtmlView html={html} />;
+    }
+
+    return <div>Ingenting å forhåndsvise</div>;
+};

xp-archive/client/contentJsonView/ContentJsonView.module.css

@@ -0,0 +1,11 @@
+
+.iframe {
+  height: 100%;
+  width: 100%;
+  border: none;
+}
+
+.image {
+  max-width:100%;
+  min-width: 10rem;
+}

xp-archive/client/contentJsonView/contentJsonView.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Link } from '@navikt/ds-react';
+import { DownloadIcon } from '@navikt/aksel-icons';
+import { FileResponse } from '@common/shared/fetchUtils';
+import style from './FilePreview.module.css';
+
+const iframeFiletype = ['application/pdf'];
+const imageFiletype = ['image/png', 'image/jpeg', 'image/svg+xml'];
+
+type Props = {
+    name: string;
+    file: FileResponse;
+};
+
+export const FilePreview = ({ name, file }: Props) => {
+    const blob = new Blob([file.data], { type: file.mimeType });
+    const blobURL = URL.createObjectURL(blob);
+
+    if (iframeFiletype.includes(file.mimeType)) {
+        return <iframe className={style.iframe} src={blobURL} title={name} />;
+    }
+
+    return (
+        <>
+            {imageFiletype.includes(file.mimeType) ? (
+                <img className={style.image} alt="" src={blobURL} />
+            ) : null}
+            <div>
+                <Link href={blobURL} target={'_blank'}>
+                    {name} <DownloadIcon title="Last ned fil" />
+                </Link>
+            </div>
+        </>
+    );
+};

xp-archive/client/contentPreview/ContentPreview.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Loader } from '@navikt/ds-react';
+import { useAppState } from 'client/context/appState/useAppState';
+import { useFetchAttachment } from 'client/hooks/useFetchAttachment';
+import { FilePreview } from './FilePreview';
+
+type Props = {
+    name: string;
+    id: string;
+    versionId: string;
+};
+
+export const FilePreviewWrapper = ({ name, id, versionId }: Props) => {
+    const { selectedLocale } = useAppState();
+
+    const { data, isLoading } = useFetchAttachment({
+        id,
+        versionId,
+        locale: selectedLocale,
+    });
+
+    return (
+        <>
+            {isLoading ?? <Loader />}
+            {data && <FilePreview name={name} file={data} />}
+        </>
+    );
+};

xp-archive/client/contentPreview/filePreview/FilePreview.module.css

@@ -1,6 +1,3 @@
-.content {
-  height: 100%;
-}
 
 .iframe {
   height: 100%;

xp-archive/client/contentPreview/filePreview/FilePreview.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import style from './HtmlView.module.css';
+
+type Props = {
+    html: string;
+};
+
+export const HtmlView = ({ html }: Props) => {
+    return <iframe title={'HTML-visning'} srcDoc={html} className={style.iframe}></iframe>;
+};

xp-archive/client/contentPreview/filePreview/FilePreviewWrapper.tsx

@@ -21,6 +21,14 @@ export const NavigationBar = () => {
 
     return (
         <div>
+            <Alert
+                variant={'warning'}
+                size={'small'}
+                inline={true}
+                style={{ marginBottom: '1rem' }}
+            >
+                {'Obs: dette arkivet er under utvikling og er ikke klart til bruk!'}
+            </Alert>
             <Heading size={'small'}>{'Innhold'}</Heading>
             <Tabs defaultValue="no" onChange={(locale) => setSelectedLocale(locale as Locale)}>
                 <Tabs.List>
@@ -34,9 +42,6 @@ export const NavigationBar = () => {
                     </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>
         </div>
     );
 };

xp-archive/client/contentHtmlView/ContentHtmlView.module.css xp-archive/client/contentPreview/htmlView/HtmlView.module.css

@@ -6,4 +6,10 @@
 .top {
   display: flex;
   justify-content: space-between;
+  gap: 1.5rem;
+}
+
+.main {
+  height: 100%;
+  margin-top: 1rem;
 }

xp-archive/client/contentPreview/htmlView/HtmlView.tsx

@@ -3,26 +3,19 @@ import { useFetchContent } from '../hooks/useFetchContent';
 import { Heading, Loader } from '@navikt/ds-react';
 import { useAppState } from '../context/appState/useAppState';
 import { ViewSelector, ViewVariant } from 'client/viewSelector/ViewSelector';
-import { ContentHtmlView } from 'client/contentHtmlView/ContentHtmlView';
+import { ContentPreview } from 'client/contentPreview/ContentPreview';
 import { ContentJsonView } from 'client/contentJsonView/contentJsonView';
-import { ContentFilesView } from 'client/contentFilesView/ContentFilesView';
 import { VersionSelector } from 'client/versionSelector/VersionSelector';
 import { ContentServiceResponse } from 'shared/types';
 
 import style from './ContentView.module.css';
 
-const getDefaultView = (data: ContentServiceResponse | null | undefined): ViewVariant => {
-    if (data?.html) return 'html';
-    return 'json';
-};
-
 const getDisplayComponent = (viewVariant: ViewVariant, data: ContentServiceResponse) => {
-    const translations: Record<ViewVariant, React.ReactElement> = {
-        html: <ContentHtmlView html={data.html} />,
+    const components: Record<ViewVariant, React.ReactElement> = {
+        preview: <ContentPreview html={data.html} content={data.json} />,
         json: <ContentJsonView json={data.json} />,
-        files: <ContentFilesView />,
     };
-    return translations[viewVariant];
+    return components[viewVariant];
 };
 
 export const ContentView = () => {
@@ -36,11 +29,12 @@ export const ContentView = () => {
         versionId: selectedVersion?.versionId ?? undefined,
     });
 
-    const [selectedView, setSelectedView] = useState<ViewVariant>('json');
+    const hasPreview = !!data?.html || !!data?.json.attachment;
+    const [selectedView, setSelectedView] = useState<ViewVariant>('preview');
 
     useEffect(() => {
-        setSelectedView(getDefaultView(data));
-    }, [data]);
+        setSelectedView(hasPreview ? 'preview' : 'json');
+    }, [hasPreview]);
 
     if (isLoading) {
         return <Loader />;
@@ -56,12 +50,12 @@ export const ContentView = () => {
                             <ViewSelector
                                 selectedView={selectedView}
                                 setSelectedView={setSelectedView}
-                                hasHtml={!!data.html}
+                                hasPreview={hasPreview}
                             />
                         </div>
                         <VersionSelector versions={data.versions} />
                     </div>
-                    {getDisplayComponent(selectedView, data)}
+                    <div className={style.main}>{getDisplayComponent(selectedView, data)}</div>
                 </div>
             ) : null}
         </>

xp-archive/client/contentTree/NavigationBar.tsx

@@ -0,0 +1,17 @@
+import { fetchFile } from '@common/shared/fetchUtils';
+import useSWRImmutable from 'swr/immutable';
+
+const ATTACHMENT_API = `${import.meta.env.VITE_APP_ORIGIN}/xp/api/attachment`;
+
+type FetchAttachmentParams = { id: string; locale: string; versionId: string };
+
+const fetchAttachment = async (params: FetchAttachmentParams) => {
+    if (!params.id) return;
+    return fetchFile(ATTACHMENT_API, {
+        params,
+    });
+};
+
+export const useFetchAttachment = ({ id, locale, versionId }: FetchAttachmentParams) => {
+    return useSWRImmutable({ id, locale, versionId }, fetchAttachment);
+};

xp-archive/client/contentView/ContentView.module.css

@@ -2,28 +2,27 @@ import React from 'react';
 import { ToggleGroup } from '@navikt/ds-react';
 import style from './ViewSelector.module.css';
 
-const viewVariants = ['html', 'json', 'files'] as const;
+const viewVariants = ['preview', 'json'] as const;
 export type ViewVariant = (typeof viewVariants)[number];
 
 const getDisplayname = (viewVariant: ViewVariant) => {
     const translations: Record<ViewVariant, string> = {
-        html: 'Nettside',
+        preview: 'Forhåndsvisning',
         json: 'JSON',
-        files: 'Filer',
     };
     return translations[viewVariant];
 };
 
 type Props = {
     selectedView: ViewVariant;
     setSelectedView(selectedView: ViewVariant): void;
-    hasHtml: boolean;
+    hasPreview: boolean;
 };
 
-export const ViewSelector = ({ selectedView, setSelectedView, hasHtml }: Props) => {
+export const ViewSelector = ({ selectedView, setSelectedView, hasPreview }: Props) => {
     const updateSelectedView = (viewVariantString: string) => {
         const viewVariant = viewVariantString as ViewVariant;
-        if (viewVariant === 'html' && !hasHtml) {
+        if (viewVariant === 'preview' && !hasPreview) {
             return;
         }
         setSelectedView(viewVariant);
@@ -35,7 +34,7 @@ export const ViewSelector = ({ selectedView, setSelectedView, hasHtml }: Props)
                 <ToggleGroup.Item
                     key={view}
                     value={view}
-                    className={`${view === 'html' && !hasHtml ? style.disabled : ''}`}
+                    className={`${view === 'preview' && !hasPreview ? style.disabled : ''}`}
                 >
                     {getDisplayname(view)}
                 </ToggleGroup.Item>