♻️ Fjerner onChange og legger til onUpload og onDelete

navikt · Sep 29, 2023 · 3859580 · 3859580
1 parent e97129f
commit 3859580
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 37 deletions.
diff --git a/packages/aap-felles-react/src/FileInput/FileInput.stories.tsx b/packages/aap-felles-react/src/FileInput/FileInput.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, StoryFn } from '@storybook/react';
 
-import { FileInput, FileInputProps, Vedlegg } from './FileInput';
+import { FileInput, FileInputProps, Attachment } from './FileInput';
 import React, { useState } from 'react';
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
@@ -10,16 +10,17 @@ export default {
 } as Meta;
 
 export const Primary: StoryFn<FileInputProps> = (args) => {
-  const [files, setFiles] = useState<Vedlegg[]>([]);
+  const [files, setFiles] = useState<Attachment[]>([]);
   return (
     <FileInput
       {...args}
       heading={'Annen dokumentasjon'}
-      ingress={'Du kan laste opp flere filer.'}
       id={'filopplasting'}
-      uploadUrl={'/test'}
+      uploadUrl={'/upload'}
+      deleteUrl={'/delete'}
+      onUpload={(attachments) => setFiles([...files, ...attachments])}
+      onDelete={(attachment) => setFiles(files.filter((file) => file.id !== attachment.id))}
       files={files}
-      setFiles={setFiles}
     />
   );
 };
diff --git a/packages/aap-felles-react/src/FileInput/FileInput.test.tsx b/packages/aap-felles-react/src/FileInput/FileInput.test.tsx
@@ -1,7 +1,7 @@
 import { enableFetchMocks } from 'jest-fetch-mock';
 import { v4 as uuidV4 } from 'uuid';
 import React, { ReactElement, useState } from 'react';
-import { FileInput, FileInputProps, Vedlegg } from './FileInput';
+import { FileInput, FileInputProps, Attachment } from './FileInput';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 
 import userEvent from '@testing-library/user-event';
@@ -206,18 +206,23 @@ describe('FileInput', () => {
 });
 
 export function FileInputWithState(
-  props: Omit<FileInputProps, 'setFiles' | 'uploadUrl' | 'heading' | 'id'>
+  props: Omit<
+    FileInputProps,
+    'onChange' | 'uploadUrl' | 'heading' | 'id' | 'deleteUrl' | 'onUpload' | 'onDelete' | 'files'
+  >
 ): ReactElement {
-  const [files, setFiles] = useState<Vedlegg[]>([]);
+  const [files, setFiles] = useState<Attachment[]>([]);
 
   return (
     <FileInput
+      {...props}
       heading={heading}
       id={'filopplasting'}
-      uploadUrl={'/test'}
+      uploadUrl={'/upload'}
+      deleteUrl={'/delete'}
+      onUpload={(attachments) => setFiles([...files, ...attachments])}
+      onDelete={(attachment) => setFiles(files.filter((file) => file.id !== attachment.id))}
       files={files}
-      setFiles={setFiles}
-      {...props}
     />
   );
 }

diff --git a/packages/aap-felles-react/src/FileInput/FileInput.tsx b/packages/aap-felles-react/src/FileInput/FileInput.tsx
@@ -1,5 +1,5 @@
-import { BodyShort, Heading } from '@navikt/ds-react';
-import React, { Dispatch, InputHTMLAttributes, useMemo, useRef, useState } from 'react';
+import { BodyShort, Heading, Loader } from '@navikt/ds-react';
+import React, { InputHTMLAttributes, useMemo, useRef, useState } from 'react';
 import { v4 as uuidV4 } from 'uuid';
 import { UploadIcon } from '@navikt/aksel-icons';
 import { FilePanelError } from './FilePanelError';
@@ -8,20 +8,22 @@ import { FilePanelSuccess } from './FilePanelSuccess';
 export interface FileInputProps extends InputHTMLAttributes<HTMLInputElement> {
   heading: string;
   id: string;
-  setFiles: Dispatch<Vedlegg[]>;
+  onUpload: (attachments: Attachment[]) => void;
+  onDelete: (attachment: Attachment) => void;
+  deleteUrl: string;
   uploadUrl: string;
-  files?: Vedlegg[];
+  files: Attachment[];
   ingress?: string;
 }
 
