comments and styling done

Author: Anthonytorrero

__tests__/componentReducer.test.ts

@@ -1,7 +1,8 @@
 import reducer from '../app/src/reducers/componentReducer';
-import { State, Action } from '../app/src/interfaces/InterfacesNew';
+import { State, Action } from '../app/src/interfaces/Interfaces';
 
 import initialState from '../app/src/context/initialState';
+import { iterate } from 'localforage';
 
 describe('Testing componentReducer functionality', () => {
   let state: State = initialState;
@@ -25,6 +26,27 @@ describe('Testing componentReducer functionality', () => {
     });
   });
 
+  // TEST 'ADD COMPONENT' with new root 
+  describe('ADD COMPONENT reducer', () => {
+    it('should add new reuseable component to state as the new root', () => {
+      const action: Action = {
+        type: 'ADD COMPONENT',
+        payload: {
+          componentName: 'TestRootChange',
+          id: 3,
+          root: true,
+        },
+      };
+      state = reducer(state, action);
+      
+      // expect state.components array to have length 3
+      const length = state.components.length;
+      expect(length).toEqual(3);
+      // expect new root to match id of component id of TestRootChange (rootComponents is an array of component ID numbers)
+      expect(state.rootComponents[state.rootComponents.length - 1]).toEqual(action.payload.id);
+    });
+  });
+
   // TEST 'ADD CHILD'
   describe('ADD CHILD reducer', () => {
     it('should add child component and separator to top-level component', () => {
@@ -158,6 +180,62 @@ describe('Testing componentReducer functionality', () => {
       expect(state.projectType).toEqual(action.payload.projectType);
     });
   });
+  
+
+  // TEST 'UNDO'
+  describe('UNDO reducer', () => {
+    it('should remove the last element from the past array and push it to the future array', () => {
+      const focusIndex = state.canvasFocus.componentId - 1;
+      state.components[focusIndex].past = [];
+
+      // snapShotFunc taken from src/components/main/canvas.tsx to test undo functionality
+      // snapShotFunc takes a snapshot of state to be used in UNDO/REDO functionality
+      const snapShotFuncCopy = () => {
+      const deepCopiedState = JSON.parse(JSON.stringify(state));
+      // pushes the last user action on the canvas into the past array of Component
+      state.components[focusIndex].past.push(deepCopiedState.components[focusIndex].children);
+      }
+
+      const actionHTML2: Action = {
+        type: 'ADD CHILD',
+        payload: {
+          type: 'HTML Element',
+          typeId: 4,
+          childId: null,
+        }
+      }
+      state = reducer(state, actionHTML2);
+      // invoking snapShotFunc is necessary to push actions into the past array, referenced in the UNDO functionality to define children
+      snapShotFuncCopy();
+
+      const actionUndo: Action = {
+        type: 'UNDO',
+         payload: {},
+      };
+      state = reducer(state, actionUndo);
+
+      expect(state.components[focusIndex].past.length).toEqual(0);
+      expect(state.components[focusIndex].future.length).toEqual(1);
+    })
+  });
+
+  
+  // TEST 'REDO'
+  describe('REDO reducer', () => {
+    it('should remove the last element from the future array and push it to the past array', () => {
+      const focusIndex = state.canvasFocus.componentId - 1;
+  
+      const actionRedo: Action = {
+        type: 'REDO',
+         payload: {},
+      };
+      state = reducer(state, actionRedo);
+
+      expect(state.components[focusIndex].future.length).toEqual(0);
+      expect(state.components[focusIndex].past.length).toEqual(1);
+    })
+  });
+
 
   // TEST 'RESET STATE'
   describe('RESET STATE reducer', () => {
@@ -176,3 +254,4 @@ describe('Testing componentReducer functionality', () => {
     });
   });
 });
+

__tests__/projects.test.js

@@ -1,50 +1,20 @@
-<<<<<<< HEAD
-<<<<<<< HEAD
-<<<<<<< HEAD
-=======
->>>>>>> master
 const { Mongoose } = require('mongoose');
 const request = require('supertest');
-
-
 // initializes the project to be sent to server/DB
 const { projectToSave, state } = require('../mockData');
-
 const app = require('../server/server.js');
 const http = require('http');
 let server;
