v0.3 release (#75)

* remove react from docker-compose

* fixed react import issue

* renamed containers created with compose

* updated to latest beta of strapi and removed sqlite3 dependency

* use mysql for all database environments

* host helper for getting cms and compile hosts

* add client homepage for build

* root docker file builds client and cms and packages them together

* host helper just saves consts

* use postgres for production

* Basic dynamic block rendering

* database connection settings

* don't use localhost

* Added example model

* Final cleanup

* renmae host hellper

* fix hosts import

* dep update cms

* Rename Hosts.js to hosts.js

* use postgres

* updated documentation

* + documentation improvements

* init app.json

* added postgresql addon

* as and options for app.json

* use relative path for cms api calls

* use localhost for development

* Cleaned up warning messages, renamed app in manifest

* Solves issue #18 - React builds but is not usable

#18

* Updated client README

* Cleaning up documentation

* Changed client to use hosts.js in place of deployment config files

* Updated git flow documentation

* dakota made me do this :(

* Setting correct paths for blockly libs

* Added button hover information

* created a middleware to serve the frontend w/ react router

* updated documentation

* public/frontend

* fixed json parsing err on cms readme

* update read me

* dep

* added public url to build process for cleaner client dev

* fixed host resolution for cms @home view

* git ignore public/frontend

* include frontend folder

* fix prod app bundling

* Changed root routing from /Home to /

* topics now has activities

* Changed dependency use to imported script

* Fixed CORS issue with strapi query during development

* Cleaning up console.log statements for dev merge


Fixing Merge conflict

* Changed path to "/workspace" and fixed warnings

* fixed build-frontend script err

* added the .env file to the client setup documentation

* updated root documentation to follow client setup

* add localhost:1337 to development cors

* removed client .env and added cross-env for build-frontend script

* block category belongs to many blocks

* updated admin build

* activities are only related to their blocks now and return a custom toolbox

* remove block category definition

* blocks now have descriptions not definitions

* enable dev db to build from an sql file

* remove .cache

* cross-env is not good

* display nested activity details

* Refactored activities to pull from updated API

* Moved some js functionality to helper file

* added type to topic find

* restored activities find controller and created seperate route/hander for activities toolbox

* created dataaccess layer to simplify api calls

* implemented new api in client and added dataaccess calls

* condensed dataaccess files

* moved hosts to dataaccess

* fix compile preflight err

* bump

* fixed missing toolbox on re-render

* Update README.md

* Update README.md

* Formatting dump

* clean up, clean up

* update workspace useEffect for render err and sensitivety

* added alert for arduino code

* Abstraction is trash and so are you

* wrote an init script that uses pg_restore rather than importing a .sql

* updated documentation for adding the dump to scripts

* script formating

* All .sh files now keep LF line endings when pulled to windows

* Updated documentation for /admin not beuilding

* fixed comment in .gitattributes

* migrated to strapi 3.0.1

* added custom ssl config

* added template field to activity and removed topic from activity

* review apps as containers

* import staging db in review app

* updated documentation links to latest strapi docs

* get xml from workspace and load workspace w/ activity xml

* Removed unnecessary function

* Workspace now saves on page refresh

* Removed alert for compile request

* Added basic login component and renamed home -> dashboard

* Added basic page routing with home and mentor login

* Added Private Routing

* Added login styling and fixed privateroute

* Adjusted workspace css

* Added header component

* Implemented basic css color scheme

* activities can only belong to one topic

* commit development db and rewrote db script for other environment imports

* added classroom, mentor, school, session, student, submission models

* updated db dump

* WIP: Committing Minor Style Updates

* Render school list on teacher dashboard

* submissions don't exist under a session

* add user to metor

* add result and status to submission

* update dev db dump

* add custom session logic for getting by code, creating, and joining

* Adding session listings

* update dev db

* fix sequence on session table

* added validation to session/join

* check the classroom for join

* add antd and less; begin styling workspace w/ color scheme

* add second pannel to workspace view; use logo; style panels;

* finished general styling for workspace view

* add carousel for activity diagrams

* remove unused styles

* fix container height issue

* blockly canvas expand a little more on larger screen

* Manual cleanup from merge conflict

* Added auth to route requests

* change .css files to .less files; basic styling for home and login pages

* removed submissions/attempts till we flesh this out more

* sessions now have activities

* sessions has students, and students has sessions

* get /sessions/code/:code returns a list of classroom students

* post /sessions/join logs in a classroom student

* added required fields to session and added validation to create session

* cleaned up validation errors

* cleaned up find topics

* Cleaned up warnings

* display mentor session data in table

* Now authenticating student and storing jwt

* update jwt config

* created isStudent policy

* added student info to ctx state in the permissions policy

* created /sessions/student/activities

* added student to normal user object to eliminate proxy student user

* moved frontend middleware settings to middleware config

* added /students/me

* comments

* added /mentor/me

* modified student auth

* created hasClassroom policy to check if a mentor has access to a classroom

* Added new student view

* Setup basic routing from student to workspace

* added hasClassroom to create session and now do 404 instead of 400

* updated dump

* Fixed error on arduino code alert

* updated cms/api documentation

* Update README.md

* align table items

* Updating /client docs

* add filter on classes; add sort alphabetically on session name; update db on session active toggle

* Added basic errors for logins

* Added bearer auth to /toolbox request

* WIP: Not populating with data

* created hasSession policy

* added custom update logic and moved the util functions into session service

* fix sessions table populating bug

* move setSessions into getClassrooms callback

* changed code generation and made the code a string to support leading 0s

* fixed session table and mentor update perm in db dump

* fix workspace UI bugs

* finished join code/teacher login UI

* began student login view

* add and populate student name/animal dropdowns

* use array of ids on student jwt token

* fix student/me endpoint; fix setUser session bug

* set placeholder for student login selectors

* fix 'lo0se join code on refresh' bug

* css refactor and minor styling fixes to workspace

* style student view; handle routing to workspace for activity

* added fault protection to policies

* added validator service

* fixed join logic and beefed up other session controllers

* finished stuents/me and simplified student user token

* await the attach call for new students to a session

* fix postJoin function in client

* join with studentId as ints

* Added sandbox view and basic routing, need /toolbox/all

* Created /all request and cleaned up leftover code from workspace

* added sandbox toolbox endpoint

* make /sandbox/toolbox

* fix errors and warnings on render of new views

* broke out sandbox toolbox endpoint to its own controller

* updated db dump

* fix set state before mount

* remove useCallback

* remove dashboard logging

* Fixed render error for toolbox map

* student view styling fix

* Added sandbox button back

* removed old config

* updated frontend routes

Co-authored-by: Dakota Rennemann <[email protected]>
Co-authored-by: nionata <[email protected]>
Co-authored-by: Adam Tamargo <[email protected]>

.gitignore

@@ -14,6 +14,7 @@ yarn-error.log*
 *.sql
 .cache/
 *.dump
+!development_db.dump
 
 # Packages
 *.zip

client/README.md

@@ -8,9 +8,21 @@
 
 1. Install [Node](https://nodejs.org/en/) and [Yarn](https://classic.yarnpkg.com/en/docs/install#windows-stable)
 2. Run `yarn` to install project dependencies
+3. Run `yarn start` to startup the client (please note that much of the functionality will not work without also starting up the backend services)
 
 <br />
 
+## Project Structure
+
+This react project has the following file structure rules:
+1. Routing is handled from client root in `App.js`, rendered in react by `index.js`
+2. Components which render as a page are generally listed under the `/views` folder
+3. Component styling is placed into a folder under the name of the main component alongside the component and sub-component files. 
+    - As an example the folder `/Home` contains the `Home.js` component, the `Home.css` styling, and a couple of sub-components.
+4. `/Utils` contains additional utility functions like different database requests or authentication handlers
+
+<br/>
+
 ## Routing
 
 All client routes must be registered in the cms frontend middleware to ensure they are handled by react. Additional information and implementation instructions are in the [cms](/cms#static-assets) documentation.

client/craco.config.js

@@ -0,0 +1,31 @@
+const CracoLessPlugin = require('craco-less');
+
+module.exports = {
+    plugins: [
+        {
+            plugin: CracoLessPlugin,
+            options: {
+                lessLoaderOptions: {
+                    lessOptions: {
+                        modifyVars: {
+                            '@primary-color': '#3d5c82', // primary color for all components
+                            '@link-color': '#3d5c82', // link color
+                            '@success-color': '#52c41a', // success state color
+                            '@warning-color': '#faad14', // warning state color
+                            '@error-color': '#f5222d', // error state color
+                            '@font-size-base': '14px', // major text font size
+                            '@heading-color': 'rgba(0, 0, 0, 0.85)', // heading text color
+                            '@text-color': 'rgba(0, 0, 0, 0.65)', // major text color
+                            '@text-color-secondary': 'rgba(0, 0, 0, 0.45)', // secondary text color
+                            '@disabled-color': 'rgba(0, 0, 0, 0.25)', // disable state color
+                            '@border-radius-base': '4px', // major border radius
+                            '@border-color-base': '#d9d9d9', // major border color
+                            '@box-shadow-base': '0 2px 8px rgba(0, 0, 0, 0.15)', // major shadow for layers
+                        },
+                        javascriptEnabled: true,
+                    },
+                },
+            },
+        },
+    ],
+};

client/package.json

@@ -3,10 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@craco/craco": "^5.6.4",
+    "@material-ui/core": "^4.10.2",
+    "@material-ui/icons": "^4.9.1",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "antd": "^4.3.5",
     "axios": "^0.19.2",
+    "craco-less": "^1.17.0",
     "cross-env": "^7.0.2",
     "http-server": "^0.12.3",
     "react": "^16.13.1",
@@ -15,9 +20,9 @@
     "react-scripts": "3.4.1"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "craco start",
     "start-build": "http-server build -p 3000",
-    "build": "react-scripts build",
+    "build": "craco build",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

client/src/App.js

@@ -1,21 +1,32 @@
 import React, { useState } from 'react'
-import { Route, Switch } from 'react-router-dom'
-import Workspace from "./views/Workspace/Workspace"
+import { Route, Switch, useHistory } from 'react-router-dom'
+import PrivateRoute from './Utils/PrivateRoute';
+
 import Home from "./views/Home/Home"
+import Workspace from "./views/Workspace/Workspace"
+import Dashboard from "./views/Dashboard/Dashboard"
+import Student from "./views/Student/Student"
 import NotFound from "./views/NotFound"
+import StudentLogin from "./views/StudentLogin/StudentLogin";
+import Sandbox from "./views/Sandbox/Sandbox"
 
 const App = () => {
-    const [selectedActivity, setSelectedActivity] = useState()
+    const [selectedActivity, setSelectedActivity] = useState('');
+    let history = useHistory()
 
     return (
         <div>
             <Switch>
-                <Route exact path={"/"} render={(props) => <Home setSelectedActivity={setSelectedActivity}/>}/>
-                <Route path={"/workspace"} render={(props) => <Workspace selectedActivity={selectedActivity}/>}/>
+                <Route exact path={"/"} render={() => <Home history={history} />}/>
+                <Route exact path={"/login"} render={() => <StudentLogin history={history} />}/>
+                <PrivateRoute exact path={"/dashboard"} render={() => <Dashboard history={history}/>}/>
+                <PrivateRoute exact path={"/student"} render={() => <Student history={history} selectedActivity={selectedActivity} setSelectedActivity={setSelectedActivity}/> } />
+                <Route path={"/workspace"} render={() => <Workspace selectedActivity={selectedActivity} history={history}/>}/>
+                <Route path={"/sandbox"} render={() => <Sandbox history={history} />} />
                 <Route component={NotFound}/>
             </Switch>
         </div>
     )
 }
 
-export default App;
+export default App

client/src/Utils/AuthRequests.js

@@ -0,0 +1,31 @@
+import { cms } from './hosts'
+import axios from "axios";
+
+// return user data from session storage
+export const getUser = () => {
+    const userStr = sessionStorage.getItem('user');
+    return (userStr ? JSON.parse(userStr) : null);
+}
+
+// return user token from strapi
+export const postUser = async (body) => {
+    const response = await axios.post(`${cms}/auth/local`, body);
+    return response;
+}
+
+// return token from session storage
+export const getToken = () => {
+    return sessionStorage.getItem('token') || null;
+}
+
+// remove the token ans user from teh session storage
+export const removeUserSession = () => {
+    sessionStorage.removeItem('token');
+    sessionStorage.removeItem('user');
+}
+
+// set the token and user from teh session storage
+export const setUserSession = (jwt, user) => {
+    sessionStorage.setItem('token', jwt);
+    sessionStorage.setItem('user', user);
+}

client/src/Utils/PrivateRoute.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Route, Redirect } from 'react-router-dom';
+import { getToken } from './AuthRequests';
+
+// creates private route handler
+function PrivateRoute({ render: Render, ...rest }) {
+    return(
+        <Route
+            {...rest}
+            render={(props) => getToken() ? <Render {...props} /> : <Redirect to={{pathname: '/', state: { from: props.location }}} />}
+            />
+    )
+}
+
+export default PrivateRoute;

client/src/dataaccess/hosts.js → client/src/Utils/hosts.js

@@ -1,6 +1,6 @@
-import development from '../config/development.json'
-import staging from '../config/staging.json'
-import production from '../config/production.json'
+import development from './config/development.json'
+import staging from './config/staging.json'
+import production from './config/production.json'
 
 const getHosts = () => {
     const { hostname } = window.location

client/src/Utils/requests.js

@@ -0,0 +1,61 @@
+import {cms, compile} from './hosts'
+import axios from 'axios'
+
+
+export const getTopics = async (jwt) => (await axios.get(`${cms}/topics`, {
+    headers: {
+        Authorization:
+            `Bearer ${jwt}`
+    }
+})).data
+
+export const getActivityToolboxAll = async () => (await axios.get(`${cms}/sandbox/toolbox`)).data
+
+export const getActivityToolbox = async (id, jwt) => (await axios.get(`${cms}/activities/toolbox/${id}`, {
+    headers: {
+        Authorization:
+            `Bearer ${jwt}`
+    }
+})).data
+
+export const getMentor = async (jwt) => (await axios.get(`${cms}/mentors/me`, {
+    headers: {
+        Authorization:
+            `Bearer ${jwt}`
+    }
+})).data
+
+export const getClassroom = async (id, jwt) => (await axios.get(`${cms}/classrooms/${id}`, {
+    headers: {
+        'Authorization':
+            `Bearer ${jwt}`
+    }
+})).data
+
+export const getClassrooms = async (ids, jwt) => ( Promise.all(ids.map( id => getClassroom(id,jwt) )))
+
+export const getActivities = async (jwt) => (await axios.get(`${cms}/sessions/student/activities`, {
+    headers: {
+        'Authorization':
+            `Bearer ${jwt}`
+    }
+})).data
+
+export const getStudents = async (code) => (await axios.get(`${cms}/sessions/code/${code}`)).data
+
+export const postJoin = async (code, ids) => (await axios.post(`${cms}/sessions/join`, {
+        "students": ids,
+        "code": code
+    }
+)).data
+
+export const compileCode = async (body) => (await axios.post(`${compile}/compile`, body)).data
+
+export const updateSession = async (id, session, jwt) => (await axios.put(`${cms}/sessions/${id}`, session,
+    {
+        headers: {
+            'Authorization':
+                `Bearer ${jwt}`
+        }
+    }
+)).data

client/src/assets/style.less

@@ -0,0 +1,58 @@
+@import '~antd/dist/antd.less';
+
+
+#colors() {
+    primary: #3D5C82;
+    secondary: #5BABDE;
+    tertiary: #F4F4F5;
+    text-primary: #414141;
+    text-secondary: #FFFFFF;
+}
+
+.flex {
+    display: flex;
+}
+
+.flex-column {
+    flex-direction: column;
+}
+
+.flex-row {
+    flex-direction: row;
+}
+
+.space-between {
+    justify-content: space-between;
+}
+
+.justify-end {
+    justify-content: flex-end;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.container {
+    height: 100%;
+    width: 100%;
+    background-color: #colors[primary];
+    min-height: 100vh;
+}
+
+.vertical-container {
+    margin: 1.5em;
+}
+
+.hvr-info {
+    cursor: pointer;
+}
+
+.card {
+    background-color: #colors[tertiary];
+    padding: .7em;
+}
+
+.overflow-visible {
+    overflow: visible;
+}

client/src/components/Header.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import './Header.less'
+
+function Header(props) {
+    return(
+        <div className="navBar">
+            <div className="navItems">
+                <h1> Welcome {props.user}! </h1>
+                <input type='button' onClick={props.handleLogout} value="Logout" className='navItem'/>
+            </div>
+        </div>
+    )
+}
+
+export default Header

client/src/components/Header.less

@@ -0,0 +1,32 @@
+@import "../assets/style.less";
+
+.navBar {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: nowrap;
+    width: 100%;
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    z-index:2;
+    height: 8vh;
+    background-color: #colors[secondary];
+}
+
+/* Each card used on the site */
+.navItem {
+    float: right;
+    color: black;
+    height: 100%;
+    margin: 2.5vh 1vw 1vh 1vw;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    cursor: pointer;
+}
+
+.navItems {
+    display: flex;
+    justify-content: center;
+    flex-direction: row;
+    width: 100vw;
+}

client/src/index.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
+import './index.less';
 import App from './App';
 import { BrowserRouter as Router } from 'react-router-dom'
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
-    <Router>
+    <Router >
         <App/>
     </Router>,
     document.getElementById('root')