(feat) hashtagsStep

locales/en.json

@@ -536,7 +536,12 @@
     "welcomeNew":"WELCOME",
     "welcomePrivacy":"Your privacy is our priority. You are free to provide as much or as little information as you wish for better recommendations and to connect with people in your local area.",
     "welcomeLater":"No thanks, I’ll do it later",
-    "welcomeSetup":"Let’s Get Setup"
+    "welcomeSetup":"Let’s Get Setup",
+    "profileSetup":"PROFILE SETUP",
+    "hashtagTitle":"Hashtags",
+    "hashtagStep":"Step 1 of 4",
+    "hashtagInterest":"Some hashtags that may be of interest to you.",
+    "skipStep":"Skip"
   },
   "wallet": {
     "inviteFriend":"Invite a Friend",

src/common/components/shapes/Rectangle.js

@@ -63,7 +63,7 @@ const styles = StyleSheet.create({
     backgroundColor: '#FFF',
     zIndex: -5,
     width: wWidth * 0.83,
-    height: wHeight * 0.65,
+    height: wHeight * 0.75,
   },
   bulb: {
     width: 26.25,

src/onboarding/OnboardingScreenNew.js

@@ -21,7 +21,7 @@ import {
 } from 'mobx-react/native'
 
 import Wizard from '../common/components/Wizard';
-import HashtagsStep from './steps/HashtagsStep';
+
 import SuggestedChannelsStep from './steps/SuggestedChannelsStep';
 import SuggestedGroupsStep from './steps/SuggestedGroupsStep';
 import ChannelSetupStep from './steps/ChannelSetupStep';
@@ -31,6 +31,7 @@ import { CommonStyle as CS } from '../styles/Common';
 import navigationService from '../navigation/NavigationService';
 import i18nService from '../common/services/i18n.service';
 import CenteredLoading from '../common/components/CenteredLoading';
+import HashtagsStepNew from './steps/HashtagsStepNew';
 
 @observer
 @inject('onboarding', 'hashtag')
@@ -65,13 +66,13 @@ export default class OnboardingScreenNew extends Component {
     if (!this.props.onboarding.progress) {
       return <CenteredLoading/>
     }
-    const completed_items = this.props.onboarding.progress.completed_items;
+    const completed_items = [];//this.props.onboarding.progress.completed_items;
 
     if (!completed_items.some(r => r == 'creator_frequency')) {
       steps.push({component: <WelcomeStepNew onNext={this.onNext} onFinish={this.onFinish}/>, ready: () => false});
     }
     if (!completed_items.some(r => r == 'suggested_hashtags')) {
-      steps.push({component: <HashtagsStep/>});
+      steps.push({component: <HashtagsStepNew onNext={this.onNext}/>});
     }
     if (!completed_items.some(r => r == 'suggested_channels')) {
       steps.push({component: <SuggestedChannelsStep/>});

src/onboarding/steps/HashtagsStepNew.js

+import React, { Component } from 'react';
+
+import {
+  View,
+  Text,
+  TouchableHighlight,
+  StyleSheet,
+} from 'react-native';
+import { observer, inject } from 'mobx-react';
+
+import { CommonStyle as CS } from '../../styles/Common';
+import TagSelect from '../../common/components/TagSelect';
+import TagInput from '../../common/components/TagInput';
+import i18n from '../../common/services/i18n.service';
+import { Button } from 'react-native-elements';
+import { ComponentsStyle } from '../../styles/Components';
+
+@inject('hashtag')
+@observer
+export default class HashtagsStepNew extends Component {
+
+  componentDidMount() {
+    this.props.hashtag.setAll(true);
+    this.props.hashtag.loadSuggested().catch(err => {
+      logService.exception(err);
+    });
+  }
+
+  render() {
+    return (
+      <View style={[CS.flexContainer, CS.columnAlignCenter]}>
+        <View style={styles.textsContainer}>
+          <Text style={[CS.onboardingTitle, CS.marginTop4x, CS.marginBottom3x]}>{i18n.t('onboarding.profileSetup')}</Text>
+          <Text style={CS.onboardingSubtitle}>{i18n.t('onboarding.hashtagTitle')}</Text>
+          <Text style={CS.onboardingSteps}>{i18n.t('onboarding.hashtagStep')}</Text>
+          <Text style={[CS.fontM, CS.marginTop4x, CS.marginBottom3x]}>{i18n.t('onboarding.hashtagInterest')}</Text>
+        </View>
+        <View style={styles.hashtagContainer}>
+          <TagSelect
+            tagStyle={[CS.backgroundWhite]}
+            textSelectedStyle={{color: '#5DBAC0'}}
+            textStyle={[CS.fontL, CS.colorDarkGreyed]}
+            containerStyle={[CS.rowJustifyStart]}
+            onTagDeleted={this.props.hashtag.deselect}
+            onTagAdded={this.props.hashtag.select}
+            tags={this.props.hashtag.suggested}
+            disableSort={true}
+          />
+        </View>
+        <View style={[styles.containerButton]}>
+            <Button
+              onPress={this.props.onNext}
+              title={i18n.t('onboarding.skip')}
+              backgroundColor="#FFF"
+              borderRadius={2}
+              containerViewStyle={[styles.button, ComponentsStyle.loginButton]}
+              textStyle={ComponentsStyle.loginButtonText}
+            />
+            <Button
+              onPress={this.props.onNext}
+              title={i18n.t('continue')}
+              backgroundColor="#5DBAC0"
+              borderRadius={2}
+              containerViewStyle={[styles.button, ComponentsStyle.loginButton]}
+              textStyle={ComponentsStyle.loginButtonText}
+            />
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  containerButton: {
+    flex: 2,
+    marginLeft: 10,
+    marginRight: 20,
+    marginBottom: 20,
+    justifyContent: 'flex-end',
+    width: '80%',
+  },
+  button: {
+    marginTop: 40,
+    alignSelf: 'stretch',
+  },
+  hashtagContainer: {
+    flex: 3,
+    marginLeft: 20,
+    marginRight: 20,
+  },
+  textsContainer: {
+    flex: 3,
+    alignItems: 'center',
+  }
+});
\ No newline at end of file

src/onboarding/steps/WelcomeStepNew.js

@@ -27,9 +27,9 @@ export default class WelcomeStep extends Component {
     return (
       <View style={[CS.flexContainer, CS.columnAlignCenter]}>
         <Icon name="md-thumbs-up" size={36} color="#FED12F" style={{paddingTop:1}}/>
-        <Text style={styles.welcome}>{i18nService.t('onboarding.welcomeNew')}</Text>
+        <Text style={CS.onboardingTitle}>{i18nService.t('onboarding.welcomeNew')}</Text>
 
-        <Text style={styles.username}>@{this.props.user.me.name}</Text>
+        <Text style={CS.onboardingSubtitle}>@{this.props.user.me.name}</Text>
 
         <Text style={styles.privacy}>{i18nService.t('onboarding.welcomePrivacy')}</Text>
 
@@ -62,18 +62,6 @@ const styles = StyleSheet.create({
     marginTop: 40,
     alignSelf: 'stretch',
   },
-  welcome: {
-    color: '#A2A2A2',
-    fontSize: 13,
-    lineHeight: 18,
-    letterSpacing: 2,
-  },
-  username: {
-    color: '#4A4A4A',
-    fontSize: 26,
-    lineHeight: 37,
-    fontWeight: '600',
-  },
   privacy: {
     color: '#9B9B9B',
     fontSize: 16,

src/styles/Common.js

@@ -595,5 +595,22 @@ export const CommonStyle = StyleSheet.create({
     borderWidth: 1,
     borderColor: '#e4e4e4',
     borderRadius: 2
-  }
+  },
+  onboardingTitle: {
+    color: '#A2A2A2',
+    fontSize: 13,
+    lineHeight: 18,
+    letterSpacing: 2,
+  },
+  onboardingSubtitle: {
+    color: '#4A4A4A',
+    fontSize: 26,
+    lineHeight: 37,
+    fontWeight: '600',
+  },
+  onboardingSteps: {
+    color: '#A2A2A2',
+    fontSize: 11,
+    lineHeight: 15,
+  },
 });