style is now using context

Author: jinsoolim

app/src/components/main/DirectChildComponent.tsx

@@ -18,10 +18,11 @@ function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
 
   // find the top-level component corresponding to this instance of the component
   // find the current component to render on the canvas
+
   const referencedComponent: Component = state.components.find(
     (elem: Component) => elem.id === typeId
   );
-
+  
   const [{ isDragging }, drag] = useDrag({
     // setting item attributes to be referenced when updating state with new instance of dragged item
     item: {
@@ -57,6 +58,8 @@ function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
       state.canvasFocus.childId === childId ? '1px 1px 3px rgb(11,212,112)' : ''
   };
 
+  //console.log('reference comp', referencedComponent);
+
   const combinedStyle = combineStyles(
     combineStyles(
       combineStyles(globalDefaultStyle, referencedComponent.style),
@@ -79,10 +82,12 @@ function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
           (elem: Component) => elem.id === child.typeId
         );
         // combine the styles of the child with the reference component but give higher priority to the child's styles
+
         const combinedStyle = combineStyles(
           childReferencedComponent.style,
           child.style
         );
+  
         // render an IndirectChild component, and also call renderIndirectChildren recursively to render any of the child Component's children
         return (
           <IndirectChild

app/src/components/main/RouteLink.tsx

@@ -11,6 +11,8 @@ function RouteLink({ childId, type, typeId, style }: ChildElement) {
   const ref = useRef(null);
 
   // find the name of the Component corresponding with this link
+  console.log(state.components);
+  
   const routeName: string = state.components.find(
     (comp: Component) => comp.id === typeId
   ).name;

app/src/constants/ErrorMessages.ts

@@ -2,5 +2,8 @@ export default {
   deleteIndexTitle: 'You cannot delete index.',
   deleteIndexMessage: 'You must have at least one page.',
   deleteComponentTitle: 'You cannot delete this component.',
-  deleteComponentMessage: 'Reusable components inside of a page must be deleted from the page.'
+  deleteComponentMessage: 'Reusable components inside of a page must be deleted from the page.',
+  deleteLinkedPageTitle: 'Delete linked page error.',
+  deleteLinkedPageMessage: 'Please delete the links to this page before deleting the page.'
+
 }

app/src/containers/MainContainer.tsx

@@ -1,14 +1,17 @@
-import React, { Component } from 'react';
+import React, { useContext } from 'react';
 import BottomPanel from '../components/bottom/BottomPanel';
 import CanvasContainer from '../components/main/CanvasContainer';
+import { styleContext } from './AppContainer';
+
+const MainContainer = () => {
+  const { style } = useContext(styleContext);
 
-const MainContainer = ({ style }) => {
   return (
     <div className="main-container" style={style} >
       <div className="main">
         <CanvasContainer />
       </div>
-      <BottomPanel style={style} />
+      <BottomPanel />
     </div>
   );
 };

app/src/containers/RightContainer.tsx

@@ -32,7 +32,7 @@ const RightContainer = (): JSX.Element => {
   const [BGColor, setBGColor] = useState('');
   const [compWidth, setCompWidth] = useState('');
   const [compHeight, setCompHeight] = useState('');
-  const [dialogError, setDialogError] = useState(false);
+  const [deleteLinkedPageError, setDeleteLinkedPageError] = useState(false);
   const [deleteIndexError, setDeleteIndexError] = useState(false);
   const [deleteComponentError, setDeleteComponentError] = useState(false);
   const { style } = useContext(styleContext);
@@ -152,8 +152,6 @@ const RightContainer = (): JSX.Element => {
   const isIndex = (): boolean => configTarget.id === 1;
 
   const isChildOfPage = (): boolean => {
-    // TODO: refactor
-    // TODO: output parent name and id to refocus canvas on parent
     let isChild: boolean = false;
     const { id } = configTarget;
     state.components.forEach(comp => {
@@ -164,7 +162,24 @@ const RightContainer = (): JSX.Element => {
       });
     });
     return isChild;
-  };
+  }
+
+  const isLinkedTo = (): boolean => {
+    const { id } = configTarget;
+    const pageName = state.components[id-1].name;
+    let isLinked = false;
+    const searchNestedChildren = (comps) => {
+      if (comps.length === 0) return;
+        comps.forEach((comp, i) => {
+          if (comp.type === 'Route Link' && comp.name === pageName) {
+            isLinked = true;
+          }
+          if (comp.children.length > 0) searchNestedChildren(comp.children);  
+        });
+      } 
+    searchNestedChildren(state.components);
+    return isLinked;
+  }
 
   // dispatch to 'UPDATE CSS' called when save button is clicked,
   // passing in style object constructed from all changed input values
@@ -191,13 +206,14 @@ const RightContainer = (): JSX.Element => {
     dispatch({ type: 'DELETE CHILD', payload: {} });
   };
 
-  const handlePageDelete = id => () => {
-    // TODO: return modal
-    isIndex()
-      ? handleDialogError('index')
-      : dispatch({ type: 'DELETE PAGE', payload: { id } });
-  };
-
+  const handlePageDelete = (id) => () => {
+    // TODO: return modal 
+    if (isLinkedTo()) return setDeleteLinkedPageError(true);
+    isIndex() 
+      ? handleDialogError('index') 
+      : dispatch({ type: 'DELETE PAGE', payload: { id }});
+  }
+  
   const handleDeleteReusableComponent = () => {
     isChildOfPage()
       ? handleDialogError('component')
@@ -218,7 +234,8 @@ const RightContainer = (): JSX.Element => {
   const handleCloseDialogError = () => {
     setDeleteIndexError(false);
     setDeleteComponentError(false);
-  };
+    setDeleteLinkedPageError(false);
+  }
 
   return (
     <div className="column right" style={style}>
@@ -445,17 +462,21 @@ const RightContainer = (): JSX.Element => {
         <ProjectManager />
       </div>
       <Dialog
-        open={deleteIndexError}
+        open={deleteIndexError || deleteLinkedPageError || deleteComponentError}
         onClose={handleCloseDialogError}
         aria-labelledby="alert-dialog-title"
         aria-describedby="alert-dialog-description"
       >
         <DialogTitle id="alert-dialog-title">
-          {ErrorMessages.deleteIndexTitle}
+          {deleteIndexError ? ErrorMessages.deleteIndexTitle : ''}
+          {deleteComponentError ? ErrorMessages.deleteComponentTitle : ''} 
+          {deleteLinkedPageError ? ErrorMessages.deleteLinkedPageTitle : ''}
         </DialogTitle>
         <DialogContent>
           <DialogContentText id="alert-dialog-description">
-            {ErrorMessages.deleteIndexMessage}
+          {deleteIndexError ? ErrorMessages.deleteIndexMessage : ''}
+          {deleteComponentError ? ErrorMessages.deleteComponentMessage : ''} 
+          {deleteLinkedPageError ? ErrorMessages.deleteLinkedPageMessage : ''}
           </DialogContentText>
         </DialogContent>
         <DialogActions>
@@ -464,7 +485,7 @@ const RightContainer = (): JSX.Element => {
           </Button>
         </DialogActions>
       </Dialog>
-      <Dialog
+      {/* <Dialog
         open={deleteComponentError}
         onClose={handleCloseDialogError}
         aria-labelledby="alert-dialog-title"
@@ -483,7 +504,7 @@ const RightContainer = (): JSX.Element => {
             OK
           </Button>
         </DialogActions>
-      </Dialog>
+      </Dialog> */}
     </div>
   );
 };

app/src/helperFunctions/renderChildren.tsx

@@ -11,6 +11,7 @@ import RouteLink from '../components/main/RouteLink';
 // there are four types of direct children that can be rendered on the screen
 const renderChildren = (children: ChildElement[]) => {
   return children.map((child: ChildElement, i: number) => {
+    console.log('child', child);
     const { type, typeId, style, childId, children, attributes } = child;
     // A DirectChildComponent is an instance of a top level component
     // This component will render IndirectChild components (div/components rendered inside a child component)

app/src/reducers/componentReducer.ts

@@ -8,6 +8,7 @@ import {
 import initialState from '../context/initialState';
 import generateCode from '../helperFunctions/generateCode';
 import cloneDeep from '../helperFunctions/cloneDeep';
+import { isValueObject } from 'immutable';
 
 const reducer = (state: State, action: Action) => {
   // if the project type is set as Next.js, next component code should be generated
@@ -88,20 +89,6 @@ const reducer = (state: State, action: Action) => {
     return;
   };
 
-  // const isChildOfPage = (id: number): boolean => {
-  //   // TODO: refactor
-  //   // TODO: output parent name and id to refocus canvas on parent
-  //   let isChild: boolean = false;
-  //   state.components.forEach(comp => {
-  //     comp.children.forEach(child => {
-  //       if (child.type === 'Component' && child.typeId === id) {
-  //         isChild = true;
-  //       }
-  //     });
-  //   });
-  //   return isChild;
-  // }
-
   const updateIds = (components: Component[]) => {
     components.forEach((comp, i) => (comp.id = i + 1));
   };
@@ -117,18 +104,14 @@ const reducer = (state: State, action: Action) => {
   }
 
   switch (action.type) {
-    // Add a new component type
-    // add component to the component array and increment our counter for the componentId
-    // TODO: parse through name to any white spaces and camel case the name
     case 'ADD COMPONENT': {
-      // if nonString value or empty string is passed in, then don't modify the original state
       if (
         typeof action.payload.componentName !== 'string' ||
         action.payload.componentName === ''
       )
         return state;
       const newComponent = {
-        id: state.nextComponentId,
+        id: state.components.length + 1,
         name: action.payload.componentName,
         nextChildId: 1,
         style: {},
@@ -151,6 +134,7 @@ const reducer = (state: State, action: Action) => {
       };
 
       const nextComponentId = state.nextComponentId + 1;
+      console.log('new comps', components);
       return {
         ...state,
         components,
@@ -184,19 +168,28 @@ const reducer = (state: State, action: Action) => {
           }
         });
       }
-
+      
       if (type === 'Component') {
         const originalComponent = findComponent(state.components, typeId);
         if (childTypeExists('Component', parentComponentId, originalComponent))
-          return state;
+        return state;
       }
-
+      
       let newName = state.HTMLTypes.reduce((name, el) => {
         if (typeId === el.id) {
           name = (type === 'Component') ? componentName : el.tag;
         }
         return name;
       }, '');
+      
+      if (type === 'Route Link') {
+        components.find(comp => {
+          if (comp.id === typeId) {
+            newName = comp.name;
+            return;
+          }
+        })
+      }
 
       const newChild: ChildElement = {
         type,
@@ -310,6 +303,7 @@ const reducer = (state: State, action: Action) => {
     }
     case 'DELETE CHILD': {
       // if in-focus instance is a top-level component and not a child, don't delete anything
+            
       if (!state.canvasFocus.childId) return state;
 
       // find the current component in focus
@@ -339,6 +333,27 @@ const reducer = (state: State, action: Action) => {
 
     case 'DELETE PAGE': {
       const id: number = state.canvasFocus.componentId;
+      // console.log('id', id);
+      // const pageName = state.components[id-1].name;
+      // // check if page is linked to in other pages      
+      // console.log(state.components);
+      // console.log(pageName);
+
+      // //const currentComponents = [...state.components];
+
+      // const isLinked = (comps) => {
+      //   if (comps.length === 0) return;
+      //   comps.forEach((comp, i, array) => {
+      //     if (comp.type === 'Route Link' && comp.name === pageName) {
+      //       console.log('found link', i, comp);
+      //       array.splice(i, 1);
+      //         // delete the comp
+      //     }
+      //     if (comp.children.length > 0) isLinked(comp.children);
+      //   })  
+      // }
+      // isLinked(state.components);
+
       const components: Component[] = deleteById(id);
       updateIds(components);
 
@@ -347,7 +362,8 @@ const reducer = (state: State, action: Action) => {
       components.forEach(comp => {
         if (comp.isPage) rootComponents.push(comp.id);
       });
-
+      //console.log('curr', currentComponents);
+      console.log('comps', components);
       const canvasFocus = { componentId: 1, childId: null }
       return {...state, rootComponents, components, canvasFocus}
     }