Built new UI for project management section of UI. Cleaned up Typescript errors

tsully · tsully · commit fa6342cfc819 · 2020-07-11T17:32:45.000-07:00
diff --git a/app/src/components/left/ComponentPanel.tsx b/app/src/components/left/ComponentPanel.tsx
@@ -90,7 +90,6 @@ const ComponentPanel = (): JSX.Element => {
     resetError();
   };
 
-
   const isFocus = (targetId: Number) => {
     return state.canvasFocus.componentId === targetId ? true : false;
   };
@@ -117,7 +116,11 @@ const ComponentPanel = (): JSX.Element => {
               <FormControlLabel
                 value="top"
                 control={
-                  <Checkbox color="primary" onChange={toggleRootStatus} />
+                  <Checkbox
+                    color="primary"
+                    checked={isRoot}
+                    onChange={toggleRootStatus}
+                  />
                 }
                 label={state.projectType === 'Next.js' ? 'Page' : 'Root'}
                 className={classes.rootCheckBoxLabel}
diff --git a/app/src/components/right/LoginButton.tsx b/app/src/components/right/LoginButton.tsx
@@ -2,15 +2,17 @@ import React, { useContext } from 'react';
 import { stateContext } from '../../context/context';
 import Button from '@material-ui/core/Button';
 import ExitToAppIcon from '@material-ui/icons/ExitToApp';
-import { useHistory } from "react-router-dom";
+import { useHistory } from 'react-router-dom';
+import { makeStyles } from '@material-ui/core/styles';
 
 export default function LoginButton() {
   let history = useHistory();
   const [state, dispatch] = useContext(stateContext);
 
+  const classes = useStyles();
+
   const handleLogout = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     e.preventDefault();
-    console.log('Logout clicked, destroying cookie, redirect to login');
     // destroys cookie by backdating expiration time
     document.cookie = 'ssid=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
     // uses useHistory to return to the login page
@@ -28,18 +30,28 @@ export default function LoginButton() {
       >
         Log Out
       </Button>
-    )
+    );
   } else {
     return (
       <Button
         variant="contained"
         onClick={handleLogout}
         color="secondary"
-        style={{ textAlign: 'center' }}
+        className={classes.button}
         endIcon={<ExitToAppIcon />}
       >
         Log In
       </Button>
-    )
+    );
+  }
+}
+
+const useStyles = makeStyles({
+  button: {
+    backgroundColor: 'rgba(1,212,109,0.4)',
+    fontSize: '1em',
+    minWidth: '300px',
+    marginTop: '10px',
+    marginBotton: '10px'
   }
-}
+});
diff --git a/app/src/components/right/ProjectManager.tsx b/app/src/components/right/ProjectManager.tsx
@@ -6,13 +6,14 @@ import ExitToAppIcon from '@material-ui/icons/ExitToApp';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
-import SaveIcon from '@material-ui/icons/Save';
+import WarningIcon from '@material-ui/icons/Warning';
 import PublishIcon from '@material-ui/icons/Publish';
 import Button from '@material-ui/core/Button';
 import Checkbox from '@material-ui/core/Checkbox';
 import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';
 import FormControl from '@material-ui/core/FormControl';
+import { useHistory, withRouter } from 'react-router-dom';
 
 import exportProject from '../../utils/exportProject.util';
 import { saveProject } from '../../helperFunctions/projectGetSave';
@@ -36,19 +37,6 @@ const ProjectManager = () => {
     dispatch({ type: 'CHANGE PROJECT TYPE', payload: { projectType } });
   };
 
-  const handleLogout = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.preventDefault();
-    console.log('Logout clicked, destroying cookie, redirect to login');
-    // destroys "cookie" by clearing localStorage if guest
-    window.localStorage.clear();
-    // destroy cookie on production when not seen by chromium browser using ipcrenderer
-    window.api.delCookie();
-    // destroys cookie if user by backdating cookie expiration date
-    document.cookie = 'ssid=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
-    // uses useHistory to return to the login page
-    props.history.push('/login');
-  };
-
   // state to keep track of how the user wants their components to be exported
   // genOption = 0 --> export only components
   // genOption = 1 --> export an entire project w/ webpack, server, etc.