-<<<<<<< HEAD
-=======
-=======
-const request = require('supertest');
->>>>>>> 88cc3e590da1bd5641e96dc39eb4a7863d71dbfc
-const app = require('../server/server');
-
-let server = 'https://reactype.herokuapp.com';
-const isDev = process.env.NODE_ENV === 'development';
-if (isDev) {
-  // server = 'http://localhost:5000';
-  server = require('..server/server');
-}
-<<<<<<< HEAD
->>>>>>> d93eb6bfcae6f1452b6e7451c95370b5d9e558f5
-=======
->>>>>>> master
-=======
->>>>>>> 88cc3e590da1bd5641e96dc39eb4a7863d71dbfc
-
 // save and get projects endpoint testing
 describe('Project endpoints tests', () => {  
   beforeAll((done) => {
     server = http.createServer(app);
     server.listen(done);
   });
-
   afterAll((done) => {
     Mongoose.disconnect();
     server.close(done);
   });
-
   // test saveProject endpoint
   describe('/saveProject', () => {
     describe('/POST', () => {
@@ -54,25 +24,11 @@ describe('Project endpoints tests', () => {
           .set('Accept', 'application/json')
           .send(projectToSave)
           .expect(200)
-<<<<<<< HEAD
-<<<<<<< HEAD
-<<<<<<< HEAD
-          .expect('Content-Type', /application\/json/)
-          .then((res) => expect(res.body.name).toBe(projectToSave.name));
-=======
-          .then(res => expect(res.body.project.name).toBe('test'));
->>>>>>> d93eb6bfcae6f1452b6e7451c95370b5d9e558f5
-=======
           .expect('Content-Type', /application\/json/)
           .then((res) => expect(res.body.name).toBe(projectToSave.name));
->>>>>>> master
-=======
-          .then(res => expect(res.body.project.name).toBe('test'));
->>>>>>> 88cc3e590da1bd5641e96dc39eb4a7863d71dbfc
       });
     });
   });
-
   // test getProjects endpoint
   describe('/getProjects', () => {
     describe('POST', () => {
@@ -90,7 +46,6 @@ describe('Project endpoints tests', () => {
       });
     });
   });
-
   // test deleteProject endpoint
   describe('/deleteProject', () => {
     describe('DELETE', () => {
@@ -101,21 +56,7 @@ describe('Project endpoints tests', () => {
           .set('Accept', 'application/json')
           .send({ name, userId })
           .expect(200)
-<<<<<<< HEAD
-<<<<<<< HEAD
-<<<<<<< HEAD
           .then((res) => expect(res.body.name).toBe(projectToSave.name));
-=======
-          .expect('Content-Type', /json/)
-          .then(res => expect(res.body.name).toBe('test'));
->>>>>>> d93eb6bfcae6f1452b6e7451c95370b5d9e558f5
-=======
-          .then((res) => expect(res.body.name).toBe(projectToSave.name));
->>>>>>> master
-=======
-          .expect('Content-Type', /json/)
-          .then(res => expect(res.body.name).toBe('test'));
->>>>>>> 88cc3e590da1bd5641e96dc39eb4a7863d71dbfc
       });
     });
   });

app/src/components/login/SignIn.tsx

@@ -75,7 +75,6 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
       window.api.setCookie();
       window.api.getCookie(cookie => {
         // if a cookie exists, set localstorage item with cookie data, clear interval, go back to '/' route to load app
-        console.log(cookie);
         if (cookie[0]) {
           window.localStorage.setItem('ssid', cookie[0].value);
           clearInterval(githubCookie);

app/src/components/main/Canvas.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useCallback, useContext, useEffect } from 'react';
 import { useDrop, DropTargetMonitor } from 'react-dnd';
-import _ from 'lodash';
 import { ItemTypes } from '../../constants/ItemTypes';
 import StateContext from '../../context/context';
 import { Component, DragItem } from '../../interfaces/Interfaces';
@@ -14,25 +13,25 @@ function 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, e?: string) => {
-    dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId, e, /*state*/ } });
-  };
-  // 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
-  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
+    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
@@ -95,6 +94,5 @@ function Canvas() {
     </div>
   );
 }
-// export { snapStateArr };
-export default Canvas;
 
+export default Canvas;

app/src/reducers/componentReducer.ts

