Android Notification

README.md

@@ -9,13 +9,8 @@ The Engaging Computing Group develops new technologies to enable learners—yout
 ## Status
 [![CircleCI](https://circleci.com/gh/engaging-computing/MYR.svg?style=shield)](https://circleci.com/gh/engaging-computing/MYR)
 
-## Change Log - 3.0.0 -> 3.1.0
-- Updated sorting for user projects to be case insensitive.
-- Added ability to change code font size for an account.
-- Added transparency to helper grid
-- Additional Documentation for development.
-- Misc. Dependency updates
-
+## Change Log - 3.1.1 -> 3.1.2
+- Fixed a bug where an old scene without a name can crash the client view
 
 
 ## Acknowledgments

package.json

@@ -1,6 +1,6 @@
 {
     "name": "myr",
-    "version": "3.1.0",
+    "version": "3.1.2",
     "private": false,
     "engines": {
         "node": "^12.18.2"
@@ -18,12 +18,13 @@
     "dependencies": {
         "@engaging-computing/aframe-physics-system": "^4.0.0",
         "@material-ui/core": "^4.12.3",
-        "aframe": "^1.0.4",
+        "@material-ui/lab": "^4.0.0-alpha.61",
+        "aframe": "^1.3.0",
         "aframe-animation-component": "^5.0.0",
         "aframe-environment-component": "^1.3.1",
         "aframe-extras": "^4.1.2",
         "aframe-react": "^4.4.0",
-        "bootstrap": "^4.6.0",
+        "bootstrap": "^5.1.3",
         "browserslist": "^4.6.2",
         "cannon": "^0.6.2",
         "create-react-app": "^4.0.1",
@@ -33,7 +34,7 @@
         "jquery": "^3.3.1",
         "qrcode": "^1.2.0",
         "qrcode.react": "^1.0.1",
-        "react": "^16.8.4",
+        "react": "^16.14.0",
         "react-ace": "^6.0.0",
         "react-color": "^2.19.3",
         "react-dom": "^16.2.0",
@@ -43,13 +44,13 @@
         "react-router-dom": "^4.2.2",
         "react-select": "^3.0.4",
         "reactour": "^1.18.6",
-        "redux": "^3.7.2",
+        "redux": "^4.2.0",
         "redux-thunk": "^2.3.0",
         "socket.io-client": "^4.4.1",
         "source-map-explorer": "^2.0.0",
         "styled-components": "^5.3.3",
         "three": "^0.126.1",
-        "ua-parser-js": "^0.7.24"
+        "ua-parser-js": "^1.0.2"
     },
     "scripts": {
         "start": "react-scripts start",

src/actions/collectionActions.js

@@ -15,6 +15,9 @@ export function asyncCollections(uid) {
         if (uid) {
             let userCollections = [];
             fetch(collectRef, {headers: {"x-access-token": uid}}).then((data) => {
+                if(data.status === 204){
+                    return;
+                }
                 data.json().then((data) => {
                     data.forEach((doc) => {
                         userCollections.push(doc);

src/components/editor/Editor.js

@@ -95,7 +95,7 @@ class Editor extends Component {
                     editorProps={{
                         $blockScrolling: Infinity,
                     }}
-                    height="90vh"
+                    height="88vh"
                     mode="javascript"
                     name="ace-editor"
                     // eslint-disable-next-line

src/components/editor/FontSize.js

@@ -20,6 +20,7 @@ class FontSize extends React.Component {
             <div className="font">
                 <Tooltip title="Font Size">
                     <Button className="font-button"
+                        id="font-size"
                         variant="contained"
                         size="small"
                         color="primary">

src/components/editor/KeyboardShortcut.js

@@ -59,6 +59,10 @@ const scene = [
         shortcut: ["D"],
         description: "Move right"
     },
+    {
+        shortcut: ["F"],
+        description: "Enter full screen"
+    },
     {
         shortcut: ["Space"],
         description: "Move up"
@@ -124,9 +128,11 @@ class KeyboardShortcut extends React.Component {
      */
     render(){
         return(
-            <div className="whole-keyboard">
+            <div className="whole-keyboard"
+                spacing={10}>
                 <Tooltip title="Keyboard Shortcut">
-                    <Button
+                    <Button 
+                        className="shortcut-button"
                         variant="contained"
                         size="small"
                         color="primary"

src/components/layouts/AssetReference.js

@@ -30,7 +30,7 @@ export const AssetReference = ({ editor, editorActions, user, authActions, scene
             collections={collections}
             layoutType={layoutTypes.REFERENCE}
         />
-        <div className="row no-gutters">
+        <div className="row g-0">
             <AssetReferencePage />
         </div>
         <Footer />

src/components/layouts/Collection.js

@@ -34,7 +34,7 @@ export const Collection = ({ editor, editorActions, user, userSettings, userActi
             collection={match.params.collection}
             layoutType={layoutTypes.COLLECTION}
         />
-        <div className="row no-gutters">
+        <div className="row g-0">
             <div id="interface" className="col-12 col-md-4">
                 <SelectProject
                     selectedCollection={match.params.collection}

src/components/layouts/Guided.js

@@ -36,7 +36,7 @@ export const Guided = ({ editor, user, usersettings, userActions, scene, editorA
             collectionActions={collectionActions}
             collections={collections}
         />
-        <div className="row no-gutters">
+        <div className="row g-0">
             {
                 scene.settings.viewOnly
                     ?

src/components/layouts/Ide.js

@@ -4,6 +4,7 @@ import Header from "../structural/header/Header";
 import Footer from "../structural/Footer";
 import View from "../structural/View";
 import Banner from "../structural/header/Banner";
+import AndroidNotification from "../structural/AndroidNotification";
 
 import * as layoutTypes from "../../constants/LayoutTypes.js";
 
@@ -20,6 +21,7 @@ export const Ide = ({ editor, editorActions, user, usersettings, userActions, au
                 new URLSearchParams(window.location.search).get("redirected") === "true"
             }
         />
+        <AndroidNotification/>
         <Header
             viewOnly={scene.settings.viewOnly}
             logging={authActions}
@@ -41,7 +43,7 @@ export const Ide = ({ editor, editorActions, user, usersettings, userActions, au
             collections={collections}
             layoutType={layoutTypes.IDE}
         />
-        <div className="row no-gutters">
+        <div className="row g-0">
             {
                 scene.settings.viewOnly
                     ?

src/components/layouts/Reference.js

@@ -30,7 +30,7 @@ export const Reference = ({ editor, editorActions, user, authActions, scene, sce
             collections={collections}
             layoutType={layoutTypes.REFERENCE}
         />
-        <div className="row no-gutters">
+        <div className="row g-0">
             <ReferencePage />
         </div>
         <Footer />

src/components/layouts/ReferenceExample.js

@@ -14,7 +14,7 @@ import "../../css/ReferencePage.css";
  * @param {object} param0 List of props that will be use in components
  * @returns {HTMLElement} Layout for example scene page
  */
-export const ReferenceExample = ({ editor, user, scene, referenceExample, referenceExampleActions, editorActions, authActions, projectActions, projects, courseActions, courses, match, sceneActions, collectionActions, collections }) => (
+export const ReferenceExample = ({ editor, user, scene, referenceExample, referenceExampleActions, editorActions, authActions, projectActions, projects, courseActions, courses, match, sceneActions, collectionActions, collections, userSettings, userActions }) => (
     <div className="App">
         <Header
             logging={authActions}
@@ -36,7 +36,7 @@ export const ReferenceExample = ({ editor, user, scene, referenceExample, refere
             referenceExampleActions={referenceExampleActions}
             layoutType={layoutTypes.REF_EXAMPLE}
         />
-        <div className="row no-gutters">
+        <div className="row g-0">
             {
                 scene.settings.viewOnly
                     ?
@@ -48,7 +48,7 @@ export const ReferenceExample = ({ editor, user, scene, referenceExample, refere
                         <div id="interface" className="col-12 col-md-4">
                             <RefExInfo referenceExample={referenceExample} />
                             <div className='ref-ex-edit'>
-                                <Editor refresh={editorActions.refresh} render={editorActions.render} text={editor.text} user={user} />
+                                <Editor refresh={editorActions.refresh} render={editorActions.render} text={editor.text} user={user} settings={userSettings} userActions={userActions} />
                             </div>
                         </div>
                         <div id="scene" className="col-12 col-md-8" >

src/components/structural/AndroidNotification.js

@@ -0,0 +1,52 @@
+import CookieHandler from "../../utils/CookieHandler";
+import React, { Component } from "react";
+import { Alert } from "@material-ui/lab";
+import { Button } from "@material-ui/core";
+
+class AndroidNotification extends Component{
+    constructor(props){
+        super(props);
+        this.state = {
+            isOpen: this.isAndroid() && this.isChrome() 
+        };
+    }
+    /**
+     * @returns {boolean} true if the device is on AndroidOS and cookie is false
+     */
+    isAndroid = () => {
+        let ua = navigator.userAgent.toLowerCase();
+        return (ua.indexOf("android") > -1 && !CookieHandler.getCookie("hasSeenNotification"));
+    }
+
+    /**
+     * @returns {boolean} true if browser being used is Google Chrome
+     */
+    isChrome = () => {
+        let isChrome = window.chrome;
+        let winNav = window.navigator;
+        let vendorName = winNav.vendor;
+        let isOpera = typeof window.opr !== "undefined";
+        let IEedge = winNav.userAgent.indexOf("Edg") > -1;
+
+        return (isChrome !== null && typeof isChrome !== "undefined" && vendorName === "Google Inc." 
+        && isOpera === false && IEedge === false);
+    }
+
+    /**
+     * @returns Creates alert for Chrome users on Android to switch browsers
+     */
+    render = ()=>(
+        <>
+            { this.state.isOpen ? 
+                <Alert severity="warning" action={
+                    <Button color="inherit" size="small" onClick={()=>{
+                        this.setState({isOpen:false});
+                        CookieHandler.neverAgainCookie("hasSeenNotification");
+                    }}>
+                    DON'T SHOW AGAIN
+                    </Button> } >Chrome on Android may have unexpected behavior. We recommend you switch to Firefox for the full experience.</Alert> : null}     
+        </>
+    )
+}
+
+export default AndroidNotification;

src/components/structural/WelcomeScreen.js

@@ -14,6 +14,7 @@ import CourseSelect from "../courses/CourseSelect.js";
 
 import { withStyles } from "@material-ui/core/styles";
 import "../../css/WelcomeScreen.css";
+import CookieHandler from "../../utils/CookieHandler"; 
 
 /** 
  * @returns {object} Center the Welcome Screen
@@ -89,71 +90,29 @@ class Welcome extends React.Component {
      * So if user hasn't visisted the MYR, toggle the state to true.
      */
     componentDidMount() {
-        if (!this.getCookie("hasVisited")) {
+        if (!CookieHandler.getCookie("hasVisited")) {
             this.props.handleWelcomeToggle();
         }
     }
 
-    /**
-     * Get value of cookie
-     * @param {string} cookieName name of cookie
-     * @returns {string} value of cookie if it exist, return empty string otherwise
-     */
-    getCookie = (cookieName) => {
-        let name = cookieName + "=";
-        let decodedCookie = decodeURIComponent(document.cookie);
-        let ca = decodedCookie.split(";");
-        for (let i = 0; i < ca.length; i++) {
-            let c = ca[i];
-            while (c.charAt(0) === " ") {
-                c = c.substring(1);
-            }
-            if (c.indexOf(name) === 0) {
-                return c.substring(name.length, c.length);
-            }
-        }
-        return "";
-    }
-
-    /**
-     * If the user is first visiting the MYR, set "hasVisisted" to true
-     * and set the expiration date to current date + 24 hrs 
-     * So it will re-appear after 24 hrs
-     */
-    setCookie = () => {
-        if (!this.getCookie("hasVisited")) {
-            let date = new Date();
-            date.setTime(date.getTime() + (1000 * 60 * 60 * 24));
-            let expiration = "; expires=" + date.toGMTString();
-            let cookie = "hasVisited=true" + expiration;
-            document.cookie = cookie;
-        }
-    }
-
     /**
      * Handler for when the welcome screen is close either by close button or clicking outside of modal
      */
     handleClose = () => {
-        this.setCookie();
+        CookieHandler.setCookie("hasVisited");
         this.props.handleWelcomeToggle();
     };
 
-    /**
-     * Handler for when user click "never again" button
-     * It sets a long expiration date so it will "never" expireds 
-     */
-    neverAgainCookie = () => {
-        document.cookie = "hasVisited=true; expires=Thu, 31 Dec 2099 12:00:00 UTC;";
-        this.handleClose();
-    }
-
     /**
      * @returns {*} Button with don't show again option
      */
     neverAgain = () => {
         return (
             <Button
-                onClick={this.neverAgainCookie}
+                onClick={()=>{
+                    CookieHandler.neverAgainCookie("hasVisited"); 
+                    this.handleClose();
+                }}
                 className="neverAgain-btn">
                 Don't show again
             </Button >
@@ -164,7 +123,7 @@ class Welcome extends React.Component {
      * Handler for when user click on example project button
      */
     handleProjectToggle = () => {
-        this.setCookie();
+        CookieHandler.setCookie("hasVisited");
         this.setState({ projectsOpen: !this.state.projectsOpen });
         this.setState({ projectTab: "b" });
     };
@@ -173,15 +132,15 @@ class Welcome extends React.Component {
      * Handler for when user click on courses button
      */
     handleCoursesToggle = () => {
-        this.setCookie();
+        CookieHandler.setCookie("hasVisited");
         this.setState({ coursesOpen: !this.state.coursesOpen });
     };
 
     /**
      * Handler for when user click on tour button
      */
     handleTourToggle = () => {
-        this.setCookie();
+        CookieHandler.setCookie("hasVisited");
         this.setState({ tourOpen: !this.state.tourOpen });
     };
 
@@ -216,7 +175,7 @@ class Welcome extends React.Component {
                         href="/reference"
                         target="_blank"
                         rel="noopener noreferrer"
-                        onClick={this.setCookie}
+                        onClick={()=>{CookieHandler.setCookie("hasVisited");}}
                         className="welcome-btn">
                         <Icon className="material-icons">help</Icon>
                         Open the Reference
@@ -252,7 +211,7 @@ class Welcome extends React.Component {
                         href="https://github.com/engaging-computing/MYR"
                         target="_blank"
                         rel="noopener noreferrer"
-                        onClick={this.setCookie}
+                        onClick={()=>{CookieHandler.setCookie("hasVisited");}}
                         className="welcome-btn">
                         <Icon className="material-icons">code</Icon>
                         Visit our GitHub
@@ -322,7 +281,7 @@ class Welcome extends React.Component {
                                 <this.cookieMessage />
                             </Hidden>
                             <hr />
-                            <div className="row no-gutters">
+                            <div className="row g-0">
                                 <div id="welcome-description" className="col-12 col-md-6 col-lg-8">
                                     <p>MYR is an educational tool that strikes a balance with the ease of use and challenge. We drew inspiration from Logo Turtle and Processing to provide a beginner friendly experience for teaching and learning with MYR. If you want to learn more about MYR itself, visit our <a href="/about" target="_blank" rel="noopener noreferrer">about page</a>.</p>
                                     <p>Within the editor you can create 3D scenes using JavaScript and the MYR API. You can then view your scene in the viewer using a computer, tablet, smartphone, or a VR headset.</p>