Merge pull request #233 from oslabs-beta/master

Update to v.18

Author: sonyahu15

.gitignore

@@ -498,6 +498,7 @@ server/RootCA.srl
 
 
 # End of https://www.gitignore.io/api/node,linux,macos,windows,visualstudio,yarn
+
 /test-results/
 /playwright-report/
 /playwright/.cache/
@@ -524,4 +525,7 @@ amplifytools.xcconfig
 **.sample
 #amplify-do-not-edit-end
 
-/amplify/team-provider-info.json
+/amplify/team-provider-info.json
+
+#TypeScript coverage report
+coverage-ts/

.travis.yml

@@ -3,6 +3,47 @@
   <h1 align="center">ReacType Change Log</h1>
 </p>
 
+**Version 18.0.0 Changes**
+
+Changes:<br>
+
+- Developer Improvements:
+  - Typescript conversion continued and now sits at ~90%
+  - Dev Bug Fixes:
+    - Deleted ts-coverage files and added folder to git.ignore so TS conversion status is properly reflected on the GitHub repository.
+    - Cleaned up outdated code and removed multiple unused and duplicate files, particularly those related to the now-obsolete Dark Mode functionality and some other lingering code from the v.17 migration.
+  - Modularity:
+    - Migrated large portions of RoomContainer functionality into smaller components to improve the reusability of code.
+    - Created more interface types for reusability to multiple parts of the applications.
+- User Features:
+  - Collaboration Room:
+    - Implemented room functionality where multiple users can see and interact with the same canvas state in real time.
+    - Dynamically handles the host logic of the collab room, where the oldest connected client is the one serving the room's state.
+    - Fixed backend web socket connections with the clients, allowing full duplex connections between multiple clients and servers.
+  - User List:
+    - List that displays all connected users in a particular room.
+    - Dynamically updates when users join or leave a room.
+    - Automatically updates new host in the room to the next oldest user.
+  - Join/Nickname Button:
+    - Allows users to specify which room to join, and what name to display upon joining the room.
+    - Button only shows when user is not connected to room, requires both fields to be filled out.
+      
+Recommendations for Future Enhancements:<br>
+
+- Chat functionality so users in the same room can discuss their projects.
+- List of active rooms so users can simply pick one to join.  Will likely be paired with a password feature for security, so only users with the proper credentials can join a particular room.
+- True real-time rendering so users can see components as they're being dragged onto the canvas, rather than only when they're placed.
+- Optimize performance of room state updates 
+- v.17 recommendations regarding the Marketplace are still undeveloped.
+- Solve residual bugs. Undo & Redo buttons on customization page not functioning as expected. Backend bugs persist as seen in the console when running the dev environment. Persistent Redux error that causes page to rerender more often than necessary.
+- Resolve electron app functionality to coincide with web app functionality.  
+- For the state manager option in the data table there is a MuiData-menu that is not visible when clicking it and after the filter option is clicked it creates a white space in the bottom of the page.
+- Expand testing coverage.  Continue fixing old tests which rely on outdated dependencies, and implementing new tests.
+- Continue modularizing code.  Many large, unwieldy files that should be broken up into more modular components still exist.
+- Continue Typescript conversion.  Consider toggling noImplicitAny to find all 'any' cases that can be addressed.
+- Continue cleanup of outdated and unused code and files.
+
+
 **Version 17.0.0 Changes**
 
 Changes:<br>

CHANGE_LOG.md

@@ -19,7 +19,7 @@
 [![ContributorShield][contributors]][contributors-url]
 [![ForksShield][forks]][forks-url]
 ![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)
