master

brianjshan · brianjshan · commit 16e341302591 · 2020-11-13T13:27:29.000-08:00
diff --git a/README.md b/README.md
@@ -5,28 +5,28 @@
 
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/team-reactype/ReacType/pulls)
 ![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)
-![Release: 3.0](https://img.shields.io/badge/Release-3.0-orange)
+![Release: 4.0](https://img.shields.io/badge/Release-4.0-orange)
 
 **ReacType** is a visual prototyping tool for developers employing **React** component architecture alongside the comprehensive type checking of **TypeScript**.
 In other words, **you can draw prototypes and export React / Typescript code!**
 
 **ReacType** allows the user to _visualize_ their application architecture dynamically, employing a _drag-and-drop canvas display_ and a _real-time component code preview_. The user can create components and drag _instances_ of these components, as well as HTML elements, onto the canvas. This architecture can then be _exported_ as TypeScript application files to be used as a starter template for any repository.
 
-**New with version 3.0:**
+**New with version 4.0:**
 
-- Export code as a [Next.js](https://nextjs.org/) project
-- Create nestable components/HTML elements using a drag-and-drop canvas
-- Add CSS to any element on the canvas
-- Components and HTML canvas elements are rendered in the canvas in the same way they'll be rendered in the exported project
-- View dynamically generated Next.js or classic React code as you build your project
-- Authenticate with Github or email
-- Save data for multiple projects in the cloud
-- Critical Electron security gaps resolved
+- View dynamically created components/HTML elements in the component tree
+- View Typescript syntax for React
+- Code preview is fully editable (make changes before exporting project)
+- Create custom HTML elements
+- Improved UI experience
+- Implemented a comprehensive tutorial page with images
 
 Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windows](https://github.com/team-reactype/ReacType/releases/), [Linux](https://github.com/team-reactype/ReacType/releases/).
 
 - **Mac users**: After opening the dmg and dragging ReacType into your Applications folder, ctrl+click the icon and select 'Open' from the context menu to run the app. This extra step is necessary since we don't have an Apple developer license yet.
 
+- **Microsoft users**:
+
 - **Linux users**: Run the application as a super user in order to read and write files.
 
 ![Gif of adding](https://i.imgur.com/nOeuuU6.gif)
diff --git a/app/electron/menu.js b/app/electron/menu.js
@@ -32,8 +32,8 @@ var MenuBuilder = function(mainWindow, appName) {
       }
     });
     if (process.env.NODE_ENV === 'development') {
-      tutorial.loadURL(`http://localhost:8080/#/tutorial`);}
-    else if (process.env.NODE_ENV === 'production'){
+      tutorial.loadURL(`http://localhost:8080/#/tutorial`);
+    } else {
       tutorial.loadURL(`${Protocol.scheme}://rse/index-prod.html#/tutorial`);
     }
     tutorial.show();
diff --git a/app/src/components/login/SignIn.tsx b/app/src/components/login/SignIn.tsx
@@ -6,7 +6,7 @@ import {
   RouteComponentProps
 } from 'react-router-dom';
 import { sessionIsCreated } from '../../helperFunctions/auth';
-import FacebookLogin from "react-facebook-login";
+import FacebookLogin from 'react-facebook-login';
 import Avatar from '@material-ui/core/Avatar';
 import Button from '@material-ui/core/Button';
 import CssBaseline from '@material-ui/core/CssBaseline';
@@ -36,7 +36,7 @@ const useStyles = makeStyles(theme => ({
     marginTop: theme.spacing(8),
     display: 'flex',
     flexDirection: 'column',
-    alignItems: 'center',
+    alignItems: 'center'
   },
   avatar: {
     margin: theme.spacing(1),
@@ -54,7 +54,7 @@ const useStyles = makeStyles(theme => ({
     '& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': {
       borderColor: '#3EC1AC'
     }
-  },
+  }
 }));
 
 const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
@@ -144,22 +144,25 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
 
   const responseFacebook = response => {
     if (response.accessToken) {
-      newUserIsCreated(response.email, response.email, randomPassword())
-        .then(userCreated => {
+      newUserIsCreated(response.email, response.email, randomPassword()).then(
+        userCreated => {
           if (userCreated === 'Success') {
             props.history.push('/');
           } else {
-            sessionIsCreated(response.email, randomPassword(), true)
-              .then(loginStatus => {
+            sessionIsCreated(response.email, randomPassword(), true).then(
+              loginStatus => {
                 if (loginStatus === 'Success') {
                   props.history.push('/');
                 }
-              })
+              }
+            );
           }
-        });
-      }
-  }
-  const classBtn = 'MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-4 MuiButton-fullWidth';
+        }
+      );
+    }
+  };
+  const classBtn =
+    'MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-4 MuiButton-fullWidth';
   return (
     <Container component="main" maxWidth="xs">
       <CssBaseline />
@@ -217,7 +220,7 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
         >
           Sign In
         </Button>
-        <Button
+        {/* <Button
           fullWidth
           variant="contained"
           color="default"
@@ -229,14 +232,14 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
         <GitHubIcon />
         </Button>
         <FacebookLogin
-          appId={FBAPPID} 
+          appId={FBAPPID}
           autoLoad={false}
           fields="name, email, picture"
           callback={responseFacebook}
           icon="fa-facebook-square"
           cssClass={'oauth-btn'}
           textButton=' Login with Facebook'
-        />
+        /> */}
         <Button
           fullWidth
           variant="contained"
diff --git a/app/src/components/main/Canvas.tsx b/app/src/components/main/Canvas.tsx
@@ -1,88 +1,36 @@
-import React, { useState, useContext } from 'react';
+import React, { useContext } from 'react';
 import { useDrop, DropTargetMonitor } from 'react-dnd';
 import { ItemTypes } from '../../constants/ItemTypes';
 import StateContext from '../../context/context';
 import { Component, DragItem } from '../../interfaces/Interfaces';
 import { combineStyles } from '../../helperFunctions/combineStyles';
 import renderChildren from '../../helperFunctions/renderChildren';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
-import createModal from '../right/createModal';
-
 const findNestedChild = (curr, components) => {
   components.forEach((comp, i) => {
     comp.children.forEach(child => {
-      if (child.name === curr.name) {};
+      if (child.name === curr.name) {
+      }
     });
     if (comp.children.length !== 0) findNestedChild(curr, comp.children);
   });
-
 };
-
 function Canvas() {
-  const [modal, setModal] = useState(null);
-
   const [state, dispatch] = useContext(StateContext);
   // find the current component to render on the canvas
   const currentComponent: Component = state.components.find(
     (elem: Component) => elem.id === state.canvasFocus.componentId
   );
-
+  findNestedChild(currentComponent, state.components);
   // 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);
   }
-
-  const closeModal = () => setModal(null);
-
-  // creates modal that asks if user wants to clear workspace
-  // if user clears their workspace, then their components are removed from state and the modal is closed
-  const triedToNestIncorrectly = () => {
-    // set modal options
-    const children = (
-      <List className="export-preference">
-        <ListItem
-          key={`gotIt${state.canvasFocus.componentId}`}
-          button
-          onClick={closeModal}
-          style={{
-            border: '1px solid #3f51b5',
-            marginBottom: '2%',
-            marginTop: '5%'
-          }}
-        >
-          <ListItemText
-            primary={'Got it'}
-            style={{ textAlign: 'center' }}
-            onClick={closeModal}
-          />
-        </ListItem>
-      </List>
-    );
-
-    // create modal
-    setModal(
-      createModal({
-        closeModal,
-        children,
-        message: 'Unable to nest component in another component that contains that component.',
-        primBtnLabel: null,
-        primBtnAction: null,
-        secBtnAction: null,
-        secBtnLabel: null,
-        open: true
-      })
-    );
-  };
-
   // This hook will allow the user to drag items from the left panel on to the canvas
   const [{ isOver }, drop] = useDrop({
     accept: ItemTypes.INSTANCE,
@@ -91,69 +39,47 @@ function Canvas() {
       if (didDrop) {
         return;
       }
-
-      const runReducers = () => {
-        if (item.newInstance) {
-          dispatch({
-            type: 'ADD CHILD',
-            payload: {
-              type: item.instanceType,
-              typeId: item.instanceTypeId,
-              childId: null
-            }
-          });
-        }
-        // if item is not a new instance, change position of element dragged inside div so that the div is the new parent
-        else {
-          dispatch({
-            type: 'CHANGE POSITION',
-            payload: {
-              currentChildId: item.childId,
-              newParentChildId: null
-            }
-          });
-        }
+      // 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) {
+        dispatch({
+          type: 'ADD CHILD',
+          payload: {
+            type: item.instanceType,
+            typeId: item.instanceTypeId,
+            childId: null
+          }
+        });
       }
-
-      const addingComponent = state.components.find(elem => elem.id === item.instanceTypeId);
-
-      if (item.instanceType === "HTML Element") {
-        return runReducers();
-      } else if (item.instanceType === 'Route Link') {
-        return runReducers();
-      } else if (checkChildren([addingComponent], currentComponent)) {
-        triedToNestIncorrectly();
-        return;
-      } else {
-        // if item dropped is going to be a new instance (i.e. it came from the left panel), then create a new child component
-        return runReducers();
+      // if item is not a new instance, change position of element dragged inside div so that the div is the new parent
+      else {
+        dispatch({
+          type: 'CHANGE POSITION',
+          payload: {
+            currentChildId: item.childId,
+            newParentChildId: null
+          }
+        });
       }
     },
     collect: monitor => ({
       isOver: !!monitor.isOver()
     })
   });
-
   const defaultCanvasStyle = {
     width: '100%',
     minHeight: '100%',
     backgroundColor: isOver ? 'lightyellow' : 'white',
     border: '3px solid #01d46d',
     borderStyle: isOver ? 'dotted' : 'solid'
   };
-
   // Combine the default styles of the canvas with the custom styles set by the user for that component
   // The render children function renders all direct children of a given component
   // Direct children are draggable/clickable
-
-
   const canvasStyle = combineStyles(defaultCanvasStyle, currentComponent.style);
   return (
     <div ref={drop} style={canvasStyle} onClick={onClickHandler}>
       {renderChildren(currentComponent.children)}
-      {modal}
     </div>
   );
 }
-
 export default Canvas;
diff --git a/app/src/reducers/componentReducer.ts b/app/src/reducers/componentReducer.ts
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -32,8 +32,8 @@ var MenuBuilder = function(mainWindow, appName) {`
`32`	`32`	`}`
`33`	`33`	`});`
`34`	`34`	`if (process.env.NODE_ENV === 'development') {`
`35`		- tutorial.loadURL(`http://localhost:8080/#/tutorial`);}
`36`		`- else if (process.env.NODE_ENV === 'production'){`
	`35`	+ tutorial.loadURL(`http://localhost:8080/#/tutorial`);
	`36`	`+ } else {`
`37`	`37`	tutorial.loadURL(`${Protocol.scheme}://rse/index-prod.html#/tutorial`);
`38`	`38`	`}`
`39`	`39`	`tutorial.show();`