Roll back Extension Domain because of errors

On branch 22.08.1
Changes to be committed:
	modified:   src/views/builder/BuilderView/ColorCoded/ExtensionDomain.js
	new file:   src/views/builder/BuilderView/ColorCoded/ExtensionDomain_beta.js

src/views/builder/BuilderView/ColorCoded/ExtensionDomain.js

@@ -1,113 +1,153 @@
 // src/views/builder/BuilderView/ColorCoded/ExtensionDomain.js
-import React, { useState } from 'react';
-import {
-  Card,
-  CardActionArea,
-  CardContent,
-  TextField,
-  Typography,
-} from '@material-ui/core';
+import React from 'react';
+import { withStyles, Typography } from '@material-ui/core';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
 import HelpIcon from '@material-ui/icons/Help';
 import Button from '@material-ui/core/Button';
-import PropTypes from 'prop-types';
-import Extension from 'src/components/Extension';
+import TextField from '@material-ui/core/TextField';
+import Card from '@material-ui/core/Card';
+import Linker from './components/Linker';
+
+// Cell styling
+const StyledCell = withStyles({
+  root: {
+    color: 'black'
+  },
+  bordered: {
+    border: '1px solid black'
+  }
+})(TableCell);
 
 // Pass an object and whether its keys are properties.
 export default function ExtensionDomain({ items }) {
-  const [newSchema, setNewSchema] = useState();
+  const classes = withStyles();
+
+  const setInput = (value, i) => {
+    const holder = items.exd;
+    holder[i] = JSON.parse(value);
+    items.setExd(holder);
+    console.log('working?', items.exd[i]);
+  };
 
   const addRows = () => {
-    fetch(newSchema)
-      .then((response) => response.json())
-      .then((jsonData) => {
-        console.log(jsonData);
-        if (!items.exd) {
-          const holder = [];
-          holder.push({
-            extension_schema: newSchema
-          });
-          items.setExd(holder);
-        } else {
-          const holder = items.exd;
-          holder.push({
-            extension_schema: newSchema
-          });
-          items.setExd(holder);
-        }
-      })
-      .catch((error) => {
-        console.log(`ERROR: ${error}`);
-        alert(`Fetch schema from '${newSchema}' FAILED: ${error}`);
+    console.log('add Rows', items);
+    if (!items.exd) {
+      const holder = [];
+      holder.push({
+        extension_schema: ''
       });
-    setNewSchema('');
+      items.setExd(holder);
+    } else {
+      const holder = items.exd;
+      holder.push({
+        extension_schema: ''
+      })
+      items.setExd(holder);
+    }
+    items.setRerender(items.rerender + 1);
   };
 
-  const removeRows = (index) => {
-    items.setExd(items.exd.filter(((o, i) => index !== i)));
+  const removeRows = (which) => {
+    const holder = items.exd;
+    holder.splice(which, 1);
+    items.setExd(holder);
+    items.setRerender(items.rerender + 1);
   };
-
-  const link = 'https://docs.biocomputeobject.org/extension-domain/';
+  // useEffect(() => {
+  //   if (!items.exd) {
+  //     console.log('No Extension');
+  //   } else {
+  //     for (let extensionIndex = 0; extensionIndex < items.exd.length; extensionIndex++) {
+  //       const schemaURL = items.exd[extensionIndex].extension_schema;
+  //       console.log('Extension schema', schema);
+  //       fetch(schemaURL)
+  //         .then((response) => response.json())
+  //         .then((jsonData) => {
+  //           schemaList.push(jsonData);
+  //           console.log(jsonData);
+  //         })
+  //         .catch((error) => {
+  //         // handle your errors here
+  //           console.error(error);
+  //         });
+  //     }
+  //     setSchema(schemaList);
+  //   }
+  // }, [items.exd]);
 
   return (
-    <Card>
-      <CardActionArea onClick={() => window.open(link)}>
-        <CardContent>
-          <Typography variant="h1">
-            Extension Domain &nbsp;
-            <HelpIcon />
-          </Typography>
-        </CardContent>
-      </CardActionArea>
-      <CardContent>
-        <dev>
-          <Typography>
-            Top add an extension enter a valid URL for the extension schema
-            below and hit the &apos;ADD EXTENSION&apos; button.
-          </Typography>
-          <TextField
-            fullWidth
-            onChange={(e) => setNewSchema(e.target.value)}
-            value={newSchema}
-          />
-          <Button
-            variant="contained"
-            disabled={!newSchema}
-            onClick={() => addRows()}
-          >
-            Add Extension
-          </Button>
-        </dev>
-      </CardContent>
-      { (!items.exd)
-        ? (
-          <CardContent />
-        )
-        : (items.exd.map((item, index) => {
-          return (
-            <CardContent key={index}>
-              <Extension
-                extension={item}
-                schemaUrl={item.extension_schema}
-                index={index}
-                allExtensions={items}
-              />
-              <Button
-                variant="contained"
-                color="primary"
-                disableElevation
-                fullWidth
-                onClick={() => removeRows(index)}
-              >
-                Remove
-              </Button>
-            </CardContent>
-          );
-        })
-        )}
-    </Card>
+    <Table size="small">
+      <TableHead className={classes.tabled}>
+        <TableRow>
+          <StyledCell colSpan="5">
+            <Button
+              variant="contained"
+              // color="D5D8DC"
+              fullWidth
+              onClick={() => window.open('https://docs.biocomputeobject.org/bco-domains/')}
+            >
+              <Typography variant="h1">
+                Extension Domain&nbsp;
+                <HelpIcon />
+              </Typography>
+            </Button>
+          </StyledCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {(!items.exd)
+          ? (<TableRow>{console.log('no items.exd')}</TableRow>)
+          : (
+            items.exd.map((item, index) => {
+              return (
+                <Card>
+                  <TableRow>
+                    <StyledCell>
+                      <Typography variant="h3">
+                        Extension Schema
+                      </Typography>
+                    </StyledCell>
+                    <StyledCell>
+                      <Linker color="blackLink" uri={item.extension_schema} />
+                    </StyledCell>
+                  </TableRow>
+                  <TableRow>
+                    <StyledCell colspan={6}>
+                      <TextField
+                        color="primary"
+                        fullWidth
+                        name="extension_domain"
+                        id="outlined-multiline-static"
+                        multiline
+                        rows={8}
+                        defaultValue={JSON.stringify(item, null, 4)}
+                        onChange={(e) => setInput(e.target.value, index)}
+                        variant="outlined"
+                      />
+                    </StyledCell>
+                    <StyledCell>
+                      <Button variant="contained" color="primary" disableElevation fullWidth onClick={() => removeRows(index)}>
+                        Remove
+                      </Button>
+                    </StyledCell>
+                  </TableRow>
+                </Card>
+              );
+            })
+          )}
+        <TableRow />
+        <Card>
+          <TableRow>
+            <Button variant="contained" color="primary" disableElevation fullWidth onClick={() => addRows()}>
+              Add Extension Schema
+            </Button>
+          </TableRow>
+        </Card>
+      </TableBody>
+    </Table>
   );
-}
-
-ExtensionDomain.propTypes = {
-  items: PropTypes.object.isRequired,
-};
+}

src/views/builder/BuilderView/ColorCoded/ExtensionDomain_beta.js

@@ -0,0 +1,113 @@
+// src/views/builder/BuilderView/ColorCoded/ExtensionDomain.js
+import React, { useState } from 'react';
+import {
+  Card,
+  CardActionArea,
+  CardContent,
+  TextField,
+  Typography,
+} from '@material-ui/core';
+import HelpIcon from '@material-ui/icons/Help';
+import Button from '@material-ui/core/Button';
+import PropTypes from 'prop-types';
+import Extension from 'src/components/Extension';
+
+// Pass an object and whether its keys are properties.
+export default function ExtensionDomain({ items }) {
+  const [newSchema, setNewSchema] = useState();
+
+  const addRows = () => {
+    fetch(newSchema)
+      .then((response) => response.json())
+      .then((jsonData) => {
+        console.log(jsonData);
+        if (!items.exd) {
+          const holder = [];
+          holder.push({
+            extension_schema: newSchema
+          });
+          items.setExd(holder);
+        } else {
+          const holder = items.exd;
+          holder.push({
+            extension_schema: newSchema
+          });
+          items.setExd(holder);
+        }
+      })
+      .catch((error) => {
+        console.log(`ERROR: ${error}`);
+        alert(`Fetch schema from '${newSchema}' FAILED: ${error}`);
+      });
+    setNewSchema('');
+  };
+
+  const removeRows = (index) => {
+    items.setExd(items.exd.filter(((o, i) => index !== i)));
+  };
+
+  const link = 'https://docs.biocomputeobject.org/extension-domain/';
+
+  return (
+    <Card>
+      <CardActionArea onClick={() => window.open(link)}>
+        <CardContent>
+          <Typography variant="h1">
+            Extension Domain &nbsp;
+            <HelpIcon />
+          </Typography>
+        </CardContent>
+      </CardActionArea>
+      <CardContent>
+        <dev>
+          <Typography>
+            Top add an extension enter a valid URL for the extension schema
+            below and hit the &apos;ADD EXTENSION&apos; button.
+          </Typography>
+          <TextField
+            fullWidth
+            onChange={(e) => setNewSchema(e.target.value)}
+            value={newSchema}
+          />
+          <Button
+            variant="contained"
+            disabled={!newSchema}
+            onClick={() => addRows()}
+          >
+            Add Extension
+          </Button>
+        </dev>
+      </CardContent>
+      { (!items.exd)
+        ? (
+          <CardContent />
+        )
+        : (items.exd.map((item, index) => {
+          return (
+            <CardContent key={index}>
+              <Extension
+                extension={item}
+                schemaUrl={item.extension_schema}
+                index={index}
+                allExtensions={items}
+              />
+              <Button
+                variant="contained"
+                color="primary"
+                disableElevation
+                fullWidth
+                onClick={() => removeRows(index)}
+              >
+                Remove
+              </Button>
+            </CardContent>
+          );
+        })
+        )}
+    </Card>
+  );
+}
+
+ExtensionDomain.propTypes = {
+  items: PropTypes.object.isRequired,
+};