completed 'Download' and 'Upload' feature

Author: anserwaseem

src/components/Editor.tsx

@@ -549,9 +549,14 @@ export const Editor = () => {
   return (
     <DataContext.Provider
       value={{
+        rowId,
+        setRowId,
         rows,
+        setRows,
         states,
+        setStates,
         transitions,
+        setTransitions,
       }}
     >
       <>

src/components/Navbar.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import AppBar from "@mui/material/AppBar";
 import Box from "@mui/material/Box";
 import Toolbar from "@mui/material/Toolbar";
@@ -7,23 +6,20 @@ import Typography from "@mui/material/Typography";
 import Menu from "@mui/material/Menu";
 import MenuIcon from "@mui/icons-material/Menu";
 import Container from "@mui/material/Container";
-import MoreIcon from "@mui/icons-material/MoreVert";
 import Button from "@mui/material/Button";
-import Tooltip from "@mui/material/Tooltip";
 import MenuItem from "@mui/material/MenuItem";
 import AdbIcon from "@mui/icons-material/Adb";
 import { Pages } from "../enums/Pages";
 import { Link as RouterLink } from "react-router-dom";
 import Link from "@mui/material/Link";
-import { useContext } from "react";
-import { DataContext } from "./Editor";
+import { useState } from "react";
 
 const pages = Object.values(Pages);
 
 export function NavBar() {
   console.log("re rendering Navbar");
 
-  const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(
+  const [anchorElNav, setAnchorElNav] = useState<null | HTMLElement>(
     null
   );
 
@@ -35,8 +31,6 @@ export function NavBar() {
     setAnchorElNav(null);
   };
 
-  const data = useContext(DataContext);
-
   return (
     <AppBar position="static">
       <Container maxWidth="xl">

src/components/types/AutomataData.ts

@@ -1,7 +1,12 @@
 import { RowModel, DraggableStateModel, TransitionModel } from "../../models";
 
 export type AutomataData = {
+  rowId: number;
+  setRowId: React.Dispatch<React.SetStateAction<number>>;
   rows: RowModel[];
+  setRows: React.Dispatch<React.SetStateAction<RowModel[]>>;
   states: DraggableStateModel[];
+  setStates: React.Dispatch<React.SetStateAction<DraggableStateModel[]>>;
   transitions: TransitionModel[];
+  setTransitions: React.Dispatch<React.SetStateAction<TransitionModel[]>>;
 };

src/features/Download.tsx

@@ -8,22 +8,22 @@ export const Download = ({
 }: {
   handleCloseToolsMenu: () => void;
 }) => {
-  const data = useContext(DataContext);
+  const dataContext = useContext(DataContext);
 
   return (
     <MenuItem
       onClick={() => {
         handleCloseToolsMenu();
-        if (!data) {
+        if (!dataContext) {
           console.log("no data.");
           return;
         }
-        if (data?.states?.length === 0) {
+        if (dataContext?.states?.length === 0) {
           alert("no data to download.");
           return;
         }
         const element = document.createElement("a");
-        const file = new Blob([JSON.stringify(data)], {
+        const file = new Blob([JSON.stringify(dataContext)], {
           type: "application/json",
         });
         element.href = URL.createObjectURL(file);

src/features/Playground.tsx

@@ -8,15 +8,18 @@ import State from "./components/playground/State";
 import Xarrow from "./components/playground/Xarrow";
 import useElementSize from "./hooks/useElementSize";
 import { useEffect } from "react";
+import { XarrowProps } from "./components/playground/props/XarrowProps";
 
 const Playground = (props: PlaygroundProps) => {
   console.log("re rendering Playground: props", props);
 
   const [boxRef, { width, height }] = useElementSize();
+  const { setSize } = props;
+
   useEffect(() => {
     console.log("useEffect of playground due to width & height", width, height);
-    props.setSize({ width, height });
-  }, [width, height]);
+    setSize({ width, height });
+  }, [width, height, setSize]);
 
   const topBarprops: TopBarProps = {
     states: props.states,
@@ -47,6 +50,11 @@ const Playground = (props: PlaygroundProps) => {
     setRows: props.setRows,
   };
 
+  const xarrowProps: XarrowProps = {
+    selected: props.selected,
+    setSelected: props.setSelected,
+  };
+
   return (
     <div>
       <Xwrapper>
@@ -59,10 +67,7 @@ const Playground = (props: PlaygroundProps) => {
             <div className="toolboxTitle">Drag & drop me!</div>
             <hr />
             <div className="toolboxContainer">
-              <div
-                className="state"
-                draggable
-              >
+              <div className="state" draggable>
                 state
               </div>
             </div>
@@ -89,10 +94,9 @@ const Playground = (props: PlaygroundProps) => {
           {/* xarrow connections*/}
           {props.transitions.map((transition, i) => (
             <Xarrow
+              {...xarrowProps}
               key={transition.props.start + "-" + transition.props.end + i}
               transition={transition}
-              selected={props.selected}
-              setSelected={props.setSelected}
             />
           ))}
         </div>

src/features/TransitionTable.tsx

@@ -1,17 +1,9 @@
-import {
-  Box,
-  Button,
-  Grid,
-  IconButton,
-  Menu,
-  MenuItem,
-  Tooltip,
-} from "@mui/material";
+import { Box, Button, Grid, IconButton, Menu, Tooltip } from "@mui/material";
 import { DataGrid } from "@mui/x-data-grid";
 import { darken, lighten } from "@mui/material/styles";
 import { TransitionTableProps } from "./props/TransitionTableProps";
 import { RowModel } from "../models";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { MaxNumberOfStates } from "../consts/MaxNumberOfStates";
 import MoreIcon from "@mui/icons-material/MoreVert";
 import { Download } from "./Download";
@@ -33,13 +25,6 @@ const TransitionTable = (props: TransitionTableProps) => {
     setAnchorElUser(null);
   };
 
-  useEffect(() => {
-    console.log(
-      "useEffect of transition table due to props.rows: props",
-      props
-    );
-  }, [props.rows]);
-
   return (
     <>
       <Grid container alignItems={"center"}>

src/features/Upload.tsx

@@ -1,71 +1,73 @@
-import { useState } from "react";
-import { MuiFileInput } from "mui-file-input";
+import { useContext } from "react";
 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";
+import { DataContext } from "../components/Editor";
+import { TransitionModel } from "../models";
+import { StyledTransitionLabel } from "./components/playground/StyledTransitionLabel";
 
 export const Upload = ({
   handleCloseToolsMenu,
 }: {
   handleCloseToolsMenu: () => void;
 }) => {
-  const [data, setData] = useState<AutomataData>({} as AutomataData);
+  const dataContext = useContext(DataContext);
+
+  const handleSetTransitions = (transitions: TransitionModel[]) => {
+    transitions.forEach((transition) => {
+      transition.props.labels =
+        transition.props.value === "" ? (
+          ""
+        ) : (
+          <StyledTransitionLabel label={transition.props.value} />
+        );
+    });
+  };
 
   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;
-    }
+    if (event?.target?.files?.length > 0) {
+      const newFile: File = event?.target?.files[0];
 
-    const reader = new FileReader();
-    reader.readAsText(newFile);
-    reader.onload = (e) => {
-      // if no result, return
-      if (!e?.target?.result) {
-        alert("Failed reading data.");
-        return;
-      }
+      const reader = new FileReader();
+      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);
+        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;
-      }
+        // data is corrupted if there are more or less arrays
+        if (Object.keys(rawData)?.length !== 4) {
+          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;
-      }
+        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);
-    };
+        dataContext?.setRowId(data.rowId);
+        dataContext?.setRows(data.rows);
+        dataContext?.setStates(data.states);
+        handleSetTransitions(data.transitions);
+        dataContext?.setTransitions(data.transitions);
+        console.log("Successfuly uploaded data.");
+      };
+      reader.readAsText(newFile);
+      event.target.value = "";
+    }
     handleCloseToolsMenu();
   };
 
-  //   const handleChange = (newFile: File) => {
-  //     console.log("newFile", newFile);
-  //     setFile(newFile);
-  //   };
-
   return (
-    <MenuItem
-    //   onClick={() => {
-    //     // handleCloseToolsMenu();
-    //   }}
-    >
-      {/* <MuiFileInput value={file} onChange={handleChange} />
-      Upload */}
+    <MenuItem>
       <Button
         variant="text"
         component="label"

src/features/components/playground/State.tsx

@@ -1,4 +1,3 @@
-import React, { useEffect, useState } from "react";
 import "./css/Box.css";
 import Draggable from "react-draggable";
 import { useXarrow } from "react-xarrows";
@@ -106,7 +105,7 @@ export const State = (props: any) => {
   }
 
   return (
-    <React.Fragment>
+    <>
       <Draggable
         onStart={props.position !== "static" ? () => {} : undefined}
         bounds="parent"
@@ -127,7 +126,7 @@ export const State = (props: any) => {
           {props.state.name ? props.state.name : props.state.id}
         </div>
       </Draggable>
-    </React.Fragment>
+    </>
   );
 };
 

src/features/components/playground/TopBar.tsx

@@ -1,10 +1,6 @@
 import "./css/TopBar.css";
 import { TopBarProps } from "./props/TopBarProps";
-import {
-  DraggableStateModel,
-  RowModel,
-  TransitionModel,
-} from "../../../models";
+import { RowModel } from "../../../models";
 import { SelectedElementTypeId } from "../../props/SelectedElementType";
 import { promptNewStateName } from "../../../utils/PromptNewStateName";
 import { promptNewTransitionValue } from "../../../utils/PromptNewTransitionValue";

src/features/components/playground/Xarrow.tsx

@@ -1,8 +1,6 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import Xarrow from "react-xarrows";
-import { TransitionModel } from "../../../models";
 
-//{props: {transition, setSelected, selected}}
 export default ({ setSelected, selected, transition: { props } }: any) => {
   console.log("re rendering Xarrow: props", props);
   const [state, setState] = useState({ color: "coral" });