started 'Upload' feature

Author: anserwaseem

package-lock.json

@@ -23,7 +23,6 @@
     "react-collapsible": "^2.10.0",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",
-    "react-numeric-input": "^2.2.3",
     "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
     "react-xarrows": "^2.0.2",
@@ -56,8 +55,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "devDependencies": {
-    "@types/react-numeric-input": "^2.2.4"
   }
 }

package.json

@@ -13,28 +13,16 @@ import TransitionTable from "../features/TransitionTable";
 import { promptNewStateName } from "../utils/PromptNewStateName";
 import { PossibleTransitionValues } from "../consts/PossibleTransitionValues";
 import { StateNameMaxLength } from "../consts/StateNameMaxLength";
-import { PlaygroundSize } from "./interfaces/playgroundSize";
+import { PlaygroundSize } from "./types/PlaygroundSize";
 import { StyledTransitionLabel } from "../features/components/playground/StyledTransitionLabel";
 import { MaxNumberOfStates } from "../consts/MaxNumberOfStates";
+import { AutomataData } from "./types/AutomataData";
 
-export const DataContext = createContext<{
-  rows: RowModel[];
-  columns: GridColumns;
-  states: DraggableStateModel[];
-  transitions: TransitionModel[];
-}>(
-  {} as {
-    rows: RowModel[];
-    columns: GridColumns;
-    states: DraggableStateModel[];
-    transitions: TransitionModel[];
-  }
-);
+export const DataContext = createContext<AutomataData>({} as AutomataData);
 
 export const Editor = () => {
   console.log("re rendering Editor");
 
-  // const [tempState, setTempState] = useState(23);
   const [rowId, setRowId] = useState(0);
   const [rows, setRows] = useState<RowModel[]>([]);
   const columns: GridColumns = [
@@ -125,13 +113,12 @@ export const Editor = () => {
       size.width,
       size.height
     );
-    let newstate = {
-      id: row.state,
-      x: Math.floor(Math.random() * size.width),
-      y: Math.floor(Math.random() * size.height),
-      shape: "state",
-    };
-    setStates((prev) => [...prev, newstate]);
+    const newState = new DraggableStateModel(
+      row.state,
+      Math.floor(Math.random() * size.width),
+      Math.floor(Math.random() * size.height)
+    );
+    setStates((prev) => [...prev, newState]);
   };
 
   const handleDeleteRow = (row: RowModel) => {
@@ -514,18 +501,12 @@ export const Editor = () => {
     let { x, y } = e.target.getBoundingClientRect();
     const stateName = promptNewStateName(states, `q${rowId}`);
     if (stateName) {
-      let newState = new DraggableStateModel(
+      const newState = new DraggableStateModel(
         stateName,
         e.clientX - x,
         e.clientY - y
       );
-      let newstate = {
-        id: stateName,
-        x: e.clientX - x,
-        y: e.clientY - y,
-        shape: "state",
-      };
-      setStates([...states, newstate]);
+      setStates([...states, newState]);
     }
     console.log("states", states);
 
@@ -569,7 +550,6 @@ export const Editor = () => {
     <DataContext.Provider
       value={{
         rows,
-        columns,
         states,
         transitions,
       }}

src/components/Editor.tsx

@@ -26,26 +26,15 @@ export function NavBar() {
   const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(
     null
   );
-  const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(
-    null
-  );
 
   const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorElNav(event.currentTarget);
   };
 
-  const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorElUser(event.currentTarget);
-  };
-
   const handleCloseNavMenu = () => {
     setAnchorElNav(null);
   };
 
-  const handleCloseUserMenu = () => {
-    setAnchorElUser(null);
-  };
-
   const data = useContext(DataContext);
 
   return (

src/components/Navbar.tsx

@@ -0,0 +1,7 @@
+import { RowModel, DraggableStateModel, TransitionModel } from "../../models";
+
+export type AutomataData = {
+  rows: RowModel[];
+  states: DraggableStateModel[];
+  transitions: TransitionModel[];
+};

src/components/types/AutomataData.ts

@@ -1,18 +1,19 @@
-import { Button, Tooltip, Menu, MenuItem } from "@mui/material";
+import { Button, MenuItem } from "@mui/material";
 import { useContext } from "react";
 import { DataContext } from "../components/Editor";
+import FileDownloadRoundedIcon from "@mui/icons-material/FileDownloadRounded";
 
 export const Download = ({
-  handleCloseUserMenu,
+  handleCloseToolsMenu,
 }: {
-  handleCloseUserMenu: () => void;
+  handleCloseToolsMenu: () => void;
 }) => {
   const data = useContext(DataContext);
 
   return (
     <MenuItem
       onClick={() => {
-        handleCloseUserMenu();
+        handleCloseToolsMenu();
         if (!data) {
           console.log("no data.");
           return;
@@ -31,7 +32,13 @@ export const Download = ({
         element.click();
       }}
     >
-      Download
+      <Button
+        variant="text"
+        component="label"
+        startIcon={<FileDownloadRoundedIcon />}
+      >
+        Download
+      </Button>
     </MenuItem>
   );
 };

src/components/interfaces/playgroundSize.ts renamed to src/components/types/PlaygroundSize.ts

@@ -59,20 +59,12 @@ const Playground = (props: PlaygroundProps) => {
             <div className="toolboxTitle">Drag & drop me!</div>
             <hr />
             <div className="toolboxContainer">
-              {/* {shapes.map((shapeName) => ( */}
               <div
                 className="state"
-                // onDragStart={(e) => {
-                //   console.log("drag start");
-                //   e.dataTransfer.setData("shape", "state");
-                // }}
                 draggable
               >
                 state
-                {/* <div style={{ textAlign: "center" }}> state</div>
-                  <img src={shapeName2Icon[shapeName]} alt="SwitchIcon" className={"switchIcon"} /> */}
               </div>
-              {/* ))} */}
             </div>
           </div>
           <div

src/features/Download.tsx

@@ -15,6 +15,7 @@ import { useEffect, useState } from "react";
 import { MaxNumberOfStates } from "../consts/MaxNumberOfStates";
 import MoreIcon from "@mui/icons-material/MoreVert";
 import { Download } from "./Download";
+import { Upload } from "./Upload";
 
 const getBackgroundColor = (color: string, mode: string) =>
   mode === "dark" ? darken(color, 0) : lighten(color, 0);
@@ -28,7 +29,7 @@ const TransitionTable = (props: TransitionTableProps) => {
     setAnchorElUser(event.currentTarget);
   };
 
-  const handleCloseUserMenu = () => {
+  const handleCloseToolsMenu = () => {
     setAnchorElUser(null);
   };
 
@@ -90,10 +91,10 @@ const TransitionTable = (props: TransitionTableProps) => {
                 horizontal: "left",
               }}
               open={Boolean(anchorElUser)}
-              onClose={handleCloseUserMenu}
+              onClose={handleCloseToolsMenu}
             >
-              <Download handleCloseUserMenu={handleCloseUserMenu} />
-              <MenuItem onClick={handleCloseUserMenu}>Upload</MenuItem>
+              <Download handleCloseToolsMenu={handleCloseToolsMenu} />
+              <Upload handleCloseToolsMenu={handleCloseToolsMenu} />
             </Menu>
           </Box>
         </Grid>

src/features/Playground.tsx

@@ -0,0 +1,84 @@
+import { useState } from "react";
+import { MuiFileInput } from "mui-file-input";
+import { Button, MenuItem } from "@mui/material";
+import FileUploadRoundedIcon from "@mui/icons-material/FileUploadRounded";
+import { RowModel, DraggableStateModel, TransitionModel } from "../models";
+import { AutomataData } from "../components/types/AutomataData";
+
+export const Upload = ({
+  handleCloseToolsMenu,
+}: {
+  handleCloseToolsMenu: () => void;
+}) => {
+  const [data, setData] = useState<AutomataData>({} as AutomataData);
+
+  const handleFileChange = (event: any) => {
+    console.log("handleFileChange");
+    const newFile: File = event?.target?.files[0];
+
+    // if any error occurs, return
+    if (!newFile || newFile?.size <= 0) {
+      alert("Upload failed.");
+      return;
+    }
+
+    const reader = new FileReader();
+    reader.readAsText(newFile);
+    reader.onload = (e) => {
+      // if no result, return
+      if (!e?.target?.result) {
+        alert("Failed reading data.");
+        return;
+      }
+
+      const rawData = JSON.parse(e.target?.result as string);
+      console.log("raw data", rawData);
+
+      // data is corrupted if there are more or less arrays
+      if (Object.keys(rawData)?.length !== 3) {
+        alert("Data is corrupted.");
+        return;
+      }
+
+      const data = rawData as AutomataData;
+      if (!data.rows || data?.rows?.length <= 0) {
+        // if no rows found in data, return
+        alert("No data found");
+        return;
+      }
+
+      console.log("Successfuly uploaded data.");
+      setData(data);
+    };
+    handleCloseToolsMenu();
+  };
+
+  //   const handleChange = (newFile: File) => {
+  //     console.log("newFile", newFile);
+  //     setFile(newFile);
+  //   };
+
+  return (
+    <MenuItem
+    //   onClick={() => {
+    //     // handleCloseToolsMenu();
+    //   }}
+    >
+      {/* <MuiFileInput value={file} onChange={handleChange} />
+      Upload */}
+      <Button
+        variant="text"
+        component="label"
+        startIcon={<FileUploadRoundedIcon />}
+      >
+        Upload
+        <input
+          hidden
+          accept="application/json"
+          type="file"
+          onChange={handleFileChange}
+        />
+      </Button>
+    </MenuItem>
+  );
+};