Merge pull request #11 from oslabs-beta/garrett/allstate

fixes generate code and drag and drop addchild issues

Author: GarrettHutson

app/src/components/main/Canvas.tsx

@@ -14,7 +14,13 @@ import { changeFocus, addChild,snapShotAction } from '../../redux/reducers/slice
 
 function Canvas(props): JSX.Element {
   // const [state, dispatch] = useContext(StateContext);
-  const state = useSelector(store => store.appState);
+  // const {state} = useSelector(store => store.appState);
+  // const contextParam = useSelector(store => store.contextSlice)
+  const { state, contextParam } = useSelector((store) => ({
+    state: store.appState,
+    contextParam: store.contextSlice,
+  }));
+  
   const dispatch = useDispatch();
   // const [newComp, setNewComp] = useState(false);
   // const [copiedChildrenArr, setCopiedChildrenArr] = useState([]);
@@ -89,40 +95,33 @@ function Canvas(props): JSX.Element {
   // 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;
-     console.log('about to dispatch snapshot')
       //pushes the last user action on the canvas into the past array of Component
       // state.components[focusIndex].past.push(deepCopiedState.components[focusIndex].children);
-    
     dispatch(snapShotAction({focusIndex: focusIndex, deepCopiedState: deepCopiedState}))
-    console.log('left snapshot dispatch moving on ')
   };
 
   // This hook will allow the user to drag items from the left panel on to the canvas
   const [{ isOver }, drop] = useDrop({
     accept: ItemTypes.INSTANCE,
     drop: (item: DragItem, monitor: DropTargetMonitor) => {
       const didDrop = monitor.didDrop();
-    
       // takes a snapshot of state to be used in UNDO and REDO cases
-      console.log('about to snapshot')
       snapShotFunc();
-      console.log('achieved snopshopt')
       // returns false for direct drop target
       console.log('diddrop', didDrop)
       if (didDrop) {
         return;
       }
-  
       // if item dropped is going to be a new instance (i.e. it came from the left panel), then create a new child component
       if (item.newInstance && item.instanceType !== "Component") {
    dispatch(addChild({
     type: item.instanceType,
     typeId: item.instanceTypeId,
-    childId: null
+    childId: null,
+    contextParam: contextParam
+
   }))
 
         // dispatch({
@@ -167,7 +166,8 @@ function Canvas(props): JSX.Element {
           dispatch(addChild({
             type: item.instanceType,
             typeId: item.instanceTypeId,
-            childId: null
+            childId: null,
+            contextParam: contextParam
           }))
           // dispatch({
           //   type: 'ADD CHILD',

app/src/helperFunctions/generateCode.ts

@@ -22,16 +22,17 @@ const generateCode = (
   rootComponents: number[],
   projectType: string,
   HTMLTypes: HTMLType[],
-  tailwind: boolean
+  tailwind: boolean,
+  contextParam: any
 ) => {
   const code = generateUnformattedCode(
     components,
     componentId,
     rootComponents,
     projectType,
     HTMLTypes,
-    tailwind
-
+    tailwind,
+    contextParam
   );
   return formatCode(code);
 };
@@ -43,7 +44,8 @@ const generateUnformattedCode = (
   rootComponents: number[],
   projectType: string,
   HTMLTypes: HTMLType[],
-  tailwind: boolean
+  tailwind: boolean,
+  contextParam: any
 ) => {
   const components = [...comps];
   // find the component that we're going to generate code for
@@ -377,7 +379,9 @@ const generateUnformattedCode = (
   if (projectType === 'Classic React') {
     //string to store all imports string for context
     let contextImports = '';
-    const { allContext } = store.getState().contextSlice;
+    // const { allContext } = store.getState().contextSlice;
+    const { allContext } = contextParam;
+
     for (const context of allContext) {
       contextImports += `import ${context.name}Provider from '../contexts/${context.name}.js'\n`;
     }

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

@@ -271,14 +271,14 @@ const appStateSlice = createSlice({
       //   childId: null
       // };
       const nextComponentId = state.nextComponentId + 1;
-      newComponent.code = generateCode(
-        state.components,
-        newComponent.id,
-        [...state.rootComponents],
-        state.projectType,
-        state.HTMLTypes,
-        state.tailwind
-      );
+      // newComponent.code = generateCode(
+      //   state.components,
+      //   newComponent.id,
+      //   [...state.rootComponents],
+      //   state.projectType,
+      //   state.HTMLTypes,
+      //   state.tailwind
+      // );
 
       // return {
       //   ...state,
@@ -289,11 +289,13 @@ const appStateSlice = createSlice({
     // },
       // state.components = components;
       // state.rootComponents = rootComponents;
-      state.nextComponentId = nextComponentId
+      // state.nextComponentId = nextComponentId
 
 
     },
     addChild: (state, action) => {
+      console.log('entered the addchild1')
+     
       let parentComponentId: number;
       const {
         type,
@@ -305,9 +307,9 @@ const appStateSlice = createSlice({
       } else {
         parentComponentId = state.canvasFocus.componentId;
       }
-
+      
       const components = [...state.components];
-
+      
       const parentComponent = findComponent(components, parentComponentId);
       let componentName: string = '';
       let componentChildren: Object[] = [];
@@ -322,16 +324,16 @@ const appStateSlice = createSlice({
       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) {
@@ -365,7 +367,7 @@ const appStateSlice = createSlice({
       // we also add a separator before any new child
       // if the newChild Element is an input or img type, delete the children key/value pair
       if (newChild.name === 'input' && newChild.name === 'img')
-        delete newChild.children;
+      delete newChild.children;
       let directParent;
       if (childId === null) {
         parentComponent.children.push(topSeparator);
@@ -392,31 +394,33 @@ const appStateSlice = createSlice({
       let addChildArray = components[canvasFocus.componentId - 1].children;
       addChildArray = manageSeparators.mergeSeparator(addChildArray, 1);
       if (directParent && directParent.name === 'separator')
-        nextTopSeparatorId = manageSeparators.handleSeparators(
-          addChildArray,
-          'add'
+      nextTopSeparatorId = manageSeparators.handleSeparators(
+        addChildArray,
+        'add'
         );
-      components[canvasFocus.componentId - 1].children = addChildArray;
-
-      // parentComponent.code = generateCode(
-      //   components,
-      //   parentComponentId,
-      //   [...state.rootComponents],
-      //   state.projectType,
-      //   state.HTMLTypes,
-      //   state.tailwind
-      // );
-
-      return {
-        ...state,
-        components,
-        nextChildId,
-        canvasFocus,
-        nextTopSeparatorId
-      };
-    },
-    changeTailwind: (state, action) => {
-      return { ...state, tailwind: action.payload }
+        components[canvasFocus.componentId - 1].children = addChildArray;
+      
+        
+        parentComponent.code = generateCode(
+            components,
+            parentComponentId,
+            [...state.rootComponents],
+            state.projectType,
+            state.HTMLTypes,
+            state.tailwind,
+            action.payload.contextParam
+          );
+          console.log('entered the addchild2')
+          // return {
+          //   ...state,
+          //   components,
+          //   nextChildId,
+          //   canvasFocus,
+          //   nextTopSeparatorId
+          // };
+        },
+        changeTailwind: (state, action) => {
+          return { ...state, tailwind: action.payload }
     },
     changeFocus: (state, action) => {
       const { componentId, childId } = action.payload;