Merge pull request #408 from engaging-computing/dev

v2.0.0 | Goodbye Firebase

Author: jasondkiesling

.env.example

@@ -0,0 +1,2 @@
+#The client ID should NOT start with http or https! This will cause authentication failure!
+REACT_APP_GOOGLE_CLIENTID=<Required for authenticting with the backend, get this from a team member>

.eslintrc.json

@@ -62,5 +62,8 @@
             "pragma": "React",
             "version": "16.8.4"
         }
+    },
+    "globals": {
+        "process": "readonly"
     }
 }

.gitignore

@@ -14,10 +14,8 @@
 
 # misc
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.env*
+!.env.example
 
 npm-debug.log*
 yarn-debug.log*

.nvmrc

@@ -0,0 +1 @@
+10.13

README.md

@@ -9,9 +9,10 @@ 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 - 1.9.0 -> 1.9.1
-- Fixed bug where key was hidden in some reference tabs.
-- setColor arguments are no longer case sensitive.
+## Change Log - 1.9.1 -> 2.0.0
+- Removed all Firebase dependencies and uses Mongo exclusively
+- Changed scene URL schema to be `/scene/:id`
+- Replaced authentication with Google OAuth2
 
 ## Acknowledgments
 MYR uses [Aframe](https://aframe.io), a fantastic open source project, to render objects and effects in the three dimensional space.  

package.json

@@ -1,6 +1,6 @@
 {
     "name": "myr",
-    "version": "1.9.1",
+    "version": "2.0.0",
     "private": false,
     "engines": {
         "node": "10.13.0"
@@ -25,21 +25,22 @@
         "cannon": "^0.6.2",
         "create-react-app": "^3.0.1",
         "eslint": "5.6.0",
-        "firebase": "^5.5.7",
         "jquery": "^3.3.1",
         "qrcode": "^1.2.0",
         "qrcode.react": "^0.8.0",
         "react": "^16.8.4",
         "react-ace": "^5.9.0",
         "react-color": "^2.17.0",
         "react-dom": "^16.2.0",
+        "react-google-login": "^5.1.19",
         "react-progressive-image": "^0.3.0",
         "react-redux": "^5.0.7",
         "react-router-dom": "^4.2.2",
         "react-select": "^3.0.4",
         "reactour": "^1.9.1",
         "redux": "^3.7.2",
         "redux-thunk": "^2.3.0",
+        "socket.io-client": "^2.3.0",
         "source-map-explorer": "^1.6.0",
         "styled-components": "^4.0.3",
         "three": "^0.98.0"

src/actions/collectionActions.js

@@ -1,23 +1,20 @@
-import { collections, scenes } from "../firebase.js";
-
 import * as types from "../constants/ActionTypes";
 
+export const collectRef = "/apiv1/collections";
+
 export function asyncCollections(id) {
     // fetch user's collections
     return (dispatch) => {
         if (id) {
             let userCollections = [];
-            collections.where("uid", "==", id).get().then(snap => {
-                snap.forEach(doc => {
-                    let dat = doc.data();
-                    userCollections.push({
-                        id: doc.id,
-                        collectionID: dat.collectionID,
-                        data: dat
+            fetch(collectRef, {headers: {"x-access-token": id}}).then((data) => {
+                data.json().then((data) => {
+                    data.forEach((doc) => {
+                        userCollections.push(doc);
                     });
                 });
+                dispatch(syncCollections(userCollections));
             });
-            dispatch(syncCollections(userCollections));
         }
     };
 }
@@ -26,33 +23,40 @@ export function syncCollections(payload) {
     return { type: types.SYNC_CLASSES, payload: payload };
 }
 
-export function asyncCollection(collectionID) {
+export function asyncCollection(collectionID, uid) {
     // fetch projects in collection
     return (dispatch) => {
         if (collectionID) {
             let collectionProjects = [];
             let projectOptions = [];
-            scenes.where("settings.collectionID", "==", collectionID).get().then(snap => {
-                snap.forEach(doc => {
-                    let dat = doc.data();
-                    collectionProjects.push({
-                        id: doc.id,
-                        name: dat.name,
-                        collectionID: dat.collectionID,
-                        data: dat
-                    });
+            fetch(`${collectRef}/collectionID/${collectionID}`, {headers: {"x-access-token": uid}})
+                .then((resp) => {
+                    switch(resp.status){
+                        case 200:
+                            resp.json().then((data) => {
+                                data.forEach((doc) => {
+                                    collectionProjects.push(doc);
+                                });
+                                collectionProjects.map((proj) => {
+                                    return projectOptions.push({
+                                        value: proj._id,
+                                        label: proj.name
+                                    });
+                                });
+        
+                                dispatch(syncCollection(projectOptions));
+                            });
+                            break;
+                        case 401:
+                            window.alert("Error: You are not logged in as the owner of this collection");
+                            break;
+                        case 404:
+                            window.location.assign("/error-404");
+                            break;
+                        default:
+                            window.alert(`Error fetching collection scenes: ${resp.statusText}`);
+                    }
                 });
-            }).then(() => {
-                collectionProjects.map((proj) =>
-                    projectOptions.push({
-                        value: proj.id,
-                        label: proj.name
-                    })
-                );
-            }).then(() => {
-                dispatch(syncCollection(projectOptions));
-            });
-
         }
     };
 }
@@ -61,15 +65,45 @@ export function syncCollection(payload) {
     return { type: types.SYNC_CLASS, payload: payload };
 }
 
-export function deleteCollection(id, name = null) {
-    if (window.confirm(`Are you sure you want to delete collection "${name !== null ? name : id}"?`)) {
+export function deleteCollection(id, name = null, uid) {
+    return (dispatch) => {
+        name = (name ? name : id);
+        if (window.confirm(`Are you sure you want to delete collection "${name}"?`)) {
 
-        // Delete Document
-        collections.doc(id).delete()
-            .catch((error) => {
-                console.error("Error removing collection: ", error);
+            // Delete Document
+            fetch(`${collectRef}/collectionID/${name}`, {method: "DELETE", headers: { "x-access-token": uid}}).then((resp) => {
+                if(resp.status !== 204) {
+                    console.error(`Error deleting collection ${name}: ${resp.statusText}`);
+                    return;
+                }
+                dispatch({ type: types.DELETE_CLASS, id: id });
             });
-        return { type: types.DELETE_CLASS, id: id };
+        }
+    };
+}
+/**
+ * 
+ * @param {string} name The name of the collection to be created
+ * @param {*} uid A JWT token to authenticate with the backend
+ */
+export async function createCollection(name, uid) {
+    name = name.toLowerCase().trim();
+    
+    let resp = await fetch(`${collectRef}/`, {
+        method: "POST", 
+        body: JSON.stringify({collectID: name}),
+        headers:{"Content-Type": "application/json", "x-access-token": uid}
+    });
+    if(resp.status === 409){
+        window.alert("Error: A collection already exists with that collection name.");
+        return false;
+    }else if (resp.status !== 201) {
+        window.alert(`Error creating collection: ${resp.statusText}`);
+        return false;
+    }else{
+        asyncCollections(uid);
+        window.alert("Collection added!");
+        return true;
     }
 }
 
@@ -79,5 +113,7 @@ export default {
     asyncCollections,
     deleteCollection,
     syncCollection,
-    syncCollections
+    syncCollections,
+    createCollection,
+    collectRef
 };

src/actions/editorActions.js

@@ -1,8 +1,9 @@
-import { scenes } from "../firebase.js";
 import { loadScene } from "./sceneActions";
 import { DEF_SETTINGS } from "../reducers/scene";
 import * as types from "../constants/ActionTypes";
 
+const sceneRef = "/apiv1/scenes";
+
 /**
  * @function - Sends a signal to the reducer to render the scene
  *
@@ -41,41 +42,41 @@ export function recover() {
 */
 export function fetchScene(id, uid = "anon") {
     return (dispatch) => {  // Return a func that dispatches events after async
-        scenes.doc(id).get().then((scene) => {
-            let data = scene.data();
-            if (data && data.pw) {
-                let pw = prompt("Please enter the PW");
-                if (pw !== data.pw) { return; }
+        fetch(`${sceneRef}/id/${id}`, {redirect: "follow"}).then((response) =>{
+            if(response.redirected && id !== "error-404"){
+                let url = response.url.split("/");
+                window.location.assign(`${window.origin}/scene/${url[url.length - 1]}?redirected=true`);
+                return;
             }
-            if (data && data.code) { // If it worked
-                // render the editor
-                dispatch(render(data.code, uid || "anon"));
-                dispatch(updateSavedText(data.code));
-                // Use default for eventual consistency in db
-                let settings = DEF_SETTINGS;
 
-                // if the incoming scene has a settings, merge default with incoming
-                if (data.settings) {
-                    settings = { ...settings, ...data.settings };
+            if(response.status !== 200){
+                if(response.status === 404){
+                    window.location.assign(window.origin + "/error-404");
+                }else{
+                    console.error("Error retrieving scene. Reason: ", response.statusText);
                 }
+                return;
+            }
 
-                // apply name/desc
-                dispatch(loadScene({
-                    name: data.name ? data.name : "",
-                    id: data.uid === uid ? id : 0,
-                    ts: data.ts ? data.ts : Date.now(),
-                    desc: data.desc ? data.desc : "",
-                    settings: settings
-                }));
-                // apply settings, set id to 0 if not the owner of the scene
-                // dispatch(loadSettings(settings));
+            response.json().then((json) =>{
+                if(json.code){
+                    dispatch(render(json.code, uid || "anon"));
+                    dispatch(updateSavedText(json.code));
+                    let settings = DEF_SETTINGS;
 
-            } else { // If no scene is found and we are not looking for 404 return 404
-                if (id !== "error-404") {
-                    window.location.href = window.origin + "/error-404";
+                    if(json.settings){
+                        settings = {...settings, ...json.settings};
+                    }
+
+                    dispatch(loadScene({
+                        name: json.name ? json.name : "",
+                        id: json.uid === uid ? id : 0,
+                        ts: json.updateTime ? json.updateTime : Date.now(),
+                        desc: json.desc ? json.desc : "",
+                        settings: settings
+                    }));
                 }
-                console.error("Unable to fetch scene:" + id);
-            }
+            });
         });
     };
 }