final

packages/common/src/store/pages/feed/actions.ts

@@ -1,53 +1,26 @@
 import { FeedFilter } from '~/models/FeedFilter'
 import { ID } from '~/models/Identifiers'
 
-export const FETCH_SUGGESTED_FOLLOW_USERS = 'FEED/FETCH_SUGGESTED_FOLLOW_USERS'
 export const FOLLOW_USERS = 'FEED/FOLLOW_USERS'
-export const SET_SUGGESTED_FOLLOWS = 'FEED/SET_SUGGESTED_FOLLOWS'
 export const SET_FEED_FILTER = 'FEED/SET_FEED_FILTER'
 
-export type FetchSuggestedFollowUsersAction = {
-  type: typeof FETCH_SUGGESTED_FOLLOW_USERS
-}
-
 export type FollowUsersAction = {
   type: typeof FOLLOW_USERS
   userIds: ID[]
 }
 
-export type SetSuggestedFollowsAction = {
-  type: typeof SET_SUGGESTED_FOLLOWS
-  userIds: ID[]
-}
-
 export type SetFeedFilterAction = {
   type: typeof SET_FEED_FILTER
   filter: FeedFilter
 }
 
-export type FeedPageAction =
-  | FetchSuggestedFollowUsersAction
-  | FollowUsersAction
-  | SetSuggestedFollowsAction
-  | SetFeedFilterAction
-
-export const fetchSuggestedFollowUsers =
-  (): FetchSuggestedFollowUsersAction => ({
-    type: FETCH_SUGGESTED_FOLLOW_USERS
-  })
+export type FeedPageAction = FollowUsersAction | SetFeedFilterAction
 
 export const followUsers = (userIds: ID[]): FollowUsersAction => ({
   type: FOLLOW_USERS,
   userIds
 })
 
