Merge pull request #227 from open-source-labs/development

Development

Author: AhnafKhvn

CHANGE_LOG.md

@@ -16,6 +16,7 @@ Changes:<br>
     - Additional logic added for edge cases in inputs for state manager (passing in non-Arrays/non-Objects as Array type and Object type).
     - Fixed issue with the bottom panel not dragging or sticking to the mouse when the mouse is over the demorender iframe
     - Cleaned up hundreds of lines of outdated code and archived multiple unused and duplicate files
+  - OAuth now linked to standalone gmail and github accounts
 - User Features:
   - UI updated with a modern style for a better developer experience
     - Added many user feedback alerts for better experience including alerts for when projects are published, cloned, deleted, HTML custom tags are created, context created, or custom component created.

Dockerrun.aws.json

@@ -15,4 +15,4 @@
       "Value": "Reactype-v17env.eba-sw2fhsbj.us-east-1.elasticbeanstalk.com"
     }
   ]
-}
+}

app/src/components/App.tsx

@@ -31,38 +31,38 @@ export const App = (): JSX.Element => {
   }, []);
 
   // following useEffect runs on first mount
-  useEffect(() => {
-    // console.log('cookies.get in App', Cookies.get())
-    // if user is a guest, see if a project exists in localforage and retrieve it
-    // v17 May not currently work yet
-    if (!state.isLoggedIn) {
-      localforage.getItem('guestProject').then((project) => {
-        // if project exists, use dispatch to set initial state to that project
-        if (project) {
-          dispatch(setInitialState(project));
-        }
-      });
-    } else {
-      // otherwise if a user is logged in, use a fetch request to load user's projects from DB
+  // useEffect(() => {
+  //   // console.log('cookies.get in App', Cookies.get())
+  //   // if user is a guest, see if a project exists in localforage and retrieve it
+  //   // v17 May not currently work yet
+  //   if (!state.isLoggedIn) {
+  //     localforage.getItem('guestProject').then((project) => {
+  //       // if project exists, use dispatch to set initial state to that project
+  //       if (project) {
+  //         dispatch(setInitialState(project));
+  //       }
+  //     });
+  //   } else {
+  //     // otherwise if a user is logged in, use a fetch request to load user's projects from DB
 
-      let userId;
-      if (Cookies.get('ssid')) {
-        userId = Cookies.get('ssid');
-      } else {
-        userId = window.localStorage.getItem('ssid');
-      }
-      //also load user's last project, which was saved in localforage on logout
-      localforage.getItem(userId).then((project) => {
-        if (project) {
-          dispatch(setInitialState(project));
-        } else {
-          console.log(
-            'No user project found in localforage, setting initial state blank'
-          );
-        }
-      });
-    }
-  }, []);
+  //     let userId;
+  //     if (Cookies.get('ssid')) {
+  //       userId = Cookies.get('ssid');
+  //     } else {
+  //       userId = window.localStorage.getItem('ssid');
+  //     }
+  //     //also load user's last project, which was saved in localforage on logout
+  //     localforage.getItem(userId).then((project) => {
+  //       if (project) {
+  //         dispatch(setInitialState(project));
+  //       } else {
+  //         console.log(
+  //           'No user project found in localforage, setting initial state blank'
+  //         );
+  //       }
+  //     });
+  //   }
+  // }, []);
   // useEffect(() => {
   //   // provide config properties to legacy projects so new edits can be auto saved
   //   // if (state.config === undefined) {

app/src/components/login/SignIn.tsx