@@ -144,7 +132,9 @@ const ProjectManager = () => {
     window.api.addAppDirChosenListener(path => {
       exportProject(
         path,
-        'NEW PROJECT',
+        state.name
+          ? state.name
+          : 'New_ReacType_Project_' + Math.ceil(Math.random() * 99).toString(),
         genOption,
         state.projectType,
         state.components,
@@ -169,7 +159,7 @@ const ProjectManager = () => {
   return (
     // <div className={classes.logoutButton}>
     <div className={classes.projectManagerWrapper}>
-      <div className={classes.panelWrapper}>
+      <div className={classes.projectTypeWrapper}>
         <FormControl>
           <Select
             variant="outlined"
@@ -184,22 +174,31 @@ const ProjectManager = () => {
           </Select>
         </FormControl>
       </div>
-      <SaveProjectButton />
-      <ProjectsFolder />
-      <LoginButton />
+      {state.isLoggedIn ? <SaveProjectButton /> : ''}
+      {state.isLoggedIn ? <ProjectsFolder /> : ''}
       {/* <div className={classes.btnGroup}> */}
       <Button
-        className={classes.exportBtn}
+        className={classes.button}
         variant="outlined"
         color="primary"
         onClick={showGenerateAppModal}
         endIcon={<PublishIcon />}
       >
         EXPORT PROJECT
       </Button>
-      <Button onClick={clearWorkspace} className={classes.clearBtn}>
+
+      <Button
+        className={classes.button}
+        variant="outlined"
+        color="primary"
+        onClick={clearWorkspace}
+        endIcon={<WarningIcon />}
+      >
         CLEAR WORKSPACE
       </Button>
+      <br />
+      <br />
+      <LoginButton />
       {/* </div> */}
       {modal}
     </div>
@@ -210,7 +209,10 @@ const useStyles = makeStyles({
   projectManagerWrapper: {
     border: '1px solid rgba(70,131,83)',
     padding: '20px',
-    margin: '20px'
+    margin: '40px',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center'
   },
 
   logoutButton: {
@@ -229,28 +231,23 @@ const useStyles = makeStyles({
     left: '0px'
   },
 
-  exportBtn: {
-    width: '55%',
+  button: {
     backgroundColor: 'rgba(1,212,109,0.1)',
-    fontSize: '1em'
-  },
-  clearBtn: {
-    width: '55%',
     fontSize: '1em',
-    marginTop: '15px',
-    color: 'red'
+    minWidth: '300px',
+    marginTop: '10px',
+    marginBotton: '10px'
   },
   projectTypeWrapper: {
-    paddingLeft: '20px',
-    paddingRight: '20px',
-    marginBottom: '15px',
-    width: '100%'
+    width: '300px',
+    marginTop: '10px',
+    marginBotton: '10px'
   },
   projectSelector: {
     backgroundColor: 'rgba(255,255,255,0.15)',
-    width: '317px',
+    width: '300px',
     color: '#fff'
   }
 });
 
-export default ProjectManager;
+export default withRouter(ProjectManager);
diff --git a/app/src/components/right/ProjectsFolder.tsx b/app/src/components/right/ProjectsFolder.tsx
@@ -15,13 +15,6 @@ import { blue } from '@material-ui/core/colors';
 import { getProjects } from '../../helperFunctions/projectGetSave';
 import { stateContext } from '../../context/context';
 
-const useStyles = makeStyles({
-  avatar: {
-    backgroundColor: blue[100],
-    color: blue[600]
-  }
-});
-
 export interface ProjectDialogProps {
   open: boolean;
   projects: Array<Object>;
@@ -32,7 +25,6 @@ export interface ProjectDialogProps {
 function ProjectsDialog(props: ProjectDialogProps) {
   const classes = useStyles();
   const { onClose, open, projects } = props;
-  console.log('Inside projectsdialogbox projects is', projects);
   const [_, dispatch] = useContext(stateContext);
 
   useEffect(() => {
@@ -42,14 +34,13 @@ function ProjectsDialog(props: ProjectDialogProps) {
   // If no projects selected, keep the name of the current displayed
   const handleClose = () => {
     // onClose(selectedValue);
-    console.log('tab closed');
     onClose();
   };
 
   // If new project selected, close and set value to new project name
   const handleListItemClick = (value: string) => {
     const selectedProject = projects.filter(
-      project => project.name === value
+      (project: any) => project.name === value
     )[0];
     dispatch({ type: 'OPEN PROJECT', payload: selectedProject });
     onClose();
@@ -63,7 +54,7 @@ function ProjectsDialog(props: ProjectDialogProps) {
     >
       <DialogTitle id="project-dialog-title">Open Project</DialogTitle>
       <List>
-        {projects.map((project, index) => (
+        {projects.map((project: any, index: number) => (
           <ListItem
             button
             onClick={() => handleListItemClick(project.name)}
@@ -95,8 +86,10 @@ export default function ProjectsFolder() {
   const [open, setOpen] = useState(false);
   const [projects, setProjects] = useState([{ hello: 'cat' }]);
 
+  const classes = useStyles();
+
   const handleClickOpen = () => {
-    getProjects().then(data => {
+    getProjects().then((data: any) => {
       setProjects(data);
       setOpen(true);
     });
@@ -109,6 +102,7 @@ export default function ProjectsFolder() {
   return (
     <div>
       <Button
+        className={classes.button}
         variant="outlined"
         color="primary"
         onClick={handleClickOpen}
@@ -120,3 +114,18 @@ export default function ProjectsFolder() {
     </div>
   );
 }
+
+const useStyles = makeStyles({
+  button: {
+    width: '55%',
+    backgroundColor: 'rgba(1,212,109,0.1)',
+    fontSize: '1em',
+    minWidth: '300px',
+    marginTop: '10px',
+    marginBotton: '10px'
+  },
+  avatar: {
+    backgroundColor: blue[100],
+    color: blue[600]
+  }
+});
diff --git a/app/src/components/right/SaveProjectButton.tsx b/app/src/components/right/SaveProjectButton.tsx
@@ -1,5 +1,7 @@
 import React, { useState, useContext } from 'react';
 import { stateContext } from '../../context/context';
+
+import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import TextField from '@material-ui/core/TextField';
 import Dialog from '@material-ui/core/Dialog';
@@ -19,6 +21,8 @@ export default function FormDialog() {
     ''
   );
 
+  const classes = useStyles();
+
   const handleClickOpen = () => {
     setInvalidProjectName(false);
     setOpen(true);
@@ -52,12 +56,13 @@ export default function FormDialog() {
   return (
     <div>
       <Button
+        className={classes.button}
         variant="outlined"
         color="primary"
         onClick={handleClickOpen}
         endIcon={<SaveOutlinedIcon />}
       >
-        Save Project As
+        SAVE PROJECT AS
       </Button>
       <Dialog
         open={open}
@@ -91,3 +96,14 @@ export default function FormDialog() {
     </div>
   );
 }
+
+const useStyles = makeStyles({
+  button: {
+    width: '55%',
+    backgroundColor: 'rgba(1,212,109,0.1)',
+    fontSize: '1em',
+    minWidth: '300px',
+    marginTop: '10px',
+    marginBotton: '10px'
+  }
+});
diff --git a/app/src/containers/RightContainer.tsx b/app/src/containers/RightContainer.tsx
@@ -9,7 +9,7 @@ import Button from '@material-ui/core/Button';
 
 import { stateContext } from '../context/context';
 import HTMLTypes from '../context/HTMLTypes';
-import { useHistory, withRouter } from 'react-router-dom';
+
 
 import ProjectManager from '../components/right/ProjectManager';
 
@@ -426,4 +426,4 @@ const useStyles = makeStyles({
 
 });
 
-export default withRouter(RightContainer);
+export default RightContainer;
