Updated Introduction/onboarding flow

• Updated:
- Introduction/onboarding flow

• Added:
- autoJoinGroup to default "Introduce Yourself" group in gab.com if you post the welcome post in introduction last slide

app/javascript/gabsocial/containers/gabsocial.js

@@ -3,18 +3,21 @@
 import { Provider } from 'react-redux'
 import configureStore from '../store/configureStore'
 import { BrowserRouter, Route } from 'react-router-dom'
+import moment from 'moment-mini'
 import { ScrollContext } from 'react-router-scroll-4'
 import { IntlProvider, addLocaleData } from 'react-intl'
 import { fetchCustomEmojis } from '../actions/custom_emojis'
 import { hydrateStore } from '../actions/store'
+import { MIN_ACCOUNT_CREATED_AT_ONBOARDING } from '../constants'
 import {
   connectUserStream,
   connectStatusUpdateStream,
 } from '../actions/streaming'
 import { getLocale } from '../locales'
 import initialState from '../initial_state'
-import { me } from '../initial_state'
+import { me, isFirstSession } from '../initial_state'
 import UI from '../features/ui'
+import IntroductionPage from '../pages/introduction_page'
 import ErrorBoundary from '../components/error_boundary'
 import Display from './display'
 
@@ -27,9 +30,45 @@ const hydrateAction = hydrateStore(initialState)
 store.dispatch(hydrateAction)
 store.dispatch(fetchCustomEmojis())
 
+const mapStateToProps = (state) => ({
+  accountCreatedAt: !!me ? state.getIn(['accounts', me, 'created_at']) : undefined,
+  shownOnboarding: state.getIn(['settings', 'shownOnboarding']),
+})
+
+@connect(mapStateToProps)
 class GabSocialMount extends PureComponent {
 
+  static propTypes = {
+    shownOnboarding: PropTypes.bool.isRequired,
+    accountCreatedAt: PropTypes.string,
+  }
+
+  state = {
+    shownOnboarding: this.props.shownOnboarding,
+    shouldShow: false,
+  }
+
+  componentDidMount() {
+    if (!!me && this.props.accountCreatedAt) {
+      //If first time opening app, and is new user, show onboarding
+      const accountCreatedAtValue = moment(this.props.accountCreatedAt).valueOf()
+      const shouldShow = isFirstSession && !this.state.shownOnboarding && accountCreatedAtValue > MIN_ACCOUNT_CREATED_AT_ONBOARDING
+
+      if (shouldShow) this.setState({ shouldShow })
+    }
+  }
+
   render () {
+    const { shownOnboarding, shouldShow } = this.state
+    
+    if (!shownOnboarding && shouldShow) {
+      return (
+        <BrowserRouter>
+          <Route path='/' component={IntroductionPage} />
+        </BrowserRouter>
+      )
+    }
+
     return (
       <BrowserRouter>
         <ScrollContext>