Merge pull request #487 from chrismbirmingham/lms-rebased

[Semio] LMS Update

configs/webpack/common.js

@@ -36,7 +36,8 @@ try {
 module.exports = {
   entry: {
     app: './index.tsx',
-    login: './components/Login/index.tsx',
+    login: './components/Login/index.tsx', 
+    plugin: './lms/plugin/index.tsx',
     'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
     'ts.worker': 'monaco-editor/esm/vs/language/typescript/ts.worker.js',
   },
@@ -63,10 +64,11 @@ module.exports = {
       path: false,
     },
     alias: {
+      state: resolve(__dirname, '../../src/state'),
       '@i18n': resolve(__dirname, '../../src/util/i18n'),
     },
     symlinks: false,
-    modules
+    modules //: [resolve(__dirname, '../../src'), 'node_modules']
   },
   context: resolve(__dirname, '../../src'),
   module: {
@@ -135,14 +137,15 @@ module.exports = {
     ],
   },
   plugins: [
-    new HtmlWebpackPlugin({ template: 'index.html.ejs', excludeChunks: ['login'] }),
+    new HtmlWebpackPlugin({ template: 'index.html.ejs', excludeChunks: ['login', 'plugin'] }),
     new HtmlWebpackPlugin({ template: 'components/Login/login.html.ejs', filename: 'login.html', chunks: ['login'] }),
+    new HtmlWebpackPlugin({ template: 'lms/plugin/plugin.html.ejs', filename: 'plugin.html', chunks: ['plugin'] }),
     new DefinePlugin({
       SIMULATOR_VERSION: JSON.stringify(require('../../package.json').version),
       SIMULATOR_GIT_HASH: JSON.stringify(commitHash),
       SIMULATOR_HAS_CPYTHON: JSON.stringify(dependencies.cpython !== undefined),
       SIMULATOR_LIBKIPR_C_DOCUMENTATION: JSON.stringify(libkiprCDocumentation),
-      SIMULATOR_I18N: JSON.stringify(i18n),
+      SIMULATOR_I18N: JSON.stringify(i18n)
     }),
     new NpmDtsPlugin({
       root: resolve(__dirname, '../../'),

express.js

@@ -21,6 +21,16 @@ try {
   throw e;
 }
 
+// set up rate limiter: maximum of 100 requests per 15 minute
+var RateLimit = require('express-rate-limit');
+var limiter = RateLimit({
+  windowMs: 15 * 60 * 1000, // 15 minutes
+  max: 100, // max 100 requests per windowMs
+});
+
+// apply rate limiter to all requests
+app.use(limiter);
+
 app.use((req, res, next) => {
   res.header("Access-Control-Allow-Origin", "*");
   res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
@@ -233,6 +243,11 @@ app.get('/login', (req, res) => {
   res.sendFile(`${__dirname}/${sourceDir}/login.html`);
 });
 
+
+app.get('/lms/plugin', (req, res) => {
+  res.sendFile(`${__dirname}/${sourceDir}/plugin.html`);
+});
+
 app.use('*', (req, res) => {
   setCrossOriginIsolationHeaders(res);
   res.sendFile(`${__dirname}/${sourceDir}/index.html`);

package.json

@@ -20,6 +20,8 @@
   "devDependencies": {
     "@babel/core": "^7.9.0",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
+    "@types/chai": "^4.3.3",
+    "@types/gapi": "^0.0.44",
     "@types/gettext-parser": "^4.0.2",
     "@types/history": "^4.7.2",
     "@types/jest": "^29.4.0",
@@ -54,8 +56,8 @@
   },
   "dependencies": {
     "@babylonjs/core": "6.18.0",
-    "@babylonjs/loaders": "6.18.0",
     "@babylonjs/havok": "^1.0.0",
+    "@babylonjs/loaders": "6.18.0",
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
     "@fortawesome/free-brands-svg-icons": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
@@ -70,6 +72,7 @@
     "dotenv": "^10.0.0",
     "dotenv-expand": "^5.1.0",
     "express-http-proxy": "^1.6.3",
+    "express-rate-limit": "^7.4.0",
     "firebase": "^9.0.1",
     "form-data": "^4.0.0",
     "history": "^4.7.2",
@@ -83,6 +86,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-loading": "^2.0.3",
+    "react-markdown": "^8.0.1",
     "react-redux": "^7.2.4",
     "react-reverse-portal": "^2.0.1",
     "react-router": "^5.0.0",

src/App.tsx

@@ -14,13 +14,17 @@ import Root from './pages/Root';
 import ChallengeRoot from './pages/ChallengeRoot';
 import DocumentationWindow from './components/documentation/DocumentationWindow';
 import { DARK } from './components/constants/theme';
+import CurriculumPage from './lms/CurriculumPage';
+import { UsersAction } from './state/reducer';
 
 export interface AppPublicProps {
 
 }
 
 interface AppPrivateProps {
   login: () => void;
+  setMe: (me: string) => void;
+  loadUser: (uid: string) => void;
 }
 
 interface AppState {
@@ -68,10 +72,16 @@ class App extends React.Component<Props, State> {
   componentDidMount() {
     this.onAuthStateChangedSubscription_ = auth.onAuthStateChanged(user => {
       if (user) {
-        this.setState({ loading: false });
+        console.log('User detected.');
+        this.props.loadUser(user.uid);
+        this.props.setMe(user.uid);
       } else {
         this.props.login();
       }
+
+      this.setState({ loading: false }, () => {
+        if (!user) this.props.login();
+      });
     });
   }
 
@@ -94,6 +104,7 @@ class App extends React.Component<Props, State> {
           <Route path="/tutorials" exact component={Tutorials} />
           <Route path="/scene/:sceneId" component={Root} />
           <Route path="/challenge/:challengeId" component={ChallengeRoot} />
+          <Route path="/curriculum" component={CurriculumPage} />
         </Switch>
         <DocumentationWindow theme={DARK} />
       </>
@@ -134,5 +145,7 @@ export default connect((state: ReduxState) => {
   login: () => {
     console.log('Redirecting to login page', window.location.pathname);
     window.location.href = `/login${window.location.pathname === '/login' ? '' : `?from=${window.location.pathname}`}`;
-  }
+  },
+  setMe: (me: string) => dispatch(UsersAction.setMe({ me })),
+  loadUser: (uid: string) => dispatch(UsersAction.loadOrEmptyUser({ userId: uid }))
 }))(App) as React.ComponentType<AppPublicProps>;

src/asset-viewer/AssetViewerPage.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+export default () => {
+  return (
+    <div>
+      <h1>Asset Viewer</h1>
+    </div>
+  );
+};

src/asset-viewer/index.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import * as ReactDom from 'react-dom';
+
+
+import { Provider as StyletronProvider } from "styletron-react";
+import { Client as Styletron } from "styletron-engine-atomic";
+
+import { Provider as ReduxProvider } from 'react-redux';
+import store from '../state';
+import AssetViewerPage from './AssetViewerPage';
+
+const reactRoot = document.getElementById('reactRoot');
+
+const engine = new Styletron({ prefix: 'style' });
+
+ReactDom.render(
+  <StyletronProvider value={engine} debugAfterHydration>
+    <ReduxProvider store={store}>
+      <AssetViewerPage />
+    </ReduxProvider>
+  </StyletronProvider>,
+  reactRoot
+);