Merge pull request #12 from eddypjr/finalTest

Changed version number of package.json from 5.0 to 6.0 and reviewed for OS LAB final merge

__tests__/enzyme.test.tsx

@@ -109,11 +109,6 @@ describe('Test AppContainer container', () => {
   });
   // testing for a RightContainer
   it('Should render RightContainer', () => {
-    // This test doesnt work eventhough the component renders
-    // expect(
-    //   target.contains(
-    //     <RightContainer isThemeLight={props.isThemeLight}/>
-    //   )).toBe(true);
     expect(
         target.find(RightContainer)
       ).toHaveLength(1);

app/electron/main.js

@@ -60,10 +60,9 @@ async function createWindow() {
   // Create the browser window.
   win = new BrowserWindow({
     // full screen
-    // width: 1920,
-    // height: 1080,
-    width: 1024,
-    height: 576,
+    width: 1920,
+    height: 1080,
+
     minWidth: 980,
     // window title
     title: 'ReacType',
@@ -203,15 +202,6 @@ app.on('ready', createWindow);
 
 // TRYING ELECTRON-WINDOW-MANAGER When the application is ready
 
-// app.on('ready', () => {
-//   windowManager.setDefaultSetup({'width': 800, 'height': 450, 'position': 'right'});
-//   // Open Dashboard window
-//   const dashboard = windowManager.open('home', 'Welcome ...', 'http://localhost:5000/home.html');
-//   dashboard.toggleDevTools(false);
-//   // Load ReacType window
-//   createWindow();
-// });
-
 // Quit when all windows are closed.
 app.on('window-all-closed', () => {
   app.quit();

app/src/components/bottom/CodePreview.tsx

@@ -8,8 +8,6 @@ import 'ace-builds/src-noconflict/theme-solarized_dark';
 import 'ace-builds/src-noconflict/theme-solarized_light';
 import 'ace-builds/src-noconflict/theme-terminal';
 import { Component } from '../../interfaces/Interfaces';
-import { EditorState } from 'draft-js';
-import { Editor } from 'react-draft-wysiwyg';
 import useResizeObserver from '../../tree/useResizeObserver';
 import { string } from 'prop-types';
 

app/src/components/main/Canvas.tsx

@@ -6,7 +6,6 @@ import { Component, DragItem } from '../../interfaces/Interfaces';
 import { combineStyles } from '../../helperFunctions/combineStyles';
 import renderChildren from '../../helperFunctions/renderChildren';
 
-
 function Canvas() {
   const [state, dispatch] = useContext(StateContext);
   // find the current component to render on the canvas
@@ -25,7 +24,7 @@ function Canvas() {
       changeFocus(state.canvasFocus.componentId, null);
     };
 
-    // stores a snapshot of state into the past array for UNDO
+    // 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));

app/src/components/main/CanvasContainer.tsx

@@ -9,10 +9,6 @@ function CanvasContainer() {
     border: '2px Solid grey',
   };
 
-   function onChangeHandler(event) {
-     console.log('working', event.target);
-   }
-
   return (
     <div style={canvasContainerStyle}>
       <Canvas />

app/src/components/main/DirectChildHTMLNestable.tsx

@@ -17,7 +17,8 @@ function DirectChildHTMLNestable({
 }: ChildElement) {
   const [state, dispatch] = useContext(StateContext);
   const ref = useRef(null);
-// takes a snapshot of state to be used in UNDO and REDO cases
+
+// takes a snapshot of state to be used in UNDO and REDO cases.  snapShotFunc is also invoked in Canvas.tsx
 const snapShotFunc = () => {
   //makes a deep clone of state
   const deepCopiedState = JSON.parse(JSON.stringify(state));

app/src/components/top/NavBar.tsx

@@ -32,9 +32,6 @@ import createModal from '../right/createModal';
 import StateContext from '../../context/context';
 import logo from '../../public/icons/win/logo.png';
 
-
-// ROUTING TO DASHBOARD
-
 // NavBar text and button styling
 const useStyles = makeStyles((theme: Theme) => createStyles({
   root: {

app/src/index.js

@@ -15,26 +15,14 @@ import SignUp from './components/login/SignUp.tsx';
 import FBPassWord from './components/login/FBPassWord.tsx';
 import Tutorial from './tutorial/Tutorial.tsx';
 import TutorialPage from './tutorial/TutorialPage.tsx';
-
-
-/*
-*  Dashboard
-*/
-// import TestDashboard from './Dashboard/FormsContainer.ts';
 import ProjectDashboard from './Dashboard/ProjectContainer.tsx';
-
 import styles from './Dashboard/styles.css';
 
 const client = new ApolloClient({
   uri: 'http://localhost:5000/graphql',
   cache: new InMemoryCache()
 });
 
-/*
-*  
-*/
-
-
 const PrivateRoute = ({ component: Component, ...rest }) => (
   <Route
     {...rest}
@@ -48,7 +36,6 @@ const PrivateRoute = ({ component: Component, ...rest }) => (
   />
 );
 
-
 ReactDOM.render(
   <ApolloProvider client={client}>
     <Router>

app/src/reducers/componentReducer.ts

@@ -328,8 +328,6 @@ const reducer = (state: State, action: Action) => {
       if (directParent && directParent.name === 'separator') 
         nextTopSeparatorId = manageSeparators.handleSeparators(addChildArray, 'add');
       components[canvasFocus.componentId-1].children = addChildArray;
-
-      // const realPast = [];
 
       parentComponent.code = generateCode(
         components,
@@ -653,8 +651,9 @@ const reducer = (state: State, action: Action) => {
       //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
+      const poppedEl = state.components[focusIndex].future.pop();
       //the last element of the future array gets popped out
-      state.components[focusIndex].past.push(state.components[focusIndex].future.pop())
+      state.components[focusIndex].past.push(poppedEl);
 
       // generate code for the Code Preview
       state.components.forEach((el, i) => {

app/src/tutorial/Canvas.tsx

@@ -65,4 +65,3 @@ const Canvas: React.FC<{
 };
 
 export default Canvas;
-

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactype",
-  "version": "5.0.0",
+  "version": "6.0.0",
   "description": "Prototyping tool for React/Typescript Applications.",
   "private": true,
   "main": "app/electron/main.js",
@@ -40,7 +40,7 @@
   "scripts": {
     "postinstall": "ELECTRON_BUILDER_ALLOW_UNRESOLVED_DEPENDENCIES=true electron-builder install-app-deps",
     "dev-server": "cross-env NODE_ENV=development webpack-dev-server --config ./webpack.development.js",
-    "dev": "concurrently --success first \"cross-env NODE_ENV=development webpack-dev-server --config ./webpack.development.js\" \"cross-env NODE_ENV=development electron .\" \"npm run server\" ",
+    "dev": "concurrently --success first \"cross-env NODE_ENV=development webpack-dev-server --config ./webpack.development.js\" \"cross-env NODE_ENV=development electron .\" \"npm run server\" -k",
     "p": "concurrently --success first \"npm run dev-server\" \"cross-env NODE_ENV=production electron .\" \"nodemon server/server.js\" -k",
     "prod-build": "cross-env NODE_ENV=production npx webpack --mode=production --config ./webpack.production.js",
     "prod": "npm run prod-build && electron . --no-sandbox",
@@ -51,9 +51,7 @@
     "dist-windows": "npm run prod-build && electron-builder --windows",
     "dist-all": "npm run prod-build && electron-builder --mac --linux --windows",
     "test": " concurrently  \"npm run dev-server\"   \"cross-env NODE_ENV=test jest --verbose \"",
-    "k-test": "concurrently   \"npm run dev-server\" \"cross-env NODE_ENV=test jest users.test.js --detectOpenHandles \"",
-    "server": "cross-env NODE_ENV=development nodemon server/server.js",
-    "electron": "cross-env NODE_ENV=development electron ."
+    "server": "cross-env NODE_ENV=development nodemon server/server.js"
   },
   "repository": {
     "type": "git",

server/graphQL/resolvers/query.js

@@ -40,15 +40,8 @@ const Project = {
         });
       }
     }
-    // The nested query in the Apollo Server example only works if we nest the comment document directly inside the project document, not applicable in to our
-    // implementation. Since we can just retrieve the comments for each project using the projectId as the filter, we just need to retrive all the comments and parse them to each
-    // project in the return statement
-
-    // First step is to retrieve all the Comments using await and save them to an array
-    // Next, in the map loop below, filter our the comments for each project
-    // NOTE: There is probably better way to do this, but this will work for now and we can improve it later on
+
     const comCollection = await Comments.find({});
-    // console.log('comCollection', comCollection);
 
     if (resp) {
       return resp.map(proj => ({
@@ -59,7 +52,7 @@ const Project = {
         likes: proj.likes,
         published: proj.published,
         createdAt: proj.createdAt,
-        comments: comCollection.filter(commentDoc => commentDoc.projectId.toString() === proj._id.toString()), // here we should filter the comments for each proj and return it here 
+        comments: comCollection.filter(commentDoc => commentDoc.projectId.toString() === proj._id.toString()), // here we should filter the comments for each proj and return it here
       }));
     }
     // resp is null, return error message

server/models/reactypeModels.js

@@ -88,19 +88,11 @@ const projectSchema = new Schema({
 }, { minimize: false });
 // option 'minimize' prevent Mongoose from removing empty 'style' value in the copy
 
-// Test schema for implementing GraphQL
-const testSchema = new Schema({
-  name: String,
-  likes: Number,
-});
-const Tests = mongoose.model('Tests', testSchema);
-/* *********************************************** */
-
 const Users = mongoose.model('Users', userSchema);
 const Comments = mongoose.model('Comments', commentsSchema);
 const Sessions = mongoose.model('Sessions', sessionSchema);
 const Projects = mongoose.model('Projects', projectSchema);
 
 module.exports = {
-  Users, Comments, Sessions, Projects, Tests,
+  Users, Comments, Sessions, Projects,
 };

webpack.config.js

@@ -6,7 +6,8 @@ module.exports = {
   // since JS can be written for both server / browser, the "target" specifies what environment webpack should write for
   target: 'web', // Our app can run without electron
   // The entry is where webpack begins assembling the dependency tree
-  entry: ['./app/src/index.js'],
+  entry: ['./app/src/index.js'], // The entry point of our app; these entry points can be named and we can also have multiple if we'd like to split the webpack bundle into smaller files to improve script loading speed between multiple pages of our app
+  // the output is only created on npm run-prod-build
   output: {
     path: path.resolve(__dirname, 'app/dist'), // Where all the output files get dropped after webpack is done with them
     filename: 'bundle.js' // The name of the webpack bundle that's generated