(feat) change suggested channels endpoint

locales/en.json

@@ -500,8 +500,8 @@
     "hashtagSelect":"What topics are you interested in?",
     "earnTokens":"Earn tokens for your activity",
     "weDontStorePhone":"We do not store your phone number on our servers.",
-    "suggestedChannels":"Suggested channels",
-    "suggestedChannelsDescription":"Subscribe to some popular channels below based on your interests",
+    "suggestedChannels":"Channels",
+    "suggestedChannelsDescription":"Some channels that may be of interest to you.",
     "suggestedGroups":"Suggested groups",
     "suggestedGroupsDescription":"Join some groups that may be of interest to you.",
     "tokensCanBeUsed":"Tokens can be used to support other channels or boost your content for additional views (1 token = 1,000 views). In order to earn tokens, we will need a phone number to verify that your channel is unique.",

src/auth/LoginScreenNew.js

@@ -161,6 +161,7 @@ const styles = StyleSheet.create({
     width: 34.72,
     height: 59.51,
     alignSelf: 'center',
+    marginTop: 10
   },
 });
 

src/channel/subscription/SubscriptionButtonNew.js

+// @flow
+import React, {
+  Component
+} from 'react';
+
+import { Alert } from 'react-native';
+import type { Node } from 'react';
+import { observer } from 'mobx-react';
+
+import type UserModel from '../UserModel';
+
+import Button from '../../common/components/Button';
+import i18n from '../../common/services/i18n.service';
+import { CommonStyle } from '../../styles/Common';
+
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import ListItemButton from '../../common/components/ListItemButton';
+
+type PropsType = {
+  channel: UserModel
+};
+
+/**
+ * Subscription request
+ */
+export default
+@observer
+class SubscriptionButtonNew extends Component<PropsType> {
+
+  /**
+   * On press
+   */
+  onPress = () => {
+    const { channel } = this.props;
+
+    if (channel.isOpen() || channel.subscribed) {
+      if (channel.subscribed) {
+        Alert.alert(
+          i18n.t('attention'),
+          i18n.t('channel.confirmUnsubscribe'),
+          [{ text: i18n.t('yesImSure'), onPress: () => channel.toggleSubscription() }, { text: i18n.t('no')}]
+        );
+      } else {
+        channel.toggleSubscription();
+      }
+    } else if (channel.pending_subscribe) {
+      channel.cancelSubscribeRequest();
+    } else {
+      channel.subscribeRequest();
+    }
+  }
+
+  /**
+   * Render
+   */
+  render(): Node {
+    const {
+      channel,
+      ...otherProps
+    } = this.props;
+
+    let name, color = null;
+
+    if (channel.isOpen()) {
+      if (channel.subscribed) {
+        name = 'check';
+        color = '#4C92A4'
+      } else {
+        name = 'add';
+        color = '#A5A5A5'
+      }
+    } else {
+      if (channel.subscribed) {
+        name = 'check';
+        color = '#4C92A4'
+      } else if (channel.pending_subscribe) {
+        name = 'close';
+        color = '#E02020'
+      } else {
+        name = 'add';
+        color = '#A5A5A5'
+      }
+    }
+
+    return (
+      <ListItemButton onPress={this.onPress}>
+        <Icon name={name} size={26} color={color} />
+      </ListItemButton>
+    )
+  }
+}

src/discovery/DiscoveryUserNew.js

