kml upload ux - menu closes for user when done

appv2/src/UI/Map/Buttons/CustomizeLayerDialog.tsx

@@ -17,6 +17,7 @@ import React, { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { TOGGLE_CUSTOMIZE_LAYERS } from 'state/actions';
+import KMLShapesUpload from './KMLShapesUpload';
 
 const useStyles = makeStyles((theme: Theme) => ({
   formContainer: {
@@ -56,6 +57,7 @@ const CustomizeLayerMenu = (props) => {
   const [optionVal, setOptionVal] = useState('Draw');
   const [subMenuType, setSubMenuType] = useState('Init');
   const [newLayerName, setNewLayerName] = useState('');
+  const [layerToDelete, setLayerToDelete] = useState(null);
 
 
   // two of each type
@@ -64,8 +66,17 @@ const CustomizeLayerMenu = (props) => {
   const cleanup = () => {
     setSubMenuType('Init');
     setOptionVal('Draw');
+    setLayerToDelete(null);
+    setNewLayerName('');
   };
 
+
+  const onKMLDone = () => {
+    cleanup();
+    dispatch({ type: TOGGLE_CUSTOMIZE_LAYERS })
+  }
+
+
   return (
     <Dialog open={dialogueOpen}>
       <DialogTitle>Add or remove a custom layer</DialogTitle>
@@ -102,7 +113,7 @@ const CustomizeLayerMenu = (props) => {
                 <Select
                   className={classes.select}
                   value={optionVal}
-                  onChange={(e) => setOptionVal(e.target.value)}
+                  onChange={(e) => setLayerToDelete(e.target.value)}
                   label="Choose Layer to remove">
                   {customLayers.map((option) => (
                     <MenuItem key={Math.random()} value={option.id}>
@@ -112,6 +123,9 @@ const CustomizeLayerMenu = (props) => {
                 </Select>
               </FormControl>
             ),
+            Upload: (
+              <KMLShapesUpload title={newLayerName} open={subMenuType === 'Upload'} whenDone={onKMLDone}/>
+            ),
             Init: <></>
           }[subMenuType]
         }
@@ -138,17 +152,19 @@ const CustomizeLayerMenu = (props) => {
             ),
             New: (
               <>
-                <Button onClick={() => {}}>Create</Button>
                 <Button onClick={() => {
-                  setSubMenuType('Init');
+                  setSubMenuType('Upload')
+                }}>Create</Button>
+                <Button onClick={() => {
+                  cleanup()
                 }}>Back</Button>
               </>
             ),
             Remove: (
               <>
-                <Button onClick={() => {}}>Remove</Button>
+                <Button disabled={layerToDelete === null} onClick={() => {}}>Remove</Button>
                 <Button onClick={() => {
-                  setSubMenuType('Init');
+                  cleanup()
                 }}>Back</Button>
               </>
             )

appv2/src/UI/Map/Buttons/KMLShapesUpload.tsx

@@ -0,0 +1,131 @@
+import React, { useState, useContext } from 'react';
+import { Box, Button, Theme, Typography } from '@mui/material';
+import { DropzoneDialog } from 'mui-file-dropzone';
+import makeStyles from '@mui/styles/makeStyles';
+
+export interface IShapeUploadRequest {
+  data: string;
+  type: 'kml' | 'kmz';
+  user_id: string;
+  title: string;
+}
+
+const useStyles = makeStyles((theme: Theme) => ({
+  itemsContainer: { display: 'flex', justifyContent: 'start', alignItems: 'center', width: '100%', flexWrap: 'wrap' },
+  buttonsContainer: { display: 'flex', justifyContent: 'stretch' },
+  button: { flexGrow: 1, marginLeft: 10, marginRight: 10 },
+  componentContainer: { maxWidth: '500px', padding: 7 },
+  messageContainer: {
+    padding: 7,
+    width: '100%'
+  }
+}));
+
+//   var extension = input?.name?.split('.').pop();
+export const KMLShapesUpload: React.FC<any> = (props) => {
+  const classes = useStyles();
+  const [uploadRequests, setUploadRequests] = useState([]);
+  const [dialogOpen, setDialogOpen] = React.useState(false);
+  //const api = useInvasivesApi();
+  const [resultMessage, setResultMessage] = useState('');
+  const [uploadClicked, setUploadClicked] = useState(false);
+
+
+  const doUpload = async () => {
+    let response;
+    try {
+      for (let i = 0; i < uploadRequests.length; i++) {
+        console.log();
+        //response = await api.postAdminUploadShape(uploadRequests[i]);
+        console.log(response);
+        if (response.code !== 201) {
+          throw new Error(response.message);
+        }
+        setUploadRequests((prev) => {
+          if (prev.length < 2) {
+            return [];
+          } else {
+            return [...prev].splice(i, 1);
+          }
+        });
+      }
+      setResultMessage('Files uploaded successfully');
+      setUploadClicked(false);
+      setTimeout(() => {
+        setResultMessage('');
+        if (props?.callback) props.callback();
+      }, 2000);
+    } catch (err) {
+      setUploadRequests([]);
+      setResultMessage('There was an error: ' + err);
+      setUploadClicked(false);
+      setTimeout(() => {
+        setResultMessage('');
+      }, 2000);
+    }
+    Promise.resolve();
+  };
+
+  const acceptFiles = (files: File[]) => {
+    setUploadRequests([]);
+    if (files.length < 1) {
+      return;
+    }
+
+    files.forEach((file) => {
+      let status: string;
+      const defaultTitle = file.name.split('.')[0];
+
+      let fileType: string;
+      fileType = file.name.split('.').pop();
+
+      const reader = new FileReader();
+
+      reader.onabort = () => (status = 'file reading was aborted');
+      reader.onerror = () => (status = 'file reading has failed');
+      reader.onload = () => {
+        const encodedString = btoa(reader.result as string);
+
+        setUploadRequests((prev) => {
+          const newRequest = [...prev];
+          newRequest.push({
+            type: fileType,
+            data: encodedString,
+            // user_id: extendedInfo.user_id,
+            title: defaultTitle,
+            status: status
+          });
+          return newRequest;
+        });
+      };
+
+      reader.readAsBinaryString(file);
+    });
+  };
+
+  return (
+    <Box className={classes.componentContainer}>
+      <DropzoneDialog
+        acceptedFiles={['.kml,.kmz']}
+        filesLimit={1}
+        cancelButtonText={'cancel'}
+        submitButtonText={'Upload to InvasivesBC'}
+        open={props.open}
+        onSave={(files: any) => {
+          acceptFiles(files);
+          doUpload().then(() => {
+            props.whenDone();
+            console.log('done')
+          });
+        }}
+        showPreviews={true}
+        previewText={'File will be uploaded to InvasivesBC as ' + props.title}
+        maxFileSize={10485760}
+      />
+
+      {resultMessage && <Box className={classes.messageContainer}>{resultMessage}</Box>}
+    </Box>
+  );
+};
+
+export default KMLShapesUpload;