-export const setSuggestedFollows = (
-  userIds: ID[]
-): SetSuggestedFollowsAction => ({
-  type: SET_SUGGESTED_FOLLOWS,
-  userIds
-})
-
 export const setFeedFilter = (filter: FeedFilter): SetFeedFilterAction => ({
   type: SET_FEED_FILTER,
   filter

packages/common/src/store/pages/feed/reducer.ts

@@ -1,8 +1,6 @@
 import { LineupActions, asLineup } from '~/store/lineup/reducer'
 import {
-  SET_SUGGESTED_FOLLOWS,
   SET_FEED_FILTER,
-  SetSuggestedFollowsAction,
   SetFeedFilterAction,
   FeedPageAction
 } from '~/store/pages/feed/actions'
@@ -22,15 +20,6 @@ const initialState = {
 }
 
 const actionsMap = {
-  [SET_SUGGESTED_FOLLOWS](
-    state: FeedPageState,
-    action: SetSuggestedFollowsAction
-  ) {
-    return {
-      ...state,
-      suggestedFollows: action.userIds
-    }
-  },
   [SET_FEED_FILTER](state: FeedPageState, action: SetFeedFilterAction) {
     return {
       ...state,

packages/common/src/store/pages/feed/selectors.ts

@@ -1,6 +1,5 @@
 import { getUsers } from '~/store/cache/users/selectors'
 import { CommonState } from '~/store/commonStore'
-import { createShallowSelector } from '~/utils/selectorHelpers'
 
 export const getSuggestedFollows = (state: CommonState) =>
   state.pages.feed.suggestedFollows
@@ -11,14 +10,3 @@ export const getFeedFilter = (state: CommonState) => state.pages.feed.feedFilter
 
 export const getSuggestedFollowUsers = (state: CommonState) =>
   getUsers(state, { ids: getSuggestedFollows(state) })
-
-export const makeGetSuggestedFollows = () => {
-  return createShallowSelector(
-    [getSuggestedFollowUsers, getSuggestedFollows],
-    (users, followIds) => {
-      return followIds
-        .map((id) => users[id])
-        .filter((user) => !!user && !user.is_deactivated)
-    }
-  )
-}

packages/web/src/common/store/pages/feed/sagas.ts

@@ -7,21 +7,8 @@ import {
 import { getErrorMessage } from '@audius/common/utils'
 import { call, put, take, fork, takeEvery } from 'redux-saga/effects'
 
-import { fetchUsers } from 'common/store/cache/users/sagas'
 import feedSagas from 'common/store/pages/feed/lineup/sagas'
-import { fetchSuggestedFollowUserIds } from 'common/store/pages/signon/sagas'
-import { waitForRead, waitForWrite } from 'utils/sagaHelpers'
-
-function* fetchSuggestedFollowUsers() {
-  yield call(waitForRead)
-  try {
-    const userIds: ID[] = yield call(fetchSuggestedFollowUserIds)
-    yield put(discoverActions.setSuggestedFollows(userIds))
-    yield call(fetchUsers, userIds)
-  } catch (error) {
-    console.error(getErrorMessage(error))
-  }
-}
+import { waitForWrite } from 'utils/sagaHelpers'
 
 function* waitForFollow(userIds: ID[]) {
   const usersConfirmed = Array.from(Array(userIds.length)).map(() => false)
@@ -55,17 +42,10 @@ function* followUsers(action: ReturnType<typeof discoverActions.followUsers>) {
   }
 }
 
-function* watchFetchSuggestedFollowUsers() {
-  yield takeEvery(
-    discoverActions.FETCH_SUGGESTED_FOLLOW_USERS,
-    fetchSuggestedFollowUsers
-  )
-}
-
 function* watchFollowUsers() {
   yield takeEvery(discoverActions.FOLLOW_USERS, followUsers)
 }
 
 export default function sagas() {
-  return [...feedSagas(), watchFetchSuggestedFollowUsers, watchFollowUsers]
+  return [...feedSagas(), watchFollowUsers]
 }

packages/web/src/pages/sign-up-page/components/FollowArtistCard.tsx → packages/web/src/components/follow-artist-card/FollowArtistCard.tsx

@@ -28,7 +28,7 @@ import Skeleton from 'components/skeleton/Skeleton'
 import { useCoverPhoto } from 'hooks/useCoverPhoto'
 import { useMedia } from 'hooks/useMedia'
 
-import { SelectArtistsPreviewContext } from '../utils/selectArtistsPreviewContext'
+import { SelectArtistsPreviewContext } from './selectArtistsPreviewContext'
 
 type FollowArtistTileProps = {
   user: UserMetadata

packages/web/src/pages/feed-page/FeedPageProvider.jsx

@@ -24,8 +24,7 @@ import { useIsMobile } from 'hooks/useIsMobile'
 import { getPathname, TRENDING_PAGE } from 'utils/route'
 const { makeGetCurrent } = queueSelectors
 const { getPlaying, getBuffering } = playerSelectors
-const { getDiscoverFeedLineup, makeGetSuggestedFollows, getFeedFilter } =
-  feedPageSelectors
+const { getDiscoverFeedLineup, getFeedFilter } = feedPageSelectors
 const { makeGetLineupMetadatas } = lineupSelectors
 const getHasAccount = accountSelectors.getHasAccount
 
@@ -89,9 +88,6 @@ class FeedPageProvider extends PureComponent {
       feedIsMain: this.props.feedIsMain,
       feed: this.props.feed,
 
-      fetchSuggestedFollowUsers: this.props.fetchSuggestedFollowUsers,
-      followUsers: this.props.followUsers,
-      suggestedFollows: this.props.suggestedFollows,
       refreshFeedInView: this.props.refreshFeedInView,
       hasAccount: this.props.hasAccount,
       goToSignUp: this.goToSignUp,
@@ -118,13 +114,11 @@ class FeedPageProvider extends PureComponent {
 
 const makeMapStateToProps = () => {
   const getCurrentQueueItem = makeGetCurrent()
-  const getSuggestedFollows = makeGetSuggestedFollows()
   const getFeedLineup = makeGetLineupMetadatas(getDiscoverFeedLineup)
 
   const mapStateToProps = (state) => ({
     hasAccount: getHasAccount(state),
     feed: getFeedLineup(state),
-    suggestedFollows: getSuggestedFollows(state),
     currentQueueItem: getCurrentQueueItem(state),
     playing: getPlaying(state),
     buffering: getBuffering(state),
@@ -137,11 +131,8 @@ const mapDispatchToProps = (dispatch) => ({
   dispatch,
   openSignOn: (signIn) => dispatch(openSignOn(signIn)),
   resetFeedLineup: () => dispatch(feedActions.reset()),
-  fetchSuggestedFollowUsers: () =>
-    dispatch(discoverPageAction.fetchSuggestedFollowUsers()),
   goToRoute: (route) => dispatch(pushRoute(route)),
   replaceRoute: (route) => dispatch(replaceRoute(route)),
-  followUsers: (userIds) => dispatch(discoverPageAction.followUsers(userIds)),
   setFeedFilter: (filter) => dispatch(discoverPageAction.setFeedFilter(filter)),
 
   // Feed Lineup Actions

packages/web/src/pages/feed-page/components/EmptyFeed.jsx → packages/web/src/pages/feed-page/components/EmptyFeed.tsx

@@ -1,20 +1,20 @@
-import { memo } from 'react'
-
+import { accountSelectors } from '@audius/common/store'
 import { Button } from '@audius/harmony'
 import cn from 'classnames'
-import PropTypes from 'prop-types'
+import { Link } from 'react-router-dom'
+
+import { useSelector } from 'utils/reducer'
+import { SIGN_UP_PAGE } from 'utils/route'
 
 import styles from './EmptyFeed.module.css'
 import FollowArtists from './FollowUsers'
 
-const messages = {
-  noFollowers: `Oops! There's nothing here.`
-}
+const EmptyFeed = () => {
+  const hasAccount = useSelector(accountSelectors.getHasAccount)
 
-const EmptyFeed = (props) => {
   return (
     <div className={cn(styles.emptyFeed)}>
-      {props.hasAccount ? null : (
+      {hasAccount ? null : (
         <div className={styles.banner}>
           <div className={styles.bannerText}>
             {`You'll Need An Account Before You Can Use Your Feed!`}
@@ -23,18 +23,8 @@ const EmptyFeed = (props) => {
       )}
       <div className={styles.contentWrapper}>
         <div className={styles.body}>
-          {props.hasAccount ? (
-            <FollowArtists
-              header={
-                <>
-                  {messages.noFollowers}{' '}
-                  <i className='emoji face-screaming-in-fear' />
-                </>
-              }
-              fetchFollowUsers={props.fetchFollowUsers}
-              followUsers={props.followUsers}
-              users={props.suggestedFollows}
-            />
+          {hasAccount ? (
+            <FollowArtists />
           ) : (
             <>
               <div className={styles.title}>
@@ -53,8 +43,8 @@ const EmptyFeed = (props) => {
                 <i className='emoji small headphone' />
               </div>
               <div className={styles.item}>and much more!</div>
-              <Button variant='primary' size='small' onClick={props.onClick}>
-                Sign Up
+              <Button variant='primary' size='small' asChild>
+                <Link to={SIGN_UP_PAGE}>Sign Up</Link>
               </Button>
             </>
           )}
@@ -64,20 +54,4 @@ const EmptyFeed = (props) => {
   )
 }
 
-EmptyFeed.propTypes = {
-  hasAccount: PropTypes.bool,
-  onClick: PropTypes.func,
-  fetchFollowUsers: PropTypes.func,
-  followUsers: PropTypes.func,
-  suggestedFollows: PropTypes.arrayOf(
-    PropTypes.shape({
-      user_id: PropTypes.number,
-      name: PropTypes.string,
-      handle: PropTypes.string,
-      is_verified: PropTypes.bool,
-      follower_count: PropTypes.number
-    })
-  )
-}
-
-export default memo(EmptyFeed)
+export default EmptyFeed