changed version number of package.json to 6.0.0

Author: eddypjr

README.md

@@ -5,21 +5,13 @@
 
 [![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-blue.svg)
-![Version 5.0](https://img.shields.io/badge/Release-5.0-lightgrey.svg)
+![Version 6.0](https://img.shields.io/badge/Release-6.0-lightgrey.svg)
 
 **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 users to _visualize_ their application architecture dynamically, employing a _drag-and-drop canvas display_ and a _real-time component code preview_. Users 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 5.0:**
-
-- Elements may be added to components in any location, rather than only at the bottom
-- Compatibility with Gatsby.js
-- Modernized and cleaner UI, including enhanced dark mode
-- Tutorial has been updated to reflect other modifications
-
 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.
@@ -45,6 +37,46 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
 - **User Preference Features**: With the click of a button, toggle between light mode and dark mode, depending on your preference.
 - **Export project**: Click the “Export Project’ button to export the project’s application files into a TypeScript file. The exported project is fully functional with Webpack, Express server, routing, etc., and will match what is mocked on the canvas.
 
+- Elements may be added to components in any location, rather than only at the bottom
+- Compatibility with Gatsby.js
+- Modernized and cleaner UI, including enhanced dark mode
+- Tutorial has been updated to reflect other modifications
+
+ **New with version 6.0:**
+
+### Features
+
+- **Dashboard**: Click the 'Dashboard' button to view the Public Dashboard and User Dashboard.
+- **Like**: Like other people's templates by clicking on the star icon.
+- **Comment**: Comment on other templates by typing in the input field and clicking the comment icon.
+- **Download**: Save any public template by clicking the download icon to save a copy as your own.
+- **Publish**: Publish any template to the Public Dashboard for other users to download, like, or comment on.  Click again to unpublish projects.
+- **Sort By**: Click the 'Sort By' button to choose different metrics to sort the Public Dashboard by.
+- **Form Nesting**: Nesting within form tags is now fully functional
+- **Added Undo and Redo functionality**
+
+### Keyboard Shortcuts
+
+**Mac**:
+ - Export Project: Command + e
+ - Undo: Command + z
+ - Redo: Command + Shift + z
+ - Save Project As: Command + s
+ - Save Project: Command + shift + s
+ - Delete HTML Tag on Canvas: Backspace
+ - Delete Project: Command + Backspace
+ - Open Project: Command + o
+
+**Windows**: 
+ - Export Project: Control + e
+ - Undo: Control + z
+ - Redo: Control + Shift + z
+ - Save Project As: Control + s
+ - Save Project: Control + shift + s
+ - Delete HTML Tag on Canvas: Backspace
+ - Delete Project: Control + Backspace
+ - Open Project: Control + o
+ 
 #### Contributors
 
 [Aaron Bumanglag](https://www.linkedin.com/in/akbuma) [@akbuma](https://github.com/akbuma)
@@ -55,6 +87,8 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
 
 [Andrew Cho](https://www.linkedin.com/in/andrewjcho84/) [@andrewjcho84](https://github.com/andrewjcho84)
 
+[Anthony Torrero](https://www.linkedin.com/in/anthony-torrero-4b8798159/) [@Anthonytorrero](https://github.com/Anthonytorrero)
+
 [Brian Han](https://www.linkedin.com/in/brianjisoohan/) [@brianjshan](https://github.com/brianjshan)
 
 [Charles Finocchiaro](https://www.linkedin.com/in/charles-finocchiaro-62440040/) [@null267](https://github.com/null267)
@@ -65,6 +99,10 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
 
 [Diego Vazquez](https://www.linkedin.com/in/diegovazquezny/) [@diegovazquezny](https://github.com/diegovazquezny)
 
+[Edward Park](https://www.linkedin.com/in/edwardparkwork/) [@eddypjr](https://github.com/eddypjr)
+
+[Elena Conn](https://www.linkedin.com/in/elena-conn-366346123/) [@elenaconn](https://github.com/elenaconn)
+
 [Eliot Nguyen](https://linkedin.com/in/ibeeliot) [@ibeeliot](https://github.com/ibeeliot)
 
 [Fredo Chen](https://www.linkedin.com/in/fredochen/) [@fredosauce](https://github.com/fredosauce)
@@ -75,6 +113,8 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
 
 [Julie Wu](https://www.linkedin.com/in/jwuarchitect/) [@yutingwu4](https://github.com/yutingwu4)
 
+[Khuong Nguyen](https://www.linkedin.com/in/khuong-nguyen/) [@khuongdn16](https://github.com/khuongdn16)
+
 [Linh Tran](https://www.linkedin.com/in/linhtran51/) [@Linhatran](https://github.com/Linhatran)
 
 [Luke Madden](https://www.linkedin.com/in/lukemadden/) [@lukemadden](https://github.com/lukemadden)
@@ -87,6 +127,8 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
 
 [Sean Sadykoff](https://www.linkedin.com/in/sean-sadykoff/) [@sean1292](https://github.com/sean1292)
 
+[Shana Hoehn](https://www.linkedin.com/in/shana-hoehn-70297b169/) [@slhoehn](https://github.com/slhoehn)
+
 [Shlomo Porges](https://linkedin.com/shlomoporges) [@shlomoporges](https://github.com/ShlomoPorges)
 
 [Sophia Huttner](https://www.linkedin.com/in/sophia-huttner-68315975/) [@sophjean](https://github.com/sophjean)

app/src/Dashboard/Project.tsx

@@ -10,9 +10,8 @@ import {
 import { withStyles, createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import CloseIcon from '@material-ui/icons/Close';
 import AddCommentIcon from '@material-ui/icons/AddComment';
-
 import Button from '@material-ui/core/Button';
-
+import ThumbUpAltIcon from '@material-ui/icons/ThumbUpAlt';
 import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';
 import FavoriteIcon from '@material-ui/icons/Favorite';
 import StarIcon from '@material-ui/icons/Star';
@@ -60,22 +59,14 @@ const Project = ({
   //Likes the project when the star icon is clicked
   function handleLike(e) {
     e.preventDefault();
-    let myVar = {
+    const myVar = {
       variables: 
       {
         projId: id,
-        likes: likes,
+        likes: likes + 1,
       },
     };
-    if(clicked === false) {
-      setClicked(true);
-      myVar.variables.likes = likes + 1
-      addLike(myVar);
-    } else {
-      setClicked(false); 
-      myVar.variables.likes = likes - 1
-      addLike(myVar);
-    }
+    addLike(myVar);
   }
 
   //Makes a copy of the public project and saves as a user project
@@ -214,7 +205,7 @@ const Project = ({
 
       <div className = "icons">
           <IconButton tooltip="Like Template" style={noPointer} onClick = { handleLike }>
-            {clicked ? <StarIcon fontSize='Large' style={{color:'#FFD700'}}/> : <StarBorderIcon fontSize='Large' style={{color:'#FFD700'}}/>}
+            <ThumbUpAltIcon fontSize='Large'/>
           </IconButton> 
         { currUsername !== username ?
           <IconButton tooltip ="Download Template" style={noPointer} onClick={ handleDownload }>

app/src/Dashboard/ProjectContainer.tsx

@@ -1,7 +1,5 @@
 import React, { useState, useContext, useEffect, createContext } from 'react';
 import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
-import { makeStyles } from '@material-ui/core/styles';
-import Grid from '@material-ui/core/Grid';
 import { useQuery } from '@apollo/client';
 import { GET_PROJECTS } from './gqlStrings';
 import Project from './Project';
@@ -22,15 +20,27 @@ const lightTheme = theme1;
 const darkTheme = theme2; // dark mode color in theme.ts not reached
 
 
+const arrToComponent = (arr) => {
+  return arr.map((proj, index) => <Project
+                                        key= {index}
+                                        name = {proj.name}
+                                        likes = {proj.likes}
+                                        published = {proj.published}
+                                        userId = {proj.userId}
+                                        username = {proj.username}
+                                        createdAt = {proj.createdAt}
+                                        id = {proj.id}
+                                        comments = {proj.comments}
+                                      />);
+};
+
+
 const ProjectContainer = () => {
   const myVar = {};
   // Need this for the individual user dasboard, for now, dashboard shows all projects from all users
   const userSSID = window.localStorage.getItem('ssid') || 'unavailable';
   const username = window.localStorage.getItem('username') || 'unavailable';
-  // if (userSSID !== 'guest') {
-  //   myVar = { userId: userSSID };
-  // }
-
+ 
   const [isThemeLight, setTheme] = useState(true);
 
   const initialStyle = useContext(styleContext);
@@ -39,11 +49,11 @@ const ProjectContainer = () => {
   // --------------------------Sorting Buttons------------------------------------//
 
   // hook for sorting menu
-  const [selectedOption, setSelectedOption] = useState(null);
+  const [selectedOption, setSelectedOption] = useState('RATING');
 
   const sortByRating = (projects) => {
     // generate a sorted array of public projects based on likes
-    const sortedRatings = projects.sort((a, b) =>  b.likes - a.likes);
+    const sortedRatings = projects.sort((a, b) => b.likes - a.likes);
     return sortedRatings;
   };
 
@@ -55,81 +65,56 @@ const ProjectContainer = () => {
 
   const sortByUser = (projects) => {
     // generate a sorted array of public projects based on username
-    const sortedRatings = projects.sort((a, b) => b.user - a.user);
+    const sortedRatings = projects.sort((a, b) => b.username - a.username);
     return sortedRatings;
   };
   // ===================================================================================== //
 
+  // function for selecting drop down sorting menu
+  const optionClicked = (value) => {
+    setSelectedOption(value);
+  };
+  // ===================================================================================== //
+
+
   // useQuery hook abstracts fetch request
   const { loading, error, data } = useQuery(GET_PROJECTS, { pollInterval: 2000, variables: myVar });
   if (loading) return <p>Loading...</p>;
   if (error) return <p>Error :{error}</p>;
 
   // based on resolver(getAllProject) for this query, the data is stored in the data object with the key 'getAllProjects'
   const projects = data.getAllProjects;
+  
   // create array to hold the data recieved in the public dashboard the will be conditionally rendered
-  let sortedProjects = [];
-  // create array to hold the components Project of loggin-in users
-  const userDisplay = [];
-  // generate an array of Project components based on queried data
-  projects.forEach((proj, index) => {
-    const component = <Project
-                  key= {index}
-                  name = {proj.name}
-                  likes = {proj.likes}
-                  published = {proj.published}
-                  userId = {proj.userId}
-                  username = {proj.username}
-                  createdAt = {proj.createdAt}
-                  id = {proj.id}
-                  comments = {proj.comments}
-                  />;
-    // sorting the public and private dashboards based on the user's username
-    if (username === proj.username) userDisplay.push(component);
-    if (proj.published) {
-
-      sortedProjects.push(proj);
-    }
-  });
+  let sortedProjects = projects.filter(proj => proj.published);
+  const userProjects = projects.filter(proj => proj.username === username);
 
-  // function for selecting drop down sorting menu
-  const optionClicked = (value) => {
-    setSelectedOption(value);
-  };
   // checking which sorting method was selected from drop down menu and invoking correct sorting function
   if (selectedOption === 'DATE') sortedProjects = sortByDate(sortedProjects);
   else if (selectedOption === 'USER') sortedProjects = sortByUser(sortedProjects);
   else if (selectedOption === 'RATING') sortedProjects = sortByRating(sortedProjects);
 
+
+  // create array to hold the components Project of loggin-in users
+  // generate an array of Project components based on queried data
+  const userDisplay = arrToComponent(userProjects);
+
   // create an array of components Project that will be conditionally rendered
-  const sortedDisplay = [];
-  sortedProjects.forEach((proj, index) => {
-    sortedDisplay.push(<Project
-      key= { index }
-      name = {proj.name}
-      likes = {proj.likes}
-      published = { proj.published }
-      userId = {proj.userId}
-      username = {proj.username}
-      createdAt = {proj.createdAt}
-      id = {proj.id}
-      comments = {proj.comments}
-    />);
-  });
+  const sortedDisplay = arrToComponent(sortedProjects);
 
   return (
     <MuiThemeProvider theme={isThemeLight ? lightTheme : darkTheme}>
     <div className = "dashboardContainer">
       <NavBarDash setTheme={setTheme} styles={[style, setStyle]} isThemeLight={isThemeLight} optionClicked={optionClicked}/>
       <h1> Public Dashboard </h1>
-        <Grid className = "projectContainer" container justify='flex-start' wrap='wrap' spacing={3}>
+        <div className = "projectContainer">
             {sortedDisplay}
-        </Grid>
+        </div>
       <hr></hr>
         <h1> User Dashboard </h1>
-        <Grid className = "projectContainer" container justify='flex-start' wrap='wrap'>
+        <div className = "projectContainer">
           {userDisplay}
-        </Grid>
+        </div>
     </div>
     </MuiThemeProvider>
   );

app/src/Dashboard/styles.css

@@ -1,25 +1,3 @@
-/* @import url('https://fonts.googleapis.com/css2?family=Cabin&family=Oswald&display=swap');
-
-
-
-$primary-black: #22292f;
-$secondary-black: #606f7b;
-$teriary-grey: #f0f0f0;
-$light-grey: #bfcbd4;
-$light-blue: #759cc9;
-$button-blue: #24BCFF; */
-
-
-/* .project{
-  display: flex;
-  flex-direction: column;
-  background-color: white;
-  color: #606f7b;
-  align-items: center;
-  height: 300px;
-  justify-content: min;
-  width: 250px;
-} */
 
 .project {
   display: flex;
@@ -34,25 +12,7 @@ $button-blue: #24BCFF; */
   justify-content: space-between;
 }
 
-
-/* .form , .project{
-  display: flex;
-  flex-direction: column;
-  background-color: white;
-  border: 1px solid  #f0f0f0;
-  box-shadow: 0 0 5px rgba(0,0,0,0.3);
-  margin: 5px;
-  border-radius: 5px;
-  color: #606f7b;
-  align-items: center;
-  height: 300px;
-  justify-content: min;
-  width: 250px;
-} */
-
-
 .dashboardContainer {
-  /* overflow: scroll; */
   height: 100%;
 }
 
@@ -120,10 +80,3 @@ $button-blue: #24BCFF; */
 h1 {
   text-align: center;
 }
-/* .projectContainer {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-}  */

app/src/helperFunctions/renderChildren.tsx

@@ -57,7 +57,7 @@ const renderChildren = (children: ChildElement[]) => {
         />
       );
     }
-    else if (type === 'HTML Element' && typeId === 1000 /* || typeId === 2 */) {
+    else if (type === 'HTML Element' && typeId === 1000 ) {
       return (
         <SeparatorChild
           childId={childId}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactype",
-  "version": "5.0.0",
+  "version": "6.0.0",
   "description": "Prototyping tool for React/Typescript Applications.",
   "private": true,
   "main": "app/electron/main.js",