(feat) channel info and suggested groups

src/common/components/InfoPopup.js

+import React, {Component} from 'react';
+import {StyleSheet, Text} from 'react-native';
+import IconMC from 'react-native-vector-icons/MaterialCommunityIcons';
+import {Tooltip} from 'react-native-elements';
+
+export default class InfoPopup extends Component {
+
+  render() {
+    return (
+      <Tooltip
+        pointerColor={'#4A90E2'}
+        popover={<Text style={styles.textTooltip}>{this.props.info}</Text>}
+        containerStyle={styles.tooltip}>
+        <IconMC name="information-variant" size={16} onPress={this.showPopup} />
+      </Tooltip>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  tooltip: {
+    backgroundColor: '#4A90E2',
+  },
+  textTooltip: {
+    color: '#FFF',
+  },
+});

src/common/components/Input.js

 import React, { Component } from 'react';
-import {TextInput, Text, View, StyleSheet, TouchableOpacity} from 'react-native';
+import {TextInput, Text, View, StyleSheet, TouchableOpacity, Modal, TouchableHighlight, Alert} from 'react-native';
 import { ComponentsStyle } from '../../styles/Components';
 import i18n from '../services/i18n.service';
 import { CommonStyle } from '../../styles/Common';
 import IconMC from 'react-native-vector-icons/MaterialCommunityIcons';
 import PhoneInput from 'react-native-phone-input';
 import DateTimePicker from 'react-native-modal-datetime-picker';
+import InfoPopup from './InfoPopup';
 
 export default class Input extends Component {
 
@@ -14,17 +15,17 @@ export default class Input extends Component {
   };
 
   showDatePicker = () => {
-    this.setState({ datePickerVisible: true });
-  }
+    this.setState({datePickerVisible: true});
+  };
 
   dismissDatePicker = () => {
-    this.setState({ datePickerVisible: false });
-  }
+    this.setState({datePickerVisible: false});
+  };
 
-  confirmDatePicker = (date) => {
+  confirmDatePicker = date => {
     this.props.onChangeText(date.toLocaleDateString());
     this.dismissDatePicker();
-  }
+  };
 
   textInput = () => {
     return (
@@ -76,7 +77,7 @@ export default class Input extends Component {
       />
       </View>
     );
-  }
+  };
 
   renderInput = () => {
     const inputType = this.props.inputType;
@@ -91,18 +92,17 @@ export default class Input extends Component {
       }
     }
     return this.textInput();
-  }
+  };
 
   render() {
     const optional = (<Text style={[styles.optional, CommonStyle.marginBottom2x]}>{"Optional"}</Text>);
-    const info = (<IconMC name="information-variant" size={16} />);
 
     return (
-      <View style={[CommonStyle.flexContainer, CommonStyle.marginTop2x]}>
+      <View style={[CommonStyle.flexContainer, CommonStyle.marginTop]}>
         <View style={styles.row}>
           <View style={styles.row}>
             <Text style={[styles.label]}>{this.props.placeholder}</Text>
-            {this.props.info && info}
+            {this.props.info && <InfoPopup info={this.props.info} />}
           </View>
           {this.props.optional && optional}
         </View>

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.75,
+    height: wHeight * 0.7,
   },
   bulb: {
     width: 26.25,

src/groups/GroupsListItem.js

@@ -83,6 +83,3 @@ class GroupsListItem extends Component {
     this.props.groupView.leave(this.props.group.guid);
   }
 }
-
-
-

src/onboarding/OnboardingScreenNew.js

@@ -23,7 +23,6 @@ import {
 import Wizard from '../common/components/Wizard';
 
 import SuggestedChannelsStep from './steps/SuggestedChannelsStep';
-import SuggestedGroupsStep from './steps/SuggestedGroupsStep';
 import RewardsStep from './steps/RewardsStep';
 import WelcomeStepNew from './steps/WelcomeStepNew';
 import { CommonStyle as CS } from '../styles/Common';
@@ -32,6 +31,7 @@ import i18nService from '../common/services/i18n.service';
 import CenteredLoading from '../common/components/CenteredLoading';
 import HashtagsStepNew from './steps/HashtagsStepNew';
 import ChannelSetupStepNew from './steps/ChannelSetupStepNew';
+import SuggestedGroupsStepNew from './steps/SuggestedGroupsStepNew';
 
 @observer
 @inject('onboarding', 'hashtag')
@@ -71,16 +71,20 @@ export default class OnboardingScreenNew extends Component {
     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: <HashtagsStepNew onNext={this.onNext}/>});
     }
+
     steps.push({component: <ChannelSetupStepNew ref={r => this.channelSetup = r} onNext={this.onNext}/>});
+    
+    if (!completed_items.some(r => r == 'suggested_groups')) {
+      steps.push({component: <SuggestedGroupsStepNew/>});
+    }
+
     if (!completed_items.some(r => r == 'suggested_channels')) {
       steps.push({component: <SuggestedChannelsStep/>});
     }
-    if (!completed_items.some(r => r == 'suggested_groups')) {
-      // steps.push({component: <SuggestedGroupsStep/>});
-    }
 
     if (!completed_items.some(r => r == 'tokens_verification')) {
       steps.push({component: <RewardsStep onJoin={() => this.wizard.next()}/>});

src/onboarding/steps/ChannelSetupStepNew.js

@@ -42,7 +42,7 @@ export default class ChannelSetupStepNew extends Component {
     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.onboardingTitle, CS.marginTop3x, CS.marginBottom3x]}>{i18n.t('onboarding.profileSetup')}</Text>
           <Text style={CS.onboardingSubtitle}>{i18n.t('onboarding.infoTitle')}</Text>
           <Text style={CS.onboardingSteps}>{i18n.t('onboarding.infoStep')}</Text>
         </View>
