Add language based channels to Auto follow (#523)

* Refactor userChannelFollowIntro

* Add community based channels to signup auto follow

* Add German channels

* Remove main english channels and leave only community ones for auto follow

ui/component/userChannelFollowIntro/index.js

@@ -1,20 +1,19 @@
 import { connect } from 'react-redux';
-import { selectFollowedTags } from 'redux/selectors/tags';
-import { selectSubscriptions } from 'redux/selectors/subscriptions';
 import { doChannelSubscribe } from 'redux/actions/subscriptions';
-import UserChannelFollowIntro from './view';
+import { selectHomepageData, selectLanguage } from 'redux/selectors/settings';
-import { selectHomepageData } from 'redux/selectors/settings';
 import { selectPrefsReady } from 'redux/selectors/sync';
+import { selectSubscriptions } from 'redux/selectors/subscriptions';
+import UserChannelFollowIntro from './view';
 
 const select = (state) => ({
-  followedTags: selectFollowedTags(state),
-  subscribedChannels: selectSubscriptions(state),
   homepageData: selectHomepageData(state),
+  language: selectLanguage(state),
   prefsReady: selectPrefsReady(state),
+  subscribedChannels: selectSubscriptions(state),
 });
 
 const perform = (dispatch) => ({
-  channelSubscribe: (uri) => dispatch(doChannelSubscribe(uri)),
+  channelSubscribe: (channelName, uri) => dispatch(doChannelSubscribe({ channelName, uri })),
 });
 
 export default connect(select, perform)(UserChannelFollowIntro);

ui/component/userChannelFollowIntro/view.jsx

@@ -1,28 +1,35 @@
 // @flow
-import React, { useEffect } from 'react';
+import { CUSTOM_HOMEPAGE, SIMPLE_SITE, SITE_NAME } from 'config';
-import ClaimListDiscover from 'component/claimListDiscover';
-import * as CS from 'constants/claim_search';
-import Nag from 'component/common/nag';
 import { parseURI } from 'util/lbryURI';
+import * as CS from 'constants/claim_search';
+import COMMUNITY_CHANNELS from 'constants/community_channels';
 import Button from 'component/button';
 import Card from 'component/common/card';
-import { AUTO_FOLLOW_CHANNELS, CUSTOM_HOMEPAGE, SIMPLE_SITE, SITE_NAME } from 'config';
+import ClaimListDiscover from 'component/claimListDiscover';
+import Nag from 'component/common/nag';
+import React from 'react';
 
 type Props = {
-  subscribedChannels: Array<Subscription>,
-  onContinue: () => void,
-  channelSubscribe: (sub: Subscription) => void,
   homepageData: any,
+  language: string,
   prefsReady: boolean,
+  subscribedChannels: Array<Subscription>,
+  channelSubscribe: (string, string) => void,
+  onContinue: () => void,
 };
 
-const channelsToSubscribe = AUTO_FOLLOW_CHANNELS.trim()
+function UserChannelFollowIntro(props: Props) {
+  const { homepageData, language, prefsReady, subscribedChannels, channelSubscribe, onContinue } = props;
+
+  const { PRIMARY_CONTENT, LATEST } = homepageData;
+
+  const autoFollowChannels = COMMUNITY_CHANNELS[language] || COMMUNITY_CHANNELS['en'];
+
+  const channelsToSubscribe = autoFollowChannels
+    .trim()
     .split(' ')
     .filter((x) => x !== '');
 
-function UserChannelFollowIntro(props: Props) {
-  const { subscribedChannels, channelSubscribe, onContinue, homepageData, prefsReady } = props;
-  const { PRIMARY_CONTENT, LATEST } = homepageData;
   let channelIds;
   if (CUSTOM_HOMEPAGE) {
     if (LATEST) {
@@ -31,31 +38,29 @@ function UserChannelFollowIntro(props: Props) {
       channelIds = PRIMARY_CONTENT.channelIds;
     }
   }
+
   const followingCount = (subscribedChannels && subscribedChannels.length) || 0;
   const followingCountIgnoringAutoFollows = (subscribedChannels || []).filter(
     (channel) => !channelsToSubscribe.includes(channel.uri)
   ).length;
 
-  // subscribe to lbry
+  // subscribe to odysee channels
-  useEffect(() => {
+  React.useEffect(() => {
     if (channelsToSubscribe && channelsToSubscribe.length && prefsReady) {
       const delayedChannelSubscribe = () => {
-        channelsToSubscribe.forEach((c) => {
+        channelsToSubscribe.forEach((channelUri) => {
           let claimName;
           try {
-            const { claimName: name } = parseURI(c);
+            const { claimName: name } = parseURI(channelUri);
             claimName = name;
           } catch (e) {}
-          if (claimName) {
+
-            channelSubscribe({
+          if (claimName) channelSubscribe(claimName, channelUri);
-              channelName: claimName,
-              uri: c,
-            });
-          }
         });
       };
       setTimeout(delayedChannelSubscribe, 1000);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [prefsReady]);
 
   return (
@@ -66,7 +71,6 @@ function UserChannelFollowIntro(props: Props) {
         { SITE_NAME }
       )}
       actions={
-        <React.Fragment>
         <div className="section__body">
           <ClaimListDiscover
             hideFilters={SIMPLE_SITE}
@@ -81,28 +85,27 @@ function UserChannelFollowIntro(props: Props) {
             defaultOrderBy={SIMPLE_SITE ? CS.ORDER_BY_TOP : CS.ORDER_BY_TRENDING}
             defaultFreshness={CS.FRESH_ALL}
             claimType="channel"
-              claimIds={CUSTOM_HOMEPAGE && channelIds ? channelIds : undefined}
+            claimIds={(CUSTOM_HOMEPAGE && channelIds) || undefined}
             defaultTags={followingCount > 3 ? CS.TAGS_FOLLOWED : undefined}
             maxPages={SIMPLE_SITE ? 3 : undefined}
           />
-            {followingCount > 0 && (
+
+          {followingCountIgnoringAutoFollows > 0 && (
             <Nag
               type="helpful"
-                message={
+              message={__(
                 followingCountIgnoringAutoFollows === 1
-                    ? __('Nice! You are currently following %followingCount% creator', {
+                  ? 'Nice! You are currently following %following_count% creator'
-                        followingCount: followingCountIgnoringAutoFollows,
+                  : 'Nice! You are currently following %following_count% creators',
-                      })
+                {
-                    : __('Nice! You are currently following %followingCount% creators', {
+                  following_count: followingCountIgnoringAutoFollows,
-                        followingCount: followingCountIgnoringAutoFollows,
-                      })
                 }
+              )}
               actionText={__('Continue')}
               onClick={onContinue}
             />
           )}
         </div>
-        </React.Fragment>
       }
     />
   );

ui/constants/community_channels.js

@@ -0,0 +1,20 @@
+import { AUTO_FOLLOW_CHANNELS } from 'config';
+
+const PT_BR_CHANNELS =
+  'lbry://@odyseebr#152e0ea25fb58b8f0719714a1b9ffe7344429e62' +
+  ' ' +
+  'lbry://@ajuda#d3a0afbe782c5ad13c944bdf12c1387302868c73';
+
+const DE_CHANNELS =
+  'lbry://@OdyseeDE#1c44ca079e0e3a824881184fdffcf1864cb2649e' +
+  ' ' +
+  'lbry://@OdyseeHilfe#14dd52c6105698159df73eb1fac89da477f895ea';
+
+const COMMUNITY_CHANNELS = {
+  en: AUTO_FOLLOW_CHANNELS,
+  'pt-BR': PT_BR_CHANNELS,
+  es: 'lbry://@ayuda#7385d06a753744996461f5aa30daa570b85bd8d2',
+  de: DE_CHANNELS,
+};
+
+export default COMMUNITY_CHANNELS;