Merge pull request #169 from CaretCS/main

Final Merge from CaretDevelopment ReacType Caret Edition

It was great working with ya'll!! Team Caret

Author: MadinventorZero

.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": ["plugin:react/recommended", "airbnb-base"],
+  "extends": ["plugin:react/recommended", "plugin:@typescript-eslint/recommended", "airbnb-base"],
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true

README.md

@@ -5,12 +5,12 @@
 
 [![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 6.0](https://img.shields.io/badge/Release-6.0-lightgrey.svg)
+![Version 7.0.0](https://img.shields.io/badge/Release-7.0.0-lightgrey.svg)
 
-**ReacType** is a visual prototyping tool for developers employing **React** component architecture alongside the comprehensive type-checking of **TypeScript**.
+**ReacType** is a rapid 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.
+**ReacType** allows users to _visualize_ their application architecture dynamically, employing a _drag-and-drop canvas display_ , a _real-time demo render_ , 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.
 
 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/).
 
@@ -48,6 +48,13 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
 
 ### Features
 
+
+- **Live Render Demo**: Live render demo in React using Electron's sandbox environment. Updates in realtime to reflect canvas structure and customization options.
+- **Annotations**: Provide design notes directly on the canvas and have these persist while sharing designs with other engineers.
+- **CSS Editor**: Copy and paste custom css styles and classes into the editor and save to use personal or company designs in an instant.
+- **State & Props Creator**: Create custom state hooks with real-time updates in the code preview.
+- **Application Style Update**: Complete redesign of the entire application for enhanced user experience to maintain a single view application
+
 - **Dashboard**: Click the 'Dashboard' button to view the Public Dashboard and User Dashboard.
 - **Like**: Like other people's templates by clicking on the thumbs up icon.
 - **Comment**: Comment on other templates by typing in the input field and clicking the comment icon.

app/electron/main.js

@@ -72,7 +72,7 @@ async function createWindow() {
     // icon: path.join(__dirname, '../src/public/icons/png/256x256.png'),
     webPreferences: {
       zoomFactor: 0.7,
-      // enable devtools when in development mode
+      // enable devtools when in development mode 
       devTools: isDev,
       // crucial security feature - blocks rendering process from having access to node modules
       nodeIntegration: false,
@@ -131,7 +131,7 @@ async function createWindow() {
     });
   }
 
-  // Emitted when the window is closed.
+  // Emitted when the window is closed. 
   win.on('closed', () => {
     // Dereference the window object, usually you would store windows
     // in an array if your app supports multi windows, this is the time
@@ -223,6 +223,7 @@ app.on('web-contents-created', (event, contents) => {
     const parsedUrl = new URL(navigationUrl);
     const validOrigins = [
       selfHost,
+      'https://reactype-caret.herokuapp.com',
       'http://localhost:5000',
       'https://reactype.herokuapp.com',
       'https://github.com',
@@ -246,6 +247,7 @@ app.on('web-contents-created', (event, contents) => {
     const parsedUrl = new URL(navigationUrl);
     const validOrigins = [
       selfHost,
+      'https://reactype-caret.herokuapp.com',
       'http://localhost:5000',
       'https://reactype.herokuapp.com',
       'https://github.com',
@@ -288,6 +290,7 @@ app.on('web-contents-created', (event, contents) => {
     const parsedUrl = new URL(navigationUrl);
     const validOrigins = [
       selfHost,
+      'https://reactype-caret.herokuapp.com',
       'http://localhost:5000',
       'https://reactype.herokuapp.com',
       'https://nextjs.org',
@@ -351,7 +354,7 @@ ipcMain.on('choose_app_dir', (event) => {
 });
 
 // define serverURL for cookie and auth purposes based on environment
-let serverUrl = 'https://reactype.herokuapp.com';
+let serverUrl = 'https://reactype-caret.herokuapp.com';
 if (isDev) {
   serverUrl = 'http://localhost:5000';
 }

app/src/Dashboard/ProjectContainer.tsx

@@ -1,27 +1,36 @@
-import React, { useState, useContext, useEffect, createContext } from 'react';
-import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
+import React, {
+  useState, useContext, useEffect, createContext,
+} from 'react';
+import {
+  createMuiTheme, MuiThemeProvider, makeStyles, Theme, useTheme,
+} from '@material-ui/core/styles';
 import { useQuery } from '@apollo/client';
+
+import AppBar from '@material-ui/core/AppBar';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+
+import Box from '@material-ui/core/Box';
 import { GET_PROJECTS } from './gqlStrings';
 import Project from './Project';
 import NavBarDash from './NavbarDash';
-import AppContainer from '../containers/AppContainer';
+
 import { theme1, theme2 } from '../public/styles/theme';
 // Implement Apollo Client useQuery hook to retrieve data from the server through graphQL. This includes 2 steps:
 // 1) Impliment Apollo Provider in the top component in ./src/index.js, this allows children components access to the queried data
 // 2) useQuery hook will update the data stored in Apollo Client's cache and automatically trigger child components rendering
 
 export const styleContext = createContext({
   style: null,
-  setStyle: null
+  setStyle: null,
 });
 
 // setting light and dark themes (navbar and background); linked to theme.ts
 const lightTheme = theme1;
 const darkTheme = theme2; // dark mode color in theme.ts not reached
 
 
-const arrToComponent = (arr) => {
-  return arr.map((proj, index) => <Project
+const arrToComponent = arr => arr.map((proj, index) => <Project
                                         key= {index}
                                         name = {proj.name}
                                         likes = {proj.likes}
@@ -32,22 +41,81 @@ const arrToComponent = (arr) => {
                                         id = {proj.id}
                                         comments = {proj.comments}
                                       />);
+
+// Start Pulled from materialUI to create a tab panel                                      
+const a11yProps = (index: any) => ({
+  id: `vertical-tab-${index}`,
+  'aria-controls': `vertical-tabpanel-${index}`,
+});
+
+interface LinkTabProps {
+  label?: string;
+  href?: string;
+}
+
+const LinkTab = (props: LinkTabProps) => (
+    <Tab
+      onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+        event.preventDefault();
+      }}
+      {...props}
+    />
+);
+
+const TabPanelItem = (props: TabPanelProps): JSX.Element => {
+  const theme = useTheme();
+  const {
+    children, index, value, ...other
+  } = props;
+  return (
+    <div
+    role="tabpanel"
+    hidden={value !== index}
+    id={`vertical-tabpanel-${index}`}
+    aria-labelledby={`vertical-tab-${index}`}
+    {...other}
+  >
+    {value === index && (
+      <Box p={3}>
+        {children}
+      </Box>
+    )}
+  </div>
+  );
 };
 
+const useStyles = makeStyles((theme) => ({
+  root: {
+    flexGrow: 1,
+    backgroundColor: theme.palette.background.paper,
+    display: 'flex',
+    // height: 224,
+  },
+  tabs: {
+    borderRight: `1px solid ${theme.palette.divider}`,
+  },
+}));
+// End of prefab code to generate a tab panel
+
+const ProjectContainer = (): JSX.Element => {
+  const classes = useStyles();
+  const [value, setValue] = useState(0);
+
+  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
+    setValue(newValue);
+  };
 
-const ProjectContainer = () => {
+  // old code from project container
   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';
- 
+
   const [isThemeLight, setTheme] = useState(true);
 
   const initialStyle = useContext(styleContext);
   const [style, setStyle] = useState(initialStyle);
 
-  // --------------------------Sorting Buttons------------------------------------//
-  
   // hook for sorting menu
   const [selectedOption, setSelectedOption] = useState('RATING');
 
@@ -68,55 +136,72 @@ const ProjectContainer = () => {
     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 = projects.filter(proj => proj.published);
-  const userProjects = projects.filter(proj => proj.username === username);
+  let sortedProjects = projects.filter(proj => {
+    return proj.published;
+  });
+  const userProjects = projects.filter((proj) => {
+    return proj.username === username;
+  });
 
   // 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 = arrToComponent(sortedProjects);
+  // old code from Project Container
 
   return (
-    <MuiThemeProvider theme={isThemeLight ? lightTheme : darkTheme}>
-    <div className = "dashboardContainer">
-      <NavBarDash setTheme={setTheme} styles={[style, setStyle]} isThemeLight={isThemeLight} optionClicked={optionClicked}/>
-      <h1> Public Dashboard </h1>
-        <div className = "projectContainer">
-            {sortedDisplay}
-        </div>
-      <hr></hr>
-        <h1> User Dashboard </h1>
-        <div className = "projectContainer">
-          {userDisplay}
+    <div className={classes.root}>
+      <MuiThemeProvider theme={isThemeLight ? lightTheme : darkTheme}>
+      <div className= {'dashboardContainer'}>
+        <NavBarDash setTheme={setTheme} styles={[style, setStyle]} isThemeLight={isThemeLight} optionClicked={optionClicked}/>
+        <div className={'userDashboard'}>
+        {/* <AppBar position="static"> */}
+          <Tabs
+            variant="scrollable"
+            orientation="vertical"
+            value={value}
+            onChange={handleChange}
+            aria-label="Vertical tabs example"
+            className={classes.tabs}
+          >
+            <LinkTab label="Shared Dashboard" {...a11yProps(0)} />
+            <LinkTab label="Private Dashboard" {...a11yProps(1)} />
+          </Tabs>
+        {/* </AppBar> */}
+        <TabPanelItem className= {'projectPanel'} value={value} index={0}>
+        <h1> Shared Dashboard </h1>
+          <div className="projectContainer">
+              {sortedDisplay}
+          </div>
+        </TabPanelItem>
+        <TabPanelItem className= {'projectPanel'} value={value} index={1}>
+        <h1> Private Dashboard </h1>
+          <div className="projectContainer">
+            {userDisplay}
+          </div>
+        </TabPanelItem>
         </div>
+      </div>
+      </MuiThemeProvider>
     </div>
-    </MuiThemeProvider>
   );
 };
 

app/src/Dashboard/styles.css

@@ -14,13 +14,23 @@
 
 .dashboardContainer {
   height: 100%;
+  width: 100%
+}
+
+.userDashboard {
+  display: flex;
+  flex-direction: row;
+}
+
+.projectPanel {
+  width: 100%;
 }
 
  .projectContainer{
   display: flex;
   flex-direction: column-reverse;
   flex-flow: row wrap;
-  height: 600px;
+  flex-grow: 1;
   overflow-y: scroll;
 }
 
@@ -66,7 +76,7 @@
 }
 
 .header {
-  background-color: #186BB4;
+  background-color: #0099E6;
   color: rgba(255, 255, 255, 0.897);
   width: 100%;
   position: relative;