Onboarding (#238)

* feature discovery animation for new project

* fix newline lint :(

* add onboarding carousel

* routing fix

package.json

@@ -64,6 +64,7 @@
     "firebase": "^4.10.1",
     "flexbox-react": "^4.4.0",
     "lodash": "^4.17.5",
+    "material-auto-rotating-carousel": "^1.7.0",
     "material-ui": "^0.20.0",
     "normalizr": "^3.2.4",
     "prop-types": "^15.6.0",
@@ -73,6 +74,7 @@
     "react-markdown": "^3.1.4",
     "react-redux": "^5.0.7",
     "react-router-dom": "^4.2.2",
+    "react-swipeable-views": "^0.12.13",
     "recharts": "^1.0.0-beta.10",
     "redux": "^3.7.2",
     "redux-logger": "^3.0.6",

src/containers/App.js

@@ -40,6 +40,7 @@ class App extends Component {
     }
 
     if (loggedIn && (location.pathname === '/login' || location.pathname === '/register')) {
+      setPreviousRoute(location.pathname)
       history.replace('/home')
     } else if (!loggedIn && location.pathname !== '/login' && location.pathname !== '/register') {
       setPreviousRoute(location.pathname)

src/containers/Home.js

@@ -3,12 +3,16 @@ import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
 import PropTypes from 'prop-types'
 import _ from 'lodash'
+import { AutoRotatingCarousel, Slide } from 'material-auto-rotating-carousel'
 import { getProjects, getUserProjects } from '../actions/project'
 import Theme from '../../style/theme'
 import BasicSpinner from '../components/misc/BasicSpinner'
 import ProjectList from '../components/home/ProjectList'
 import FloatingActionButton from '../components/misc/FloatingActionButton'
 import FeatureDiscovery from '../components/home/feature-discovery'
+import WrenchIcon from './../assets/icons/wrench.png'
+import LaptopIcon from './../assets/icons/laptop.png'
+import StartupIcon from './../assets/icons/startup.png'
 
 const styles = {
   container: {
@@ -36,17 +40,30 @@ class Home extends Component {
     super(props)
 
     this.state = {
-      open: false
+      open: false,
+      carousel: false
     }
+
     this.viewProject = this.viewProject.bind(this)
     this.newProject = this.newProject.bind(this)
     this.closeFeatureDiscovery = this.closeFeatureDiscovery.bind(this)
+    this.closeCarousel = this.closeCarousel.bind(this)
   }
 
   async componentDidMount() {
     const { session, getProjects, getUserProjects } = this.props
     await getProjects(session.authToken)
     const { result: userProjects } = await getUserProjects(session.authToken)
+
+    // Could probably be done before fetching user projects
+    // Assuming that if users comes in from the register page
+    // they have no projects for sure
+    if (session.previousRoute === '/register') {
+      // eslint-disable-next-line react/no-did-mount-set-state
+      this.setState({ carousel: true })
+      return
+    }
+
     if (!userProjects.contributed.length && !userProjects.owned.length) {
       // eslint-disable-next-line react/no-did-mount-set-state
       this.setState({ open: true })
@@ -65,6 +82,13 @@ class Home extends Component {
     this.setState({ open: false })
   }
 
+  closeCarousel() {
+    this.setState({
+      carousel: false,
+      open: true
+    })
+  }
+
   renderProjects() {
     const { projects } = this.props
     if (projects && projects.fetchedUserProjects) {
@@ -100,6 +124,34 @@ class Home extends Component {
         >
           <FloatingActionButton onClick={this.newProject} />
         </FeatureDiscovery>
+        <AutoRotatingCarousel
+          label="Get started"
+          open={this.state.carousel}
+          style={{ position: 'absolute' }}
+          onStart={this.closeCarousel}
+        >
+          <Slide
+            media={<img src={WrenchIcon} alt="build" />}
+            mediaBackgroundStyle={{ backgroundColor: Theme.colors.accent_u2 }}
+            contentStyle={{ backgroundColor: Theme.colors.accent }}
+            title="Build"
+            subtitle="Build microservice applications with ease"
+          />
+          <Slide
+            media={<img src={StartupIcon} alt="deploy" />}
+            mediaBackgroundStyle={{ backgroundColor: Theme.colors.cyan600 }}
+            contentStyle={{ backgroundColor: Theme.colors.cyan300 }}
+            title="Deploy"
+            subtitle="Deploy applications to the cloud instantly"
+          />
+          <Slide
+            media={<img src={LaptopIcon} alt="monitor" />}
+            mediaBackgroundStyle={{ backgroundColor: Theme.colors.primary_u2 }}
+            contentStyle={{ backgroundColor: Theme.colors.primary }}
+            title="Monitor"
+            subtitle="Easily monitor and maintain deployed applications"
+          />
+        </AutoRotatingCarousel>
       </div>
     )
   }

src/containers/Login.js

@@ -96,10 +96,11 @@ class Login extends Component {
       return
     }
 
-    if (history.action === 'PUSH' && (session.previousRoute !== null)) {
-      setPreviousRoute(null)
+    if (history.action === 'PUSH' && (session.previousRoute !== '/register')) {
+      setPreviousRoute('/login')
       history.goBack()
     } else {
+      setPreviousRoute('/login')
       history.push('/home')
     }
   }

src/containers/Register.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types'
 import RaisedButton from 'material-ui/RaisedButton'
 import { TextField, Paper } from 'material-ui'
 import DocumentTitle from 'react-document-title'
-import { register } from './../actions/session'
+import { setPreviousRoute, register } from './../actions/session'
 import * as validator from './../utils/validator'
 import Theme from './../../style/theme'
 
@@ -31,7 +31,8 @@ const styles = {
 }
 
 const mapDispatchToProps = {
-  register
+  register,
+  setPreviousRoute
 }
 
 class Register extends Component {
@@ -59,7 +60,7 @@ class Register extends Component {
     event.stopPropagation()
 
     const { username, password, email } = this.state
-    const { history, register } = this.props
+    const { history, register, setPreviousRoute } = this.props
 
     const validEmail = validator.validateEmail(email)
     if (typeof validEmail === 'string') {
@@ -86,6 +87,8 @@ class Register extends Component {
     }
     const { result, error } = await register(credentials)
     if (result) {
+      console.log('Here')
+      setPreviousRoute('/register')
       history.push('/home')
     } else {
       if (error.error.type === 'Invalid Request') {