@@ -52,7 +52,7 @@ const useStyles = makeStyles((theme) => ({
   paper: {
     display: 'flex',
     flexDirection: 'column',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   avatar: {
     backgroundColor: '#3EC1AC'
@@ -211,8 +211,8 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = (props) => {
 
   return (
     <StyledEngineProvider injectFirst>
-      <ThemeProvider theme={!isDarkMode ? SigninLight : SigninDark}>
-        <Container component="main" maxWidth="xs">
+      <ThemeProvider theme={SigninDark}>
+        <Container component="main" maxWidth="xs" >
           <CssBaseline />
           <div className={classes.paper}>
             {/* <Button
@@ -227,7 +227,7 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = (props) => {
               onClick={handleDarkModeToggle}
             >
               {isDarkMode ? `Light Mode` : `Dark Mode`}
-            </Button> */}
+            </Button>  */}
             <Avatar className={classes.avatar} sx={{ marginTop: '10vh' }}>
               <LockOutlinedIcon />
             </Avatar>
@@ -295,7 +295,7 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = (props) => {
                 <path d="M8.256 14a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Z" />
               </svg>
             </Button>
-            {/* <Button
+            <Button
               fullWidth
               id="SignInWithGithub"
               variant="contained"
@@ -344,7 +344,7 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = (props) => {
               >
                 <path d="M15.545 6.558a9.42 9.42 0 0 1 .139 1.626c0 2.434-.87 4.492-2.384 5.885h.002C11.978 15.292 10.158 16 8 16A8 8 0 1 1 8 0a7.689 7.689 0 0 1 5.352 2.082l-2.284 2.284A4.347 4.347 0 0 0 8 3.166c-2.087 0-3.86 1.408-4.492 3.304a4.792 4.792 0 0 0 0 3.063h.003c.635 1.893 2.405 3.301 4.492 3.301 1.078 0 2.004-.276 2.722-.764h-.003a3.702 3.702 0 0 0 1.599-2.431H8v-3.08h7.545z" />
               </svg>
-            </Button> */}
+            </Button> 
             <Button
               fullWidth
               variant="contained"
@@ -372,19 +372,20 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = (props) => {
                 />
               </svg>
             </Button>
-            <Grid container>
+            <Grid container justifyContent="flex-end">
+              {/* forgot password currently not implemented
               <Grid item xs>
                 <RouteLink
-                  style={{ color: isDarkMode ? '#aaaaaa' : 'black' }}
+                  style={{ color: '#aaaaaa' }}
                   to={`/signup`}
                   className="nav_link"
                 >
                   Forgot password?
                 </RouteLink>
-              </Grid>
+              </Grid> */}
               <Grid item>
                 <RouteLink
-                  style={{ color: isDarkMode ? '#aaaaaa' : 'black' }}
+                  style={{ color: '#aaaaaa' }}
                   to={`/signup`}
                   className="nav_link"
                 >

app/src/components/login/SignUp.tsx

@@ -206,11 +206,11 @@ const SignUp: React.FC<LoginInt & RouteComponentProps> = (props) => {
 
   return (
     <StyledEngineProvider injectFirst>
-      <ThemeProvider theme={!isDarkMode ? SigninLight : SigninDark}>
+      <ThemeProvider theme={SigninDark}>
         <Container component="main" maxWidth="xs">
           <CssBaseline />
           <div className={classes.paper}>
-            <Button
+            {/* <Button
               color="primary"
               style={{
                 minWidth: '113.97px',
@@ -221,7 +221,7 @@ const SignUp: React.FC<LoginInt & RouteComponentProps> = (props) => {
               onClick={handleDarkModeToggle}
             >
               {`Dark Mode: ${isDarkMode}`}
-            </Button>
+            </Button> */}
             <Avatar className={classes.avatar} sx={{ marginTop: '10vh' }}>
               <AssignmentIcon />
             </Avatar>
@@ -332,7 +332,7 @@ const SignUp: React.FC<LoginInt & RouteComponentProps> = (props) => {
               <Grid container justifyContent="flex-end">
                 <Grid item>
                   <RouteLink
-                    style={{ color: isDarkMode ? '#aaaaaa' : 'black' }}
+                    style={{ color: '#aaaaaa' }}
                     to={`/login`}
                     className="nav_link"
                   >

app/src/components/marketplace/MarketplaceCard.tsx

@@ -51,6 +51,9 @@ const MarketplaceCard = ({ proj }: { proj: Project }) => {
   const [s3ImgURL, setS3ImgURL] = React.useState<null | string>(null);
   const open = Boolean(anchorEl);
   const [alertOpen, setAlertOpen] = React.useState<boolean>(false);
+  const [guest, setGuest] = React.useState<boolean>(null);
+  const state = useSelector((store: RootState) => store.appState);
+
 
   useEffect(() => {
     async function s3ImgFetch() {
@@ -69,30 +72,34 @@ const MarketplaceCard = ({ proj }: { proj: Project }) => {
   }, []);
 
 
+
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
   };
   const handleClone = async () => {
-    // creates a copy of the project
-    const docId = proj._id;
-    const response = await axios.get(`/cloneProject/${docId}`, {
-      params: { username: window.localStorage.getItem('username') }
-    }); //passing in username as a query param is query params
-    const project = response.data.project;
-    setAlertOpen(true);
-    setAnchorEl(null);
-    return {
-      _id: project._id,
-      name: project.name,
-      published: project.published,
-      ...project.project
-    };
+    if(state.isLoggedIn){
+      // creates a copy of the project
+      const docId = proj._id;
+      const response = await axios.get(`/cloneProject/${docId}`); //passing in username as a query param is query params
+      const project = response.data;
+      setAlertOpen(true);
+      setAnchorEl(null);
+      return {
+        _id: project._id,
+        name: project.name,
+        published: project.published,
+        ...project.project
+      };
+    }
+    setGuest(true);
   };
 
   const handleCloneOpen = async () => {
-    const project = await handleClone();
-    history.push('/');
-    dispatch(openProject(project));
+    if(state.isLoggedIn){
+      const project = await handleClone();
+      history.push('/');
+      dispatch(openProject(project));
+    }
   };
 
   const handleClose = () => {
@@ -197,6 +204,20 @@ const MarketplaceCard = ({ proj }: { proj: Project }) => {
             Project Cloned!
           </Alert>
         </Snackbar>
+        <Snackbar
+          open={guest}
+          autoHideDuration={3000}
+          anchorOrigin={{ vertical: 'top', horizontal: 'center' }} 
+          onClose={handleAlertClose}
+        >
+          <Alert
+            onClose={handleAlertClose}
+            severity="error"
+            sx={{ width: '100%', color: 'white' }}
+          >
+            Please login to clone!
+          </Alert>
+        </Snackbar>
       </Card>
     </>
   );

app/src/components/marketplace/Searchbar.tsx

@@ -5,44 +5,51 @@ const SearchBar = ({marketplaceProjects, updateDisplayProjects }):JSX.Element =>
   //passing down all marketplaceProjects
   const [searchText, setSearchText] = useState('');
 
-
   const handleChange = (e) => {
     const newText = e.target.value
-    setSearchText(newText)
+
+    setSearchText(newText) 
 
   }
 
-  
   useEffect(()=>{
     if(searchText === ''){
 
       updateDisplayProjects(marketplaceProjects)
+      return;
+    }
+    function searching () {
 
-    }else{
-
-      //more strict pattern not currently used
-      //const patternString = '(?:^|[^a-zA-Z])' + searchText.toLowerCase() + '(?:$|[^a-zA-Z])';
-      //(?: [non-capturing group] means to ignore the items inside the parens in terms of looking for that string order in the target 
-      //^ refers to the literal beginning of a start of a line or string
-      //| pipe operator is an OR statement
-      //[^a-zA-Z] [] is grouping characters, the ^ at the beginning means to look for things that are not letters (lowercase or uppercase)
-      //a-zA-Z letters (lowercase and uppercase) and underscore symbol
-      //All together: match either the start/end of a line/string or any character that is not a letter.
-      //Looks for anything that has the searchText in between non-letter characters
-      const patternString2 = '(?:^|.)' + searchText.toLowerCase() + '(?:$|.)';
-      //Only difference is that (?:^|.) (?:$|.) look for anything that matches the string in between any other characters for the username search
-      //test3 and 1test) would both match for string 'test'
-
-      const searchResults = marketplaceProjects.reduce((results, curr) => {
-        const lowName = curr.name.toLowerCase()
-        const lowUsername = curr.username.toLowerCase()
-        if(lowName.match(patternString2) || lowUsername.match(patternString2))
-          results.push(curr)
-        return results;
-      }, [])
-      updateDisplayProjects(searchResults)
+        //more strict pattern not currently used
+        //const patternString = '(?:^|[^a-zA-Z])' + searchText.toLowerCase() + '(?:$|[^a-zA-Z])';
+        //(?: [non-capturing group] means to ignore the items inside the parens in terms of looking for that string order in the target 
+        //^ refers to the literal beginning of a start of a line or string
+        //| pipe operator is an OR statement
+        //[^a-zA-Z] [] is grouping characters, the ^ at the beginning means to look for things that are not letters (lowercase or uppercase)
+        //a-zA-Z letters (lowercase and uppercase) and underscore symbol
+        //All together: match either the start/end of a line/string or any character that is not a letter.
+        //Looks for anything that has the searchText in between non-letter characters
+        const patternString2 = '(?:^|.)' + searchText.toLowerCase() + '(?:$|.)';
+        //Only difference is that (?:^|.) (?:$|.) look for anything that matches the string in between any other characters for the username search
+        //test3 and 1test) would both match for string 'test'
+  
+        const searchResults = marketplaceProjects.reduce((results, curr) => {
+          const lowName = curr.name.toLowerCase()
+          const lowUsername = curr.username.toLowerCase()
+          if(lowName.match(patternString2) || lowUsername.match(patternString2))
+            results.push(curr)
+          return results;
+        }, [])
+        updateDisplayProjects(searchResults)
     }
 
+    // simple debounce
+    const debounceTimer = setTimeout(() => {
+      searching();
+    }, 800);
+    // clears the timer if searchText is changed before the setTimeout duration is reached
+    return () => clearTimeout(debounceTimer);
+
  }, [searchText])
 
 

app/src/components/right/DeleteProjects.tsx

@@ -45,7 +45,7 @@ function ProjectsDialog(props: ProjectDialogProps) {
       (project: any) => project._id === value
       )[0];
       deleteProject(selectedProject);
-      localforage.removeItem(window.localStorage.getItem('ssid'));
+      // localforage.removeItem(window.localStorage.getItem('ssid'));
       dispatch(setInitialState(initialState))
       // handleAlertOpen()
       deleteAlert()