Merge pull request open-source-labs#243 from open-source-labs/rose/fixes

Fixed: Final ReacType v19

Author: Skilzsz

CHANGE_LOG.md

@@ -10,15 +10,15 @@ Changes:<br>
 - Developer Improvement:
   - Typescript conversion continued and now sits at ~95%
 - User Features:
-  - Collaboration Room: 
+  - Collaboration Room:
     - Bug Fixes:
       - Debug “Leave Room” functionality removing username from the users list
       - Debug “Join Room” functionality so the current canvas does not reset upon new user joining collaboration
       - Debug Code Preview button that sent error if toggled more than once and does not force toggled view to other users in the room
     - Collaboration room is now ready for release (v1)
       - Implemented live cursor tracking with on/off function where multiple users can choose to see the other users mouse cursors in real-time in the same canvas.
       - Added keydown functionality to “Join Room” by triggering button click on keyboard “Enter”
-      - Reconfigured web socket initiation to force new connection when joining room 
+      - Reconfigured web socket initiation to force new connection when joining room
     - Refactored the way changes were being passed to other users in the collaboration room
       - Significantly reduces the amount of data being passed among users by passing only the payload for each individual action, triggering singular updates for other users in the collaboration environment
       - Added Event Emitters for each action that updates canvas
@@ -33,7 +33,7 @@ Changes:<br>
 
 Recommendations for Future Enhancements:<br>
 
-- Fix Undo & Redo functionality. Undo & Redo buttons on the customization page not functioning as expected. 
+- Fix Undo & Redo functionality. Undo & Redo buttons on the customization page not functioning as expected.
 - Update Electron for desktop application use. Resolve electron app functionality to coincide with web app functionality.
 - Add Change Log/View Edit History feature in app
 - v.17 recommendations regarding the Marketplace are still undeveloped.
@@ -76,20 +76,20 @@ Changes:<br>
   - Join/Nickname Button:
     - Allows users to specify which room to join, and what name to display upon joining the room.
     - The button only shows when the user is not connected to the room, requiring 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.
+- 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 
+- Optimize performance of room state updates
 - v.17 recommendations regarding the Marketplace are still undeveloped.
 - Solve residual bugs. Undo & Redo buttons on the 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.  
+- 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.
+- 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.
 - Collaboration feature still needs to be improved for scalability with AWS servers and clients for better experiences. The feature currently is limited to access with only 1 AWS cloud server.
 - Future teams could look into data structures for scaling on the server side of the app to improve data transmitting and multiple server functionality.
@@ -112,15 +112,15 @@ Changes:<br>
   - UI updated with a modern style for a better developer experience
     - Added many user feedback alerts for a better experience including alerts for when projects are published, cloned, deleted, HTML custom tags are created, context created, or custom components created.
     - Built a specific buttons menu that individually displays the HTML elements, reusable components created, and join room option.
-    - Redesigned the state manager panel option to be readable and functional. 
+    - Redesigned the state manager panel option to be readable and functional.
     - Drop down menu now closes only when the user clicks outside of the menu
   - Marketplace:
     - Implemented a dedicated area for developers to share their projects
     - Routing handled by React Router
     - Projects can also be cloned to the user's account to be used and edited with the addition of a button
     - Added search functionality to search by username and project name
     - Included a separate section in the Saved Projects and Delete Projects modal in the Manage Project menu for cloned projects from the Marketplace
-  - Publish/Unpublish Button: 
+  - Publish/Unpublish Button:
     - Publish feature on the web app allows users to publish their saved project files into the Marketplace from the main app page
     - Dynamically switches between publish/unpublish depending on whether the loaded project is in the Marketplace
 

Dockerrun.aws.json

@@ -12,7 +12,7 @@
   "Environment": [
     {
       "Name": "API_BASE_URL",
-      "Value": "Reactype-v17env.eba-sw2fhsbj.us-east-1.elasticbeanstalk.com"
+      "Value": "Reactype-v19env.eba-sw2fhsbj.us-east-1.elasticbeanstalk.com"
     }
   ]
 }

app/src/components/left/RoomsContainer.tsx

@@ -333,12 +333,15 @@ const RoomsContainer = () => {
         <Typography variant="h5" color={'#f2fbf8'}>
           Live Room: {roomCode}
         </Typography>
-        <Typography variant="h6" color={userColors[userList.indexOf(userName)]}>
-          Nickname: {userName}
-        </Typography>
         {/*  Set up condition rendering depends on if user joined a room then render leave button if not render join button */}
         {userJoined ? (
           <>
+            <Typography
+              variant="h6"
+              color={userColors[userList.indexOf(userName)]}
+            >
+              Nickname: {userName}
+            </Typography>
             <Typography
               variant="body1"
               sx={{

app/src/components/main/Canvas.tsx

@@ -16,7 +16,6 @@ import { combineStyles } from '../../helperFunctions/combineStyles';
 import renderChildren from '../../helperFunctions/renderChildren';
 import { emitEvent, getSocket } from '../../helperFunctions/socket';
 import { FaMousePointer } from 'react-icons/fa';
-import { Console } from 'console';
 
 function Canvas(props: {}): JSX.Element {
   const state = useSelector((store: RootState) => store.appState);
@@ -97,10 +96,10 @@ function Canvas(props: {}): JSX.Element {
   // Removes the mouse cursor of the user that leaves the collaboration room.
   const handleCursorDeleteFromServer = () => {
     setRemoteCursors((prevRemoteCursors) =>
-      prevRemoteCursors.map((cursor) => ({
-        ...cursor,
-        isVisible: userList.includes(cursor.remoteUserName)
-      }))
+      // filter cursors to include only those in the userList
+      prevRemoteCursors.filter((cursor) =>
+        userList.includes(cursor.remoteUserName)
+      )
     );
   };
 

app/src/public/index-prod.ejs

@@ -2,12 +2,19 @@
 <html lang="en-US">
   <head>
     <meta charset="UTF-8" />
-    <script src="https://kit.fontawesome.com/7e1cebd082.js" crossorigin="anonymous"></script>
+    <script
+      src="https://kit.fontawesome.com/7e1cebd082.js"
+      crossorigin="anonymous"
+    ></script>
     <meta
       property="csp-nonce"
       content="<%= htmlWebpackPlugin.options.nonce %>"
     />
     <title>ReacType</title>
+    <link
+      rel="icon"
+      href="https://raw.githubusercontent.com/open-source-labs/ReacType/master/app/src/public/icons/png/512x512.png"
+    />
   </head>
   <body>
     <div id="app"></div>

app/src/redux/reducers/slice/appStateSlice.ts

@@ -778,14 +778,20 @@ const appStateSlice = createSlice({
         style: {}
       };
       const components = [rootComponent];
+
+      const stylesheet = '';
+      const resetHTMLTypes = HTMLTypes;
+
       return {
         ...state,
         nextChildId,
         nextTopSeparatorId,
         rootComponents,
         nextComponentId,
         components,
-        canvasFocus
+        canvasFocus,
+        stylesheet,
+        HTMLTypes: resetHTMLTypes
       };
     },
     updateProjectName: (state, action) => {