Fix browser and package errors

client/.babelrc

@@ -1,4 +1,4 @@
 {
   "presets": ["@babel/preset-env", "@babel/preset-react"],
-  "plugins": ["@babel/plugin-proposal-class-properties"]
+  "plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-syntax-dynamic-import", "dynamic-import-node"]
 }

client/package.json

@@ -20,13 +20,17 @@
   "devDependencies": {
     "@babel/core": "^7.1.2",
     "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
     "autoprefixer": "^9.1.5",
+    "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.4",
+    "babel-plugin-dynamic-import-node": "^2.2.0",
     "connect-history-api-fallback": "^1.5.0",
     "css-loader": "^1.0.0",
     "dotenv-webpack": "^1.5.7",
+    "eslint": "^5.6.1",
     "eslint-config-standard": "^12.0.0",
     "eslint-config-standard-react": "^7.0.2",
     "eslint-plugin-import": "^2.14.0",
@@ -47,7 +51,6 @@
     "script-ext-html-webpack-plugin": "^2.0.1",
     "style-loader": "^0.23.1",
     "webpack": "^4.20.2",
-    "webpack-build": "^1.0.1",
     "webpack-cli": "^3.1.2",
     "webpack-merge": "^4.1.4",
     "webpack-serve": "^2.0.2"
@@ -61,10 +64,21 @@
   },
   "dependencies": {
     "@advancedalgos/key-vault-client": "0.0.5",
-    "@advancedalgos/teams-client": "0.0.8",
+    "@advancedalgos/teams-client": "0.0.9",
     "@material-ui/core": "^3.2.0",
     "@material-ui/icons": "^3.0.1",
+    "apollo-cache-inmemory": "^1.3.5",
+    "apollo-client": "^2.4.2",
+    "apollo-link": "^1.2.3",
+    "apollo-link-context": "^1.0.9",
+    "apollo-link-error": "^1.1.1",
+    "apollo-link-http": "^1.5.5",
+    "apollo-link-ws": "^1.0.9",
+    "apollo-utilities": "^1.0.21",
+    "auth0-lock": "^11.10.0",
     "babel-polyfill": "^6.26.0",
+    "graphql": "^14.0.2",
+    "graphql-tag": "^2.10.0",
     "react": "^16.5.2",
     "react-dom": "^16.5.2",
     "react-router-dom": "^4.3.1"

client/src/App.js

@@ -7,7 +7,7 @@ import CssBaseline from '@material-ui/core/CssBaseline'
 import { withStyles } from '@material-ui/core/styles'
 import { theme, globalStyles } from './styles'
 
-import client from './graphql/apollo'
+import { client } from './graphql/apollo'
 import Auth from './auth'
 
 import { Header, Footer, Home, Callback } from './views'
@@ -19,7 +19,7 @@ export const auth = new Auth(
   result => console.log('auth result', result),
   client
 )
-
+console.log(Header)
 export const MasterApp = () => (
   <BrowserRouter>
     <ApolloProvider client={client}>

client/src/auth/index.js

@@ -4,7 +4,7 @@ import gql from 'graphql-tag'
 import { getItem, setItem, removeItem } from '../utils/local-storage'
 import { validObject, deleteCookie } from '../utils/js-helpers'
 
-import { client } from '../App'
+import { client } from '../graphql/apollo'
 
 import { AUTH_CONFIG } from './Auth0' // create by renaming Auth0.sample.js to Auth0.js and setting vars
 

client/src/graphql/apollo.js

@@ -8,7 +8,7 @@ import { WebSocketLink } from 'apollo-link-ws'
 import { SubscriptionClient } from 'subscriptions-transport-ws'
 import { getMainDefinition } from 'apollo-utilities'
 
-import { getItem } from './utils/local-storage'
+import { getItem } from '../utils/local-storage'
 
 const graphqlEndpoint =
   process.env.NODE_ENV === 'production'

client/src/views/footer/index.js

@@ -48,38 +48,28 @@ const Footer = ({ classes }) => {
         className={classNames(classes.footerContainer)}
       >
         <Grid item xs>
-          <Typography variant='title' color='textPrimary' gutterBottom>
+          <Typography variant='h6' color='textPrimary' gutterBottom>
             Pages
           </Typography>
           <NavLink to='/' className={classNames(classes.footerLink)}>
-            <Typography variant='subheading' color='textSecondary'>
+            <Typography variant='subtitle1' color='textSecondary'>
               Home
             </Typography>
           </NavLink>
-          <NavLink to='/browse' className={classNames(classes.footerLink)}>
-            <Typography variant='subheading' color='textSecondary'>
-              Browse
+          <NavLink to='/teams' className={classNames(classes.footerLink)}>
+            <Typography variant='subtitle1' color='textSecondary'>
+              Teams
             </Typography>
           </NavLink>
-          <NavLink to='/search' className={classNames(classes.footerLink)}>
-            <Typography variant='subheading' color='textSecondary'>
-              Search
-            </Typography>
-          </NavLink>
-          <NavLink to='/contact' className={classNames(classes.footerLink)}>
-            <Typography variant='subheading' color='textSecondary'>
-              Contact
-            </Typography>
-          </NavLink>
-          <NavLink to='/about' className={classNames(classes.footerLink)}>
-            <Typography variant='subheading' color='textSecondary'>
-              About
+          <NavLink to='/key-vault' className={classNames(classes.footerLink)}>
+            <Typography variant='subtitle1' color='textSecondary'>
+              Key Vault
             </Typography>
           </NavLink>
         </Grid>
         <Grid item xs>
 
-          <Typography variant='title' color='textPrimary' gutterBottom>
+          <Typography variant='h6' color='textPrimary' gutterBottom>
               Support
           </Typography>
 
@@ -88,7 +78,7 @@ const Footer = ({ classes }) => {
             target='_blank>'
             className={classNames(classes.footerLink)}
           >
-            <Typography variant='subheading' color='textSecondary'>
+            <Typography variant='subtitle1' color='textSecondary'>
               Documentation
             </Typography>
           </a>
@@ -97,13 +87,13 @@ const Footer = ({ classes }) => {
             target='_blank>'
             className={classNames(classes.footerLink)}
           >
-            <Typography variant='subheading' color='textSecondary'>
+            <Typography variant='subtitle1' color='textSecondary'>
               Telegram
             </Typography>
           </a>
         </Grid>
         <Grid item xs>
-          <Typography variant='title' color='textPrimary' gutterBottom>
+          <Typography variant='h6' color='textPrimary' gutterBottom>
             Modules
           </Typography>
           <a
@@ -111,7 +101,7 @@ const Footer = ({ classes }) => {
             target='_blank>'
             className={classNames(classes.footerLink)}
           >
-            <Typography variant='subheading' color='textSecondary'>
+            <Typography variant='subtitle1' color='textSecondary'>
               Platform
             </Typography>
           </a>
@@ -120,7 +110,7 @@ const Footer = ({ classes }) => {
             target='_blank>'
             className={classNames(classes.footerLink)}
           >
-            <Typography variant='subheading' color='textSecondary'>
+            <Typography variant='subtitle1' color='textSecondary'>
               Users
             </Typography>
           </a>
@@ -129,7 +119,7 @@ const Footer = ({ classes }) => {
             target='_blank>'
             className={classNames(classes.footerLink)}
           >
-            <Typography variant='subheading' color='textSecondary'>
+            <Typography variant='subtitle1' color='textSecondary'>
               Teams
             </Typography>
           </a>
@@ -138,7 +128,7 @@ const Footer = ({ classes }) => {
             target='_blank>'
             className={classNames(classes.footerLink)}
           >
-            <Typography variant='subheading' color='textSecondary'>
+            <Typography variant='subtitle1' color='textSecondary'>
               Key Vault
             </Typography>
           </a>

client/src/views/header/LoggedIn.js

@@ -1,11 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { graphql } from 'react-apollo'
+// import { graphql } from 'react-apollo'
 
 import LoggedInMenu from './LoggedInMenu'
 
-import { GetCurrentMember } from '../../graphql/members'
-
 import { isDefined } from '../../utils/js-helpers'
 
 export const LoggedIn = props => {
@@ -44,4 +42,4 @@ LoggedIn.propTypes = {
   auth: PropTypes.object.isRequired
 }
 
-export default graphql(GetCurrentMember)(LoggedIn)
+export default LoggedIn

client/src/views/header/index.js

@@ -89,7 +89,7 @@ class Header extends Component {
           <Toolbar>
             <img className={classes.img} src={AALogo} alt='Advanced Algos' />
             <Typography
-              variant='title'
+              variant='h6'
               color='inherit'
               className={classes.toolbarTitle}
             >

client/src/views/home/index.js

@@ -34,7 +34,7 @@ const Home = ({ classes }) => (
     <main className={classes.layout}>
       <div className={classes.heroContent}>
         <Typography
-          variant='display3'
+          variant='h3'
           align='center'
           color='textPrimary'
           gutterBottom
@@ -42,7 +42,7 @@ const Home = ({ classes }) => (
           Collaborate. Innovate. Evolve.
         </Typography>
         <Typography
-          variant='title'
+          variant='h6'
           align='center'
           color='textSecondary'
           component='h3'

docs/Upgrade.md

@@ -0,0 +1,7 @@
+# Refactoring Modules for use within Master app
+
+1. Add `basename={window.location.pathname` to BrowserRouter props.
+2. Update Router paths. Remove home, callback routes.
+3. Remove Material-ui theme provider.
+4. Remove Apollo React.
+5. Update auth handling. Pass as props or pull from local storage.