started on oauth

Author: brianjshan

app/electron/main.js

@@ -362,6 +362,12 @@ ipcMain.on('delete_cookie', event => {
 
 // opens new window for github oauth when button on signin page is clicked
 ipcMain.on('github', event => {
+  // your github applications credentials
+  const options = {
+    client_id: 'your_client_id',
+    client_secret: 'your_client_secret',
+    scopes: ['user:email', 'notifications']
+  };
   // create new browserwindow object with size, title, security options
   const github = new BrowserWindow({
     width: 800,
@@ -376,8 +382,11 @@ ipcMain.on('github', event => {
       zoomFactor: 1.0
     }
   });
+  const githubUrl = 'https://github.com/login/oauth/authorize?';
+  const authUrl =
+    githubUrl + 'client_id=' + options.client_id + '&scope=' + options.scopes;
   // redirects to relevant server endpoint
-  github.loadURL(`${serverUrl}/github`);
+  github.loadURL(authUrl);
   // show window
   github.show();
   // if final callback is reached and we get a redirect from server back to our app, close oauth window

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/components/login/SignIn.tsx

@@ -22,6 +22,7 @@ import { makeStyles, withStyles } from '@material-ui/core/styles';
 import Container from '@material-ui/core/Container';
 import GitHubIcon from '@material-ui/icons/GitHub';
 import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
+import { ipcRenderer } from 'electron';
 
 function Copyright() {
   return (
@@ -228,6 +229,7 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
             // messages the main proces to open new window for github oauth
             console.log('open github');
             console.log(window.api);
+            // ipcRenderer.send('github-oauth', 'getToken');
             window.api.github();
           }}
         >

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')
-);
+);

app/src/reducers/componentReducer.ts

@@ -91,8 +91,8 @@ const reducer = (state: State, action: Action) => {
   const updateIds = (components: Component[]) => {
     // component IDs should be array index + 1
     components.forEach((comp, i) => (comp.id = i + 1));
-    
-    // create KV pairs of component names and corresponding IDs 
+
+    // create KV pairs of component names and corresponding IDs
     const componentIds = {};
     components.forEach(component => {
       if (!component.isPage ) componentIds[component.name] = component.id;
@@ -102,7 +102,7 @@ const reducer = (state: State, action: Action) => {
     components.forEach(page => {
       if (page.isPage) {
         page.children.forEach(child => {
-          if (child.type === 'Component') child.typeId = componentIds[child.name]; 
+          if (child.type === 'Component') child.typeId = componentIds[child.name];
         });
       }
     });
@@ -137,7 +137,7 @@ const reducer = (state: State, action: Action) => {
               arr.splice(i, 1);
             }
           })
-        } 
+        }
         searchNestedComps(childComponents.children)
       });
     }
@@ -152,9 +152,8 @@ const reducer = (state: State, action: Action) => {
         action.payload.componentName === ''
       )
         return state;
-      
+
       const components = [...state.components];
-      console.log('adding =>', action.payload.componentName);
       const newComponent = {
         id: state.components.length + 1,
         name: action.payload.componentName,
@@ -211,20 +210,20 @@ const reducer = (state: State, action: Action) => {
           }
         });
       }
-      
+
       if (type === 'Component') {
         const originalComponent = findComponent(state.components, typeId);
         if (childTypeExists('Component', parentComponentId, originalComponent))
         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) {
@@ -345,7 +344,7 @@ const reducer = (state: State, action: Action) => {
     }
     case 'DELETE CHILD': {
       // if in-focus instance is a top-level component and not a child, don't delete anything
-            
+
       if (!state.canvasFocus.childId) return state;
 
       // find the current component in focus
@@ -477,7 +476,9 @@ const reducer = (state: State, action: Action) => {
     }
 
     case 'OPEN PROJECT': {
+      console.log("BEFORE: ", action.payload.HTMLTypes);
       convertToJSX(action.payload.HTMLTypes);
+      console.log("AFTER: ", action.payload.HTMLTypes);
       return {
         ...action.payload
       };
@@ -491,6 +492,20 @@ const reducer = (state: State, action: Action) => {
         HTMLTypes
       };
     }
+
+    case 'DELETE ELEMENT': {
+      const HTMLTypes = [...state.HTMLTypes];
+      for (let i = 0; i < HTMLTypes.length; i+=1) {
+        if (HTMLTypes[i].id === action.payload) {
+          HTMLTypes.splice(i, 1);
+        }
+      }
+      return {
+        ...state,
+        HTMLTypes
+      }
+    }
+
     default:
       return state;
   }