added comments

Author: jujupro

app/src/components/left/DragDropPanel.tsx

@@ -94,6 +94,7 @@ const DragDropPanel = (props): JSX.Element => {
           })}
         </Grid>
 
+        {/* Next.js */}
         {state.projectType === 'Next.js' ? (
           <h3 style={{ color: 'C6C6C6' }}>Next.js</h3>
         ) : null}

app/src/components/left/HTMLItem.tsx

@@ -41,9 +41,10 @@ const HTMLItem: React.FC<{
   id: number;
   Icon: any;
   handleDelete: (id: number) => void;
-}> = ({ name, id, handleDelete }) => {
+}> = ({ name, id, Icon, handleDelete }) => {
   const classes = useStyles();
   const [modal, setModal] = useState(null);
+
   const [{ isDragging }, drag] = useDrag({
     // is dragging is never read, but if deleted adjustment in the ref are needed line 122/128 ref={drag} to {...drag}
     item: {
@@ -120,16 +121,21 @@ const HTMLItem: React.FC<{
   return (
     // HTML Elements
     <Grid item xs={5} key={`html-g${name}`}>
+      {/* predefined elements */}
       {id <= 20 && (
         <div
           ref={drag}
           style={{ borderColor: '#C6C6C6' }}
           className={`${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`}
           id="HTMLItem"
         >
+          {/* render element's name on canvas */}
+          {Icon}
           <h3>{name}</h3>
         </div>
       )}
+
+      {/* Custom Elements */}
       {id > 20 && (
         <span id="customHTMLElement">
           <div

app/src/components/left/RoomsContainer.tsx

@@ -64,7 +64,7 @@ const RoomsContainer = () => {
       store.dispatch(allCooperativeState(state.appState));
       store.dispatch(codePreviewCooperative(state.codePreviewCooperative));
       store.dispatch(cooperativeStyle(state.styleSlice));
-      callback({ status: 'confirmed' });
+      callback({ status: 'confirmed' }); 
     });
 
     // update user list when there's a change: new join or leave the room

app/src/components/main/Canvas.tsx

@@ -19,15 +19,14 @@ function Canvas(props: {}): JSX.Element {
   const state = useSelector((store: RootState) => store.appState);
   const contextParam = useSelector((store: RootState) => store.contextSlice);
 
-  const dispatch = useDispatch();
-
-  Arrow.deleteLines();
-
   // find the current component based on the canvasFocus component ID in the state
   const currentComponent: Component = state.components.find(
     (elem: Component) => elem.id === state.canvasFocus.componentId
   );
 
+  Arrow.deleteLines();
+
+  const dispatch = useDispatch();
   // changes focus of the canvas to a new component / child
   const changeFocusFunction = (
     componentId?: number,

app/src/components/main/DirectChildComponent.tsx

@@ -9,13 +9,8 @@ import { useDispatch, useSelector } from 'react-redux';
 import { changeFocus } from '../../redux/reducers/slice/appStateSlice';
 import { RootState } from '../../redux/store';
 
-function DirectChildComponent({
-  childId,
-  type,
-  typeId,
-  name
-}: ChildElement) {
-  const state = useSelector((store:RootState) => store.appState);
+function DirectChildComponent({ childId, type, typeId, name }: ChildElement) {
+  const state = useSelector((store: RootState) => store.appState);
   const dispatch = useDispatch();
 
   // find the top-level component corresponding to this instance of the component
@@ -38,7 +33,7 @@ function DirectChildComponent({
     })
   });
   const changeFocusFunction = (componentId: number, childId: number | null) => {
-    dispatch(changeFocus({ componentId, childId}));
+    dispatch(changeFocus({ componentId, childId }));
   };
 
   // onClickHandler is responsible for changing the focused component and child component
@@ -63,17 +58,13 @@ function DirectChildComponent({
   );
   // Renders name and not children of subcomponents to clean up Canvas view when dragging components
   // into the main canvas.  To render html elements on canvas, import and invoke renderChildren
-  return  (
-    <div
-      onClick={onClickHandler}
-      style={combinedStyle}
-      ref={drag}
-    >
-        <span>
-          <strong style={{ color: 'white' }}>{name}</strong>
-          <DeleteButton id={childId} name={name} />  
-        </span>
-
+  return (
+    <div onClick={onClickHandler} style={combinedStyle} ref={drag}>
+      <span>
+        {/* render name and delete button X */}
+        <strong style={{ color: 'white' }}>{name}</strong>
+        <DeleteButton id={childId} name={name} />
+      </span>
     </div>
   );
 }

app/src/components/right/ComponentPanelItem.tsx

@@ -7,7 +7,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { changeFocus } from '../../redux/reducers/slice/appStateSlice';
 import { RootState } from '../../redux/store';
 /*
-DESCRIPTION: This component is each box beneath the 'root components' and
+DESCRIPTION: This component is each box beneath the 'HTML Elements' and
   'reusable components' (in classic React mode) headings. Drag-and-drop
   functionality works only for reusable components.
 
@@ -25,6 +25,7 @@ const ComponentPanelItem: React.FC<{
   const classes = useStyles();
   const state = useSelector((store: RootState) => store.appState);
   const dispatch = useDispatch();
+
   // useDrag hook allows components in left panel to be drag source
   const [{ isDragging }, drag] = useDrag({
     item: {
@@ -44,6 +45,7 @@ const ComponentPanelItem: React.FC<{
     //LEGACY PD
     dispatch(changeFocus({ componentId: id, childId: null }));
   };
+
   return (
     <Grid
       item
@@ -62,11 +64,13 @@ const ComponentPanelItem: React.FC<{
     >
       {isFocus && <div className={classes.focusMark}></div>}
       <div className="compPanelItem" onClick={handleClick}>
+        {/* render element's name on the left panel*/}
         <h3>{name}</h3>
       </div>
     </Grid>
   );
 };
+
 const useStyles = makeStyles({
   activeFocus: {
     backgroundColor: 'rgba(1,212,109,0.3)'

app/src/redux/reducers/slice/appStateSlice.ts

@@ -285,15 +285,21 @@ const appStateSlice = createSlice({
         typeId,
         childId
       }: { type: string; typeId: number; childId: any } = action.payload;
+
+      // determine the parent component id
       if (action.payload.copyId) {
         parentComponentId = action.payload.copyId;
       } else {
         parentComponentId = state.canvasFocus.componentId;
       }
 
+      // make a copy of the components from state
       const components = [...state.components];
 
+      // find the parent component
       const parentComponent = findComponent(components, parentComponentId);
+
+      // if type is 'Component', loop through components to find componentName and componentChildren
       let componentName: string = '';
       let componentChildren: ChildElement[] = [];
       if (type === 'Component') {
@@ -314,6 +320,7 @@ const appStateSlice = createSlice({
         }
       }
 
+      // create a new name based on the type of element
       let newName = state.HTMLTypes.reduce((name, el) => {
         if (typeId === el.id) {
           name = type === 'Component' ? componentName : el.tag;
@@ -329,6 +336,7 @@ const appStateSlice = createSlice({
           }
         });
       }
+
       const newChild: ChildElement = {
         type,
         typeId,
@@ -341,6 +349,7 @@ const appStateSlice = createSlice({
         stateProps: [], //legacy pd: added stateprops and passedinprops
         passedInProps: []
       };
+
       // added missing properties
       const topSeparator: ChildElement = {
         type: 'HTML Element',
@@ -366,7 +375,7 @@ const appStateSlice = createSlice({
           parentComponent.children.push(newChild);
         }
       }
-      // if there is a childId (childId here references the direct parent of the new child) find that child and a new child to its children array
+      // if there is a childId (childId here references the direct parent of the new child) find that child and add new child to its children array
       else {
         if (parentComponent) {
           directParent = findChild(parentComponent, childId);
@@ -379,23 +388,28 @@ const appStateSlice = createSlice({
           }
         }
       }
+      // update canvasFocus to the new child
       const canvasFocus = {
         ...state.canvasFocus,
         componentId: state.canvasFocus.componentId,
         childId: newChild.childId
       };
+
       const nextChildId = state.nextChildId + 1;
       let nextTopSeparatorId = state.nextTopSeparatorId + 1;
       let addChildArray = components[canvasFocus.componentId - 1].children;
-      addChildArray = manageSeparators.mergeSeparator(addChildArray, 1); // merge separator needs interface and type
+      // merge separator needs interface and type
+      addChildArray = manageSeparators.mergeSeparator(addChildArray, 1);
       if (directParent && directParent.name === 'separator')
         nextTopSeparatorId = manageSeparators.handleSeparators(
           // handle separator needs interface and type
           addChildArray,
           'add'
         );
+
       components[canvasFocus.componentId - 1].children = addChildArray;
 
+      // generate code
       if (parentComponent) {
         parentComponent.code = generateCode(
           components,
@@ -407,11 +421,14 @@ const appStateSlice = createSlice({
           action.payload.contextParam
         );
       }
+
+      // update the state with the new values
       state.components = components;
       state.nextChildId = nextChildId;
       state.canvasFocus = canvasFocus;
       state.nextTopSeparatorId = nextTopSeparatorId;
     },
+
     changeTailwind: (state, action) => {
       // return { ...state, tailwind: action.payload }
       state.tailwind = action.payload;

server/server.ts

@@ -119,7 +119,7 @@ io.on('connection', (client) => {
         .to(hostID)
         .emitWithAck('requesting state from host'); //sending request
 
-      console.log('hostState:', hostState);
+      // console.log('hostState:', hostState);
 
       //share host's state with the latest user
       const newClientResponse = await io //send the requested host state to the new client awaiting for the host state to come back before doing other task
@@ -143,6 +143,7 @@ io.on('connection', (client) => {
 
   //server monitors incoming data from users for any new state changes
   client.on('new state from front', (redux_store, room: string) => {
+    // console.log('new state from front:', JSON.parse(redux_store));
     if (room) {
       //server send the state from the user to everyone in the room
       client.to(room).emit('new state from back', redux_store);