Added WelcomeReminders component for new users

• Added:
- WelcomeReminders component for new users to complete their profile, post new status, follow a user

app/javascript/gabsocial/components/welcome_reminders.js

@@ -0,0 +1,182 @@
+import React from 'react'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { connect } from 'react-redux'
+import moment from 'moment-mini'
+import { openModal } from '../actions/modal'
+import {
+  CX,
+  MODAL_COMPOSE,
+  MODAL_EDIT_PROFILE,
+  BREAKPOINT_EXTRA_SMALL,
+  PLACEHOLDER_MISSING_HEADER_SRC,
+} from '../constants'
+import { me } from '../initial_state'
+import {
+  isMobile,
+  getWindowDimension,
+} from '../utils/is_mobile'
+import Button from '../components/button'
+import Icon from '../components/icon'
+import Text from '../components/text'
+import { makeGetAccount } from '../selectors'
+
+const initialState = getWindowDimension()
+
+class WelcomeReminders extends ImmutablePureComponent {
+
+  state = {
+    isXS: isMobile(initialState.width),
+    profileComplete: false,
+    visible: false,
+  }
+
+  componentDidMount() {
+    this.handleResize()
+    this.handleSetVisible(this.props.account)
+    window.addEventListener('resize', this.handleResize, false)
+  }
+
+  componentDidUpdate(prevProps) {
+    const { account } = this.props
+    console.log("Welcome updated")
+    this.handleSetVisible(account)
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleResize, false)
+  }
+
+  handleSetVisible = (account) => {
+    if (!account) return
+
+    const createdAt = account.get('created_at')
+    const diff = moment().diff(createdAt, 'days')
+
+    // Don't show to accounts older than 7 days old
+    if (diff > 7) {
+      this.setState({ visible: false })
+      return
+    }
+
+    const hasFollowing = account.get('following_count') > 0
+    const hasStatuses = account.get('statuses_count') > 0
+
+    const avatarSrc = account.get('avatar')
+    const avatarMissing = !avatarSrc ? true : avatarSrc.indexOf(PLACEHOLDER_MISSING_HEADER_SRC) > -1
+
+    const headerSrc = !!account ? account.get('header') : undefined
+    const headerMissing = !headerSrc ? true : headerSrc.indexOf(PLACEHOLDER_MISSING_HEADER_SRC) > -1
+    const profileComplete = !avatarMissing && !headerMissing
+
+    const visible = !hasFollowing || !hasStatuses || !profileComplete
+
+    this.setState({ visible, profileComplete })
+  }
+
+  handleResize = () => {
+    const { width } = getWindowDimension()
+    this.setState({ isXS: isMobile(width) })
+  }
+
+  onOpenComposeModal = () => {
+    this.props.dispatch(openModal(MODAL_COMPOSE))
+  }
+
+  onOpenEditProfileModal = () => {
+    this.props.dispatch(openModal(MODAL_EDIT_PROFILE))
+  }
+
+  render() {
+    const { account } = this.props
+    const {
+      isXS,
+      visible,
+      profileComplete,
+    } = this.state
+
+    if (!visible || !account) return false
+
+    return (
+      <div className={[_s.d, _s.flexRow, _s.mb10, _s.w100PC, _s.px10].join(' ')}>
+        <WelcomeReminderItem
+          icon='pencil'
+          title='Send your first post'
+          completed={account.get('statuses_count') > 0}
+          to={isXS ? '/compose' : undefined}
+          action={isXS ? undefined : this.onOpenComposeModal}
+        />
+        <WelcomeReminderItem
+          icon='group'
+          title='Follow others'
+          to='/suggestions'
+          completed={account.get('following_count') > 0}
+        />
+        <WelcomeReminderItem
+          icon='media'
+          title='Complete your profile'
+          completed={profileComplete}
+          action={this.onOpenEditProfileModal}
+        />
+      </div>
+    )
+  }
+}
+
+const WelcomeReminderItem = (props) => {
+  const buttonClasses = CX({
+    d: 1,
+    overflowHidden: 1,
+    flexGrow1: 1,
+    outlineNone: 1,
+    cursorPointer: 1,
+    aiCenter: 1,
+    jcCenter: 1,
+    boxShadowBlock: 1,
+    bgSubtle_onHover: !props.completed,
+    px10: 1,
+    pt10: 1,
+    pb15: 1,
+    bgPrimary: 1,
+    borderColorSecondary: !props.completed,
+    borderColorBrand: props.completed,
+    border1PX: 1,
+    radiusSmall: 1,
+    noUnderline: 1,
+  })
+
+  return (
+    <div className={[_s.d, _s.flexNormal].join(' ')}>
+      <div className={[_s.d, _s.flexGrow1, _s.px10].join(' ')}>
+        <Button
+          noClasses
+          onClick={props.completed ? null : props.action}
+          to={props.completed ? null : props.to}
+          className={buttonClasses}
+        >
+          {
+            props.completed &&
+            <Icon id='check' size='12px' className={[_s.d, _s.cWhite, _s.bottomRightRadiusSmall, _s.bgBrand, _s.py10, _s.px10, _s.posAbs, _s.top0, _s.left0, _s.z2].join(' ')} />
+          }
+          <div className={[_s.d, _s.flexRow, _s.mb10, _s.py10].join(' ')}>
+            <div className={[_s.d, _s.circle, _s.borderDashed, _s.border2PX, _s.px15, _s.py15, _s.borderColorSecondary].join(' ')}>
+              <Icon id={props.icon} className={[_s.px10, _s.py10, _s.cPrimary].join(' ')} size='22px' />
+            </div>
+          </div>
+          <Text size='medium' align='center' weight='bold' className={_s.mb5}>{props.title}</Text>
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+
+const mapStateToProps = (state) => ({
+  account: makeGetAccount()(state, me),
+})
+
+WelcomeReminders.propTypes = {
+  account: ImmutablePropTypes.map,
+}
+
+export default connect(mapStateToProps)(WelcomeReminders)

app/javascript/gabsocial/pages/home_page.js

@@ -13,6 +13,7 @@ import PageTitle from '../features/ui/util/page_title'
 import DefaultLayout from '../layouts/default_layout'
 import TimelineComposeBlock from '../components/timeline_compose_block'
 import TabBar from '../components/tab_bar'
+import WelcomeReminders from '../components/welcome_reminders'
 import WrappedBundle from '../features/ui/util/wrapped_bundle'
 import {
   UserPanel,
@@ -114,6 +115,9 @@ class HomePage extends React.PureComponent {
         />
 
         <TimelineComposeBlock autoFocus={false} />
+
+        <WelcomeReminders />
+
         {children}
         
       </DefaultLayout>