Eliminate legacy parser input type

Author: unframework

src/components/Importer.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useState, useEffect, useContext } from 'react';
 
-import { FieldAssignmentMap, BaseRow, Preview } from '../parser';
-import { FileStep } from './file-step/FileStep';
+import { FieldAssignmentMap, BaseRow } from '../parser';
+import { FileStep, FileStepState } from './file-step/FileStep';
 import { generatePreviewColumns } from './fields-step/ColumnPreview';
 import { FieldsStep, Field } from './fields-step/FieldsStep';
 import { ProgressDisplay } from './ProgressDisplay';
@@ -88,8 +88,8 @@ export function Importer<Row extends BaseRow>({
   // helper to combine our displayed content and the user code that provides field definitions
   const [fields, setFields] = useState<FieldDef[]>([]);
 
-  const [preview, setPreview] = useState<Preview | null>(null);
-  const [formatAccepted, setFormatAccepted] = useState<boolean>(false);
+  const [fileState, setFileState] = useState<FileStepState | null>(null);
+  const [fileAccepted, setFileAccepted] = useState<boolean>(false);
 
   const [
     fieldAssignments,
@@ -99,45 +99,46 @@ export function Importer<Row extends BaseRow>({
   const externalPreview = useMemo<ImporterFilePreview | null>(() => {
     // generate stable externally-visible data objects
     const externalColumns =
-      preview && generatePreviewColumns(preview.firstRows, preview.hasHeaders);
+      fileState &&
+      generatePreviewColumns(fileState.firstRows, fileState.hasHeaders);
     return (
-      preview &&
+      fileState &&
       externalColumns && {
-        rawData: preview.firstChunk,
+        rawData: fileState.firstChunk,
         columns: externalColumns,
-        skipHeaders: !preview.hasHeaders,
-        parseWarning: preview.parseWarning
+        skipHeaders: !fileState.hasHeaders,
+        parseWarning: fileState.parseWarning
       }
     );
-  }, [preview]);
+  }, [fileState]);
 
   // render provided child content that defines the fields
   const contentNodes = useMemo(() => {
     return typeof content === 'function'
       ? content({
-          file: preview && preview.file,
+          file: fileState && fileState.file,
           preview: externalPreview
         })
       : content;
-  }, [preview, externalPreview, content]);
+  }, [fileState, externalPreview, content]);
   const contentWrap = (
     <FieldDefinitionContext.Provider value={setFields}>
       {contentNodes}
     </FieldDefinitionContext.Provider>
   );
 
-  if (!formatAccepted || preview === null || externalPreview === null) {
+  if (!fileAccepted || fileState === null || externalPreview === null) {
     return (
       <div className="CSVImporter_Importer">
         <FileStep
           customConfig={customPapaParseConfig}
           assumeNoHeaders={assumeNoHeaders}
-          currentPreview={preview}
+          prevState={fileState}
           onChange={(parsedPreview) => {
-            setPreview(parsedPreview);
+            setFileState(parsedPreview);
           }}
           onAccept={() => {
-            setFormatAccepted(true);
+            setFileAccepted(true);
           }}
         />
 
@@ -150,15 +151,15 @@ export function Importer<Row extends BaseRow>({
     return (
       <div className="CSVImporter_Importer">
         <FieldsStep
+          fileState={fileState}
           fields={fields}
-          preview={preview}
           onAccept={(assignments) => {
             // @todo use onChange to preserve this state if going back and toggling hasHeaders
             setFieldAssignments(assignments);
           }}
           onCancel={() => {
             // keep existing preview data
-            setFormatAccepted(false);
+            setFileAccepted(false);
           }}
         />
 
@@ -170,7 +171,7 @@ export function Importer<Row extends BaseRow>({
   return (
     <div className="CSVImporter_Importer">
       <ProgressDisplay
-        preview={preview}
+        fileState={fileState}
         externalPreview={externalPreview}
         fieldAssignments={fieldAssignments}
         processChunk={processChunk}
@@ -179,8 +180,8 @@ export function Importer<Row extends BaseRow>({
           restartable
             ? () => {
                 // reset all state
-                setPreview(null);
-                setFormatAccepted(false);
+                setFileState(null);
+                setFileAccepted(false);
                 setFieldAssignments(null);
               }
             : undefined

src/components/ProgressDisplay.tsx

@@ -4,9 +4,9 @@ import {
   processFile,
   FieldAssignmentMap,
   ParseCallback,
-  BaseRow,
-  Preview
+  BaseRow
 } from '../parser';
+import { FileStepState } from './file-step/FileStep';
 import { ImporterFilePreview, ImportInfo } from './ImporterProps';
 import { ImporterFrame } from './ImporterFrame';
 
@@ -25,7 +25,7 @@ function countUTF8Bytes(item: string) {
 }
 
 export function ProgressDisplay<Row extends BaseRow>({
-  preview,
+  fileState,
   externalPreview,
   fieldAssignments,
   processChunk,
@@ -34,7 +34,7 @@ export function ProgressDisplay<Row extends BaseRow>({
   onRestart,
   onClose
 }: React.PropsWithChildren<{
-  preview: Preview;
+  fileState: FileStepState;
   externalPreview: ImporterFilePreview;
   fieldAssignments: FieldAssignmentMap;
   processChunk: ParseCallback<Row>;
@@ -61,32 +61,35 @@ export function ProgressDisplay<Row extends BaseRow>({
     });
 
     return {
-      file: preview.file,
+      file: fileState.file,
       preview: externalPreview,
       fields: fieldList,
       columnFields: [...columnSparseList]
     };
-  }, [preview, externalPreview, fieldAssignments]);
+  }, [fileState, externalPreview, fieldAssignments]);
 
   // estimate number of rows
   const estimatedRowCount = useMemo(() => {
     // sum up sizes of all the parsed preview rows and get estimated average
-    const totalPreviewRowBytes = preview.firstRows.reduce((prevCount, row) => {
-      const rowBytes = row.reduce((prev, item) => {
-        return prev + countUTF8Bytes(item) + 1; // add a byte for separator or newline
-      }, 0);
+    const totalPreviewRowBytes = fileState.firstRows.reduce(
+      (prevCount, row) => {
+        const rowBytes = row.reduce((prev, item) => {
+          return prev + countUTF8Bytes(item) + 1; // add a byte for separator or newline
+        }, 0);
 
-      return prevCount + rowBytes;
-    }, 0);
+        return prevCount + rowBytes;
+      },
+      0
+    );
 
     const averagePreviewRowSize =
-      totalPreviewRowBytes / preview.firstRows.length;
+      totalPreviewRowBytes / fileState.firstRows.length;
 
     // divide file size by estimated row size (or fall back to a sensible amount)
     return averagePreviewRowSize > 1
-      ? preview.file.size / averagePreviewRowSize
+      ? fileState.file.size / averagePreviewRowSize
       : 100;
-  }, [preview]);
+  }, [fileState]);
 
   // notify on start of processing
   // (separate effect in case of errors)
@@ -122,8 +125,7 @@ export function ProgressDisplay<Row extends BaseRow>({
     const oplock = asyncLockRef.current;
 
     processFile(
-      preview,
-      fieldAssignments,
+      { ...fileState, fieldAssignments },
       (deltaCount) => {
         // ignore if stale
         if (oplock !== asyncLockRef.current) {
@@ -156,7 +158,7 @@ export function ProgressDisplay<Row extends BaseRow>({
       // invalidate current oplock on change or unmount
       asyncLockRef.current += 1;
     };
-  }, [preview, fieldAssignments]);
+  }, [fileState, fieldAssignments]);
 
   // simulate asymptotic progress percentage
   const progressPercentage = useMemo(() => {
@@ -174,7 +176,7 @@ export function ProgressDisplay<Row extends BaseRow>({
 
   return (
     <ImporterFrame
-      fileName={preview.file.name}
+      fileName={fileState.file.name}
       subtitle="Import"
       error={error && (error.message || String(error))}
       secondaryDisabled={!isComplete || isDismissed}

src/components/fields-step/FieldsStep.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useMemo } from 'react';
 
-import { FieldAssignmentMap, Preview } from '../../parser';
+import { FieldAssignmentMap } from '../../parser';
+import { FileStepState } from '../file-step/FileStep';
 import { ImporterFrame } from '../ImporterFrame';
 import {
   generatePreviewColumns,
@@ -16,18 +17,18 @@ import { ColumnDragTargetArea, FieldTouchedMap } from './ColumnDragTargetArea';
 export type Field = DragField;
 
 export const FieldsStep: React.FC<{
+  fileState: FileStepState;
   fields: Field[];
-  preview: Preview;
   onAccept: (fieldAssignments: FieldAssignmentMap) => void;
   onCancel: () => void;
-}> = ({ fields, preview, onAccept, onCancel }) => {
+}> = ({ fileState, fields, onAccept, onCancel }) => {
   const columns = useMemo<Column[]>(
     () =>
       generatePreviewColumns(
-        preview.firstRows,
-        preview.hasHeaders
+        fileState.firstRows,
+        fileState.hasHeaders
       ).map((item) => ({ ...item, code: generateColumnCode(item.index) })),
-    [preview]
+    [fileState]
   );
 
   const initialAssignments = useMemo<FieldAssignmentMap>(() => {
@@ -102,7 +103,7 @@ export const FieldsStep: React.FC<{
 
   return (
     <ImporterFrame
-      fileName={preview.file.name}
+      fileName={fileState.file.name}
       subtitle="Select Columns"
       error={validationError}
       onCancel={onCancel}
@@ -137,7 +138,7 @@ export const FieldsStep: React.FC<{
       />
 
       <ColumnDragTargetArea
-        hasHeaders={preview.hasHeaders}
+        hasHeaders={fileState.hasHeaders}
         fields={fields}
         columns={columns}
         fieldTouched={fieldTouched}

src/components/file-step/FileStep.tsx

@@ -3,7 +3,7 @@ import React, { useMemo, useRef, useEffect, useState } from 'react';
 import {
   parsePreview,
   PreviewResults,
-  Preview,
+  PreviewReport,
   CustomizablePapaParseConfig
 } from '../../parser';
 import { ImporterFrame } from '../ImporterFrame';
@@ -14,38 +14,37 @@ import { FormatErrorMessage } from './FormatErrorMessage';
 
 import './FileStep.scss';
 
+export interface FileStepState extends PreviewReport {
+  papaParseConfig: CustomizablePapaParseConfig; // config that was used for preview parsing
+  hasHeaders: boolean;
+}
+
 export const FileStep: React.FC<{
   customConfig: CustomizablePapaParseConfig;
   assumeNoHeaders?: boolean;
-  currentPreview: Preview | null;
-  onChange: (preview: Preview | null) => void;
+  prevState: FileStepState | null;
+  onChange: (state: FileStepState | null) => void;
   onAccept: () => void;
-}> = ({
-  customConfig,
-  assumeNoHeaders,
-  currentPreview,
-  onChange,
-  onAccept
-}) => {
-  const [selectedFile, setSelectedFile] = useState<File | null>(() =>
-    currentPreview ? currentPreview.file : null
+}> = ({ customConfig, assumeNoHeaders, prevState, onChange, onAccept }) => {
+  // seed from previous state as needed
+  const [selectedFile, setSelectedFile] = useState<File | null>(
+    prevState ? prevState.file : null
   );
 
-  // augmented PreviewResults from parser
   const [preview, setPreview] = useState<PreviewResults | null>(
     () =>
-      currentPreview && {
+      prevState && {
         parseError: undefined,
-        ...currentPreview
+        ...prevState
       }
   );
 
-  const [papaParseConfig, setPapaParseConfig] = useState(() =>
-    currentPreview ? currentPreview.papaParseConfig : customConfig
+  const [papaParseConfig, setPapaParseConfig] = useState(
+    prevState ? prevState.papaParseConfig : customConfig
   );
 
-  const [hasHeaders, setHasHeaders] = useState(() =>
-    currentPreview ? currentPreview.hasHeaders : false
+  const [hasHeaders, setHasHeaders] = useState(
+    prevState ? prevState.hasHeaders : false
   );
 
   // wrap in ref to avoid triggering effect

src/parser.ts

@@ -32,12 +32,6 @@ export type PreviewResults =
       parseError: undefined;
     } & PreviewReport);
 
-// complete "workspace" for kicking off the full parse @todo rename
-export interface Preview extends PreviewReport {
-  papaParseConfig: CustomizablePapaParseConfig; // config that was used for preview parsing
-  hasHeaders: boolean;
-}
-
 export const PREVIEW_ROW_COUNT = 5;
 
 export type FieldAssignmentMap = { [name: string]: number | undefined };
@@ -151,13 +145,19 @@ export function parsePreview(
   });
 }
 
+export interface ParserInput {
+  file: File;
+  papaParseConfig: CustomizablePapaParseConfig;
+  hasHeaders: boolean;
+  fieldAssignments: FieldAssignmentMap;
+}
+
 export function processFile<Row extends BaseRow>(
-  preview: Preview,
-  fieldAssignments: FieldAssignmentMap,
+  input: ParserInput,
   reportProgress: (deltaCount: number) => void,
   callback: ParseCallback<Row>
 ): Promise<void> {
-  const { file, hasHeaders, papaParseConfig } = preview;
+  const { file, hasHeaders, papaParseConfig, fieldAssignments } = input;
   const fieldNames = Object.keys(fieldAssignments);
 
   // wrap synchronous errors in promise