removing duplicate code from filehandling

NextJSApp/frontend/components/fileupload/filehandling.tsx

@@ -15,6 +15,8 @@ import {Skeleton} from "@mui/joy";
 import Chip from "@mui/joy/Chip";
 import Divider from "@mui/joy/Divider";
 import LoadingButton from "@mui/lab/LoadingButton";
+import {DropzoneLogic} from "@/components/fileupload/dropzone";
+import {FileDisplay} from "@/components/fileupload/filelist";
 
 /** COMPONENT STORAGE FOR FILE UPLOAD FUNCTIONS
  *
@@ -26,132 +28,6 @@ import LoadingButton from "@mui/lab/LoadingButton";
  * - Filehandling: core logic for file upload/api fire
  */
 
-/**
- * A simple list of files with their sizes.
- */
-export function FileDisplay({acceptedFiles}: FileListProps) {
-  const [currentPage, setCurrentPage] = React.useState(1);
-  const handleChange = (event: React.ChangeEvent<unknown>, value: number) => {
-    setCurrentPage(value);
-  };
-  return (
-    <>
-      <Card className={"flex flex-1 justify-center w-auto"}>
-        <CardHeader>
-          File Preview:
-        </CardHeader>
-        <CardContent>
-          <Skeleton loading={acceptedFiles?.length > 0} className={"rounded-lg"}>
-            <div className={"flex flex-1 flex-col h-auto rounded-lg"}>
-              <div>
-                File Name: <br/>
-                <Chip
-                  color={"primary"}>{(acceptedFiles?.length > 0 && acceptedFiles[currentPage - 1].path) ? acceptedFiles[currentPage - 1].path! : ''}</Chip>
-              </div>
-              <Divider className={"my-2"}/>
-              <div>
-                File Size: <br/>
-                <Chip
-                  color={"primary"}>{(acceptedFiles?.length > 0 && acceptedFiles[currentPage - 1].size) ? acceptedFiles[currentPage - 1].size! : ''} bytes</Chip>
-              </div>
-            </div>
-          </Skeleton>
-        </CardContent>
-        <div className={"flex justify-center"}>
-          {acceptedFiles.length > 1 && <Pagination count={acceptedFiles.length} color={"secondary"} page={currentPage}
-                                                   onChange={handleChange}/>}
-        </div>
-      </Card>
-    </>
-  );
-}
-
-/**
- * This is the presentation component for Fileuploadcomponents.
- * It should be free of logic, and concentrate on the presentation.
- */
-export function DropzoneCoreDisplay({getRootProps, getInputProps, isDragActive,}: DropzonePureProps) {
-  return (
-    <>
-      <div id={"outerBox"} {...getRootProps()}
-           className={"m-auto mt-8 border-sky-500 flex flex-col w-4/5 h-64 justify-center bg-[#46424f] align-middle"}>
-        <div/>
-        <p className={subtitle()} style={{textAlign: 'center'}}>
-          {' '}
-          <FileUploadIcon color="primary" size={80}/>{' '}
-        </p>
-        <input {...getInputProps()} />
-        {isDragActive ? (
-          <p className={subtitle()} color="primary" style={{textAlign: 'center'}}>
-            Drop file here...
-          </p>
-        ) : (
-          <p className={subtitle()} color="primary" style={{textAlign: 'center'}}>
-            <b>Choose a CSV file</b> or drag it here.
-          </p>
-        )}
-        <div/>
-      </div>
-    </>
-  );
-}
-
-
-/**
- * A drop zone for CSV file uploads.
- */
-export function DropzoneLogic({onChange}: DropzoneProps) {
-  const onDrop = useCallback(
-    (acceptedFiles: FileWithPath[], rejectedFiles: FileRejection[]) => {
-      acceptedFiles.forEach((file: FileWithPath) => {
-        const reader = new FileReader();
-
-        reader.onabort = () => alert('file reading was aborted');
-        reader.onerror = () => alert('file reading has failed');
-        reader.onload = () => {
-          // Do whatever you want with the file contents
-          const binaryStr = reader.result as string;
-          const config: ParseConfig = {delimiter: ','};
-          const results = parse(binaryStr, config);
-
-          //console.log(JSON.stringify(results.data));
-
-          if (results.errors.length) {
-            alert(
-              `Error on row: ${results.errors[0].row}. ${results.errors[0].message}`
-            );
-            // Only print the first error for now to avoid dialog clog
-          }
-        };
-        reader.readAsText(file);
-      });
-
-      onChange(acceptedFiles, rejectedFiles);
-      rejectedFiles.forEach((fileRejection: FileRejection) => {
-        alert(
-          ' The file ' +
-          fileRejection.file.name +
-          ' was not uploaded. Only .csv files are supported.'
-        );
-      });
-    },
-    [onChange]
-  );
-  const {getRootProps, getInputProps, isDragActive} = useDropzone({
-    onDrop, accept: {
-      'text/csv': ['.csv'],
-    }
-  });
-
-  return (
-    <DropzoneCoreDisplay
-      isDragActive={isDragActive}
-      getRootProps={getRootProps}
-      getInputProps={getInputProps}
-    />
-  );
-}
-
 /**
  * For uploading and validating drag and dropped CSV files.
  */