code preview, canvas, reusable components tutorial

Author: stormikph

app/electron/main.js

@@ -29,14 +29,14 @@ const isDev =
 const port = 8080;
 const selfHost = `http://localhost:${port}`;
 
-// main.js is what controls the lifecycle of the electron applicaton
+// main.js is what controls the lifecycle of the electron application
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
 let win;
 let menuBuilder;
 
-// function to create a new broswer window
+// function to create a new browser window
 // this function will be called when Electron has initialized itself
 async function createWindow() {
   if (isDev) {
@@ -57,22 +57,22 @@ async function createWindow() {
     height: 1080,
     // window title
     title: `ReacType`,
-    // the browser window will not display intiially as it's loading
+    // the browser window will not display initially as it's loading
     // once the browser window renders, a function is called below  that hides the splash screen and displays the browser window
     show: false,
     // icon: path.join(__dirname, '../src/public/icons/png/256x256.png'),
     webPreferences: {
       zoomFactor: 0.7,
       // enable devtools when in development mode
       devTools: isDev,
-      // crucial security feature - blocks rendering process from having access to node moduels
+      // crucial security feature - blocks rendering process from having access to node modules
       nodeIntegration: false,
       // web workers will not have access to node
       nodeIntegrationInWorker: false,
-      // disallow experimental feature to allow node.js suppport in subframes (iframes/child windows)
+      // disallow experimental feature to allow node.js support in sub-frames (i-frames/child windows)
       nodeIntegrationInSubFrames: false,
-      // runs electron apis and preload script in a seperate JS context
-      // sepearate context has access to document/window but has it's own built-ins and is isolate from chagnes to gloval environment by locaded page
+      // runs electron apis and preload script in a separate JS context
+      // separate context has access to document/window but has it's own built-ins and is isolate from changes to global environment by loaded page
       // Electron API only available from preload, not loaded page
       contextIsolation: true,
       // disables remote module. critical for ensuring that rendering process doesn't have access to node functionality
@@ -100,7 +100,7 @@ async function createWindow() {
 
   // Load app
   if (isDev) {
-    // load app from webdev server
+    // load app from web-dev server
     win.loadURL(selfHost);
   } else {
     // load local file if in production
@@ -262,7 +262,7 @@ app.on('web-contents-created', (event, contents) => {
 
   // https://electronjs.org/docs/tutorial/security#11-verify-webview-options-before-creation
   // The web-view is used to embed guest content in a page
-  // This event listener deletes webviews if they happen to occur in the app
+  // This event listener deletes web-views if they happen to occur in the app
   // https://www.electronjs.org/docs/api/web-contents#event-will-attach-webview
   contents.on('will-attach-webview', (event, webPreferences, params) => {
     // Strip away preload scripts if unused or verify their location is legitimate
@@ -360,9 +360,9 @@ ipcMain.on('delete_cookie', event => {
     .catch(err => console.log('Error deleting cookie:', err));
 });
 
-// opens new window for github oauth when button on signin page is clicked
+// opens new window for github oauth when button on sign in page is clicked
 ipcMain.on('github', event => {
-  // create new browserwindow object with size, title, security options
+  // create new browser window object with size, title, security options
   const github = new BrowserWindow({
     width: 800,
     height: 600,
@@ -399,7 +399,7 @@ ipcMain.on('github', event => {
 });
 
 ipcMain.on('tutorial', event => {
-  // create new browserwindow object with size, title, security options
+  // create new browser window object with size, title, security options
   const tutorial = new BrowserWindow({
     width: 800,
     height: 600,
@@ -439,4 +439,4 @@ ipcMain.on('tutorial', event => {
 
 
 
-//module.exports = dialog;
+//module.exports = dialog;

app/src/components/left/HTMLItem.tsx

@@ -4,6 +4,8 @@ import { ItemTypes } from '../../constants/ItemTypes';
 import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
 
+const buttonClasses =
+'MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-button-12 MuiButton-textPrimary';
 
 const useStyles = makeStyles({
   HTMLPanelItem: {
@@ -29,7 +31,8 @@ const HTMLItem: React.FC<{
   name: string;
   id: number;
   Icon: any;
-}> = ({ name, id, Icon }) => {
+  handleDelete: (id: number) => void;
+}> = ({ name, id, Icon, handleDelete }) => {
   const classes = useStyles();
 
   const [{ isDragging }, drag] = useDrag({
@@ -58,6 +61,7 @@ const HTMLItem: React.FC<{
         >
           {Icon && <Icon />}
         </span>
+        <button className={buttonClasses} onClick={() => { handleDelete(id) }} > X </button>
       </div>
     </Grid>
   );

app/src/components/left/HTMLPanel.tsx

@@ -27,7 +27,7 @@ const HTMLPanel = (): JSX.Element => {
     setName(e.target.value);
   };
 
-  const checkNameDupe = (inputName: String) => {
+  const checkNameDupe = (inputName: String): boolean => {
     let checkList = state.HTMLTypes.slice();
 
     // checks to see if inputted comp name already exists
@@ -66,6 +66,8 @@ const HTMLPanel = (): JSX.Element => {
     const formattedName =
       inputNameClean.charAt(0).toUpperCase() + inputNameClean.slice(1);
     // add new component to state
+    console.log(inputTag);
+    console.log(inputName);
     const newElement = {
       id: currentID,
       tag: inputTag,
@@ -79,13 +81,19 @@ const HTMLPanel = (): JSX.Element => {
       type: 'ADD ELEMENT',
       payload: newElement
     });
-    const nextID = currentID + 1;
+    let nextID = 0;
+    for (let i = 0; i < state.HTMLTypes.length; i+=1) {
+      if (state.HTMLTypes[i].id > nextID) {
+        nextID = state.HTMLTypes.id;
+      }
+    }
+    nextID += 1;
     setCurrentID(nextID);
     setTag('');
     setName('');
   };
 
-  const alphanumeric = input => {
+  const alphanumeric = (input:string): boolean => {
     let letterNumber = /^[0-9a-zA-Z]+$/;
     if (input.match(letterNumber)) return true;
     return false;
@@ -111,6 +119,13 @@ const HTMLPanel = (): JSX.Element => {
     resetError();
   };
 
+  const handleDelete = (id: number): void => {
+    dispatch({
+      type: "DELETE ELEMENT",
+      payload: id
+    });
+  }
+
   return (
     <div>
       <h4> HTML Elements</h4>
@@ -167,6 +182,7 @@ const HTMLPanel = (): JSX.Element => {
             key={`html-${option.name}`}
             id={option.id}
             Icon={option.icon}
+            handleDelete={handleDelete}
           />
         ))}
       </Grid>
@@ -175,9 +191,6 @@ const HTMLPanel = (): JSX.Element => {
 };
 
 const useStyles = makeStyles({
-  inputField: {
-    marginTop: '15px'
-  },
   inputWrapper: {
     // height: '115px',
     textAlign: 'center',
@@ -192,25 +205,6 @@ const useStyles = makeStyles({
     padding: '20px',
     margin: '20px'
   },
-  rootCheckBox: {},
-  rootCheckBoxLabel: {
-    color: 'white'
-  },
-  panelWrapper: {
-    width: '100%',
-    marginTop: '15px'
-  },
-  panelWrapperList: {
-    // maxHeight: '400px',
-    minHeight: '120px',
-    // overflowY: 'auto',
-    marginLeft: '-15px',
-    marginRight: '-15px'
-  },
-  panelSubheader: {
-    textAlign: 'center',
-    color: '#fff'
-  },
   input: {
     color: '#fff',
     borderRadius: '5px',
@@ -228,24 +222,6 @@ const useStyles = makeStyles({
     zIndex: 20,
     color: '#fff',
     marginTop: '-10px'
-  },
-  btnGroup: {
-    display: 'flex',
-    flexDirection: 'column',
-    paddingTop: '10px',
-    marginLeft: '10px'
-  },
-  button: {
-    fontSize: '1rem',
-    height: '40px',
-    maginTop: '10px',
-    width: '100%',
-    // border: '1px solid rgba(70,131,83)',
-    backgroundColor: 'rgba(1,212,109,0.1)'
-  },
-  rootToggle: {
-    color: '#01d46d',
-    fontSize: '0.85rem'
   }
 });
 

app/src/containers/AppContainer.tsx

@@ -8,7 +8,7 @@ import { theme1 } from '../public/styles/theme';
 import { makeStyles } from '@material-ui/core/styles';
 
 export const styleContext = createContext({
-  style: null, 
+  style: null,
   setStyle: null
 });
 // console.log('styleContext: ', styleContext);

app/src/helperFunctions/generateCode.ts

@@ -161,7 +161,7 @@ const generateUnformattedCode = (
       }
       ${
         stateful && !classBased
-          ? `const  [value, setValue] = useState("INITIAL VALUE");`
+          ? `const  [value, setValue] = useState<any | undefined>("INITIAL VALUE");`
           : ``
       }
       ${
@@ -195,7 +195,7 @@ const generateUnformattedCode = (
 
       const ${currentComponent.name} = (props): JSX.Element => {
 
-        const  [value, setValue] = useState("INITIAL VALUE");
+        const  [value, setValue] = useState<any | undefined>("INITIAL VALUE");
 
       return (
         <>

app/src/index.js

@@ -7,15 +7,8 @@ import Cookies from 'js-cookie';
 import SignIn from './components/login/SignIn.tsx';
 import SignUp from './components/login/SignUp.tsx';
 import Tutorial from './tutorial/Tutorial.tsx';
-import Pages from './tutorial/Pages.tsx';
-import Customization from './tutorial/Customization.tsx';
-import Canvas from './tutorial/Canvas.tsx';
-import Styling from './tutorial/Styling.tsx';
-import RouteLinks from './tutorial/RouteLinks.tsx';
-import ReusableComponents from './tutorial/ReusableComponents.tsx';
-import ComponentTree from './tutorial/ComponentTree.tsx';
-import HtmlElements from './tutorial/HtmlElements.tsx';
-import CodePreview from './tutorial/CodePreview.tsx';
+import TutorialPage from './tutorial/TutorialPage.tsx';
+
 
 import {
   HashRouter as Router,
@@ -24,6 +17,7 @@ import {
   Switch,
 } from 'react-router-dom';
 
+
 const PrivateRoute = ({ component: Component, ...rest }) => (
   <Route
     {...rest}
@@ -45,16 +39,8 @@ ReactDOM.render(
       <Route exact path="/signup" component={SignUp} />
       <PrivateRoute exact path="/" component={App} />
       <Route exact path="/tutorial" component={Tutorial}/>
-      <Route exact path="/pages" component={Pages}/>
-      <Route exact path="/links" component={RouteLinks}/>
-      <Route exact path="/code-preview" component={CodePreview}/>
-      <Route exact path="/reusable-components" component={ReusableComponents}/>
-      <Route exact path="/component-tree" component={ComponentTree}/>
-      <Route exact path="/html-elements" component={HtmlElements}/>
-      <Route exact path="/styling" component={Styling}/>
-      <Route exact path="/customization" component={Customization}/>
-      <Route exact path="/canvas" component={Canvas}/>
+      <Route exact path="/tutorialPage/:learn" component={TutorialPage} value={'test'} />
     </Switch>
   </Router>,
   document.getElementById('app')
-);
+);