Fix/export character encoding (#65)

* Fixed character encoding problem

* Removed buttons in review page

* Comments out unused codes

* Added backward button to delete overlay

* Added remove current overlay

src/App.js

@@ -51,6 +51,7 @@ export const pagesArray = [
 
 function App() {
   const [isZip, setIsZip] = useState(false);
+  const [isZipEdited, setIsZipEdited] = useState(false);
   const [zipToReadme, setZipToReadme] = useState([]);
   const [fileData, setFileData] = useState([]);
   const [rawFile, setRawFile] = useState([]);
@@ -290,6 +291,8 @@ function App() {
             setSelectedOverlay,
             zipToReadme,
             setZipToReadme,
+            isZipEdited,
+            setIsZipEdited,
           }}
         >
           <Box

src/Overlays/CharacterEncoding.js

@@ -8,10 +8,18 @@ import BackNextSkeleton from "../components/BackNextSkeleton";
 import CellHeader from "../components/CellHeader";
 import { gridStyles, preWrapWordBreak } from "../constants/styles";
 import { CustomPalette } from "../constants/customPalette";
+import DeleteConfirmation from "./DeleteConfirmation";
 
 const CharacterEncoding = () => {
-  const { characterEncodingRowData, setCurrentPage, setSelectedOverlay } = useContext(Context);
+  const {
+    characterEncodingRowData,
+    setCurrentPage,
+    setSelectedOverlay,
+    setCharacterEncodingRowData,
+    setOverlay,
+  } = useContext(Context);
   const [columnDefs, setColumnDefs] = useState([]);
+  const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false);
   const gridRef = useRef();
   const { handleSave, applyAllFunc, CharacterEncodingTypeRenderer } = useCharacterEncodingType(gridRef);
 
@@ -43,8 +51,33 @@ const CharacterEncoding = () => {
     setCurrentPage('Overlays');
   };
 
+  const handleDeleteCurrentOverlay = () => {
+    setOverlay((prev) => ({
+      ...prev,
+      "Character Encoding": {
+        ...prev["Character Encoding"],
+        selected: false,
+      },
+    }));
+
+    // Delete attribute from characterEncodingRowData
+    const newCharacterEncodingRowData = characterEncodingRowData.map((row) => {
+      delete row['Character Encoding'];
+      return row;
+    });
+    setCharacterEncodingRowData(newCharacterEncodingRowData);
+    setSelectedOverlay('');
+    setCurrentPage('Overlays');
+  };
+
   return (
-    <BackNextSkeleton isForward pageForward={handleForward}>
+    <BackNextSkeleton isForward pageForward={handleForward} isBack pageBack={() => setShowDeleteConfirmation(true)} backText="Remove overlay">
+      {showDeleteConfirmation && (
+        <DeleteConfirmation
+          removeFromSelected={handleDeleteCurrentOverlay}
+          closeModal={() => setShowDeleteConfirmation(false)}
+        />
+      )}
       <Box
         sx={{
           margin: "2rem",

src/Overlays/FormatRules.js

@@ -9,15 +9,42 @@ import { gridStyles, preWrapWordBreak } from '../constants/styles';
 import { greyCellStyle } from '../constants/styles';
 import TypeTooltip from '../AttributeDetails/TypeTooltip';
 import useFormatTextType from './useFormatTextType';
+import DeleteConfirmation from './DeleteConfirmation';
 
 const FormatRules = () => {
-  const { attributeRowData, setCurrentPage, setSelectedOverlay, formatRuleRowData } =
-    useContext(Context);
-
+  const {
+    attributeRowData,
+    setCurrentPage,
+    setSelectedOverlay,
+    formatRuleRowData,
+    characterEncodingRowData,
+    setCharacterEncodingRowData,
+    setOverlay,
+  } = useContext(Context);
+  const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false);
   const gridRef = useRef();
   const { handleSave, FormatRuleTypeRenderer, buttonArray } =
     useFormatTextType(gridRef);
 
+  const handleDeleteCurrentOverlay = () => {
+    setOverlay((prev) => ({
+      ...prev,
+      "Add format rule for data": {
+        ...prev["Add format rule for data"],
+        selected: false,
+      },
+    }));
+
+    // Delete attribute from characterEncodingRowData
+    const newCharacterEncodingRowData = characterEncodingRowData.map((row) => {
+      delete row['Add format rule for data'];
+      return row;
+    });
+    setCharacterEncodingRowData(newCharacterEncodingRowData);
+    setSelectedOverlay('');
+    setCurrentPage('Overlays');
+  };
+
   const columnDefs = useMemo(() => {
     return [
       {
@@ -64,7 +91,13 @@ const FormatRules = () => {
   };
 
   return (
-    <BackNextSkeleton isForward pageForward={handleForward}>
+    <BackNextSkeleton isForward pageForward={handleForward} isBack pageBack={() => setShowDeleteConfirmation(true)} backText="Remove overlay">
+      {showDeleteConfirmation && (
+        <DeleteConfirmation
+          removeFromSelected={handleDeleteCurrentOverlay}
+          closeModal={() => setShowDeleteConfirmation(false)}
+        />
+      )}
       <Box
         sx={{
           margin: '2rem',

src/Overlays/RequiredEntries.js

@@ -5,9 +5,18 @@ import { Box } from '@mui/material';
 import { flexCenter, gridStyles, preWrapWordBreak } from '../constants/styles';
 import { AgGridReact } from 'ag-grid-react';
 import CellHeader from '../components/CellHeader';
+import DeleteConfirmation from './DeleteConfirmation';
 
 const RequiredEntries = () => {
-  const { attributesList, characterEncodingRowData, setCurrentPage, setSelectedOverlay } = useContext(Context);
+  const {
+    attributesList,
+    characterEncodingRowData,
+    setCurrentPage,
+    setSelectedOverlay,
+    setCharacterEncodingRowData,
+    setOverlay,
+  } = useContext(Context);
+  const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false);
   const [columnDefs, setColumnDefs] = useState([]);
   const gridRef = useRef();
 
@@ -88,8 +97,33 @@ const RequiredEntries = () => {
     setCurrentPage('Overlays');
   };
 
+  const handleDeleteCurrentOverlay = () => {
+    setOverlay((prev) => ({
+      ...prev,
+      "Make selected entries required": {
+        ...prev["Make selected entries required"],
+        selected: false,
+      },
+    }));
+
+    // Delete attribute from characterEncodingRowData
+    const newCharacterEncodingRowData = characterEncodingRowData.map((row) => {
+      delete row['Make selected entries required'];
+      return row;
+    });
+    setCharacterEncodingRowData(newCharacterEncodingRowData);
+    setSelectedOverlay('');
+    setCurrentPage('Overlays');
+  };
+
   return (
-    <BackNextSkeleton isForward pageForward={handleForward}>
+    <BackNextSkeleton isForward pageForward={handleForward} isBack pageBack={() => setShowDeleteConfirmation(true)} backText="Remove overlay">
+      {showDeleteConfirmation && (
+        <DeleteConfirmation
+          removeFromSelected={handleDeleteCurrentOverlay}
+          closeModal={() => setShowDeleteConfirmation(false)}
+        />
+      )}
       <Box
         sx={{
           margin: "2rem",

src/ViewSchema/ViewSchema.js

@@ -12,10 +12,11 @@ import LinkCard from "./LinkCard";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import useExportLogic from "./useExportLogic";
 import { useNavigate } from "react-router-dom";
+import { set } from "react-ga";
 
 export default function ViewSchema({ pageBack }) {
   const navigate = useNavigate();
-  const { languages, attributeRowData, lanAttributeRowData, isZip, setIsZip, characterEncodingRowData, setCurrentPage, history, setHistory, formatRuleRowData } = useContext(Context);
+  const { languages, attributeRowData, lanAttributeRowData, isZip, isZipEdited, setIsZipEdited, characterEncodingRowData, setCurrentPage, history, setHistory, formatRuleRowData } = useContext(Context);
 
   const [currentLanguage, setCurrentLanguage] = useState(languages[0]);
   const [displayArray, setDisplayArray] = useState([]);
@@ -212,38 +213,42 @@ export default function ViewSchema({ pageBack }) {
             <ArrowBackIosIcon /> Back
           </Button>
           <Box sx={{ display: 'flex', flexDirection: 'row', gap: 3 }}>
-            <Button
-              color="button"
-              variant='contained'
-              onClick={() => {
-                setCurrentPage("Metadata");
-                setIsZip(false);
-              }}
-              sx={{
-                alignSelf: "flex-end",
-                display: "flex",
-                justifyContent: "space-around",
-                padding: "0.5rem 1rem",
-              }}
-            >
-              Edit Schema
-            </Button>
-            {!isZip ? (
-              <Box sx={{ display: 'flex', flexDirection: 'row', gap: 3 }}>
-                <Button
-                  color="button"
-                  variant='contained'
-                  onClick={() => handleExport(true)}
-                  sx={{
-                    alignSelf: "flex-end",
-                    display: "flex",
-                    justifyContent: "space-around",
-                    padding: "0.5rem 1rem",
-                  }}
-                  disabled={exportDisabled}
-                >
-                  Download ReadMe
-                </Button>
+            <Box sx={{ display: 'flex', flexDirection: 'row', gap: 3 }}>
+              {isZip && (
+                <>
+                  <Button
+                    color="button"
+                    variant='contained'
+                    onClick={() => {
+                      setCurrentPage("Metadata");
+                      setIsZipEdited(true);
+                    }}
+                    sx={{
+                      alignSelf: "flex-end",
+                      display: "flex",
+                      justifyContent: "space-around",
+                      padding: "0.5rem 1rem",
+                    }}
+                  >
+                    Edit Schema
+                  </Button>
+                  <Button
+                    color="button"
+                    variant='contained'
+                    onClick={() => handleExport(true)}
+                    sx={{
+                      alignSelf: "flex-end",
+                      display: "flex",
+                      justifyContent: "space-around",
+                      padding: "0.5rem 1rem",
+                    }}
+                    disabled={exportDisabled}
+                  >
+                    Download ReadMe
+                  </Button>
+                </>
+              )}
+              {!isZip || (isZip && isZipEdited) ? (
                 <Box
                   sx={{
                     display: "flex",
@@ -276,8 +281,10 @@ export default function ViewSchema({ pageBack }) {
                     </Tooltip>
                   </Box>
                 </Box>
-              </Box>
-            ) : <></>}
+              ) :
+                <></>
+              }
+            </Box>
 
           </Box>
 

src/ViewSchema/useExportLogic.js

@@ -380,20 +380,9 @@ const useExportLogic = () => {
           formulae: ['"Y"'],
         };
 
-        // Default certain attributes to utf-8 or base64
         const encodingCell = worksheetMain.getCell(index + 4, 6);
-        if (characterEncodingRowData?.[index] && characterEncodingRowData?.[index]?.['Character Encoding']) {
+        if (overlay["Character Encoding"].selected && characterEncodingRowData?.[index] && characterEncodingRowData?.[index]?.['Character Encoding']) {
           encodingCell.value = characterEncodingRowData[index]['Character Encoding'];
-        } else {
-          encodingCell.value = {
-            formula: `IF(OR(C${index + 4}="Binary", C${index + 4
-              }="Array[Binary]"), "base64", "utf-8")`,
-
-            result:
-              typeCell.value === "Binary" || typeCell.value === "Array[Binary]"
-                ? "base64"
-                : "utf-8",
-          };
         }
 
         // Add format rules here
@@ -586,7 +575,7 @@ const useExportLogic = () => {
     //     a.download = workbookName;
     //     a.click();
     //   });
-    //   setShowLink(true);
+    //   // setShowLink(true);
     //   setExportDisabled(true);
     //   setTimeout(() => {
     //     setExportDisabled(false);

src/components/BackNextSkeleton.js

@@ -3,7 +3,7 @@ import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
 import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
 import { CustomPalette } from "../constants/customPalette";
 
-const BackNextSkeleton = ({ errorMessage = '', isBack = false, pageBack, isForward = false, pageForward, children }) => {
+const BackNextSkeleton = ({ errorMessage = '', isBack = false, pageBack, isForward = false, pageForward, children, backText = 'Back' }) => {
   return (
     <Box>
       <Box
@@ -30,7 +30,7 @@ const BackNextSkeleton = ({ errorMessage = '', isBack = false, pageBack, isForwa
             sx={{ textAlign: "left", alignSelf: "flex-start" }}
             onClick={pageBack}
           >
-            <ArrowBackIosIcon /> Back
+            <ArrowBackIosIcon /> {backText}
           </Button> : <Box />}
           <Box sx={{ alignSelf: "flex-end" }}>
             {isForward && <Button