Merge pull request #512 from bryanmontalvan/feature-assetReference

modelReference and textureReference merger

Author: kdvalin

.env.example

@@ -1,2 +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>
+REACT_APP_GOOGLE_CLIENTID=<Required for authenticting with the backend, get this from a team member>

.nvmrc

@@ -1 +1 @@
-10.13
+10.13

src/components/layouts/ModelReference.js src/components/layouts/AssetReference.jssrc/components/layouts/ModelReference.js renamed to src/components/layouts/AssetReference.js

@@ -1,11 +1,11 @@
 import React from "react";
 import Header from "../structural/header/Header";
 import Footer from "../structural/Footer";
-import ModelReferencePage from "../reference/ModelReferencePage";
+import AssetReferencePage from "../reference/AssetReferencePage";
 
 import * as layoutTypes from "../../constants/LayoutTypes.js";
 
-export const ModelReference = ({ editor, editorActions, user, authActions, scene, sceneActions, projectActions, courseActions, projects, courses, match, collectionActions, collections }) => (
+export const AssetReference = ({ editor, editorActions, user, authActions, scene, sceneActions, projectActions, courseActions, projects, courses, match, collectionActions, collections }) => (
     <div className="App">
         <Header
             logging={authActions}
@@ -23,13 +23,13 @@ export const ModelReference = ({ editor, editorActions, user, authActions, scene
             courses={courses}
             collectionActions={collectionActions}
             collections={collections}
-            layoutType={layoutTypes.MODEL_REFERENCE}
+            layoutType={layoutTypes.REFERENCE}
         />
         <div className="row no-gutters">
-            <ModelReferencePage />
+            <AssetReferencePage />
         </div>
         <Footer />
     </div>
 );
 
-export default ModelReference;
+export default AssetReference;

src/components/layouts/TextureReference.js

@@ -0,0 +1,71 @@
+import React from "react";
+import ModelTab from "./ModelReferenceTab";
+import TextureTab from "./TextureReferenceTab";
+
+import {
+    Tabs,
+    Tab,
+    Icon,
+    Hidden,
+} from "@material-ui/core";
+
+import "../../css/ModelReferencePage.css";
+
+export default class AssetReference extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            value: "a",
+        };
+    }
+
+    handleChange = (event, value) => {
+        this.setState({ value });
+    };
+
+    componentDidMount() {
+        const qsa = new URLSearchParams(window.location.search);
+        if (qsa.has("tab") && qsa.get("tab").toLowerCase() === "textures") {
+            this.setState({ value: "b" });
+        }
+    }
+
+    render() {
+        document.title = "Asset | MYR";
+        return (
+            <div id="modelReference-page">
+                <Tabs
+                    id="modelReference-tabs"
+                    variant="fullWidth"
+                    value={this.state.value}
+                    onChange={this.handleChange} >
+                    <Tab
+                        icon={<Icon className="material-icons model">model</Icon>}
+                        label={
+                            <Hidden xsDown>
+                                <div>MODEL</div>
+                            </Hidden>
+                        }
+                        value='a' />
+                    <Tab
+                        icon={<Icon className="material-icons texture">texture</Icon>}
+                        label={
+                            <Hidden xsDown>
+                                <div>TEXTURE</div>
+                            </Hidden>
+                        }
+                        value='b' />
+                </Tabs>
+                {this.state.value === "a" &&
+                    <div style={{ marginTop: 0 }}>
+                        <ModelTab />
+                    </div>}
+                {this.state.value === "b" &&
+                    <div style={{ marginTop: 0 }}>
+                        <TextureTab />
+                    </div>}
+            </div>
+        );
+    }
+}