@@ -215,10 +215,11 @@ const reducer = (state: State, action: Action) => {
       };
       components.push(newComponent);
 
+      // functionality if the new component will become the root component
       const rootComponents = [...state.rootComponents];
       if (action.payload.root) rootComponents.push(newComponent.id);
 
-      // update the focus to the new component
+      // updates the focus to the new component, which redirects to the new blank canvas of said new component
       const canvasFocus = {
         ...state.canvasFocus,
         componentId: newComponent.id,
@@ -344,7 +345,7 @@ const reducer = (state: State, action: Action) => {
     case 'CHANGE POSITION': {
       const { currentChildId, newParentChildId } = action.payload;
 
-      // if the currentChild Id is the same as the newParentId (i.e. a component is trying to drop itself into itself), don't update sate
+      // if the currentChild Id is the same as the newParentId (i.e. a component is trying to drop itself into itself), don't update state
       if (currentChildId === newParentChildId) return state;
 
       // find the current component in focus
@@ -618,15 +619,17 @@ const reducer = (state: State, action: Action) => {
         HTMLTypes
       };
     }
+
     case 'UNDO': {
       const focusIndex = state.canvasFocus.componentId - 1;
-      //if the past array is empty, return state
+      // if the past array is empty, return state
       if(state.components[focusIndex].past.length === 0) return {...state};
-      //the children array of the focused component will equal the last element of the past array
-      state.components[focusIndex].children = state.components[focusIndex].past[state.components[focusIndex].past.length - 1]
-      //the last element of the past array gets pushed into the future
-        //the last element of the past array gets popped out
-      state.components[focusIndex].future.push(state.components[focusIndex].past.pop())
+      // the children array of the focused component will equal the last element of the past array
+      state.components[focusIndex].children = state.components[focusIndex].past[state.components[focusIndex].past.length - 1];
+      // the last element of the past array gets popped off
+      const poppedEl = state.components[focusIndex].past.pop();
+      // the last element of the past array gets popped off and pushed into the future array
+      state.components[focusIndex].future.push(poppedEl);
 
       //generate code for the Code Preview
       state.components.forEach((el, i) => {
@@ -642,17 +645,18 @@ const reducer = (state: State, action: Action) => {
         ...state
       };
     }
+    
     case 'REDO': {
       const focusIndex = state.canvasFocus.componentId - 1;
       //if future array is empty, return state
       if(state.components[focusIndex].future.length === 0) return {...state};
       //the children array of the focused component will equal the last element of the future array
       state.components[focusIndex].children = state.components[focusIndex].future[state.components[focusIndex].future.length - 1]
       //the last element of the future array gets pushed into the past
-        //the last element of the future array gets popped out
+      //the last element of the future array gets popped out
       state.components[focusIndex].past.push(state.components[focusIndex].future.pop())
 
-      // //generate code for the Code Preview
+      // generate code for the Code Preview
       state.components.forEach((el, i) => {
         el.code = generateCode(
           state.components,
@@ -666,8 +670,6 @@ const reducer = (state: State, action: Action) => {
         ...state
       };
     }
-    case 'CHANGEDVALUE': {}
-
     default:
       return state;
   }

app/src/utils/createApplication.util.ts

@@ -136,8 +136,7 @@ export const createPackage = (path, appName) => {
     "express": "^4.17.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "webpack": "^4.29.6",
-    "react-native": "^0.62.1"
+    "webpack": "^4.29.6"
   },
   "devDependencies": {
     "@babel/core": "^7.4.3",

package.json

@@ -175,7 +175,7 @@
     "@types/chai": "^4.2.11",
     "@types/enzyme": "^3.10.5",
     "@types/enzyme-adapter-react-16": "^1.0.6",
-    "@types/jest": "^25.1.5",
+    "@types/jest": "^25.2.3",
     "apollo": "^2.32.5",
     "babel-eslint": "^8.2.6",
     "babel-jest": "^25.2.4",
@@ -207,7 +207,7 @@
     "sass-loader": "^7.0.3",
     "style-loader": "^0.20.3",
     "supertest": "^4.0.2",
-    "ts-jest": "^25.3.0",
+    "ts-jest": "^25.5.1",
     "ts-node": "^8.10.2",
     "typescript": "^3.9.6",
     "url-loader": "^4.1.0",