tCC refactor

[klappy]

Refactor TODOs

Things to prioritize:

IN PROGRESS:

Cypress tests

• Ensure Cypress tests run and continue to run during refactor
• New tests?
• Stepper
  • invalid login on stepper expects to behave normally
  • click through steps at each progress
  • back/next button after each progress

Other issues noted:

• obs-sn issues:
  • includes SupportReference by default. Default should only be the Note column (will be handled by persistence of column selection)

LATER:

Confusing Naming conventions

• saveCache?
• stateValues?

Console Errors

• Go through each error and warning and address each one

Borrow, Bend, Break, Begat, Build

• Build a new DatatableTranslatable not on MUI Datatables

Dependency updates

• Material UI v5.x (latest would remove @mui/labs)

DONE:

Consistent Functional Design patterns

• remove React.memo from class based React Components

Confusing Naming conventions

• QuoteSelector? => ScriptureHeader

KISS: Keep It Stupid Simple

• Reduce complexity of data flow
• Shortened long files by abstracting portions
• State management?
• Nested Contexts?
• Prop drilling?

Performance bottleneck:

• makeStyles. Can we find an alternative or reduce renders?
• Explore one scripture pane at a time
• React Waypoint, isVisible trigger rendering

Shorten files <125 lines to reduce cognitive load

• Workspace.js
  • Dialogs for critical errors
• App.js
  • headroom functions
  • resumed state
  • dialog: autosave
  • dialog: source file validation
• Translatable.js
  • authentication dialog
  • saveRetry()
  • saveOnTranslation()
  • autoSaveOnEdit()
  • useStyles
• TranslatableTSV.js
  • abstracted useValidation.js
• App.context.js
  • abstracted useGiteReactToolkit.js
• FilesHeader.js
  • abstracted to smaller components
• ApplicationStepper.js
  • abstracted lifecycle/state to useApplicationStepper
  • abstracted NetlifyBadge

DRY: Don't Repeat Yourself

• Reduce Copies of Translatable
  • what are the columns (can we automate?)
  • default row columns (can we simplify?)
• Reduce copies of RowHeader
  • Scripture or not

Bugs to Address

• Stepper

  • click on step doesn't take you there
  • authenticaiton error goes to File step without anything else
  • back button crashes

• Validation

  • ensure all validation that worked before works

• Must use the uw-tsv-parser package to parse TSV files; these cases noted:

  • SQ is not previewing correctly.
  • SN is not previewing correctly.
  • obs-sq is not previewing correctly.

• The row toolbar is missing.

  • obs-sq
  • obs-sn
  • obs-tn
  • obs-tq

[mandolyte]

On uw-tsv-parser...

At the end, there are two lines that can be changed to fix things up...

• Repo: https://github.com/unfoldingWord/uw-tsv-parser
• Demo: https://unfoldingword.github.io/uw-tsv-parser/
• Specification for code:
  • Requirements at: https://forum.door43.org/t/parascriptural-tab-separated-value-format-specification-v2/870
  • Detailed Reference: https://en.wikipedia.org/wiki/Tab-separated_values

Usage:

Note! the usage below is taken from the master branch.

In tc-create, this parser is used in these places:

• to correctly decode for the "on open validation" function. See src/core/onOpenValidations.js
• to correctly encode for the content validation function. See src/core/contentValidate.js
• in all the Translatable*TSV files, where it is passed to datatable-translatable. For example, the parser propterty:

  const datatable = useMemo(() => {
  _config.rowHeader = rowHeader;
  return (
    <DataTable
      sourceFile={sourceFile.content}
      targetFile={targetFile.content}
      onSave={onSave}
      onEdit={onEdit}
      onValidate={onValidate}
      onContentIsDirty={onContentIsDirty}
      delimiters={delimiters}
      config={_config}
      generateRowId={generateRowId}
      options={options}
      parser={parser}
    />
  );
  }, [sourceFile.content, targetFile.content, onSave, onEdit, onValidate, onContentIsDirty, generateRowId, options, rowHeader]);

NOTE: the parser is not present in the refactored code

Then in datatable-translatable, it shows first in the properties for src/components/datatable/DataTable.context.js

export function DataTableContextProvider({
  children,
  sourceFile,
  targetFile,
  delimiters,
  parser,
  config: {
    compositeKeyIndices,
    columnsFilter,
  },
}) 

Thru out the above file, the existence of the parser is checked for and is used when present. Here is just one example of many:

  // parse sourceFile when updated
  useEffect(() => {
    if (parser && parser.tsvStringToTable) {
      console.log("DataTable.context() using tsv parser for source")
      const { data: rows } = parser.tsvStringToTable(sourceFile);
      setSourceRows(rows);
    } else {
      if (delimiters) {
        const { rows } = parseDataTable({ table: sourceFile, delimiters });
        setSourceRows(rows);
      }
    }
  }, [sourceFile, delimiters, parser]);

To update refactored code

1. Add this import back into TranslatableTSV.js:

   import * as parser from 'uw-tsv-parser';

2. Add this property to <DataTable />

       parser={parser}

[klappy]

@mandolyte Just implemented and works like a charm!!! Thanks!!

[klappy]

OBS row header/toolbars now display!

[klappy]

bumped minor version to v1.5.0