sync

UI/src/components/oauth-flow/index.js

@@ -3,31 +3,66 @@ import { Redirect } from 'react-router-dom'
 import superagent from 'superagent'
 import { connect } from 'react-redux'
 import { fetchServers } from '../../actions'
+import { URL } from 'url';
 
 @connect()
 class OauthCallback extends Component {
   state = {
     notReady: true,
-    message: 'chotto matte kudasai...'
+    message: 'chotto matte kudasai...',
+    redirect: '/s'
   }
 
-  async componentDidMount () {
+  async fetchUser () {
-    const { body: { url } } = await superagent.get('/api/auth/redirect?url=✔️')
-    try {
     const rsp = await superagent.get('/api/auth/user')
+    sessionStorage.setItem('user', JSON.stringify(rsp.body))
+    sessionStorage.setItem('user.update', JSON.stringify(Date.now()))
     this.props.dispatch({
       type: Symbol.for('set user'),
       data: rsp.body
     })
+  }
+
+  setupUser () {
+    const userUpdateTime = sessionStorage.getItem('user.update') || 0
+    if (+userUpdateTime + (1000 * 60 * 10) > Date.now()) {
+      const user = sessionStorage.getItem('user')
+      if (user != null && user !== '') {
+        this.props.dispatch({
+          type: Symbol.for('set user'),
+          data: JSON.parse(user)
+        })
+      }
+    }
+
+    return this.fetchUser()    
+  }
+
+  async componentDidMount () {
+    const oUrl = new URL(window.location.href)
+    if (oUrl.searchParams.has('r')) {
+      this.setState({ redirect: oUrl.searchParams.get('r') })
+    }
+
+    try {
+      await this.setupUser()
+
       this.props.dispatch(fetchServers)
       this.setState({ notReady: false })
     } catch (e) {
-      window.location.href = url
+      const { body: { url } } = await superagent.get('/api/auth/redirect?url=✔️')
+      const nUrl = new URL(url)
+
+      if (oUrl.searchParams.has('r')) {
+        nUrl.searchParams.set('r', oUrl.searchParams.get('r'))
+      }
+
+      window.location.href = nUrl.toString()
     }
   }
 
   render () {
-    return (this.state.notReady) ? this.state.message : <Redirect to='/s' />
+    return (this.state.notReady) ? this.state.message : <Redirect to={this.state.redirect} />
   }
 }
 

UI/src/pages/Error404.js

@@ -0,0 +1,35 @@
+import React, { Component, Fragment } from 'react'
+import { Link } from 'react-router-dom'
+import Scrollbars from 'react-custom-scrollbars'
+import Typist from 'react-typist'
+import moment from 'moment'
+import './landing.sass'
+import discordLogo from './images/discord-logo.svg'
+import RoleypolyDemo from '../components/demos/roleypoly'
+import TypingDemo from '../components/demos/typing'
+
+const Landing = ({ root = false }) =>
+  <div className="landing uk-width-1-1 uk-text-center">
+    <div className="uk-container">
+      <section>
+        <h1>Self-assignable Discord roles for humans.</h1>
+        <h4>Ditch bot commands once and for all.</h4>
+      </section>
+      <section>
+        <Link to="/oauth/flow" className="uk-button rp-button discord"><img src={discordLogo} className="rp-button-logo"/> Sign in with Discord</Link>
+      </section>
+      <section uk-grid="">
+        {/* Typist */}
+        <div className="uk-width-1-2">
+          <TypingDemo />
+          <p className="subtext">Why are we stuck in the stupid ages?</p>
+        </div>
+        {/* role side */}
+        <div className="uk-width-1-2">
+          <RoleypolyDemo />
+          <p className="subtext">It's 2018. We can do better.</p>
+        </div>
+      </section>
+    </div>
+  </div>
+export default Landing

UI/src/pages/ServerLanding.js

@@ -0,0 +1,35 @@
+import React, { Component, Fragment } from 'react'
+import { Link } from 'react-router-dom'
+import Scrollbars from 'react-custom-scrollbars'
+import Typist from 'react-typist'
+import moment from 'moment'
+import './landing.sass'
+import discordLogo from './images/discord-logo.svg'
+import RoleypolyDemo from '../components/demos/roleypoly'
+import TypingDemo from '../components/demos/typing'
+
+const Landing = ({ root = false }) =>
+  <div className="landing uk-width-1-1 uk-text-center">
+    <div className="uk-container">
+      <section>
+        <h1>Self-assignable Discord roles for humans.</h1>
+        <h4>Ditch bot commands once and for all.</h4>
+      </section>
+      <section>
+        <Link to="/oauth/flow" className="uk-button rp-button discord"><img src={discordLogo} className="rp-button-logo"/> Sign in with Discord</Link>
+      </section>
+      <section uk-grid="">
+        {/* Typist */}
+        <div className="uk-width-1-2">
+          <TypingDemo />
+          <p className="subtext">Why are we stuck in the stupid ages?</p>
+        </div>
+        {/* role side */}
+        <div className="uk-width-1-2">
+          <RoleypolyDemo />
+          <p className="subtext">It's 2018. We can do better.</p>
+        </div>
+      </section>
+    </div>
+  </div>
+export default Landing

UI/src/pages/index.js

@@ -4,10 +4,10 @@ import Scrollbars from 'react-custom-scrollbars'
 import './pages.sass'
 
 import WhyNoRoles from './WhyNoRoles'
-import LandingPage from './Landing'
+import Error404 from './Error404'
-export const Landing = LandingPage // re-export
+export { default as Landing } from './Landing'
-
+export { default as ServerLanding } from './ServerLanding'
-const isDev = process.env.NODE_ENV === 'development'
+export { default as Error404 } from './Error404'
 
 const Pages = (props) => {
   return <div className="pages">
@@ -16,6 +16,7 @@ const Pages = (props) => {
         <Switch>
           <Route path="/help/why-no-roles" component={WhyNoRoles} />
           {/* { isDev ? <Route path="/p/landing" component={Landing} /> : null } */}
+          <Route component={Error404} />
         </Switch>
       </div>
     </Scrollbars>

UI/src/router/index.js

@@ -7,7 +7,7 @@ import Servers from '../components/servers'
 import OauthCallback from '../components/oauth-callback'
 import OauthFlow from '../components/oauth-flow'
 import OauthBotFlow from '../components/oauth-bot-flow'
-import Pages, { Landing } from '../pages'
+import Pages, { Landing, Error404, ServerLanding } from '../pages'
 
 const aaa = (props) => (<div>{ JSON.stringify(props) }</div>)
 
@@ -15,15 +15,28 @@ const aaa = (props) => (<div>{ JSON.stringify(props) }</div>)
 @connect(({ appState, user }) => ({ ready: appState.ready, user }))
 export default class AppRouter extends Component {
   render () {
+    const isLoggedIn = this.props.user.get('isLoggedIn')
+
     if (!this.props.ready) {
       return null
     }
 
     return <Switch>
+      { (isLoggedIn) 
+      
+          // YES LOGGED IN
+        ? <Fragment>
             <Route path='/s' component={Servers} />
-      
             <Route path='/root' component={aaa} />
+          </Fragment>
 
+          // NOT LOGGED IN
+        : <Fragment>
+            <Route path='/s' component={ServerLanding} />
+          </Fragment>
+      }
+      
+      {/* GENERAL ROUTES */}
       <Route path='/oauth/callback' component={OauthCallback} />
       <Route path='/oauth/flow' component={OauthFlow} />
       <Route path='/oauth/bot/flow' component={OauthBotFlow} />
@@ -32,10 +45,12 @@ export default class AppRouter extends Component {
       <Route path='/help' component={Pages} />
 
       <Route exact path='/' render={() => 
-        this.props.user.get('isLoggedIn') 
+        isLoggedIn 
         ? <Redirect to="/s" />
         : <Landing root={true} />
       } />
+
+      <Route component={Error404} />
     </Switch>
   }
 }