+import React, {
+  Component
+} from 'react';
+
+import {
+  TouchableOpacity,
+  Image,
+  StyleSheet,
+  Keyboard,
+  Text,
+  View
+} from 'react-native';
+
+import {
+  observer,
+} from 'mobx-react/native'
+
+import {
+  MINDS_CDN_URI
+} from '../config/Config';
+
+import { CommonStyle } from '../styles/Common';
+import { FLAG_SUBSCRIBE, FLAG_VIEW } from '../common/Permissions';
+import SubscriptionButtonNew from '../channel/subscription/SubscriptionButtonNew';
+
+export default
+@observer
+class DiscoveryUser extends Component {
+  /**
+   * State
+   */
+  state = {
+    guid: null,
+  };
+
+  /**
+   * Derive state from props
+   * @param {object} nextProps
+   * @param {object} prevState
+   */
+  static getDerivedStateFromProps(nextProps, prevState) {
+
+    if (prevState.guid !== nextProps.row.item.guid) {
+      return {
+        guid: nextProps.row.item.guid,
+        source: { uri: MINDS_CDN_URI + 'icon/' + nextProps.row.item.guid + '/medium' }
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * Navigate To channel
+   */
+  _navToChannel = () => {
+    Keyboard.dismiss();
+    if (this.props.navigation) {
+      if (this.props.row.item.isOpen() && !this.props.row.item.can(FLAG_VIEW, true)) {
+        return;
+      }
+      this.props.navigation.push('Channel', { entity: this.props.row.item });
+    }
+  }
+
+  /**
+   * Render right button
+   */
+  renderRightButton() {
+    const channel = this.props.row.item;
+
+    if (channel.isOwner() || this.props.hideButtons || (channel.isOpen() && !channel.can(FLAG_SUBSCRIBE) )) {
+      return;
+    }
+
+    const testID = (this.props.testID) ? `${this.props.testID}SubscriptionButton` : 'subscriptionButton';
+
+    return (
+      <SubscriptionButtonNew
+        channel={channel}
+        testID={testID}
+      />
+    )
+  }
+
+  /**
+   * Render
+   */
+  render() {
+    const {row, ...otherProps} = this.props;
+
+    return (
+      <TouchableOpacity style={styles.row} onPress={this._navToChannel} {...otherProps}>
+        <Image source={this.state.source} style={styles.avatar} />
+        <View style={[CommonStyle.flexContainerCenter]}>
+          <Text style={[styles.body, styles.title]}>{row.item.name}</Text>
+          <Text style={[styles.body, styles.subtitle]}>@{row.item.username}</Text>
+        </View>
+        {this.renderRightButton()}
+      </TouchableOpacity>
+    );
+  }
+}
+
+const styles = {
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+    paddingTop: 10,
+    paddingLeft: 12,
+    paddingBottom: 10,
+    paddingRight: 12,
+  },
+  body: {
+    marginLeft: 16,
+    height: 22,
+    // flex: 1,
+  },
+  title: {
+    color: '#FFF',
+    fontSize: 17,
+    fontWeight: '500'
+  },
+  subtitle: {
+    color: '#AEB0B8',
+    fontSize: 14,
+  },
+  avatar: {
+    height: 58,
+    width: 58,
+    borderRadius: 29,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: '#EEE',
+  }
+}

src/onboarding/OnboardingScreenNew.js

@@ -22,7 +22,7 @@ import {
 
 import Wizard from '../common/components/Wizard';
 
-import SuggestedChannelsStep from './steps/SuggestedChannelsStep';
+import SuggestedChannelsStepNew from './steps/SuggestedChannelsStepNew';
 import RewardsStep from './steps/RewardsStep';
 import WelcomeStepNew from './steps/WelcomeStepNew';
 import { CommonStyle as CS } from '../styles/Common';
@@ -34,7 +34,7 @@ import ChannelSetupStepNew from './steps/ChannelSetupStepNew';
 import SuggestedGroupsStepNew from './steps/SuggestedGroupsStepNew';
 
 @observer
-@inject('onboarding', 'hashtag')
+@inject('onboarding', 'hashtag', 'theme')
 export default class OnboardingScreenNew extends Component {
 
   /**
@@ -81,11 +81,11 @@ export default class OnboardingScreenNew extends Component {
     steps.push({component: <ChannelSetupStepNew ref={r => this.channelSetup = r} onNext={this.onNext} onBack={this.onBack}/> });
     
     if (!completed_items.some(r => r == 'suggested_groups')) {
-      steps.push({component: <SuggestedGroupsStepNew onBack={this.onBack}/>});
+      steps.push({component: <SuggestedGroupsStepNew onNext={this.onNext} onBack={this.onBack}/>});
     }
 
     if (!completed_items.some(r => r == 'suggested_channels')) {
-      steps.push({component: <SuggestedChannelsStep onBack={this.onBack}/>});
+      steps.push({component: <SuggestedChannelsStepNew onNext={this.onNext} onBack={this.onBack}/>});
     }
 
     if (!completed_items.some(r => r == 'tokens_verification')) {
@@ -93,7 +93,7 @@ export default class OnboardingScreenNew extends Component {
     }
 
     return (
-      <SafeAreaView style={[CS.flexContainer, CS.backgroundWhite]}>
+      <SafeAreaView style={[CS.flexContainer, {backgroundColor: this.props.theme.theme.primary_background}]}>
         <KeyboardAvoidingView style={[CS.flexContainer]} behavior={ Platform.OS == 'ios' ? 'padding' : null }>
           <Wizard steps={steps} onFinish={this.onFinish} ref={this.handleWizarRef}></Wizard>
         </KeyboardAvoidingView>

src/onboarding/steps/SuggestedChannelsStepNew.js

+import React, { Component } from 'react';
+
+import {
+  View,
+  Text,
+  TouchableHighlight,
+  ActivityIndicator,
+  I18nManager,
+  StyleSheet,
+  ScrollView,
+} from 'react-native';
+import { observer, inject } from 'mobx-react';
+
+import { CommonStyle as CS } from '../../styles/Common';
+import DiscoveryUserNew from '../../discovery/DiscoveryUserNew';
+import i18n from '../../common/services/i18n.service';
+
+import MindsLayout from '../../common/components/MindsLayout';
+import styled from 'styled-components';
+import { CommonStyled } from '../../styles/CommonStyled';
+import OnboardingButtons from '../OnboardingButtons';
+import OnboardingBackButton from '../OnboardingBackButton';
+
+@inject('discovery')
+@observer
+export default class SuggestedChannelsStepNew extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.props.discovery.init();
+    this.props.discovery.filters.setType('channels');
+    this.props.discovery.filters.setPeriod('30d');
+  }
+
+  /**
+   * Component did mount
+   */
+  componentDidMount() {
+    
+  }
+
+  /**
+   * Render user
+   */
+  renderUser = (user, index) => {
+    return <DiscoveryUserNew
+      row={{item: user}}
+      key={user.guid}
+      testID={`suggestedUser${index}`}
+    />
+  }
+
+  getBody = () => {
+    const discovery = this.props.discovery;
+
+    return (
+      <View style={[CS.flexContainer, CS.columnAlignCenter]}>
+        <OnboardingBackButton onBack={this.props.onBack} />
+        <View style={styles.textsContainer}>
+          <Text style={[CS.onboardingTitle, CS.marginBottom2x]}>{i18n.t('onboarding.profileSetup')}</Text>
+          <TitleText>{i18n.t('onboarding.suggestedChannels')}</TitleText>
+          <Step>{i18n.t('onboarding.step',{step: 4, total: 4})}</Step>
+          <SubTitle>{i18n.t('onboarding.suggestedChannelsDescription')}</SubTitle>
+        </View>
+        <ScrollView style={styles.channelContainer}>
+        {!discovery.listStore.loaded && <ActivityIndicator />}
+        {discovery.listStore.entities.slice().map((user, i) => this.renderUser(user, i))}
+        </ScrollView>
+      </View>
+    );
+  }
+
+  getFooter = () => {
+    return <OnboardingButtons onNext={this.props.onNext} />;
+  }
+
+  /**
+   * Render
+   */
+  render() {
+    return (
+      <View style={CS.flexContainer}>
+        <MindsLayout
+          body={this.getBody()}
+          footer={this.getFooter()}
+        />
+      </View>
+    );
+  }
+}
+
+const TitleText = styled.Text`
+  ${CommonStyled.textTitle} 
+  color: ${(props) => props.theme['primary_text']};
+`;
+
+const SubTitle = styled.Text`
+  ${CommonStyled.textSubTitle}
+  color: ${(props) => props.theme['primary_text']}
+  margin-bottom: 20px;
+  margin-top: 25;
+`;
+
+const Step = styled.Text`
+  ${CommonStyled.textSubTitle}
+  color: ${(props) => props.theme['secondary_text']}
+`;
+
+const styles = StyleSheet.create({
+  channelContainer: {
+    width: '100%',
+  },
+  textsContainer: {
+    alignItems: 'center',
+  },
+});
\ No newline at end of file

src/onboarding/steps/SuggestedGroupsStepNew.js

@@ -5,6 +5,7 @@ import {
   Text,
   StyleSheet,
   ScrollView,
+  ActivityIndicator,
 } from 'react-native';
 import { observer, inject } from 'mobx-react';
 
@@ -46,10 +47,11 @@ export default class SuggestedGroupsStepNew extends Component {
         <View style={styles.textsContainer}>
           <Text style={[CS.onboardingTitle, CS.marginBottom2x]}>{i18n.t('onboarding.profileSetup')}</Text>
           <TitleText>{i18n.t('onboarding.groupTitle')}</TitleText>
-          <Step>{i18n.t('onboarding.step',{step: 1, total: 4})}</Step>
+          <Step>{i18n.t('onboarding.step',{step: 3, total: 4})}</Step>
           <SubTitle>{i18n.t('onboarding.suggestedGroupsDescription')}</SubTitle>
         </View>
         <ScrollView style={styles.groupContainer}>
+          {!discovery.listStore.loaded && <ActivityIndicator />}
           {discovery.listStore.entities.slice().map(group => this.renderGroup(group))}
         </ScrollView>
       </View>

src/styles/Components.js

@@ -17,7 +17,7 @@ export const ComponentsStyle = StyleSheet.create({
   loginInputIconNew: {
     position: 'absolute',
     right:8,
-    top:37,
+    top:30,
     color: '#404A4E'
   },
   passwordinput: {