Merge pull request #201 from oslabs-beta/main

Prepared for launch.

Author: mdunnmon

.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+app/electron

.gitignore

@@ -496,4 +496,6 @@ server/rootCA.key
 server/rootCA.pem
 server/RootCA.srl
 
+
+
 # End of https://www.gitignore.io/api/node,linux,macos,windows,visualstudio,yarn

CHANGE_LOG.md

@@ -3,9 +3,38 @@
   <h1 align="center">ReacType Change Log</h1>
 </p>
 
+**Version 15.0.0 Changes**
+
+Changes:<br>
+
+- Developer Improvements:
+  - Redux Toolkit:
+    - Migrated state from a combination of useReducer/useContext and Redux to only using Redux Toolkit. This is the recommended modern approach to handling large state management in this sort of application. Enhances the developer experience by enabling the use of the Redux Devtools to debug, and see state/actions in real-time.
+  - Dependency Updates
+    - New developers can easily npm install without having to use an older version of node or using --legacy-peer-deps
+    - Updated to modern versions to take advantage of newer features
+- User Features:
+  - Websockets:
+    - Users can now join rooms to collaborate in realtime
+  - Tailwind CSS:
+    - In the customization panel users can now choose between inline CSS and Tailwind. These changes are reflected in the live code preview.
+  - OAuth:
+    - Users may now log in using OAuth which enhances security, and makes sign in a breeze.
+  - Deployed Website:
+    - Containerized and deployed a working version of the application. Instead of having to download an application users may now interact live.
+
+Recommendations for Future Enhancements:<br>
+
+- Continue working on State Management. There are some changes that can be made to make the application cleaner. Right now the appStateSlice is a large file which houses a lot of the reducer functions. We believe there is a way to further modularize this to make it simpler to read, and iterate upon in the future.
+- Convert to using Vite. While developing we ran into issues with webpack taking a long time to reflect changes. Vite is lightweight and enhances the developer experience.
+- Expand Testing Coverage. Making a large move of state management made a lot of the testing innefective since it was based upon old ways.
+- Refactor away from MUI. MUI is very opinionated and while creating components with it is easy it leaves a lot to be desired.
+- Residual Bugs. While migrating state there are a few lingering bugs within the application. This process should be easier now with Redux Devtools availability, but we did not have time to go through every action and conduct thorough testing.
+
 **Version 14.0.0 Changes**
 
 Changes:<br>
+
 - Added functionality & improvements:
   - Event listeners:
     - Added ability to assign event listeners to elements in the bottom customization tab
@@ -32,6 +61,7 @@ Changes:<br>
   - Reusable component: The drag-and-drop feature for reusable components is now functioning smoothly and without bugs
 
 Recommendations for Future Enhancements:<br>
+
 - Add function content in the current event listeners' function skeleton.
 - The code output formatting in generateCode.ts is currently difficult to read, and could be improved for better readability.
 - Currently, the project uses two sets of state management tools: useReducer/useContext and Redux. useReducer/useContext is used for handling the customization state, and Redux for managing the code preview, context manager, and dark mode reducer state. However, there seems to be some confusion around how to integrate these two tools effectively. For instance, both tools are used for managing the code preview state, and changing the useReducer/useContext state would replace the corresponding redux state. Need to clean up the logic and find a solution to solve this issue.
@@ -41,27 +71,32 @@ Recommendations for Future Enhancements:<br>
 **Version 13.0.0 Changes**
 
 New Functionality:<br>
+
 - Manage state locally: Users can now manage state dynamically within nested components using React Hooks within the state manager tab.
 - Add/delete props: For a selected component, users can see a list of available props from the parent, add props, and delete props in case they are not - required later on.
 - State/props flow: If state or props are deleted upstream, it will automatically update the state for its children components.
 - Visualize state/props flow: Within the display sub-tab of the state manager tab, users can visualize an interactive tree diagram depicting the state initialized in the current component and passed down props from the parent component.
 
 Enhancements:<br>
+
 - Live code preview: Live rendering of code based on any changes in the state and dragging and nesting of components.
 - Next.js & Gatsby compatibility: New state manager tab is now compatible with next.js and Gatsby.
 - Tutorial: Tutorial is functional and has the latest guides to navigate through the newly added state management tab.
 
 Deployment Updates:<br>