@@ -88,15 +88,18 @@ export default class ChannelSetupStepNew extends Component {
 }
 
 const styles = StyleSheet.create({
-  containerButton: {
-    flex: 2,
-    flexDirection: 'row',
+  bottom: {
+    flex: 1,
     marginLeft: 10,
     marginRight: 20,
-    marginBottom: 20,
-    marginTop: 40,
-    justifyContent: 'flex-end',
+    marginBottom: 10,
+    marginTop: 10,
     width: '80%',
+    justifyContent: 'flex-end',
+  },
+  containerButton: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
   },
   continue: {
     backgroundColor: "#5DBAC0",
@@ -122,13 +125,13 @@ const styles = StyleSheet.create({
     lineHeight: 21,
   },
   inputContainer: {
-    flex: 3,
+    flex: 5,
     marginLeft: 20,
     marginRight: 20,
     width: '90%',
   },
   textsContainer: {
-    flex: 3,
+    flex: 2,
     alignItems: 'center',
   }
 });
\ No newline at end of file

src/onboarding/steps/HashtagsStepNew.js

@@ -31,10 +31,10 @@ export default class HashtagsStepNew extends Component {
     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.onboardingTitle, CS.marginTop3x, 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.linkNew, CS.marginTop4x, CS.marginBottom3x]}>{i18n.t('onboarding.hashtagInterest')}</Text>
+          <Text style={[CS.linkNew, CS.marginTop2x, CS.marginBottom3x]}>{i18n.t('onboarding.hashtagInterest')}</Text>
         </View>
         <View style={styles.hashtagContainer}>
           <TagSelect
@@ -48,13 +48,15 @@ export default class HashtagsStepNew extends Component {
             disableSort={true}
           />
         </View>
-        <View style={[styles.containerButton]}>
-            <TouchableOpacity style={styles.skip} onPress={this.props.onNext}>
-              <Text style={styles.skipText}>{i18n.t('onboarding.skipStep')}</Text>
-            </TouchableOpacity>
-            <TouchableOpacity  style={styles.continue} onPress={this.props.onNext}>
-              <Text style={styles.continueText}>{i18n.t('continue')}</Text>
-            </TouchableOpacity>
+        <View style={styles.bottom}>
+          <View style={[styles.containerButton]}>
+              <TouchableOpacity style={styles.skip} onPress={this.props.onNext}>
+                <Text style={styles.skipText}>{i18n.t('onboarding.skipStep')}</Text>
+              </TouchableOpacity>
+              <TouchableOpacity  style={styles.continue} onPress={this.props.onNext}>
+                <Text style={styles.continueText}>{i18n.t('continue')}</Text>
+              </TouchableOpacity>
+          </View>
         </View>
       </View>
     );
@@ -62,15 +64,18 @@ export default class HashtagsStepNew extends Component {
 }
 
 const styles = StyleSheet.create({
-  containerButton: {
-    flex: 2,
-    flexDirection: 'row',
+  bottom: {
+    flex: 1,
     marginLeft: 10,
     marginRight: 20,
-    marginBottom: 20,
-    marginTop: 40,
-    justifyContent: 'flex-end',
+    marginBottom: 10,
+    marginTop: 10,
     width: '80%',
+    justifyContent: 'flex-end',
+  },
+  containerButton: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
   },
   continue: {
     backgroundColor: "#5DBAC0",
@@ -96,7 +101,7 @@ const styles = StyleSheet.create({
     lineHeight: 21,
   },
   hashtagContainer: {
-    flex: 3,
+    flex: 4,
     marginLeft: 20,
     marginRight: 20,
   },

src/onboarding/steps/SuggestedGroupsStepNew.js

+import React, { Component } from 'react';
+
+import {
+  View,
+  Text,
+  TouchableHighlight,
+} from 'react-native';
+import { observer, inject } from 'mobx-react';
+
+import { CommonStyle as CS } from '../../styles/Common';
+import GroupsListItem from '../../groups/GroupsListItem';
+import i18n from '../../common/services/i18n.service';
+
+@inject('groups', 'hashtag')
+@observer
+export default class SuggestedGroupsStepNew extends Component {
+
+  componentWillMount() {
+    this.props.hashtag.setAll(true);
+    this.props.groups.reset();
+    this.props.groups.loadList();
+  }
+
+  renderGroup = (group) => {
+    return  <GroupsListItem key={group.guid} group={group}/>
+  }
+
+  render() {
+    return (
+      <View>
+        <View style={[CS.padding4x]}>
+          <Text style={[CS.fontXXL, CS.colorDark, CS.fontMedium]}>{i18n.t('onboarding.suggestedGroups')}</Text>
+          <Text style={[CS.fontL, CS.colorDarkGreyed, CS.marginBottom3x]}>{i18n.t('onboarding.suggestedGroupsDescription')}</Text>
+        </View>
+        {this.props.groups.list.entities.map(group => this.renderGroup(group))}
+      </View>
+    );
+  }
+}
\ No newline at end of file

src/styles/Common.js

@@ -615,7 +615,7 @@ export const CommonStyle = StyleSheet.create({
   },
   linkNew: {
     color: '#9B9B9B',
-    fontSize: 15,
+    fontSize: 13,
     lineHeight: 20
   }
 });