Next steps

Author: vmonakhov

src/ducks/dictImport.js

@@ -207,7 +207,7 @@ export const selectors = {
       case "COLUMNS":
         const all_fields = state.dictImport.get("columnTypes").reduce((acc, field_map) => [...acc, ...field_map.values()], []);
         //console.log(all_fields);
-        result &&= parallel
+        result &&= parallel === 'txt'
           ? all_fields.reduce((acc, value, index, arr) =>
             acc && value && arr.findIndex(v => isEqual(v, value)) === index, true)
           : state.dictImport.get("columnTypes").every((field_map, blob_id) => {

src/pages/CorpImport/ColumnMapper.js

@@ -15,10 +15,14 @@ function FieldButton({ text, onClick, isSelected }) {
   return <Button onClick={onClick} content={text} {...color} />;
 }
 
-function Column({ index, fieldOptions, type, onSetColumnType, actions }) {
+function Column({ index, mode, fieldOptions, type, onSetColumnType, actions }) {
   const getTranslation = useContext(TranslationContext);
-  const name = index ? "sentence" : "base sentence";
-  const color = index ? "yellow" : "green";
+  const name = (mode === 'txt')
+    ? (index > 0 ? "sentence" : "base sentence")
+    : (index < 0 ? "to sentence" : "from sentence");
+  const color = (mode === 'txt')
+    ? (index > 0 ? "yellow" : "green")
+    : (index < 0 ? "yellow" : "green");
   const columnButton = <Button className="column-button" color={color} content={getTranslation(name)} />;
   const selectedField = fieldOptions.find(x => is(x.id, type));
   const triggerColor = selectedField ? { color: "blue" } : {};
@@ -72,7 +76,7 @@ const ColumnWithData = compose(
   }))
 )(Column);
 
-function Columns({ blob, index, fieldOptions, columnTypes, onSetColumnType }) {
+function Columns({ blob, index, mode, fieldOptions, columnTypes, onSetColumnType }) {
   const getTranslation = useContext(TranslationContext);
   const blobId = blob.get("id");
 
@@ -83,16 +87,29 @@ function Columns({ blob, index, fieldOptions, columnTypes, onSetColumnType }) {
         <ColumnWithData
           key={index}
           index={index}
+          mode={mode}
           type={columnTypes.getIn([blobId, "sentence"])}
           onSetColumnType={onSetColumnType("sentence")}
           fieldOptions={fieldOptions}
         />
+        // Using negative indexes for json case,
+        // so they are iterates and do not match with positive ones
+        { mode === 'json' && (
+          <ColumnWithData
+            key={-(index+1)}
+            index={-(index+1)}
+            mode={mode}
+            type={columnTypes.getIn([blobId, "to_sentence"])}
+            onSetColumnType={onSetColumnType("to_sentence")}
+            fieldOptions={fieldOptions}
+          />
+        )}
       </div>
     </div>
   );
 }
 
-function ColumnMapper({ state, types, columnTypes, onSetColumnType }) {
+function ColumnMapper({ state, mode, types, columnTypes, onSetColumnType }) {
   const typesSortedFiltered = types
     .sortBy(type => T(type.get("translations").toJS()))
     .filter(type => T(type.get("translations").toJS()).trim() != "");
@@ -123,6 +140,7 @@ function ColumnMapper({ state, types, columnTypes, onSetColumnType }) {
             key={id.join("/")}
             blob={v}
             index={i++}
+            mode={mode}
             fieldOptions={fieldOptions}
             columnTypes={columnTypes}
             onSetColumnType={onSetColumnType(id)}

src/pages/CorpImport/Linker.js

@@ -7,9 +7,17 @@ import TranslationContext from "Layout/TranslationContext";
 function Columns({ blob, index, mode, onDelete, onUpdateColumn }) {
   const getTranslation = useContext(TranslationContext);
   const color = (mode === 'json') ? "blue" : index ? "yellow" : "green";
-  const name = (mode === 'json') ? "both sentences" : index ? "sentence" : "base sentence";
+  const name = (mode === 'json') ? "both sides" : index ? "sentence" : "base sentence";
   const value = blob.getIn(["values", "sentence"], "dash");
-  useEffect(() => { onUpdateColumn("sentence", value) }, []);
+  useEffect(
+    () => {
+      onUpdateColumn("sentence", value);
+      if (mode === 'json') {
+         onUpdateColumn("to_sentence", "json");
+      }
+    },
+    []
+  );
 
   return (
     <div className="blob blob_corp">

src/pages/CorpImport/api.js

@@ -24,11 +24,12 @@ export function corpusInfo({ linking, languages, licenses }) {
 function blobExport(blob, columnType) {
   const blob_id = blob.get("id").toArray();
   const dedash = (blob.getIn(["values", "sentence"], "dash") === "dedash");
-  const field_id =  columnType.get("sentence", new Map()).toArray();
+  const field_ids = [columnType.get("sentence", new Map()).toArray(),
+                     columnType.get("to_sentence", new Map()).toArray()];
 
   return {
     blob_id,
-    field_id,
+    field_ids,
     dedash
   };
 }

src/pages/CorpImport/index.js

@@ -148,12 +148,18 @@ class Info extends React.Component {
   }
 
   onSubmit() {
-    const { convert } = this.props;
+    const { convertTxt, convertJson, mode } = this.props;
     const corpus_inf = corpusInfo(this.props);
     const columns_inf = columnsInfo(this.props);
-    convert({
-      variables: { corpus_inf, columns_inf }
-    }).then(() => this.props.goToStep("FINISH"));
+    if (mode === 'txt') {
+      convertTxt({
+        variables: { corpus_inf, columns_inf }
+      }).then(() => this.props.goToStep("FINISH"));
+    } else {
+      convertJson({
+        variables: { corpus_inf, columns_inf }
+      }).then(() => this.props.goToStep("FINISH"));
+    }
   }
 
   render() {
@@ -211,14 +217,15 @@ class Info extends React.Component {
           {step === "COLUMNS" && (
             <ColumnMapper
               state={linking}
+              mode={mode}
               columnTypes={columnTypes}
               types={fieldTypes}
               onSetColumnType={this.onSetColumnType}
             />
           )}
           {step === "LANGUAGES" && (
             <LanguageSelection
-              state={linking.filter(() => !i++)}
+              state={mode === 'json' ? linking : linking.filter(() => !i++)}
               languages={languages}
               licenses={licenses}
               locales={locales}