+
 - Electron app is now available for Windows users.
 - Web based version of the app is available on Heroku.
 
 Bug Fixes:<br>
+
 - User dashboard: The dashboard works now and shows private and shared projects with the ability for users to drop comments.
 - Login/logout: Users can now signup/login/logout now on both development and production environments.
 - Manage Projects: Github authenticated users are now able to create and save projects.
 - Customization: Use State works as expected now within HTML elements.
 
 What’s next:<br>
+
 - Adding on click functionality within components. Goal: Make a fully functional tic-tac-toe app.
 - Incorporating material ui into the components so that exported app has visually appealing components.
 - Enabling auto save functionality when dragging and dropping components, and amending component state.

Dockerfile

@@ -0,0 +1,36 @@
+# Stage 1: Build
+FROM node:19-alpine as build
+
+# python: required dependency for node alpine, shrinks image size from 2.17GB to 1.67GB
+RUN apk add --no-cache --virtual .gyp \
+    python3 \
+    make \
+    g++
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm install --no-install-recommends --fetch-retry-maxtimeout 500000
+
+COPY . .
+
+# Stage 2: Runtime
+FROM node:19-alpine as runtime
+
+WORKDIR /app
+
+COPY --from=build /app/package*.json ./
+
+RUN npm install --no-install-recommends --only=production --fetch-retry-maxtimeout 500000
+
+COPY --from=build /app/.env .env
+COPY --from=build /app/config.js ./config.js
+COPY --from=build /app/server ./server
+COPY --from=build /app/app/dist /app
+
+EXPOSE 5656
+
+ENV IS_DOCKER true
+
+CMD [ "npm", "start" ]

Dockerrun.aws.json

@@ -0,0 +1,18 @@
+{
+  "AWSEBDockerrunVersion": "1",
+  "Image": {
+    "Name": "035101486432.dkr.ecr.us-east-1.amazonaws.com/reactype-2stage:latest",
+    "Update": "true"
+  },
+  "Ports": [
+    {
+      "ContainerPort": "5656"
+    }
+  ],
+  "Environment": [
+    {
+      "Name": "API_BASE_URL",
+      "Value": "Reactypev15-env.eba-mbvivk7k.us-east-1.elasticbeanstalk.com"
+    }
+  ]
+}

README.md

@@ -2,6 +2,7 @@
   <img width="100" src="https://i.imgur.com/Yn70tqI.png">
   <h1 align="center">ReacType </h1>
 </p> -->
+
 # ReacType
 
 <!-- <p align="center">
@@ -14,27 +15,24 @@
 [![ContributorShield][contributors]][contributors-url]
 [![ForksShield][forks]][forks-url]
 ![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)
