Merge pull request #11 from Anthonytorrero/commentsMerge

Complete comment feature, styling for dashboard

Author: khuongdn16

Dockerfile

@@ -0,0 +1,7 @@
+FROM node:10.1
+WORKDIR /usr/src/app
+COPY . /usr/src/app
+RUN npm install
+RUN npm run prod-build
+EXPOSE 5000
+CMD npm run server

README.md

@@ -5,26 +5,18 @@
 
 [![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.
 
-- **Windows users**: Install the application by running ReacType Setup 5.0.0.exe.
+- **Windows users**: Install the application by running ReacType Setup 6.0.0.exe.
 
 - **Linux users**: Run the application as a super user in order to read and write files.
 
@@ -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)

__tests__/projects.test.js

@@ -1,26 +1,20 @@
 const { Mongoose } = require('mongoose');
 const request = require('supertest');
-
-
 // initializes the project to be sent to server/DB
 const { projectToSave, state } = require('../mockData');
-
 const app = require('../server/server.js');
 const http = require('http');
 let server;
-
 // save and get projects endpoint testing
 describe('Project endpoints tests', () => {  
   beforeAll((done) => {
     server = http.createServer(app);
     server.listen(done);
   });
-
   afterAll((done) => {
     Mongoose.disconnect();
     server.close(done);
   });
-
   // test saveProject endpoint
   describe('/saveProject', () => {
     describe('/POST', () => {
@@ -35,7 +29,6 @@ describe('Project endpoints tests', () => {
       });
     });
   });
-
   // test getProjects endpoint
   describe('/getProjects', () => {
     describe('POST', () => {
@@ -53,7 +46,6 @@ describe('Project endpoints tests', () => {
       });
     });
   });
-
   // test deleteProject endpoint
   describe('/deleteProject', () => {
     describe('DELETE', () => {

app/src/Dashboard/NavbarDash.tsx

@@ -5,25 +5,28 @@ import {
   makeStyles,
   Theme,
 } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
 import AppBar from '@material-ui/core/AppBar';
 import Avatar from '@material-ui/core/Avatar';
+import Brightness3Icon from '@material-ui/icons/Brightness3';
+import Brightness5Icon from '@material-ui/icons/Brightness5';
+import Button from '@material-ui/core/Button';
+import EventNoteIcon from '@material-ui/icons/EventNote';
+import HomeIcon from '@material-ui/icons/Home';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
 import { Link } from 'react-router-dom';
 import { styleContext } from '../containers/AppContainer';
-
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
-
-// import logo from '../../../resources/icon.png';
+import SortIcon from '@material-ui/icons/Sort';
+import StarBorderIcon from '@material-ui/icons/StarBorder';
+import PersonIcon from '@material-ui/icons/Person';
 import greenLogo from '../public/icons/png/512x512.png';
 
-
 // NavBar text and button styling
 const useStyles = makeStyles((theme: Theme) => createStyles({
   root: {
-    flexGrow: 1,
+    flexGrow: 1, 
     width: '100%',
   },
   menuButton: {
@@ -41,7 +44,7 @@ const useStyles = makeStyles((theme: Theme) => createStyles({
 }));
 
 // sorting options
-const sortMethods = ['Rating', 'Date', 'User'];
+const sortMethods = ['RATING', 'DATE', 'USER'];
 
 // Drop down menu button for SORT PROJECTS
 const StyledMenu = withStyles({
@@ -75,7 +78,6 @@ const StyledMenuItem = withStyles(theme => ({
 }))(MenuItem);
 
 // TO DO: set types of props validation
-
 export default function NavBar(props) {
   // TO DO: import setStyle
   const classes = useStyles();
@@ -100,7 +102,7 @@ export default function NavBar(props) {
 
   return (
     <div className={classes.root} style={style}>
-      <AppBar position="static">
+      <AppBar position='static'>
         <Toolbar>
           <Avatar src={greenLogo}></Avatar>
           <Typography variant="h6" style={{ marginLeft: '1rem' }} className={classes.title}>
@@ -111,16 +113,17 @@ export default function NavBar(props) {
 
           <div style ={ { textDecoration: 'none' } }>
             <Button
-            variant="contained"
-            color="primary"
+            variant='contained'
+            color='primary'
             onClick={handleClick}
-            className="navbarButton"
-            id="navbarButton"
+            className='navbarButton'
+            id='navbarButton'
+            endIcon={<SortIcon/>}
           >
             SORT PROJECT
           </Button>
           <StyledMenu  // Dropdown menu connected to Manage Project Button
-            id="customized-menus"
+            id='customized-menus'
             anchorEl={anchorEl}
             keepMounted
             open={Boolean(anchorEl)}
@@ -132,23 +135,29 @@ export default function NavBar(props) {
                       toggling();
                       handleClose();
                     }}
-                      variant="contained"
-                      color="primary"
+                      variant='contained'
+                      color='primary'
                       style={{ minWidth: '137.69px' }}
-                      className="navbarButton"
+                      className={classes.manageProject}
                       key={index}
                       > 
-                      {option}
+                        <Button
+                          color='primary'
+                          endIcon={(option === 'RATING') ? <StarBorderIcon/> : (option === 'DATE') ? <EventNoteIcon/> : (option === 'USER') ? <PersonIcon/> : ''}
+                        >
+                          {option} 
+                        </Button>
                     </StyledMenuItem>
                   ))}
           </StyledMenu>
         </div>
         <Button
-            className="navbarButton"
-            id="navbarDashButton"
-            color="primary"
-            variant="contained"
+            className='navbarButton'
+            id='navbarDashButton'
+            color='primary'
+            variant='contained'
             style={{minWidth: '113.97px'}}
+            endIcon={props.isThemeLight ? <Brightness3Icon/> : <Brightness5Icon/>}
             onClick={() => {
               !props.styles[0].backgroundColor
                 ? props.styles[1]({ backgroundColor: '#21262D' }) //dark mode color
@@ -160,15 +169,17 @@ export default function NavBar(props) {
           </Button>
           {/* ====================================Home Button============================================== */}
 
-          <div style ={ { textDecoration: 'none' } }>
-            <Link to="/">
+          <div>
+            <Link to='/' style={{textDecoration: 'none'}}>
               <Button
-                variant="contained"
-                color="primary"
-                style={{ minWidth: '137.69px' }}
+                variant='contained'
+                color='primary'
+                style={{ minWidth: '137.69px'}}
                 className="navbarButton"
                 id="ratingButton"
-                > Home
+                endIcon={<HomeIcon/>}
+                > 
+                HOME
               </Button>
             </Link>
           </div>