Preload data in context. Updated to support storing an array of data

src/components/InputTabs.js

@@ -24,7 +24,7 @@ function InputTabs(props) {
   return (
     <Form.Group>
       <Form.Label style={{ fontWeight: "bold" }}>{props.name}</Form.Label>
-      <Tabs activeKey={activeSource} id="dataTabs" onSelect={handleTabChange}>
+      <Tabs activeKey={activeSource} id="dataTabs" onSelect={handleTabChange} mountOnEnter={true}>
         <Tab eventKey={API.sources.byText} title="Text">
           <ByText
             name={props.byTextName}

src/context/ApplicationContext.js

@@ -1,5 +1,4 @@
 import { createContext } from "react";
-import { InitialData } from "../data/Data";
 import { InitialQuery } from "../query/Query";
 import { InitialShacl } from "../shacl/Shacl";
 import { InitialShapeMap } from "../shapeMap/ShapeMap";
@@ -8,7 +7,9 @@ import { InitialUML } from "../uml/UML";
 
 // Initial values in context
 export const initialApplicationContext = {
-  rdfData: InitialData, // Array of data (merge uses 2 units of data and more data compound could be added in the future)
+  // Array of data (merge uses 2 units of data and more data compound could be added in the future)
+  // See provider for the function to add new data
+  rdfData: [],
   sparqlQuery: InitialQuery,
   sparqlEndpoint: "",
   shexSchema: InitialShex,

src/context/ApplicationProvider.js

@@ -109,12 +109,11 @@ const ApplicationProvider = ({ children }) => {
           dispatch({ type: reducerTypes.rdf, value: rdfData }),
         addRdfData: (rdfData) => {
           const newIndex = applicationData.rdfData.length; // new Data index based on current context data
-          const newData = rdfData // New data object, use InitialData if no data was provided
-            ? { index: newIndex, ...rdfData }
-            : {
-                index: newIndex,
-                ...InitialData,
-              };
+          // New data object, use InitialData if no data was provided
+          const newData = {
+            index: newIndex,
+            ...(rdfData || InitialData),
+          };
           dispatch({ type: reducerTypes.addRdf, value: newData }); // Update state and return new data
           return newData;
         },

src/data/Data.js

@@ -77,7 +77,7 @@ export function mkDataTabs(
     setData({ ...data, activeSource: value });
   }
   function handleDataByTextChange(value, y, change) {
-    onTextChange(value, y, change);
+    // onTextChange(value, y, change);
     setData({ ...data, textArea: value });
   }
   function handleDataUrlChange(value) {

src/data/DataConvert.js

@@ -17,30 +17,34 @@ import ResultDataConvert from "../results/ResultDataConvert";
 import { mkError } from "../utils/ResponseError";
 import {
   getDataText,
-  InitialData,
   mkDataTabs,
   paramsFromStateData,
   updateStateData
 } from "./Data";
 
 function DataConvert(props) {
+  const {
+    rdfData: [ctxData],
+    addRdfData,
+  } = useContext(ApplicationContext);
+
+  const [data, setData] = useState(ctxData || addRdfData());
+  const [dataTargetFormat, setDataTargetFormat] = useState(
+    API.formats.defaultData
+  );
   const [result, setResult] = useState("");
+
   const [params, setParams] = useState(null);
   const [lastParams, setLastParams] = useState(null);
+
   const [permalink, setPermalink] = useState(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
-  const [data, setData] = useState(InitialData);
-  const [dataTargetFormat, setDataTargetFormat] = useState(
-    API.formats.defaultData
-  );
+
   const [progressPercent, setProgressPercent] = useState(0);
 
   const [disabledLinks, setDisabledLinks] = useState(false);
 
-  // Recover user input data from context, if any. Use first item of the data array
-  const { rdfData: ctxData } = useContext(ApplicationContext);
-
   const url = API.routes.server.dataConvert;
 
   function handleTargetDataFormatChange(value) {
@@ -74,8 +78,6 @@ function DataConvert(props) {
       } else {
         setError(API.texts.errorParsingUrl);
       }
-    } else if (ctxData && typeof ctxData === "object") {
-      setData(ctxData);
     }
   }, [props.location?.search]);
 

src/data/DataExtract.js

@@ -17,16 +17,20 @@ import ResultDataExtract from "../results/ResultDataExtract";
 import NodeSelector from "../shex/NodeSelector";
 import { mkError } from "../utils/ResponseError";
 import {
-  getDataText,
-  InitialData,
-  mkDataTabs,
+  getDataText, mkDataTabs,
   paramsFromStateData,
   updateStateData
 } from "./Data";
 import { getNodesFromForm } from "./TurtleForm";
 
 function DataExtract(props) {
-  const [data, setData] = useState(InitialData);
+  // Recover user input data and query from context, if any. Use first item of the data array
+  const {
+    rdfData: [ctxData],
+    addRdfData,
+  } = useContext(ApplicationContext);
+
+  const [data, setData] = useState(ctxData || addRdfData());
   const [params, setParams] = useState(null);
   const [lastParams, setLastParams] = useState(null);
   const [loading, setLoading] = useState(false);
@@ -41,11 +45,6 @@ function DataExtract(props) {
 
   const [disabledLinks, setDisabledLinks] = useState(false);
 
-  // Recover user input data and query from context, if any. Use first item of the data array
-  const {
-    rdfData: [ctxData],
-  } = useContext(ApplicationContext);
-
   const urlServerExtract = API.routes.server.dataExtract;
   const urlServerVisualize = API.routes.server.schemaConvert;
 
@@ -65,8 +64,6 @@ function DataExtract(props) {
         setParams(newParams);
         setLastParams(newParams);
       } else setError(API.texts.errorParsingUrl);
-    } else {
-      if (ctxData && typeof ctxData === "object") setData(ctxData);
     }
   }, [props.location?.search]);
 

src/data/DataInfo.js

@@ -16,15 +16,20 @@ import ResultDataInfo from "../results/ResultDataInfo";
 import { processDotData } from "../utils/dot/dotUtils";
 import { mkError } from "../utils/ResponseError";
 import {
-  getDataText,
-  InitialData,
-  mkDataTabs,
+  getDataText, mkDataTabs,
   paramsFromStateData,
   updateStateData
 } from "./Data";
 
 function DataInfo(props) {
-  const [data, setData] = useState(InitialData);
+  // Recover user input data from context, if any. Use first item of the data array
+  const {
+    rdfData: [ctxData],
+    addRdfData,
+  } = useContext(ApplicationContext);
+
+  // Set initial data from context, if possible
+  const [data, setData] = useState(ctxData || addRdfData());
 
   const [result, setResult] = useState(null);
 
@@ -41,9 +46,6 @@ function DataInfo(props) {
   const urlInfo = API.routes.server.dataInfo;
   const urlVisual = API.routes.server.dataConvert;
 
-  // Recover user input data from context, if any. Use first item of the data array
-  const { rdfData: ctxData } = useContext(ApplicationContext);
-
   // Try to autofill user data, first from the query string then from context
   useEffect(() => {
     if (props.location?.search) {
@@ -61,8 +63,6 @@ function DataInfo(props) {
       } else {
         setError(API.texts.errorParsingUrl);
       }
-    } else if (ctxData && typeof ctxData === "object") {
-      setData(ctxData); // Set the data in context so that UI changes
     }
   }, [props.location?.search]);
 

src/data/DataMerge.js

@@ -18,15 +18,19 @@ import { mkError } from "../utils/ResponseError";
 import { getFileContents } from "../utils/Utils";
 import {
   getDataText,
-  InitialData,
   mkDataTabs,
   paramsFromStateData,
   updateStateData
 } from "./Data";
 
 function DataMerge(props) {
-  const [data1, setData1] = useState(InitialData);
-  const [data2, setData2] = useState(InitialData);
+  // Recover user input data from context, if any. Use 2 items of the data array
+  const { rdfData: rdfDataSet, addRdfData } = useContext(ApplicationContext);
+  const [ctxData1, ctxData2] = rdfDataSet;
+
+  const [data1, setData1] = useState(ctxData1 || addRdfData());
+  const [data2, setData2] = useState(ctxData2 || addRdfData());
+
   const [params, setParams] = useState(null);
   const [lastParams, setLastParams] = useState(null);
   const [dataTargetFormat, setDataTargetFormat] = useState(
@@ -40,9 +44,6 @@ function DataMerge(props) {
 
   const [disabledLinks, setDisabledLinks] = useState(false);
 
-  // Recover user input data from context, if any. Use 2 items of the data array
-  const { rdfData: ctxData1, addRdfData } = useContext(ApplicationContext);
-
   const url = API.routes.server.dataConvert;
 
   function handleTargetDataFormatChange(value) {
@@ -88,13 +89,6 @@ function DataMerge(props) {
       } else {
         setError(API.texts.errorParsingUrl);
       }
-    } else if (ctxData1 && typeof ctxData1 === "object") {
-      // Set the data in context so that UI changes
-      setData1(ctxData1);
-      // If there's no "data2" because it is the first time in the page, add a new data element
-      // to the data array in context
-      // setData2(ctxData2 || addRdfData());
-      setData2(InitialData);
     }
   }, [props.location?.search]);
 

src/data/DataQuery.js

@@ -23,16 +23,21 @@ import {
 import ResultSparqlQuery from "../results/ResultSparqlQuery";
 import { mkError } from "../utils/ResponseError";
 import {
-  getDataText,
-  InitialData,
-  mkDataTabs,
+  getDataText, mkDataTabs,
   paramsFromStateData,
   updateStateData
 } from "./Data";
 
 function DataQuery(props) {
-  const [data, setData] = useState(InitialData);
-  const [query, setQuery] = useState(InitialQuery);
+  // Recover user input data and query from context, if any. Use first item of the data array
+  const {
+    rdfData: [ctxData],
+    sparqlQuery: ctxQuery,
+    addRdfData,
+  } = useContext(ApplicationContext);
+
+  const [data, setData] = useState(ctxData || addRdfData());
+  const [query, setQuery] = useState(ctxQuery || InitialQuery);
 
   const [params, setParams] = useState(null);
   const [lastParams, setLastParams] = useState(null);
@@ -46,12 +51,6 @@ function DataQuery(props) {
 
   const [disabledLinks, setDisabledLinks] = useState(false);
 
-  // Recover user input data and query from context, if any. Use first item of the data array
-  const {
-    rdfData: [ctxData],
-    sparqlQuery: ctxQuery,
-  } = useContext(ApplicationContext);
-
   const url = API.routes.server.dataQuery;
 
   useEffect(() => {
@@ -74,9 +73,6 @@ function DataQuery(props) {
 
       setParams(params);
       setLastParams(params);
-    } else {
-      if (ctxData && typeof ctxData === "object") setData(ctxData);
-      if (ctxQuery && typeof ctxQuery === "object") setQuery(ctxQuery);
     }
   }, [props.location?.search]);
 

src/data/DataTabs.js

@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect } from "react";
 import API from "../API";
 import InputTabsWithFormat from "../components/InputTabsWithFormat";
 import { ApplicationContext } from "../context/ApplicationContext";
@@ -10,37 +10,40 @@ function DataTabs(props) {
     ApplicationContext
   );
 
-  const [dataIndex] = useState(props?.data?.index);
+  const dataIndex = props?.data?.index;
 
   // Change context when the contained data changes
   useEffect(() => {
-    // const newDataset = ctxDataSet.reduce(
-    //   (acc, curr, idx) =>
-    //     dataIndex === idx ? [...acc, props.data] : [...acc, curr],
-    //   []
-    // );
-    setCtxDataSet(props.data);
+    if (props.data) {
+      // Reducer, insert the modified data in the corresponding index
+      const newDataset = ctxDataSet.reduce(
+        (acc, curr) =>
+          dataIndex === curr.index ? [...acc, props.data] : [...acc, curr],
+        []
+      );
+      setCtxDataSet(newDataset);
+    }
   }, [props.data]);
 
   return (
     <div>
       <InputTabsWithFormat
         nameInputTab={props.name}
-        activeSource={props.activeSource || ctxDataSet.activeSource} // Change according to data in context when needed
+        activeSource={props.activeSource || ctxDataSet[dataIndex]?.activeSource} // Change according to data in context when needed
         handleTabChange={props.handleTabChange}
         byTextName={props.subname}
-        textAreaValue={props.textAreaValue || ctxDataSet.textArea}
+        textAreaValue={props.textAreaValue || ctxDataSet[dataIndex]?.textArea}
         byTextPlaceholder={API.texts.placeholders.rdf}
         handleByTextChange={props.handleByTextChange}
         handleUrlChange={props.handleDataUrlChange}
         urlValue={props.urlValue || ctxDataSet[dataIndex]?.url}
         byURLPlaceholder={API.texts.placeholders.url}
         handleFileUpload={props.handleFileUpload}
-        selectedFormat={props.selectedFormat || ctxDataSet.format}
+        selectedFormat={props.selectedFormat || ctxDataSet[dataIndex]?.format}
         handleFormatChange={props.handleDataFormatChange}
         urlFormats={API.routes.server.dataFormatsInput}
         setCodeMirror={props.setCodeMirror}
-        fromParams={props.fromParams || ctxDataSet.fromParams}
+        fromParams={props.fromParams || ctxDataSet[dataIndex]?.fromParams}
         resetFromParams={props.resetFromParams}
       />
     </div>