Fix/readme manual

src/Landing/AccordionList.js

@@ -68,7 +68,7 @@ const AccordionList = () => {
           <Typography sx={{ fontSize: '23px', fontWeight: '400', textAlign: 'center', width: '100%', marginTop: 2 }}>Quick Links</Typography>
           <CustomAnchorLink text="Write a schema" overrideStyle={{ fontSize: '20px', fontWeight: '500', color: CustomPalette.PRIMARY, marginLeft: 5, marginTop: 2 }} onClick={navigateToStartPage} />
           {/* <CustomAnchorLink text="Find a schema" overrideStyle={{ fontSize: '20px', fontWeight: '500', color: CustomPalette.PRIMARY, marginLeft: 5, marginTop: 2 }} onClick={navigateToStartPage} /> */}
-          <CustomAnchorLink link="https://www.semanticengine.org/#/develop" text="Parse a schema" overrideStyle={{ fontSize: '20px', fontWeight: '500', color: CustomPalette.PRIMARY, marginLeft: 5, marginTop: 2 }} />
+          {/* <CustomAnchorLink link="https://www.semanticengine.org/#/develop" text="Parse a schema" overrideStyle={{ fontSize: '20px', fontWeight: '500', color: CustomPalette.PRIMARY, marginLeft: 5, marginTop: 2 }} /> */}
 
           <Drop
             setFile={setRawFile}
@@ -121,7 +121,7 @@ const AccordionList = () => {
             {/* <Button
               variant="contained"
               color="navButton"
-              onClick={handleExport}
+              onClick={}
               sx={{ backgroundColor: CustomPalette.PRIMARY, ":hover": { backgroundColor: CustomPalette.SECONDARY }, width: '100%', maxWidth: '300px', marginTop: '30px', marginBottom: '20px' }}
               disabled={disableButtonCheck}
             >

src/Landing/SchemaAccordionItem.js

@@ -1,11 +1,23 @@
-import { AccordionDetails, AccordionSummary, Box, Button, Link, Typography } from '@mui/material';
+import { AccordionDetails, AccordionSummary, Link, Typography } from '@mui/material';
 import React from 'react';
 import { CustomPalette } from '../constants/customPalette';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import AccordionItemWrapper from './AccordionItemWrapper';
 import CustomAnchorLink from '../components/CustomAnchorLink';
 
 const SchemaAccordionItem = () => {
+
+  const downloadChickenZipExample = () => {
+    const zipFilePath = 'chicken_example.zip';
+
+    const link = document.createElement('a');
+    link.href = zipFilePath;
+    link.download = 'chicken_example.zip';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
   return (
     <AccordionItemWrapper>
       <AccordionSummary
@@ -28,7 +40,7 @@ const SchemaAccordionItem = () => {
           Example schema
         </Typography>
         <Typography>
-          Download an <CustomAnchorLink link='' text="Example schema" /> and use it to test schema tools such as viewing, editing, and creating a Data Entry Excel.
+          Download an <CustomAnchorLink link='' text="Example schema" onClick={downloadChickenZipExample} /> and use it to test schema tools such as viewing, editing, and creating a Data Entry Excel.
         </Typography>
 
       </AccordionDetails>

src/Landing/UseASchemaAccordionItem.js

@@ -50,9 +50,9 @@ const UseASchemaAccordionItem = () => {
         <Typography>
           When you have a .zip schema bundle you can upload and then:
         </Typography>
-        <Typography>
+        {/* <Typography>
           <strong>Validate</strong> the schema to ensure it is well-formed.
-        </Typography>
+        </Typography> */}
         <Typography>
           <strong>View</strong> the schema and <strong>Edit</strong> the schema if needed.
         </Typography>

src/Landing/UseASchemaWithDataAccordionItem.js

@@ -21,21 +21,22 @@ const UseASchemaWithDataAccordionItem = ({ disableButtonCheck, handleExport }) =
           With your machine-readable .zip schema bundle you can begin to use it in your workflows.
         </Typography>
         <Typography sx={{ marginTop: '20px' }}>
-          For example, using a schema as a template, generate an Excel sheet prepared for data entry. Or if you have a  python workflow you can incorporate data validation using data rules of the schema.
+          {/* For example, using a schema as a template, generate an Excel sheet prepared for data entry. Or  */}
+          If you have a  python workflow you can incorporate data validation using data rules of the schema.
         </Typography>
 
         <Box sx={{ width: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
-          <Button
+          {/* <Button
             variant="contained"
             color="navButton"
-            onClick={handleExport}
+            onClick={}
             sx={{ backgroundColor: CustomPalette.PRIMARY, ":hover": { backgroundColor: CustomPalette.SECONDARY }, width: '100%', maxWidth: '300px', marginTop: '20px', marginBottom: '20px' }}
             disabled={true}
           // disabled={disableButtonCheck}
           >
             Generate Data Entry Excel
-          </Button>
-          <CustomAnchorLink link='https://github.com/agrifooddatacanada/OCA_data_set_validator' text="Validate data against a schema" />
+          </Button> */}
+          <CustomAnchorLink link='https://github.com/agrifooddatacanada/OCA_data_set_validator' text="Validate data against a schema" overrideStyle={{ marginTop: 2 }} />
         </Box>
       </AccordionDetails>
     </AccordionItemWrapper>

src/ViewSchema/ViewSchema.js

@@ -9,20 +9,18 @@ import SchemaDescription from "./SchemaDescription";
 import ViewGrid from "./ViewGrid";
 import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
 import LinkCard from "./LinkCard";
-import useGenerateReadMe from "./useGenerateReadMe";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import useExportLogic from "./useExportLogic";
 import { useNavigate } from "react-router-dom";
 
 export default function ViewSchema({ pageBack }) {
   const navigate = useNavigate();
-  const { languages, attributeRowData, lanAttributeRowData, isZip, setIsZip, characterEncodingRowData, setCurrentPage, zipToReadme, history, setHistory } = useContext(Context);
-  const { toTextFile } = useGenerateReadMe();
+  const { languages, attributeRowData, lanAttributeRowData, isZip, setIsZip, characterEncodingRowData, setCurrentPage, history, setHistory } = useContext(Context);
 
   const [currentLanguage, setCurrentLanguage] = useState(languages[0]);
   const [displayArray, setDisplayArray] = useState([]);
   const [showLink, setShowLink] = useState(false);
-  const { handleExport, resetToDefaults, exportDisabled } = useExportLogic(setShowLink);
+  const { handleExport, resetToDefaults, exportDisabled } = useExportLogic();
 
   //Formats language buttons in a way that can handle many languages cleanly
   //Minimizes language for cases where it's too long to fit in button size
@@ -230,13 +228,14 @@ export default function ViewSchema({ pageBack }) {
                 <Button
                   color="button"
                   variant='contained'
-                  onClick={() => toTextFile(zipToReadme)}
+                  onClick={() => handleExport(true)}
                   sx={{
                     alignSelf: "flex-end",
                     display: "flex",
                     justifyContent: "space-around",
                     padding: "0.5rem 1rem",
                   }}
+                  disabled={exportDisabled}
                 >
                   Download ReadMe
                 </Button>
@@ -250,7 +249,7 @@ export default function ViewSchema({ pageBack }) {
                   <Button
                     color="button"
                     variant="contained"
-                    onClick={handleExport}
+                    onClick={() => handleExport(false)}
                     sx={{
                       alignSelf: "flex-end",
                       width: "12rem",
@@ -264,7 +263,7 @@ export default function ViewSchema({ pageBack }) {
                   </Button>
                   <Box sx={{ marginLeft: "1rem" }}>
                     <Tooltip
-                      title="Export your schema in an Excel format. This format includes all the information you’ve provided here. After you have created and downloaded the Excel schema template you can upload it into the SemanticEngine.org to create the machine-actionable OCA Schema Bundle."
+                      title="Export your schema in a .zip machine-readable version and a txt human-readable format using all the information that has been provided here."
                       placement="left"
                       arrow
                     >

src/ViewSchema/useExportLogic.js

@@ -19,7 +19,7 @@ function columnToLetter(column) {
   return letter;
 }
 
-const useExportLogic = (setShowLink = () => { }) => {
+const useExportLogic = () => {
   const {
     languages,
     attributeRowData,
@@ -625,45 +625,50 @@ const useExportLogic = (setShowLink = () => { }) => {
     }
   };
 
-  const downloadZipFile = async (zipFileName) => {
-    const downloadUrl = `${zipUrl}/${zipFileName}`;
-    const response = await fetch(downloadUrl);
-    if (response.ok) {
-      const allJSONFiles = [];
-      const blob = await response.blob();
-      const zipData = await JSZip.loadAsync(blob);
-      const loadMetadataFile = await zipData.files["meta.json"].async("text");
-      const metadataJson = JSON.parse(loadMetadataFile);
-      const root = metadataJson.root;
-      allJSONFiles.push(loadMetadataFile);
-
-      for (const file of Object.values(metadataJson.files[root])) {
-        const content = await zipData.files[file + '.json'].async("text");
-        allJSONFiles.push(content);
-      }
-      const loadRoot = await zipData.files[metadataJson.root + '.json'].async("text");
-      allJSONFiles.push(loadRoot);
-
-      setZipToReadme(allJSONFiles);
-      toTextFile(allJSONFiles);
-
-      const a = document.createElement("a");
-      a.href = downloadUrl;
-      a.download = zipFileName;
-      a.style.display = "none";
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
+  const downloadReadMe = async (responseData) => {
+    const allJSONFiles = [];
+    const blob = await responseData.blob();
+    const zipData = await JSZip.loadAsync(blob);
+    const loadMetadataFile = await zipData.files["meta.json"].async("text");
+    const metadataJson = JSON.parse(loadMetadataFile);
+    const root = metadataJson.root;
+    allJSONFiles.push(loadMetadataFile);
+
+    for (const file of Object.values(metadataJson.files[root])) {
+      const content = await zipData.files[file + '.json'].async("text");
+      allJSONFiles.push(content);
     }
+    const loadRoot = await zipData.files[metadataJson.root + '.json'].async("text");
+    allJSONFiles.push(loadRoot);
+
+    setZipToReadme(allJSONFiles);
+    toTextFile(allJSONFiles);
+  };
+
+  const downloadZip = async (downloadUrl, zipFileName) => {
+    const a = document.createElement("a");
+    a.href = downloadUrl;
+    a.download = zipFileName;
+    a.style.display = "none";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
   };
 
 
-  const handleExport = async () => {
+  const handleExport = async (onlyReadme = false) => {
     setExportDisabled(true);
     const { workbook, workbookName } = handleOCAExport(OCADataArray);
     const fileName = await sendFileToAPI(workbook, workbookName);
-    if (fileName) {
-      downloadZipFile(fileName);
+    const downloadUrl = `${zipUrl}/${fileName}`;
+    const response = await fetch(downloadUrl);
+    if (response.ok) {
+      if (onlyReadme) {
+        downloadReadMe(response);
+      } else {
+        downloadReadMe(response);
+        downloadZip(downloadUrl, fileName);
+      }
     }
     setTimeout(() => {
       setExportDisabled(false);