-export interface Vedlegg extends File {
+export interface Attachment extends File {
   id: string;
   errorMessage?: string;
 }
 
 const MAX_TOTAL_FILE_SIZE = 52428800; // 50mb
 export const FileInput = (props: FileInputProps) => {
-  const { heading, ingress, files = [], setFiles, uploadUrl, id, ...rest } = props;
+  const { heading, ingress, files, onUpload, onDelete, uploadUrl, deleteUrl, id, ...rest } = props;
   const [dragOver, setDragOver] = useState<boolean>(false);
   const [isUploading, setIsUploading] = useState<boolean>(false);
   const fileInputElement = useRef<HTMLInputElement>(null);
@@ -41,7 +43,7 @@ export const FileInput = (props: FileInputProps) => {
 
   async function validateAndSetFiles(filelist: FileList) {
     setIsUploading(true);
-    const uploadedFiles: Vedlegg[] = await Promise.all(
+    const uploadedFiles: Attachment[] = await Promise.all(
       Array.from(filelist).map(async (file) => {
         const internalErrorMessage = internalValidate(file);
         let uploadResult = {
@@ -73,7 +75,7 @@ export const FileInput = (props: FileInputProps) => {
     );
 
     setIsUploading(false);
-    setFiles([...files, ...uploadedFiles]);
+    onUpload(uploadedFiles);
   }
 
   return (
@@ -82,22 +84,14 @@ export const FileInput = (props: FileInputProps) => {
       {ingress && <BodyShort>{ingress}</BodyShort>}
       {files?.map((file) => {
         if (file.errorMessage) {
-          return (
-            <FilePanelError
-              file={file}
-              key={file.id}
-              onDelete={() => {
-                setFiles(files.filter((fileInMap) => fileInMap.id !== file.id));
-              }}
-            />
-          );
+          return <FilePanelError file={file} key={file.id} deleteUrl={deleteUrl} onDelete={() => onDelete(file)} />;
         } else {
           return (
             <FilePanelSuccess
               file={file}
               key={file.id}
               onDelete={() => {
-                setFiles(files.filter((fileInMap) => fileInMap.id !== file.id));
+                onDelete(file);
               }}
             />
           );
@@ -116,8 +110,7 @@ export const FileInput = (props: FileInputProps) => {
         }}
       >
         {isUploading ? (
-          // <Loader title={'Laster'} />
-          <div>JEG LASTER</div>
+          <Loader title={'Laster'} />
         ) : (
           <>
             <input

diff --git a/packages/aap-felles-react/src/FileInput/FilePanelError.tsx b/packages/aap-felles-react/src/FileInput/FilePanelError.tsx
@@ -1,14 +1,15 @@
 import { BodyShort, Label, Panel } from '@navikt/ds-react';
 import { ArrowUndoIcon, FileTextIcon } from '@navikt/aksel-icons';
 import React from 'react';
-import { Vedlegg } from './FileInput';
+import { Attachment } from './FileInput';
 
 interface Props {
-  file: Vedlegg;
+  file: Attachment;
+  deleteUrl: string;
   onDelete: () => void;
 }
 
-export const FilePanelError = ({ file, onDelete }: Props) => {
+export const FilePanelError = ({ file, onDelete, deleteUrl }: Props) => {
   return (
     <>
       <Panel className={'fileCard error'} tabIndex={0}>
@@ -20,7 +21,17 @@ export const FilePanelError = ({ file, onDelete }: Props) => {
             <Label as={'span'}>{file.name}</Label>
           </div>
         </div>
-        <button type={'button'} onClick={onDelete} tabIndex={0} className={'deleteAttachment'}>
+        <button
+          type={'button'}
+          onClick={async () => {
+            const res = await fetch(`${deleteUrl}${file.id}`, { method: 'DELETE' });
+            if (res.ok) {
+              onDelete();
+            }
+          }}
+          tabIndex={0}
+          className={'deleteAttachment'}
+        >
           <ArrowUndoIcon title={'Avbryt'} />
           <BodyShort>{'Avbryt'}</BodyShort>
         </button>

diff --git a/packages/aap-felles-react/src/FileInput/FilePanelSuccess.tsx b/packages/aap-felles-react/src/FileInput/FilePanelSuccess.tsx
@@ -1,10 +1,10 @@
 import { CheckmarkIcon, XMarkIcon } from '@navikt/aksel-icons';
 import { BodyShort, Detail, Link, Panel } from '@navikt/ds-react';
 import React from 'react';
-import { Vedlegg } from './FileInput';
+import { Attachment } from './FileInput';
 
 interface Props {
-  file: Vedlegg;
+  file: Attachment;
   onDelete: () => void;
 }