-![Version: 17.0.0](https://img.shields.io/badge/version-17.0.0-orange)
+![Version: 18.0.0](https://img.shields.io/badge/version-18.0.0-orange)
 
 
 </div>
@@ -67,15 +67,15 @@ Follow [@ReacType](https://twitter.com/reactype) on Twitter for important announ
 
 <!-- NEED TO REPLACE THE TUTORIAL LINK -->
 
-## Changes with version 17.0.0
+## Changes with Version 18.0.0
 
-- **Improved Testing Coverage**: Testing coverage now sits at ~60%.
-- **Typescript Conversion**: Typescript coverage now sits at ~80%.
-- **UI Overhaul**: Upgraded the UI of the application with a more modern style and better developer experience
-- **Marketplace Feature**: Implemented a dedicated area for developers to share their projects, 
-- **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!
+- **Collaboration Rooms**: Implemented rooms which allow developers to colloborate together on a project.
+- **User List**: Designed and built a user list which updates in real time as clients join and exit.
+- **Typescript Conversion**: Typescript coverage is now increased to ~90%.
+- **Cleanup**: Removed unused code, fixed bugs, and refactored existing code to improve performance, 
+- **And more:** See the [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!
 
-## File Structure of Reactype version 17.0.0
+## File Structure of ReacType Version 18.0.0
 
 Here is the main file structure:
 
@@ -89,7 +89,7 @@ Please refer to the Excalidraw provided by ReacType Version 14.0 for more detail
 ## Run ReacType using CLI
 
 - **Fork** and **Clone** Repository.
-- Open project directory
+- Open project directory.
 - Install dependencies.
 
 ```bash
@@ -151,7 +151,7 @@ npm run start
 
 ## Stack
 
-Typescript, React.js, Redux Toolkit, Javascript, ESM, Node.js (Express), HTML, CSS, MUI, GraphQL, Next.js, Gatsby.js, Electron, NoSQL, Webpack, TDD (Jest, React Testing Library, Playwright), OAuth 2.0, Websocket, Continuous Integration (Github Actions), Docker, AWS (ECR, Elastic Beanstalk), Ace Editor, Google Charts, React DnD
+Typescript, React.js, Redux Toolkit, Javascript, ESM, Node.js (Express), HTML, CSS, MUI, GraphQL, Next.js, Gatsby.js, Electron, NoSQL, Webpack, TDD (Jest, React Testing Library, Playwright), OAuth 2.0, Websocket, SocketIO, Continuous Integration (Github Actions), Docker, AWS (ECR, Elastic Beanstalk), Ace Editor, Google Charts, React DnD
 
 ## Contributions
 

README.md

@@ -1,18 +1,18 @@
-import { test, expect } from '@playwright/test';
+// import { test, expect } from '@playwright/test';
 
-test('has title', async ({ page }) => {
-  await page.goto('https://app.reactype.dev/#/');
+// test('has title', async ({ page }) => {
+//   await page.goto('https://app.reactype.dev/#/');
 
-  // Expect a title "to contain" a substring.
-  await expect(page).toHaveTitle('ReacType');
-});
+//   // Expect a title "to contain" a substring.
+//   await expect(page).toHaveTitle('ReacType');
+// });
 
-test('get started link', async ({ page }) => {
-  await page.goto('https://playwright.dev/');
+// test('get started link', async ({ page }) => {
+//   await page.goto('https://playwright.dev/');
 
-  // Click the get started link.
-  await page.getByRole('link', { name: 'Get started' }).click();
+//   // Click the get started link.
+//   await page.getByRole('link', { name: 'Get started' }).click();
 
-  // Expects the URL to contain intro.
-  await expect(page).toHaveURL(/.*intro/);
-});
+//   // Expects the URL to contain intro.
+//   await expect(page).toHaveURL(/.*intro/);
+// });

__tests__/playwright/example.spec.ts

@@ -5,10 +5,10 @@
 const { Mongoose } = require('mongoose');
 const request = require('supertest');
 // initializes the project to be sent to server/DB
-import mockData from '../mockData'
-import app from ('../server/server');
-const http = require('http')
-const {state, projectToSave } = mockData
+import mockData from '../mockData';
+import app from '../server/server';
+const http = require('http');
+const { state, projectToSave } = mockData;
 
 // save and get projects endpoint testing
 describe('Project endpoints tests', () => {

__tests__/projects.test.ts

@@ -13,7 +13,6 @@ import { theme1, theme2 } from '../public/styles/theme';
 
 
 declare module '@mui/styles/defaultTheme' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
   interface DefaultTheme extends Theme {}
 }
 

app/src/Dashboard/ProjectContainer.tsx

@@ -5,7 +5,6 @@ import {
   setInitialState,
   toggleLoggedIn
 } from '../redux/reducers/slice/appStateSlice';
-//redux toolkit addition
 import { useDispatch, useSelector } from 'react-redux';
 
 import AppContainer from '../containers/AppContainer';
@@ -17,34 +16,34 @@ import localforage from 'localforage';
 import { saveProject } from '../helperFunctions/projectGetSaveDel';
 
 // Intermediary component to wrap main App component with higher order provider components
-export const App = (): JSX.Element => {
-  const state = useSelector((store: RootState) => store.appState);
-  
-  const [toggleAttempt, setToggleAttempt] = useState(false);
+export const App: React.FC = (): JSX.Element => {
+  // const state = useSelector((store: RootState) => store.appState);
+
   const dispatch = useDispatch();
   // checks if user is signed in as guest or actual user and changes loggedIn boolean accordingly
   useEffect(() => {
     if (window.localStorage.getItem('ssid') !== 'guest') {
       dispatch(toggleLoggedIn(true));
     }
-    //setToggleAttempt(!toggleAttempt);
   }, []);
 
-  // following useEffect runs on first mount
+  // FOR LOCAL FORAGE: still trying to get this to work
+
+  // // following useEffect runs on first mount
   // useEffect(() => {
-  //   // console.log('cookies.get in App', Cookies.get())
+  //   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
+  //   // 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
+  //       console.log('local forage get project', 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');
@@ -63,24 +62,26 @@ export const App = (): JSX.Element => {
   //     });
   //   }
   // }, []);
+
+  // // New project save configuration to optimize server load and minimize Ajax requests
   // useEffect(() => {
   //   // provide config properties to legacy projects so new edits can be auto saved
-  //   // if (state.config === undefined) {
-  //   //   state.config = { saveFlag: true, saveTimer: false };
-  //   // }
-  //   // New project save configuration to optimize server load and minimize Ajax requests
+  //   if (state.config === undefined) {
+  //     state.config = { saveFlag: true, saveTimer: false };
+  //   }
+
   //   if (state.config.saveFlag) {
-  //     // state.config.saveFlag = false;
-  //     // state.config.saveTimer = true;
-  //     // dispatch(configToggle())
+  //     state.config.saveFlag = false;
+  //     state.config.saveTimer = true;
+  //     //dispatch(configToggle());
 
   //     let userId;
   //     if (Cookies.get('ssid')) {
   //       userId = Cookies.get('ssid');
   //     } else {
   //       userId = window.localStorage.getItem('ssid');
   //     }
-  //     // if (state.isLoggedIn === false) {
+
   //     if (!state.isLoggedIn) {
   //       localforage.setItem('guestProject', state);
   //     } else if (state.name !== '') {
@@ -95,19 +96,16 @@ export const App = (): JSX.Element => {
   //     }, 15000);
   //   }
   // }, [state]);
-  // uncomment below to log state
 
   return (
     <div className="app">
-      
-        <header
-          style={{ height: '40px', width: '100%', backgroundColor: 'white' }}
-        >
-          ReacType
-        </header>
+      <header
+        style={{ height: '40px', width: '100%', backgroundColor: 'white' }}
+      >
+        ReacType
+      </header>
 
-        <AppContainer />
-     
+      <AppContainer />
     </div>
   );
 };

app/src/components/App.tsx

@@ -12,11 +12,10 @@ const ComponentDropDown = ({
   componentInput,
   setComponentInput
 }) => {
-  const { state, isDarkMode } = useSelector((store: RootState) => ({
-    state: store.appState,
-    isDarkMode: store.darkMode.isDarkMode
+  const { state } = useSelector((store: RootState) => ({
+    state: store.appState
   }));
-  const color = isDarkMode ? 'white' : 'black';
+
   const onChange = (event, newValue) => {
     if (typeof newValue === 'string') {
       setComponentInput({
@@ -36,7 +35,6 @@ const ComponentDropDown = ({
   };
 
   const filterOptions = (options, params) => {
-    // setBtnDisabled(true);
     const filtered = filter(options, params);
     const { inputValue } = params;
     // Suggest the creation of a new contextInput
@@ -46,8 +44,6 @@ const ComponentDropDown = ({
         inputValue,
         name: `Add "${inputValue}"`
       });
-
-      // setBtnDisabled(false);
     }
 
     return filtered;
@@ -67,7 +63,7 @@ const ComponentDropDown = ({
   };
 
   const renderOption = (props, option) => (
-    <li style={{ color: 'black', backgroundColor: 'none'}} {...props}>
+    <li style={{ color: 'black', backgroundColor: 'none' }} {...props}>
       {option.name}
     </li>
   );

app/src/components/ContextAPIManager/AssignTab/components/ComponentDropDrown.tsx

@@ -2,8 +2,7 @@ import React, { Fragment, useState, useEffect } from 'react';
 import TextField from '@mui/material/TextField';
 import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 import Box from '@mui/material/Box';
-import { useSelector } from 'react-redux';
-import { RootState } from '../../../../redux/store';
+
 
 const filter = createFilterOptions();
 
@@ -15,10 +14,6 @@ const ContextDropDown = ({
 }) => {
   const { allContext } = contextStore;
 
-  const isDarkMode = useSelector(
-    (store: RootState) => store.darkMode.isDarkMode
-  );
-  const color = isDarkMode ? 'white' : 'black';
   const onChange = (event, newValue) => {
     if (typeof newValue === 'string') {
       setContextInput({
@@ -38,7 +33,6 @@ const ContextDropDown = ({
   };
 
   const filterOptions = (options, params) => {
-    // setBtnDisabled(true);
     const filtered = filter(options, params);
     const { inputValue } = params;
     // Suggest the creation of a new contextInput
@@ -48,8 +42,6 @@ const ContextDropDown = ({
         inputValue,
         name: `Add "${inputValue}"`
       });
-
-      // setBtnDisabled(false);
     }
 
     return filtered;

app/src/components/ContextAPIManager/AssignTab/components/ContextDropDown.tsx

@@ -45,9 +45,7 @@ const rows = [
   createData('Cupcake', 305, 3.7, 67, 4.3),
   createData('Gingerbread', 356, 16.0, 49, 3.9)
 ];
-{
-  /* <Table style={{ width: 400, margin: 'auto' }}></Table> */
-}
+
 export default function ContextTable() {
   return (
     <TableContainer component={Paper}>