Merge pull request #11 from oslabs-beta/xiao-eventhandler

lillwimberly · web-flow · commit 712e50883c44 · 2023-02-21T14:25:35.000-08:00
Xiao eventhandler
diff --git a/app/src/components/StateManagement/CreateTab/components/StatePropsPanel.tsx b/app/src/components/StateManagement/CreateTab/components/StatePropsPanel.tsx
@@ -251,7 +251,7 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
         </FormControl>
       </div>
        <br />
-      <div style={{display: 'flex', overflowX: 'scroll', width: '1700px'}}>
+      <div style={{display: 'flex', overflowX: 'scroll'}}>
         <div style={{display: 'flex', flexDirection: 'column'}}>
           <h4  className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>
             Current Component State: {state.components[state.canvasFocus.componentId - 1].name}
diff --git a/app/src/components/StateManagement/StateManagement.tsx b/app/src/components/StateManagement/StateManagement.tsx
@@ -13,7 +13,9 @@ import DisplayContainer from './DisplayTab/DisplayContainer';
 const useStyles = makeStyles({
   contextContainer: {
     backgroundColor: 'white',
-    height: 'fit-content'
+    height: 'fit-content',
+    width: 'fit-content',
+    minWidth: '100%'
   }
 });
 
diff --git a/app/src/components/bottom/BottomTabs.tsx b/app/src/components/bottom/BottomTabs.tsx
@@ -52,7 +52,7 @@ const BottomTabs = (props): JSX.Element => {
       style={{ backgroundColor: '#003366' }}
     >
       <Box display="flex" justifyContent="space-between" alignItems="center" paddingBottom="10px" paddingRight="10px">
-        <Tabs value={tab} onChange={handleChange} classes={{ root: classes.tabsRoot, indicator: classes.tabsIndicator }}>
+        <Tabs value={tab} onChange={handleChange} classes={{ root: classes.tabsRoot, indicator: classes.tabsIndicator }} variant="scrollable" scrollButtons="auto" >
           <Tab disableRipple classes={{ root: classes.tabRoot, selected: classes.tabSelected }} label="Creation Panel" />
           <Tab disableRipple classes={{ root: classes.tabRoot, selected: classes.tabSelected }} label="Customization" />
           <Tab disableRipple classes={{ root: classes.tabRoot, selected: classes.tabSelected }} label="CSS Editor" />
@@ -110,7 +110,8 @@ const useStyles = makeStyles(theme => ({
     textTransform: 'initial',
     minWidth: 40,
     fontWeight: theme.typography.fontWeightRegular,
-    marginRight: theme.spacing(4), // JZ: updated syntax as per deprecation warning
+    marginRight: theme.spacing(2), // JZ: updated syntax as per deprecation warning
+    marginLeft: theme.spacing(2),
 
     fontFamily: [
       '-apple-system',
@@ -149,7 +150,8 @@ const useStyles = makeStyles(theme => ({
   },
   projectTypeWrapper: {
     marginTop: '10px',
-    marginBotton: '10px'
+    marginBotton: '10px',
+    marginLeft: '10px',
   },
   projectSelector: {
     backgroundColor: '#0099E6',
diff --git a/app/src/components/main/Annotation.tsx b/app/src/components/main/Annotation.tsx
@@ -3,7 +3,7 @@ import { Annotations } from '../../interfaces/Interfaces';
 import Modal from '@material-ui/core/Modal';
 import StateContext from '../../context/context';
 
-function Annotation({ id, name, annotations }: Annotations) {
+function Annotation({ id, name }: Annotations) {
   const [state, dispatch] = useContext(StateContext);
 
   // -------------------------------- NEW CODE for DELETE BUTTONS, REPLACING ANNOTATIONS ---------------------------------------
@@ -20,7 +20,11 @@ function Annotation({ id, name, annotations }: Annotations) {
       <button
         className="annotate-button-empty" // NOTE:  This className no longer accurate --> to update to delete button, same w/ Annotation export throughout
         id={'btn' + id}
-        onClick={() => deleteHTMLtype(id)}
+        onClick={(event) => {
+          event.stopPropagation();
+          deleteHTMLtype(id);
+        }}
+        // ref={ref}
       >
         x
       </button>
diff --git a/app/src/components/main/Canvas.tsx b/app/src/components/main/Canvas.tsx
@@ -64,27 +64,27 @@ function Canvas(props): JSX.Element {
   // find the current component to render on the canvas
   const currentComponent: Component = state.components.find(
     (elem: Component) => elem.id === state.canvasFocus.componentId
-    );
-
-    // changes focus of the canvas to a new component / child
-    const changeFocus = (componentId?: number, childId?: number | null) => {
-      dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
-    };
-    // onClickHandler is responsible for changing the focused component and child component
-    function onClickHandler(event) {
-      event.stopPropagation();
-      // note: a null value for the child id means that we are focusing on the top-level component rather than any child
-      changeFocus(state.canvasFocus.componentId, null);
-    };
-
-    // stores a snapshot of state into the past array for UNDO. snapShotFunc is also invoked for nestable elements in DirectChildHTMLNestable.tsx
-    const snapShotFunc = () => {
-      // make a deep clone of state
-        const deepCopiedState = JSON.parse(JSON.stringify(state));
-        const focusIndex = state.canvasFocus.componentId - 1;
-        //pushes the last user action on the canvas into the past array of Component
-        state.components[focusIndex].past.push(deepCopiedState.components[focusIndex].children);
-    };
+  );
+
+  // changes focus of the canvas to a new component / child
+  const changeFocus = (componentId?: number, childId?: number | null) => {
+    dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
+  };
+  // onClickHandler is responsible for changing the focused component and child component
+  function onClickHandler(event) {
+    event.stopPropagation();
+    // note: a null value for the child id means that we are focusing on the top-level component rather than any child
+    changeFocus(state.canvasFocus.componentId, null);
+  };
+
+  // stores a snapshot of state into the past array for UNDO. snapShotFunc is also invoked for nestable elements in DirectChildHTMLNestable.tsx
+  const snapShotFunc = () => {
+    // make a deep clone of state
+      const deepCopiedState = JSON.parse(JSON.stringify(state));
+      const focusIndex = state.canvasFocus.componentId - 1;
+      //pushes the last user action on the canvas into the past array of Component
+      state.components[focusIndex].past.push(deepCopiedState.components[focusIndex].children);
+  };
 
   // This hook will allow the user to drag items from the left panel on to the canvas
   const [{ isOver }, drop] = useDrop({
diff --git a/app/src/components/main/DirectChildComponent.tsx b/app/src/components/main/DirectChildComponent.tsx
@@ -72,7 +72,7 @@ function DirectChildComponent({ childId, type, typeId, style, name }: ChildEleme
         <Annotation
             id={childId}
             name={name}
-            annotations={annotations}
+            // annotations={annotations}
             />
       
     </div>
diff --git a/app/src/components/top/NavBar.tsx b/app/src/components/top/NavBar.tsx
@@ -173,12 +173,11 @@ const NavBar = (props) => {
           >
             ReacType
           </Typography>
-          <Link to="/tutorial" style={{ textDecoration: 'none' }}>
+          <Link to="/tutorial" style={{ textDecoration: 'none' }} target='_blank'>
           <Button
             variant="contained"
             color="secondary"
             style={{ minWidth: '137.69px' }}
-            onClick={clearWorkspace}
             className="navbarButton"
             id="navbarButton"
           >
diff --git a/app/src/containers/CustomizationPanel.tsx b/app/src/containers/CustomizationPanel.tsx
@@ -53,25 +53,24 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
   const [eventAll, setEventAll] = useState(['', '']);
   const [eventRow, setEventRow] = useState([]);
   // ------------------------------------------- added code above -------------------------------------------
-
-  const currFocus = state.components
-    .find((el) => {
-      return el.id === state.canvasFocus.componentId;
-    })
-    .children.find((el) => {
-      return el.childId === state.canvasFocus.childId;
-    });
-  console.log(currFocus);
+  const currFocus = getFocus().child;
+  // state.components
+  //   .find((el) => {
+  //     return el.id === state.canvasFocus.componentId;
+  //   })
+  //   .children.find((el) => {
+  //     return el.childId === state.canvasFocus.childId;
+  //   });
   useEffect( () => {
     currFocus?.attributes?.compLink && setCompLink(currFocus.attributes.compLink);
+    setEventAll(['', '']);
     if (currFocus) {
       const addedEvent: [] = [];
       for (const [event, funcName] of Object.entries(currFocus?.events)){
         addedEvent.push({ id: event , funcName })
       }
       setEventRow(addedEvent);
     }
-    console.log(state);
   }, [state]);
 
   //this function allows properties to persist and appear in nested divs
@@ -109,7 +108,6 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
     setCompHeight(style.height ? style.height : '');
     setBGColor(style.backgroundColor ? style.backgroundColor : '');
     setEventAll(['', '']);
-    // setFuncName('');
   };
   let configTarget;
   // after component renders, reset the input fields with the current styles of the selected child
@@ -153,7 +151,6 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
         // ------------------------------------------- added code below -------------------------------------------
       case 'event':
         setEventAll(inputVal ? [inputVal, `handle${inputVal.slice(2)}`] : ['', '']);
-        // setFuncName(currFocus.events[inputVal] ? currFocus.events[inputVal] : `handle${event.slice(2)}`);
         break;
       case 'funcName':
         setEventAll([eventAll[0], inputVal]);
@@ -165,7 +162,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
   };
   // returns the current component referenced in canvasFocus
   // along with its child instance, if it exists
-  const getFocus = () => {
+  function getFocus() {
     // find and store component's name based on canvasFocus.componentId
     // note: deep clone here to make sure we don't end up altering state
     const focusTarget = JSON.parse(
@@ -189,24 +186,26 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
         if (currentChild.childId === childInstanceId) {
           focusChild = currentChild;
           focusTarget.child.style = focusChild.style;
+          focusTarget.child.events = focusChild.events;
+          focusTarget.child.attributes = focusChild.attributes;
           break;
         }
         if (currentChild.name !== 'input' && currentChild.name !== 'img')
           currentChild.children.forEach(child => searchArray.push(child));
       }
-
+      
       // if type is Component, use child's typeId to search through state components and find matching component's name
       if (focusChild.type === 'Component') {
         focusTarget.child.type = 'component';
         focusTarget.child.name = state.components.find(
-          comp => comp.id === focusChild.typeId
-        ).name;
-        // if type is HTML Element, search through HTML types to find matching element's name
+            comp => comp.id === focusChild.typeId
+          ).name;
+          // if type is HTML Element, search through HTML types to find matching element's name
       } else if (focusChild.type === 'HTML Element') {
         focusTarget.child.type = 'HTML element';
         focusTarget.child.name = state.HTMLTypes.find(
-          elem => elem.id === focusChild.typeId
-        ).name;
+            elem => elem.id === focusChild.typeId
+          ).name;
       }
     }
     return focusTarget;
@@ -279,25 +278,25 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
     {
       field: 'funcName',
       headerName: 'Function Name',
-      width: '40%',
+      width: '50%',
       editable: false,
       flex: 1,
       disableColumnMenu: true,
     },
     {
       field: 'delete',
-      headerName: 'Delete Event',
-      width: '20%',
+      headerName: 'Delete',
+      width: '10%',
       editable: false,
       flex: 1,
+      sortable: false,
       disableColumnMenu: true,
-      disableColumnFilter: true,
       renderCell: function renderCell(params: any) {
         return (
           <Button
-            style={{ width: `${3}px` }}
+            style={{ width: `${3}px`, color: 'black' }}
             onClick={() => {
-              // deleteState(params.id);
+              deleteEvent(params.id);
             }}
           >
             <ClearIcon style={{ width: `${15}px` }} />
@@ -307,53 +306,54 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
     }
   ];
 
+  const deleteEvent = selectedEvent => {
+    dispatch({
+      type: 'DELETE EVENT',
+      payload: { event: selectedEvent }
+    });
+  };
+
 
   const handleSave = (): Object => {
     //  ------------------------------------------- change code below  -------------------------------------------
-    const actions: object[] = [];
+    dispatch({
+      type: 'UPDATE STATE USED',
+      payload: {stateUsedObj: stateUsedObj}
+    })
+
+    dispatch({
+      type: 'UPDATE USE CONTEXT',
+      payload: { useContextObj: useContextObj}
+    })
 
     const styleObj: any = {};
-    let updateCSS: boolean = false;
-    if (displayMode !== '') {
-      updateCSS = true;
-      styleObj.display = displayMode;
-    }
+    if (displayMode !== '') styleObj.display = displayMode;
     if (flexDir !== '') styleObj.flexDirection = flexDir;
     if (flexJustify !== '') styleObj.justifyContent = flexJustify;
     if (flexAlign !== '') styleObj.alignItems = flexAlign;
     if (compWidth !== '') styleObj.width = compWidth;
     if (compHeight !== '') styleObj.height = compHeight;
     if (BGColor !== '') styleObj.backgroundColor = BGColor;
+    dispatch({
+      type: 'UPDATE CSS',
+      payload: { style: styleObj }
+    });
 
     const attributesObj: any = {};
     if (compText !== '') attributesObj.compText = compText;
     if (compLink !== '') attributesObj.compLink = compLink;
     if (cssClasses !== '') attributesObj.cssClasses = cssClasses;
-
-    const eventsObj: any = {};
-    if (eventAll[0] !== '') eventsObj[eventAll[0]] = eventAll[1];
-
-    dispatch({
-      type: 'UPDATE STATE USED',
-      payload: {stateUsedObj: stateUsedObj}
-    })
-    dispatch({
-      type: 'UPDATE USE CONTEXT',
-      payload: { useContextObj: useContextObj}
-    })
-    dispatch({
-      type: 'UPDATE CSS',
-      payload: { style: styleObj }
-    });
     dispatch({
       type: 'UPDATE ATTRIBUTES',
       payload: { attributes: attributesObj }
     });
+
+    const eventsObj: any = {};
+    if (eventAll[0] !== '') eventsObj[eventAll[0]] = eventAll[1];
     dispatch({
       type: 'UPDATE EVENTS',
       payload: { events: eventsObj }
     });
-    setEventAll(['', ''])
     //  ------------------------------------------- change code above  -------------------------------------------
     return styleObj;
   };
@@ -781,11 +781,11 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
                     />
                   </FormControl>
                 </div> )}
-                { Object.keys(currFocus.events).length !== 0 && (<div className={'event-table'}>
+                { currFocus && Object.keys(currFocus.events).length !== 0 && (<div className={'event-table'}>
                   <DataGrid
                     rows={eventRow}
                     columns={eventColumnTabs}
-                    // pageSize={5}
+                    pageSize={5}
                     // editRowsModel={editRowsModel}
                     // className={props.isThemeLight ? classes.themeLight : classes.themeDark}
                   />
diff --git a/app/src/helperFunctions/generateCode.ts b/app/src/helperFunctions/generateCode.ts
diff --git a/app/src/interfaces/Interfaces.ts b/app/src/interfaces/Interfaces.ts
diff --git a/app/src/public/styles/style.css b/app/src/public/styles/style.css
diff --git a/app/src/reducers/componentReducer.ts b/app/src/reducers/componentReducer.ts

Original file line number	Diff line number	Diff line change
`@@ -173,12 +173,11 @@ const NavBar = (props) => {`
`173`	`173`	`>`
`174`	`174`	`ReacType`
`175`	`175`	`</Typography>`
`176`		`- <Link to="/tutorial" style={{ textDecoration: 'none' }}>`
	`176`	`+ <Link to="/tutorial" style={{ textDecoration: 'none' }} target='_blank'>`
`177`	`177`	`<Button`
`178`	`178`	`variant="contained"`
`179`	`179`	`color="secondary"`
`180`	`180`	`style={{ minWidth: '137.69px' }}`
`181`		`- onClick={clearWorkspace}`
`182`	`181`	`className="navbarButton"`
`183`	`182`	`id="navbarButton"`
`184`	`183`	`>`