changed name of grid related states

Author: anserwaseem

src/components/Editor.tsx

@@ -20,9 +20,9 @@ import { MaxNumberOfStates } from "../consts/MaxNumberOfStates";
 const Editor = () => {
   console.log("re rendering Editor");
 
-  const [gridRowId, setGridRowId] = useState(0);
-  const [gridData, setGridData] = useState<RowModel[]>([]);
-  const gridColumns: GridColumns = [
+  const [rowId, setRowId] = useState(0);
+  const [rows, setRows] = useState<RowModel[]>([]);
+  const columns: GridColumns = [
     { field: "id", hide: true, hideable: false },
     {
       field: "node",
@@ -103,8 +103,8 @@ const Editor = () => {
       alert(`Maximum ${MaxNumberOfStates} states allowed`);
       return;
     }
-    setGridData((prev) => [...prev, row]);
-    setGridRowId((prev) => prev + 1);
+    setRows((prev) => [...prev, row]);
+    setRowId((prev) => prev + 1);
     console.log(
       "added row, now adding new state at: ",
       size.width,
@@ -123,7 +123,7 @@ const Editor = () => {
     console.log("handleDeleteRow", row);
     console.log(
       "resultant data",
-      gridData
+      rows
         .filter((r) => r.id !== row.id)
         .map((r) => {
           return {
@@ -142,7 +142,7 @@ const Editor = () => {
         })
     );
 
-    setGridData((rows) =>
+    setRows((rows) =>
       rows
         .filter((r) => r.id !== row.id)
         .map((r) => {
@@ -177,14 +177,14 @@ const Editor = () => {
 
   const handleSaveRow = (row: RowModel) => {
     console.log("handleSaveRow", row);
-    console.log("handleSaveRow", gridData);
+    console.log("handleSaveRow", rows);
 
     if (isRowEmpty(row)) {
       alert("Cannot save empty row.");
       return;
     }
 
-    const oldRow = gridData.find((r) => r.id === row.id);
+    const oldRow = rows.find((r) => r.id === row.id);
     if (!oldRow) {
       alert("Cannot save row.");
       return;
@@ -193,7 +193,7 @@ const Editor = () => {
     if (row.node.length > StateNameMaxLength) {
       alert(`State name cannot be more than ${StateNameMaxLength} characters.`);
       if (oldRow) {
-        setGridData((prev) => prev.map((r) => (r.id === row.id ? oldRow : r)));
+        setRows((prev) => prev.map((r) => (r.id === row.id ? oldRow : r)));
       }
       return;
     }
@@ -210,17 +210,17 @@ const Editor = () => {
         `Cannot change state name when transition values are added/updated/removed.`
       );
       if (oldRow) {
-        setGridData((prev) => prev.map((r) => (r.id === row.id ? oldRow : r)));
+        setRows((prev) => prev.map((r) => (r.id === row.id ? oldRow : r)));
       }
       return;
     }
 
     const nulPossibleTransitionValues = PossibleTransitionValues.map((v) =>
       v === "^" ? "nul" : v
     );
-    let updatedGridData: RowModel[] = [];
+    let updatedRows: RowModel[] = [];
     let errorWhileSavingRow = false;
-    setGridData((prev) => {
+    setRows((prev) => {
       console.log("handleSaveRow prev", prev);
       let availableNodeValues = prev.map((r) => r.node).filter((v) => v !== "");
       // if (oldRow.node !== row.node)
@@ -266,7 +266,7 @@ const Editor = () => {
         return prev;
       }
 
-      updatedGridData = prev.map((r) =>
+      updatedRows = prev.map((r) =>
         r.id === row.id
           ? {
               ...r,
@@ -299,7 +299,7 @@ const Editor = () => {
             }
       );
 
-      return updatedGridData;
+      return updatedRows;
     });
 
     if (!errorWhileSavingRow) {
@@ -511,7 +511,7 @@ const Editor = () => {
 
   const toggleInitialState = (row: RowModel) => {
     console.log("toggleInitialState", row);
-    setGridData((prev) => {
+    setRows((prev) => {
       console.log("toggleInitialState prev", prev);
       if (!prev || isRowEmpty(row)) {
         alert("Cannot make empty row initial state.");
@@ -543,7 +543,7 @@ const Editor = () => {
 
   const toggleFinalState = (row: RowModel) => {
     console.log("toggleFinalState", row);
-    setGridData((prev) => {
+    setRows((prev) => {
       console.log("toggleFinalState prev", prev);
       if (!prev || isRowEmpty(row)) {
         alert("Cannot make empty row final state.");
@@ -590,7 +590,7 @@ const Editor = () => {
     }
 
     let { x, y } = e.target.getBoundingClientRect();
-    const stateName = promptNewStateName(states, `q${gridRowId}`);
+    const stateName = promptNewStateName(states, `q${rowId}`);
     if (stateName) {
       let newState = new DraggableStateModel(
         stateName,
@@ -607,19 +607,19 @@ const Editor = () => {
     }
     console.log("states", states);
 
-    setGridData((prev) => [
+    setRows((prev) => [
       ...prev,
-      new RowModel(gridRowId, stateName, "", "", "", false, false),
+      new RowModel(rowId, stateName, "", "", "", false, false),
     ]);
-    setGridRowId((prev) => prev + 1);
+    setRowId((prev) => prev + 1);
   };
 
   const transitionTableProps: TransitionTableProps = {
-    gridData,
-    setGridData,
-    gridColumns,
-    gridRowId,
-    setGridRowId,
+    rows,
+    setRows,
+    columns,
+    rowId,
+    setRowId,
     handleAddRow,
   };
 
@@ -635,8 +635,8 @@ const Editor = () => {
     handleSelect,
     checkExsitence,
     handleDropDynamic,
-    gridData,
-    setGridData,
+    rows,
+    setRows,
     handleDeleteRow,
     toggleInitialState,
     toggleFinalState,

src/features/Playground.tsx

@@ -29,8 +29,8 @@ const Playground = (props: PlaygroundProps) => {
     handleSelect: props.handleSelect,
     actionState: props.actionState,
     setActionState: props.setActionState,
-    gridData: props.gridData,
-    setGridData: props.setGridData,
+    rows: props.rows,
+    setRows: props.setRows,
     handleDeleteRow: props.handleDeleteRow,
     toggleInitialState: props.toggleInitialState,
     toggleFinalState: props.toggleFinalState,
@@ -44,8 +44,8 @@ const Playground = (props: PlaygroundProps) => {
     selected: props.selected,
     handleSelect: props.handleSelect,
     actionState: props.actionState,
-    gridData: props.gridData,
-    setGridData: props.setGridData,
+    rows: props.rows,
+    setRows: props.setRows,
   };
 
   return (

src/features/TransitionTable.tsx

@@ -14,10 +14,10 @@ const TransitionTable = (props: TransitionTableProps) => {
 
   useEffect(() => {
     console.log(
-      "useEffect of transition table due to props.gridData: props",
+      "useEffect of transition table due to props.rows: props",
       props
     );
-  }, [props.gridData]);
+  }, [props.rows]);
 
   return (
     <>
@@ -26,8 +26,8 @@ const TransitionTable = (props: TransitionTableProps) => {
         onClick={() =>
           props.handleAddRow(
             new RowModel(
-              props.gridRowId,
-              `q${props.gridRowId}`,
+              props.rowId,
+              `q${props.rowId}`,
               "",
               "",
               "",
@@ -67,8 +67,8 @@ const TransitionTable = (props: TransitionTableProps) => {
         }}
       >
         <DataGrid
-          rows={props.gridData}
-          columns={props.gridColumns}
+          rows={props.rows}
+          columns={props.columns}
           autoHeight
           hideFooter
           experimentalFeatures={{ newEditingApi: true }}

src/features/components/playground/State.tsx

@@ -86,20 +86,20 @@ export const State = (props: any) => {
   }
   // link for these color names and codes: https://mui.com/material-ui/customization/palette/
   else if (
-    props.gridData.find(
+    props.rows.find(
       (row: RowModel) =>
         row.node === props.state.id && row.isInitial && row.isFinal
     )
   ) {
     background = "#4fc3f7"; // mui theme.palette.info.light
   } else if (
-    props.gridData.find(
+    props.rows.find(
       (row: RowModel) => row.node === props.state.id && row.isInitial
     )
   ) {
     background = "#ffb74d"; // mui theme.palette.warning.light
   } else if (
-    props.gridData.find(
+    props.rows.find(
       (row: RowModel) => row.node === props.state.id && row.isFinal
     )
   ) {

src/features/components/playground/TopBar.tsx

@@ -27,7 +27,7 @@ export const TopBar = (props: TopBarProps) => {
           props.selected?.id as string
         );
 
-        props.setGridData((rows) =>
+        props.setRows((rows) =>
           rows.map((row) =>
             props.selected
               ? {
@@ -120,7 +120,7 @@ export const TopBar = (props: TopBarProps) => {
             )
           );
 
-          props.setGridData((rows) =>
+          props.setRows((rows) =>
             rows.map((row) =>
               props.selected && row.node === props.selected?.id
                 ? // if row found, remove all its transition values
@@ -198,7 +198,7 @@ export const TopBar = (props: TopBarProps) => {
           if (props.selected) {
             console.log("selected id", props.selected?.id);
             props.handleDeleteRow(
-              props.gridData.find(
+              props.rows.find(
                 (row) => row.node === (props.selected?.id as string)
               ) as RowModel
             );
@@ -208,7 +208,7 @@ export const TopBar = (props: TopBarProps) => {
         break;
 
       case "Toggle Initial State":
-        const initialStateRow = [...props.gridData].find(
+        const initialStateRow = [...props.rows].find(
           (row) => props.selected && row.node === (props.selected?.id as string)
         );
         if (initialStateRow) {
@@ -219,7 +219,7 @@ export const TopBar = (props: TopBarProps) => {
         break;
 
       case "Toggle Final State":
-        const finalStateRow = props.gridData.find(
+        const finalStateRow = props.rows.find(
           (row) => props.selected && row.node === (props.selected?.id as string)
         );
         if (finalStateRow) {
@@ -258,7 +258,7 @@ export const TopBar = (props: TopBarProps) => {
           )
         );
 
-        props.setGridData((rows) =>
+        props.setRows((rows) =>
           rows.map((row) =>
             props.selected &&
             row.node === (props.selected?.id as SelectedElementTypeId).start
@@ -360,9 +360,9 @@ export const TopBar = (props: TopBarProps) => {
         );
         console.log("transitionValues", transitionValues);
 
-        // console.log("setGridData edit value")
-        props.setGridData((rows) => {
-          console.log("starting setGridData");
+        // console.log("setRows edit value")
+        props.setRows((rows) => {
+          console.log("starting setRows");
           let newRows = [...rows];
           newRows.map((row) => {
             if (
@@ -432,7 +432,7 @@ export const TopBar = (props: TopBarProps) => {
             return row;
           });
 
-          console.log("ending setGridData");
+          console.log("ending setRows");
           return newRows;
         });
 

src/features/components/playground/props/StateProps.ts

@@ -13,6 +13,6 @@ export type StateProps = {
   selected: SelectedElementType | null;
   handleSelect: (e: any) => void;
   actionState: string;
-  gridData: RowModel[];
-  setGridData: React.Dispatch<React.SetStateAction<RowModel[]>>;
+  rows: RowModel[];
+  setRows: React.Dispatch<React.SetStateAction<RowModel[]>>;
 };

src/features/components/playground/props/TopBarProps.ts

@@ -15,8 +15,8 @@ export type TopBarProps = {
   handleSelect: (e: any) => void;
   actionState: string;
   setActionState: React.Dispatch<React.SetStateAction<string>>;
-  gridData: RowModel[];
-  setGridData: React.Dispatch<React.SetStateAction<RowModel[]>>;
+  rows: RowModel[];
+  setRows: React.Dispatch<React.SetStateAction<RowModel[]>>;
   handleDeleteRow: (row: RowModel) => void;
   toggleInitialState: (row: RowModel) => void;
   toggleFinalState: (row: RowModel) => void;

src/features/props/PlaygroundProps.ts

@@ -14,8 +14,8 @@ export type PlaygroundProps = {
   handleSelect: (e: any) => void;
   checkExsitence: (id: string) => boolean;
   handleDropDynamic: (e: any) => void;
-  gridData: RowModel[];
-  setGridData: React.Dispatch<React.SetStateAction<RowModel[]>>;
+  rows: RowModel[];
+  setRows: React.Dispatch<React.SetStateAction<RowModel[]>>;
   handleDeleteRow: (row: RowModel) => void;
   toggleInitialState: (row: RowModel) => void;
   toggleFinalState: (row: RowModel) => void;

src/features/props/TransitionTableProps.ts

@@ -2,10 +2,10 @@ import { GridColumns } from "@mui/x-data-grid";
 import { RowModel } from "../../models";
 
 export type TransitionTableProps = {
-  gridData: RowModel[];
-  setGridData: React.Dispatch<React.SetStateAction<RowModel[]>>;
-  gridColumns: GridColumns;
-  gridRowId: number;
-  setGridRowId: React.Dispatch<React.SetStateAction<number>>;
+  rows: RowModel[];
+  setRows: React.Dispatch<React.SetStateAction<RowModel[]>>;
+  columns: Columns;
+  rowId: number;
+  setRowId: React.Dispatch<React.SetStateAction<number>>;
   handleAddRow: (row: RowModel) => void;
 };