-![Version: 14.0.0](https://img.shields.io/badge/version-14.0.0-orange)
+![Version: 14.0.0](https://img.shields.io/badge/version-15.0.0-orange)
 
 </div>
 <!-- <p align="center">
   <img width="1000" src="https://i.imgur.com/FPizsat.png">
 </p> -->
 
-
 <p align="center">
   <img width="1000" src="https://i.imgur.com/FIX8skV.png">
 </p>
 
-
 <p align="center">
-  <img width="1000" src="https://i.imgur.com/jR53ySV.png">
+  <img width="1000" src="./resources/ReadMe.gif">
 </p>
 
-
 **ReacType** is a rapid prototyping tool built on Electron that allows users _visualize_ their application architecture dynamically, employing a _drag-and-drop canvas display_ and an interactive, _real-time component code preview_ that can be exported as a **React** app 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!**
 
-Visit [reactype.io](https://reactype.io/) to learn more about the product.
+Visit [reactype.dev](https://reactype.dev) to learn more about the product.
 
 Follow [@ReacType](https://twitter.com/reactype) on Twitter for important announcements.
 
@@ -45,31 +43,30 @@ If you want to read about using ReacType, the [User Manual](https://reactype-1.h
 ### Installing
 
 - **MacOS**
-Download the latest [release](https://github.com/open-source-labs/ReacType/releases) <br>
-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.
-If you are given a warning that Apple could not scan the app. Please follow these [steps](https://support.apple.com/en-ca/HT202491)
+  Download the latest [release](https://github.com/open-source-labs/ReacType/releases) <br>
+  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.
+  If you are given a warning that Apple could not scan the app. Please follow these [steps](https://support.apple.com/en-ca/HT202491)
 
 - **Windows**
-Download the latest [release](https://github.com/open-source-labs/ReacType/releases)
-
+  Download the latest [release](https://github.com/open-source-labs/ReacType/releases)
 
-## Changes with version 14.0.0
+## Changes with version 15.0.0
 
-- **Added event listeners**: Users can now add event listeners to elements in the customization tab and view a list of added events. The list can be edited to remove events, and the live code preview will show the events being added and updated.
-- **Delete buttons added**: Delete buttons have been added to canvas components and elements for easier removal. Users can now delete elements or components directly by focusing on them and mouse-clicking the delete button.
-- **Live code preview and component tree update**: When users drag-and-drop components and elements, the live code preview and component tree are automatically updated to reflect the changes in real-time.
-- **Major UI enhancement**: The user interface has undergone a major change, including a sliding effect for the left and bottom panels to maximize user visibility. The styling has been unified and the display of the canvas hierarchy has been made more prominent for improved clarity.
+- **Consolidated State Management**: Reactype was using mutliple methods of State Management. We consolidated this all to the modern version of Redux Toolkit to enhance the developer experience and make it easier to debug.
+- **Major Dependency Updates**: No more workarounds required to get new developers up and running in the project. A simple npm install works as intended.
+- **Websockets**: Users can now join rooms to collaborate on a project together in real time!
+- **Fully Deployed Web Application**: To utilize these new features we have hosted the full application via AWS so users can easily use Reactype without a download.
 - **And more:** See [change log](https://github.com/open-source-labs/ReacType/blob/master/CHANGE_LOG.md) for more details on what was changed from the previous versions as well as plans for upcoming features!
 
-## (_New_) File Structure
+## File Structure courtesy of Reactype version 14.0.0
 
 Here is the main file structure:
+
 <p align="center">
   <img width="1000" src="https://i.imgur.com/RdK8QzW.jpg">
 </p>
 Please refer to the link: https://excalidraw.com/#json=JKwzVD5qx6lsfiHW1_pQ9,XJ6uDoehVu-1bsx0SMlC6w for more details.
 
-
 ## Run ReacType using CLI
 
 - **Fork** and **Clone** Repository.
@@ -79,11 +76,6 @@ Please refer to the link: https://excalidraw.com/#json=JKwzVD5qx6lsfiHW1_pQ9,XJ6
 ```bash
 npm install
 ```
-- If there is a dependency issue during installation, try switching to Node version v16.0.0 and then install. If the dependency issue still persists, try using the `--legacy-peer-deps` flag instead.
-
-```bash
-npm install --legacy-peer-deps
-```
 
 - To run the production build
 
@@ -103,11 +95,12 @@ npm run test
 npm run dev
 ```
 
+- Note that a .env with DEV_PORT, and a NODE_ENV flag (=production or development) are needed.
 - Please note that the development build is not connected to the production server. `npm run dev` should spin up the development server from the server folder of this repo. For additional information, the readme is [here](https://github.com/open-source-labs/ReacType/blob/master/server/README.md). Alternatively, you can select "Continue as guest" on the login page of the app, which will not use any features that rely on the server (authentication and saving project data.)
 
 - To run the development build of electron app
 
- ```bash
+```bash
 npm run dev
 npm run electron-dev
 ```
@@ -144,7 +137,6 @@ Typescript, React.js, Redux, Javascript, D3.js, Node.js (Express), HTML, CSS/SAS
 Here is the up to date [list](https://github.com/open-source-labs/ReacType/blob/master/contributors.md) of all co-developers of this product.
 Please visit our [contribution documentation](https://github.com/open-source-labs/ReacType/blob/master/contribution_documentation.md) for more information on how you can contribute to ReacType!
 
-
 ## License
 
 This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/team-reactype/ReacType/blob/development/LICENSE.md) file for details.

__tests__/enzyme.test.tsx

@@ -1,5 +1,5 @@
 import { shallow} from 'enzyme';
-import { configure } from 'enzyme';
+// import { configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16'
 import React from 'react';
 import { DndProvider } from 'react-dnd';
@@ -17,8 +17,8 @@ import HTMLItem from '../app/src/components/left/HTMLItem';
 import LeftContainer from '../app/src/containers/LeftContainer';
 import AppContainer from '../app/src/containers/AppContainer';
 import NavBar from '../app/src/components/top/NavBar';
-import MenuItem from '@material-ui/core/MenuItem';
-import Tab from '@material-ui/core/Tab';
+import MenuItem from '@mui/material/MenuItem';
+import Tab from '@mui/material/Tab';
 import LoginButton from '../app/src/components/right/LoginButton';
 import customizationPanel from '../app/src/containers/CustomizationPanel'
 

app/electron/main.js renamed to app/.electron/main.js

@@ -20,10 +20,10 @@ const {
 const { resolve } = require('app-root-path');
 
 // to install react dev tool extension
-const {
-  default: installExtension,
-  REACT_DEVELOPER_TOOLS
-} = require('electron-devtools-installer');
+// const {
+//   default: installExtension,
+//   REACT_DEVELOPER_TOOLS
+// } = require('electron-devtools-installer');
 const debug = require('electron-debug');
 
 // import custom protocol in protocol.js

app/electron/menu.js renamed to app/.electron/menu.js

@@ -1,27 +1,26 @@
 import React, { useState, useContext } from 'react';
-import {
-  withStyles, //added
-  createStyles,
-  makeStyles,
-  Theme,
-} from '@material-ui/core/styles';
-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 { Theme } from '@mui/material/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
+import makeStyles from '@mui/styles/makeStyles';
+import AppBar from '@mui/material/AppBar';
+import Avatar from '@mui/material/Avatar';
+import Brightness3Icon from '@mui/icons-material/Brightness3';
+import Brightness5Icon from '@mui/icons-material/Brightness5';
+import Button from '@mui/material/Button';
+import EventNoteIcon from '@mui/icons-material/EventNote';
+import HomeIcon from '@mui/icons-material/Home';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/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 SortIcon from '@material-ui/icons/Sort';
-import StarBorderIcon from '@material-ui/icons/StarBorder';
-import PersonIcon from '@material-ui/icons/Person';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import SortIcon from '@mui/icons-material/Sort';
+import StarBorderIcon from '@mui/icons-material/StarBorder';
+import PersonIcon from '@mui/icons-material/Person';
 import greenLogo from '../public/icons/png/512x512.png';
+import {setStyle} from '../redux/reducers/slice/styleSlice'
+import { useSelector,useDispatch } from 'react-redux';
 
 // NavBar text and button styling
 const useStyles = makeStyles((theme: Theme) => createStyles({
@@ -47,12 +46,12 @@ const sortMethods = ['RATING', 'DATE', 'USER'];
 // Drop down menu button for SORT PROJECTS
 const StyledMenu = withStyles({
   paper: {
-    border: '1px solid #d3d4d5'
+    border: '1px solid #d3d4d5',
   }
 })(props => (
   <Menu
     elevation={0}
-    getContentAnchorEl={null}
+    // getContentAnchorEl={null}
     anchorOrigin={{
       vertical: 'bottom',
       horizontal: 'center'
@@ -77,7 +76,8 @@ const StyledMenuItem = withStyles(theme => ({
 export default function NavBar(props) {
   // TO DO: import setStyle
   const classes = useStyles();
-  const { style, setStyle } = useContext(styleContext);
+  const style = useSelector(store => store.styleSlice);
+  const dispatch = useDispatch();
   const toggling = () => setIsOpen(!isOpen);
   // toggle to open and close dropdown sorting menu
   const [isOpen, setIsOpen] = useState(false);
@@ -145,9 +145,9 @@ export default function NavBar(props) {
             style={{minWidth: '113.97px'}}
             endIcon={props.isThemeLight ? <Brightness3Icon/> : <Brightness5Icon/>}
             onClick={() => {
-              !props.styles[0].backgroundColor
-                ? props.styles[1]({ backgroundColor: '#21262D' }) //dark mode color
-                : props.styles[1]({ backgroundColor: null })
+              !style.backgroundColor
+                ? dispatch(setStyle({ backgroundColor: '#21262D' })) //dark mode color
+                : dispatch(setStyle( null ))
               props.isThemeLight ? props.setTheme(false) : props.setTheme(true);
             }}
           >