From ce1c9a9c47edf245ad04d54e4ede7a49ef9ef36d Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Thu, 5 Oct 2023 16:46:22 -0700
Subject: [PATCH] [C-3174] Add select genre page to sign up (#6241)

---
 package-lock.json                             |  4 +-
 packages/mobile/e2e/matchers.ts               |  4 +
 packages/mobile/e2e/signUp.test.ts            | 37 ++++++-
 .../SelectArtistCategoryButtons.tsx           |  2 +-
 .../sign-up-screen/SignUpRootScreen.tsx       |  4 +
 .../screens/CreatePasswordScreen.tsx          |  2 +-
 .../screens/FinishProfileScreen.tsx           | 16 ++-
 .../screens/PickHandleScreen.tsx              |  7 +-
 .../screens/SelectArtistsScreen.tsx           | 46 +++++++++
 .../screens/SelectGenreScreen.tsx             | 98 +++++++++++++++++++
 .../sign-up-screen/screens/SignUpScreen.tsx   |  2 +-
 .../src/screens/sign-up-screen/types.ts       |  2 +
 .../src/screens/signon/ProfileManual.tsx      | 11 +--
 packages/mobile/src/store/store.ts            |  8 +-
 packages/probers/cypress/e2e/signUp.cy.ts     | 30 +++++-
 .../common/store/pages/feed/lineup/sagas.ts   |  3 +-
 .../src/common/store/pages/signon/actions.ts  |  2 +-
 .../common/store/pages/signon/selectors.js    | 55 -----------
 .../common/store/pages/signon/selectors.ts    | 60 ++++++++++++
 .../src/common/store/pages/signon/types.ts    | 10 +-
 packages/web/src/pages/App.js                 |  1 -
 packages/web/src/pages/App.module.css         | 11 ---
 packages/web/src/pages/sign-on/SignOn.tsx     |  4 +
 .../web/src/pages/sign-on/SignOnProvider.tsx  |  2 +
 .../src/pages/sign-up-page/SignUpRootPage.tsx | 10 +-
 .../sign-up-page/components/GenrePill.tsx     | 17 ++++
 .../sign-up-page/pages/FinishProfilePage.tsx  |  8 +-
 .../sign-up-page/pages/PickHandlePage.tsx     |  8 +-
 .../sign-up-page/pages/SelectArtistsPage.tsx  | 44 +++++++++
 .../sign-up-page/pages/SelectGenrePage.tsx    | 85 +++++++++++++---
 packages/web/src/store/types.ts               |  4 +-
 31 files changed, 491 insertions(+), 106 deletions(-)
 create mode 100644 packages/mobile/src/screens/sign-up-screen/screens/SelectArtistsScreen.tsx
 create mode 100644 packages/mobile/src/screens/sign-up-screen/screens/SelectGenreScreen.tsx
 delete mode 100644 packages/web/src/common/store/pages/signon/selectors.js
 create mode 100644 packages/web/src/common/store/pages/signon/selectors.ts
 create mode 100644 packages/web/src/pages/sign-up-page/components/GenrePill.tsx
 create mode 100644 packages/web/src/pages/sign-up-page/pages/SelectArtistsPage.tsx

diff --git a/package-lock.json b/package-lock.json
index 1853dd11c85..96076b480a6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -97813,7 +97813,7 @@
         "storybook-addon-smart-knobs": "6.0.2",
         "tsconfig-paths-webpack-plugin": "3.5.2",
         "typescript": "4.9.4",
-        "typescript-plugin-css-modules": "^3.4.0",
+        "typescript-plugin-css-modules": "3.4.0",
         "webpack": "4.46.0"
       }
     },
@@ -103095,7 +103095,7 @@
     },
     "packages/libs": {
       "name": "@audius/sdk",
-      "version": "3.0.11-beta.5",
+      "version": "3.0.11-beta.21",
       "license": "Apache-2.0",
       "dependencies": {
         "@audius/hedgehog": "2.1.0",
diff --git a/packages/mobile/e2e/matchers.ts b/packages/mobile/e2e/matchers.ts
index f7f7e579b3b..fcbef0fa07c 100644
--- a/packages/mobile/e2e/matchers.ts
+++ b/packages/mobile/e2e/matchers.ts
@@ -18,6 +18,10 @@ export function byRole(role: Role, options: ByRoleOptions) {
       return labelOnly
         ? element(by.traits(['button']).and(by.label(name)))
         : element(by.traits(['button']).withDescendant(by.label(name)))
+    case 'checkbox':
+      return element(by.id(name))
+    case 'radio':
+      return element(by.id(name))
     default:
       return element(by.traits([role]).and(by.label(name)))
   }
diff --git a/packages/mobile/e2e/signUp.test.ts b/packages/mobile/e2e/signUp.test.ts
index fbede8dcd78..1782df76609 100644
--- a/packages/mobile/e2e/signUp.test.ts
+++ b/packages/mobile/e2e/signUp.test.ts
@@ -44,9 +44,10 @@ describe('Sign up', () => {
     await assertOnSignUp()
   })
 
-  it.only('should create an account', async () => {
+  it('should create an account', async () => {
     const testUser = generateTestUser()
     const { email, password, handle, name } = testUser
+
     await byRole('textbox', { name: /email/i }).typeText(email)
     await byRole('button', { name: /sign up free/i }).tap()
 
@@ -95,5 +96,39 @@ describe('Sign up', () => {
 
     await byRole('textbox', { name: /display name/i }).typeText(name)
     await byRole('button', { name: /continue/i }).tap()
+
+    await expect(
+      byRole('heading', { name: /select your genres/i })
+    ).toBeVisible()
+    await expect(
+      byText(/start by picking some of your favorite genres./i)
+    ).toBeVisible()
+
+    const genres = [/^acoustic/i, /^pop/i, /^lo-fi/i, /^electronic/i]
+
+    for (const genre of genres) {
+      await byRole('checkbox', { name: genre }).tap()
+      await expect(byRole('checkbox', { name: genre })).toHaveValue(
+        'checkbox, checked'
+      )
+    }
+
+    await element(by.id('genreScrollView')).scrollTo('bottom')
+    await byRole('button', { name: /continue/i }).tap()
+
+    await expect(
+      byRole('heading', { name: /follow at least 3 artists/i })
+    ).toBeVisible()
+    await expect(
+      byText(/curate your feed with tracks uploaded .*/i)
+    ).toBeVisible()
+
+    expect(byRole('radio', { name: /featured/i })).toHaveValue(
+      'radio button, checked'
+    )
+
+    for (const genre of genres) {
+      expect(byRole('radio', { name: genre })).toBeVisible()
+    }
   })
 })
diff --git a/packages/mobile/src/components/suggested-follows/SelectArtistCategoryButtons.tsx b/packages/mobile/src/components/suggested-follows/SelectArtistCategoryButtons.tsx
index 47f15873559..fe0ff979447 100644
--- a/packages/mobile/src/components/suggested-follows/SelectArtistCategoryButtons.tsx
+++ b/packages/mobile/src/components/suggested-follows/SelectArtistCategoryButtons.tsx
@@ -1,4 +1,4 @@
-import { artistCategories } from 'audius-client/src/common/store/pages/signon/types'
+import { artistCategories } from 'common/store/pages/signon/types'
 import { View } from 'react-native'
 import { useSelector } from 'react-redux'
 
diff --git a/packages/mobile/src/screens/sign-up-screen/SignUpRootScreen.tsx b/packages/mobile/src/screens/sign-up-screen/SignUpRootScreen.tsx
index 3125bfa88c3..d9ce2435cf5 100644
--- a/packages/mobile/src/screens/sign-up-screen/SignUpRootScreen.tsx
+++ b/packages/mobile/src/screens/sign-up-screen/SignUpRootScreen.tsx
@@ -3,6 +3,8 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import { CreatePasswordScreen } from './screens/CreatePasswordScreen'
 import { FinishProfileScreen } from './screens/FinishProfileScreen'
 import { PickHandleScreen } from './screens/PickHandleScreen'
+import { SelectArtistsScreen } from './screens/SelectArtistsScreen'
+import { SelectGenreScreen } from './screens/SelectGenreScreen'
 import { SignUpScreen } from './screens/SignUpScreen'
 
 const Stack = createNativeStackNavigator()
@@ -15,6 +17,8 @@ export const SignUpRootScreen = () => {
       <Stack.Screen name='CreatePassword' component={CreatePasswordScreen} />
       <Stack.Screen name='PickHandle' component={PickHandleScreen} />
       <Stack.Screen name='FinishProfile' component={FinishProfileScreen} />
+      <Stack.Screen name='SelectGenre' component={SelectGenreScreen} />
+      <Stack.Screen name='SelectArtists' component={SelectArtistsScreen} />
     </Stack.Navigator>
   )
 }
diff --git a/packages/mobile/src/screens/sign-up-screen/screens/CreatePasswordScreen.tsx b/packages/mobile/src/screens/sign-up-screen/screens/CreatePasswordScreen.tsx
index 0a06b041407..d01e469e539 100644
--- a/packages/mobile/src/screens/sign-up-screen/screens/CreatePasswordScreen.tsx
+++ b/packages/mobile/src/screens/sign-up-screen/screens/CreatePasswordScreen.tsx
@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 
-import { setValueField } from 'audius-client/src/common/store/pages/signon/actions'
+import { setValueField } from 'common/store/pages/signon/actions'
 import { Formik } from 'formik'
 import { View } from 'react-native'
 import { useDispatch } from 'react-redux'
diff --git a/packages/mobile/src/screens/sign-up-screen/screens/FinishProfileScreen.tsx b/packages/mobile/src/screens/sign-up-screen/screens/FinishProfileScreen.tsx
index 925e9076aee..6da8c4a13f4 100644
--- a/packages/mobile/src/screens/sign-up-screen/screens/FinishProfileScreen.tsx
+++ b/packages/mobile/src/screens/sign-up-screen/screens/FinishProfileScreen.tsx
@@ -1,13 +1,17 @@
 import { useCallback } from 'react'
 
+import { setValueField } from 'common/store/pages/signon/actions'
 import { Formik } from 'formik'
 import { View } from 'react-native'
+import { useDispatch } from 'react-redux'
 
 import { Button, Text } from 'app/components/core'
 import { TextField } from 'app/components/fields'
+import { useNavigation } from 'app/hooks/useNavigation'
 
 import { CoverPhotoField } from '../components/CoverPhotoField'
 import { ProfilePictureField } from '../components/ProfilePictureField'
+import type { SignUpScreenParamList } from '../types'
 
 const messages = {
   header: 'Finish Your Profile',
@@ -28,7 +32,17 @@ type FinishProfileValues = {
 }
 
 export const FinishProfileScreen = () => {
-  const handleSubmit = useCallback((values: FinishProfileValues) => {}, [])
+  const navigation = useNavigation<SignUpScreenParamList>()
+  const dispatch = useDispatch()
+
+  const handleSubmit = useCallback(
+    (values: FinishProfileValues) => {
+      const { displayName } = values
+      dispatch(setValueField('name', displayName))
+      navigation.navigate('SelectGenre')
+    },
+    [dispatch, navigation]
+  )
 
   return (
     <View>
diff --git a/packages/mobile/src/screens/sign-up-screen/screens/PickHandleScreen.tsx b/packages/mobile/src/screens/sign-up-screen/screens/PickHandleScreen.tsx
index 705215d9fe6..6265e85b437 100644
--- a/packages/mobile/src/screens/sign-up-screen/screens/PickHandleScreen.tsx
+++ b/packages/mobile/src/screens/sign-up-screen/screens/PickHandleScreen.tsx
@@ -1,7 +1,9 @@
 import { useCallback } from 'react'
 
+import { setValueField } from 'common/store/pages/signon/actions'
 import { Formik } from 'formik'
 import { View } from 'react-native'
+import { useDispatch } from 'react-redux'
 
 import { Button, Text } from 'app/components/core'
 import { TextField } from 'app/components/fields'
@@ -27,12 +29,15 @@ type PickHandleValues = {
 
 export const PickHandleScreen = () => {
   const navigation = useNavigation<SignUpScreenParamList>()
+  const dispatch = useDispatch()
 
   const handleSubmit = useCallback(
     (values: PickHandleValues) => {
+      const { handle } = values
+      dispatch(setValueField('handle', handle))
       navigation.navigate('FinishProfile')
     },
-    [navigation]
+    [dispatch, navigation]
   )
 
   return (
diff --git a/packages/mobile/src/screens/sign-up-screen/screens/SelectArtistsScreen.tsx b/packages/mobile/src/screens/sign-up-screen/screens/SelectArtistsScreen.tsx
new file mode 100644
index 00000000000..17823cbecdb
--- /dev/null
+++ b/packages/mobile/src/screens/sign-up-screen/screens/SelectArtistsScreen.tsx
@@ -0,0 +1,46 @@
+import { useState } from 'react'
+
+import { getGenres } from 'common/store/pages/signon/selectors'
+import { Pressable, View } from 'react-native'
+import { useSelector } from 'react-redux'
+
+import { Text } from 'app/components/core'
+
+const messages = {
+  header: 'Follow At Least 3 Artists',
+  description:
+    'Curate your feed with tracks uploaded or reposted by anyone you follow. Click the artist’s photo to preview their music.',
+  continue: 'Continue'
+}
+
+export const SelectArtistsScreen = () => {
+  const genres = useSelector((state: any) => ['Featured', ...getGenres(state)])
+  const [currentGenre, setCurrentGenre] = useState('Featured')
+
+  return (
+    <View>
+      <View>
+        <Text>{messages.header}</Text>
+        <Text>{messages.description}</Text>
+      </View>
+      <View accessibilityRole='radiogroup'>
+        {genres.map((genre) => {
+          const checked = genre === currentGenre
+          return (
+            <Pressable
+              key={genre}
+              testID={genre}
+              accessibilityRole='radio'
+              accessibilityState={{ checked }}
+              accessibilityLiveRegion='polite'
+              onPress={() => setCurrentGenre(genre)}
+              style={{ backgroundColor: checked ? 'purple' : undefined }}
+            >
+              <Text>{genre}</Text>
+            </Pressable>
+          )
+        })}
+      </View>
+    </View>
+  )
+}
diff --git a/packages/mobile/src/screens/sign-up-screen/screens/SelectGenreScreen.tsx b/packages/mobile/src/screens/sign-up-screen/screens/SelectGenreScreen.tsx
new file mode 100644
index 00000000000..913fb50ac14
--- /dev/null
+++ b/packages/mobile/src/screens/sign-up-screen/screens/SelectGenreScreen.tsx
@@ -0,0 +1,98 @@
+import { useCallback } from 'react'
+
+import { GENRES, convertGenreLabelToValue } from '@audius/common'
+import { setField } from 'common/store/pages/signon/actions'
+import {
+  getHandleField,
+  getNameField
+} from 'common/store/pages/signon/selectors'
+import { Formik } from 'formik'
+import { Pressable, ScrollView, View } from 'react-native'
+import { useDispatch, useSelector } from 'react-redux'
+
+import { Button, Text } from 'app/components/core'
+import { useNavigation } from 'app/hooks/useNavigation'
+
+import type { SignUpScreenParamList } from '../types'
+
+const messages = {
+  header: 'Select Your Genres',
+  description: 'Start by picking some of your favorite genres.',
+  continue: 'Continue'
+}
+
+const genres = GENRES.map((genre) => ({
+  value: genre,
+  label: convertGenreLabelToValue(genre)
+}))
+
+type SelectGenreValues = Record<string, boolean>
+
+const initialValues = genres.reduce(
+  (acc, genre) => ({
+    ...acc,
+    [genre.value]: false
+  }),
+  {} as SelectGenreValues
+)
+
+export const SelectGenreScreen = () => {
+  const { value: displayName } = useSelector(getNameField)
+  const { value: handle } = useSelector(getHandleField)
+  const dispatch = useDispatch()
+  const navigation = useNavigation<SignUpScreenParamList>()
+
+  const handleSubmit = useCallback(
+    (values: SelectGenreValues) => {
+      const genres = Object.keys(values).filter((genre) => values[genre])
+      dispatch(setField('genres', genres))
+      navigation.navigate('SelectArtists')
+    },
+    [dispatch, navigation]
+  )
+
+  return (
+    <ScrollView testID='genreScrollView'>
+      <View>
+        <Text>{displayName}</Text>
+        <Text>{handle}</Text>
+      </View>
+      <View>
+        <Text>{messages.header}</Text>
+        <Text>{messages.description}</Text>
+      </View>
+      <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+        {({ values, setValues, handleSubmit }) => (
+          <View>
+            {genres.map((genre) => {
+              const { label, value } = genre
+              const checked = !!values[value]
+
+              const handleChange = () => {
+                setValues({
+                  ...values,
+                  [value]: !checked
+                })
+              }
+
+              return (
+                <Pressable
+                  key={value}
+                  testID={label}
+                  accessibilityRole='checkbox'
+                  accessibilityState={{ checked }}
+                  accessibilityLiveRegion='polite'
+                  onPress={handleChange}
+                  style={{ backgroundColor: checked ? 'purple' : undefined }}
+                >
+                  <Text>{label}</Text>
+                </Pressable>
+              )
+            })}
+            <Button title={messages.continue} onPress={() => handleSubmit()} />
+          </View>
+        )}
+      </Formik>
+    </ScrollView>
+  )
+}
diff --git a/packages/mobile/src/screens/sign-up-screen/screens/SignUpScreen.tsx b/packages/mobile/src/screens/sign-up-screen/screens/SignUpScreen.tsx
index f0dbdf2fc27..5c655e284d2 100644
--- a/packages/mobile/src/screens/sign-up-screen/screens/SignUpScreen.tsx
+++ b/packages/mobile/src/screens/sign-up-screen/screens/SignUpScreen.tsx
@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 
-import { setValueField } from 'audius-client/src/common/store/pages/signon/actions'
+import { setValueField } from 'common/store/pages/signon/actions'
 import { Formik } from 'formik'
 import { View } from 'react-native'
 import { useDispatch } from 'react-redux'
diff --git a/packages/mobile/src/screens/sign-up-screen/types.ts b/packages/mobile/src/screens/sign-up-screen/types.ts
index 6c853c68d08..e5d9dacea95 100644
--- a/packages/mobile/src/screens/sign-up-screen/types.ts
+++ b/packages/mobile/src/screens/sign-up-screen/types.ts
@@ -5,4 +5,6 @@ export type SignUpScreenParamList = {
   CreatePassword: CreatePasswordParams
   PickHandle: undefined
   FinishProfile: undefined
+  SelectGenre: undefined
+  SelectArtists: undefined
 }
diff --git a/packages/mobile/src/screens/signon/ProfileManual.tsx b/packages/mobile/src/screens/signon/ProfileManual.tsx
index 25ab6f96888..df984a6d5a7 100644
--- a/packages/mobile/src/screens/signon/ProfileManual.tsx
+++ b/packages/mobile/src/screens/signon/ProfileManual.tsx
@@ -9,7 +9,6 @@ import {
   getProfileImageField,
   getIsVerified
 } from 'common/store/pages/signon/selectors'
-import type { EditableField } from 'common/store/pages/signon/types'
 import { EditingStatus } from 'common/store/pages/signon/types'
 import {
   Animated,
@@ -254,10 +253,10 @@ const ProfileManual = ({ navigation }: ProfileManualProps) => {
   const styles = useStyles()
   const dispatch = useDispatch()
 
-  const handleField: EditableField = useSelector(getHandleField)
-  const nameField: EditableField = useSelector(getNameField)
-  const emailField: EditableField = useSelector(getEmailField)
-  const profileImage: Image = useSelector(getProfileImageField)
+  const handleField = useSelector(getHandleField)
+  const nameField = useSelector(getNameField)
+  const emailField = useSelector(getEmailField)
+  const profileImage = useSelector(getProfileImageField)
   const isVerified: boolean = useSelector(getIsVerified)
 
   const [showHandleConfirmingSpinner, setShowHandleConfirmingSpinner] =
@@ -394,7 +393,7 @@ const ProfileManual = ({ navigation }: ProfileManualProps) => {
                     hasSelectedImage={!!profileImage}
                     photoBtnIsHidden={photoBtnIsHidden}
                     setPhotoBtnIsHidden={setPhotoBtnIsHidden}
-                    profileImage={profileImage}
+                    profileImage={profileImage as any}
                   />
                   <PhotoButton
                     hasSelectedImage={!!profileImage}
diff --git a/packages/mobile/src/store/store.ts b/packages/mobile/src/store/store.ts
index 3c781f3a9e2..66df292711b 100644
--- a/packages/mobile/src/store/store.ts
+++ b/packages/mobile/src/store/store.ts
@@ -8,13 +8,13 @@ import {
 } from '@audius/common'
 import backend from 'audius-client/src/common/store/backend/reducer'
 import type { BackendState } from 'audius-client/src/common/store/backend/types'
-import signOnReducer from 'audius-client/src/common/store/pages/signon/reducer'
+import searchBar from 'audius-client/src/common/store/search-bar/reducer'
+import type { SearchBarState } from 'audius-client/src/common/store/search-bar/types'
+import signOnReducer from 'common/store/pages/signon/reducer'
 import type {
   SignOnPageState,
   SignOnPageReducer
-} from 'audius-client/src/common/store/pages/signon/types'
-import searchBar from 'audius-client/src/common/store/search-bar/reducer'
-import type { SearchBarState } from 'audius-client/src/common/store/search-bar/types'
+} from 'common/store/pages/signon/types'
 import RNRestart from 'react-native-restart'
 import type { Store } from 'redux'
 import { createStore, combineReducers, applyMiddleware } from 'redux'
diff --git a/packages/probers/cypress/e2e/signUp.cy.ts b/packages/probers/cypress/e2e/signUp.cy.ts
index cac7f504f7d..11672e3d0a8 100644
--- a/packages/probers/cypress/e2e/signUp.cy.ts
+++ b/packages/probers/cypress/e2e/signUp.cy.ts
@@ -70,7 +70,7 @@ describe('Sign Up', () => {
 
     it('should create an account', () => {
       const testUser = generateTestUser()
-      const { email, password, handle } = testUser
+      const { email, password, handle, name } = testUser
       cy.visit('signup')
       cy.findByRole('textbox', { name: /email/i }).type(email)
       cy.findByRole('button', { name: /sign up free/i }).click()
@@ -102,10 +102,36 @@ describe('Sign Up', () => {
         }
       )
 
-      cy.findByRole('textbox', { name: /display name/i }).type(handle)
+      cy.findByRole('textbox', { name: /display name/i }).type(name)
       cy.findByRole('button', { name: /continue/i }).click()
 
       cy.findByRole('heading', { name: /select your genres/i }).should('exist')
+      cy.findByText(/start by picking some of your favorite genres./i).should(
+        'exist'
+      )
+
+      cy.findByText(name).should('exist')
+      cy.findByText(handle).should('exist')
+
+      const genres = [/^acoustic/i, /^pop/i, /^lo-fi/i, /^electronic/i]
+
+      for (const genre of genres) {
+        cy.findByRole('checkbox', { name: genre }).check()
+      }
+
+      cy.findByRole('button', { name: /continue/i }).click()
+
+      cy.findByRole('heading', {
+        name: /follow at least 3 artists/i,
+        level: 1
+      }).should('exist')
+      cy.findByText(/curate your feed with tracks uploaded/i).should('exist')
+
+      cy.findByRole('radio', { name: /featured/i }).should('be.checked')
+
+      for (const genre of genres) {
+        cy.findByRole('radio', { name: genre }).should('exist')
+      }
     })
   })
 
diff --git a/packages/web/src/common/store/pages/feed/lineup/sagas.ts b/packages/web/src/common/store/pages/feed/lineup/sagas.ts
index 8875cfdbf4d..aab1e0ebd5f 100644
--- a/packages/web/src/common/store/pages/feed/lineup/sagas.ts
+++ b/packages/web/src/common/store/pages/feed/lineup/sagas.ts
@@ -19,8 +19,9 @@ import { select, all } from 'redux-saga/effects'
 import { processAndCacheCollections } from 'common/store/cache/collections/utils'
 import { processAndCacheTracks } from 'common/store/cache/tracks/utils'
 import { LineupSagas } from 'common/store/lineup/sagas'
-import { getFollowIds } from 'common/store/pages/signon/selectors'
 import { waitForRead } from 'utils/sagaHelpers'
+
+import { getFollowIds } from '../../signon/selectors'
 const { getFeedFilter } = feedPageSelectors
 const getAccountUser = accountSelectors.getAccountUser
 
diff --git a/packages/web/src/common/store/pages/signon/actions.ts b/packages/web/src/common/store/pages/signon/actions.ts
index 1118fe8fe59..a8868edf17d 100644
--- a/packages/web/src/common/store/pages/signon/actions.ts
+++ b/packages/web/src/common/store/pages/signon/actions.ts
@@ -82,7 +82,7 @@ export const SET_REFERRER = 'SIGN_ON/SET_REFERRER'
  * @param field the field to be set
  * @param value the value to be set
  */
-export function setValueField(field: string, value: string) {
+export function setValueField(field: string, value: string | string[]) {
   return { type: SET_VALUE_FIELD, field, value }
 }
 
diff --git a/packages/web/src/common/store/pages/signon/selectors.js b/packages/web/src/common/store/pages/signon/selectors.js
deleted file mode 100644
index 7b20ce8cd87..00000000000
--- a/packages/web/src/common/store/pages/signon/selectors.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import { accountSelectors, cacheUsersSelectors } from '@audius/common'
-import { createSelector } from 'reselect'
-const { getHasAccount } = accountSelectors
-const { getUsers } = cacheUsersSelectors
-
-// Sign On selectors
-export const getSignOn = (state) => state.signOn
-export const getEmailField = (state) => state.signOn.email
-export const getNameField = (state) => state.signOn.name
-export const getPasswordField = (state) => state.signOn.password
-export const getHandleField = (state) => state.signOn.handle
-export const getIsVerified = (state) => state.signOn.verified
-export const getProfileImageField = (state) => state.signOn.profileImage
-export const getIsMobileSignOnVisible = (state) =>
-  state.signOn.isMobileSignOnVisible
-export const getStatus = (state) => state.signOn.status
-export const getPage = (state) => state.signOn.page
-export const getToastText = (state) => state.signOn.toastText
-export const getRouteOnCompletion = (state) => state.signOn.routeOnCompletion
-export const getRouteOnExit = (state) => state.signOn.routeOnExit
-export const getAccountReady = (state) => state.signOn.accountReady
-export const getStartedSignUpProcess = (state) =>
-  state.signOn.startedSignUpProcess
-export const getFinishedSignUpProcess = (state) =>
-  state.signOn.finishedSignUpProcess
-export const getReferrer = (state) => state.signOn.referrer
-
-export const getFollowArtists = (state) => state.signOn.followArtists
-export const getFollowIds = (state) =>
-  state.signOn.followArtists.selectedUserIds
-
-export const getSuggestedFollowIds = (state) => {
-  const { selectedCategory, categories } = state.signOn.followArtists
-  return categories[selectedCategory] || []
-}
-
-export const getHasCompletedAccount = createSelector(
-  [getHasAccount, getStartedSignUpProcess, getFinishedSignUpProcess],
-  (hasAccount, startedSignUpProcess, finishedSignUpProcess) => {
-    // If a user has started the sign up flow,
-    // only return true if they finish the flow
-    // (including selecting followees)
-    return hasAccount && (!startedSignUpProcess || finishedSignUpProcess)
-  }
-)
-
-/**
- * Each lineup that invokes this selector should pass its own selector as an argument, e.g.
- *   const getLineupMetadatas = makeGetLineupMetadatas(ownProps.lineupSelector)
- *   const mapStateToProps = (state, props) => ({ lineup: getLineupMetadatas(state) })
- */
-export const makeGetFollowArtists = () =>
-  createSelector([getSuggestedFollowIds, getUsers], (artistIds, users) =>
-    artistIds.map((aId) => users[aId]).filter(Boolean)
-  )
diff --git a/packages/web/src/common/store/pages/signon/selectors.ts b/packages/web/src/common/store/pages/signon/selectors.ts
new file mode 100644
index 00000000000..f5ee3fbcd5e
--- /dev/null
+++ b/packages/web/src/common/store/pages/signon/selectors.ts
@@ -0,0 +1,60 @@
+import { accountSelectors, cacheUsersSelectors } from '@audius/common'
+import { createSelector } from 'reselect'
+
+import { AppState } from 'store/types'
+const { getHasAccount } = accountSelectors
+const { getUsers } = cacheUsersSelectors
+
+// Sign On selectors
+export const getSignOn = (state: AppState) => state.signOn
+export const getEmailField = (state: AppState) => state.signOn.email
+export const getNameField = (state: AppState) => state.signOn.name
+export const getPasswordField = (state: AppState) => state.signOn.password
+export const getHandleField = (state: AppState) => state.signOn.handle
+export const getIsVerified = (state: AppState) => state.signOn.verified
+export const getProfileImageField = (state: AppState) =>
+  state.signOn.profileImage
+export const getGenres = (state: AppState) => state.signOn.genres
+export const getIsMobileSignOnVisible = (state: AppState) =>
+  state.signOn.isMobileSignOnVisible
+export const getStatus = (state: AppState) => state.signOn.status
+export const getPage = (state: AppState) => state.signOn.page
+export const getToastText = (state: AppState) => state.signOn.toastText
+export const getRouteOnCompletion = (state: AppState) =>
+  state.signOn.routeOnCompletion
+export const getRouteOnExit = (state: AppState) => state.signOn.routeOnExit
+export const getAccountReady = (state: AppState) => state.signOn.accountReady
+export const getStartedSignUpProcess = (state: AppState) =>
+  state.signOn.startedSignUpProcess
+export const getFinishedSignUpProcess = (state: AppState) =>
+  state.signOn.finishedSignUpProcess
+export const getReferrer = (state: AppState) => state.signOn.referrer
+
+export const getFollowArtists = (state: AppState) => state.signOn.followArtists
+export const getFollowIds = (state: AppState) =>
+  state.signOn.followArtists.selectedUserIds
+
+export const getSuggestedFollowIds = (state: AppState) => {
+  const { selectedCategory, categories } = state.signOn.followArtists
+  return categories[selectedCategory] || []
+}
+
+export const getHasCompletedAccount = createSelector(
+  [getHasAccount, getStartedSignUpProcess, getFinishedSignUpProcess],
+  (hasAccount, startedSignUpProcess, finishedSignUpProcess) => {
+    // If a user has started the sign up flow,
+    // only return true if they finish the flow
+    // (including selecting followees)
+    return hasAccount && (!startedSignUpProcess || finishedSignUpProcess)
+  }
+)
+
+/**
+ * Each lineup that invokes this selector should pass its own selector as an argument, e.g.
+ *   const getLineupMetadatas = makeGetLineupMetadatas(ownProps.lineupSelector)
+ *   const mapStateToProps = (state, props) => ({ lineup: getLineupMetadatas(state) })
+ */
+export const makeGetFollowArtists = () =>
+  createSelector([getSuggestedFollowIds, getUsers], (artistIds, users) =>
+    artistIds.map((aId) => users[aId]).filter(Boolean)
+  )
diff --git a/packages/web/src/common/store/pages/signon/types.ts b/packages/web/src/common/store/pages/signon/types.ts
index 50d4511784f..808eacc6586 100644
--- a/packages/web/src/common/store/pages/signon/types.ts
+++ b/packages/web/src/common/store/pages/signon/types.ts
@@ -35,7 +35,7 @@ export const artistCategories = [
 export type FollowArtists = {
   selectedCategory: FollowArtistsCategory
   categories: {
-    [key in keyof typeof FollowArtistsCategory]?: ID[]
+    [key in FollowArtistsCategory]?: ID[]
   }
   selectedUserIds: ID[]
 }
@@ -45,6 +45,7 @@ export default interface SignOnPageState {
   name: EditableField
   password: EditableField
   handle: EditableField
+  genres: string[]
   verified: boolean
   useMetaMask: boolean
   accountReady: boolean
@@ -58,6 +59,13 @@ export default interface SignOnPageState {
   status: EditingStatus
   toastText: string | null
   followArtists: FollowArtists
+  isMobileSignOnVisible: boolean
+  routeOnCompletion: boolean
+  startedSignUpProcess: boolean
+  finishedSignUpProcess: boolean
+  routeOnExit: boolean
+  page: number
+  referrer: string
 }
 
 export type { SignOnPageState }
diff --git a/packages/web/src/pages/App.js b/packages/web/src/pages/App.js
index 24f23b93324..00322786da1 100644
--- a/packages/web/src/pages/App.js
+++ b/packages/web/src/pages/App.js
@@ -474,7 +474,6 @@ class App extends Component {
           {this.props.showCookieBanner ? <CookieBanner /> : null}
           <Notice />
           <Navigator />
-          <div className={styles.draggableArea} />
           <div
             ref={this.props.mainContentRef}
             id={MAIN_CONTENT_ID}
diff --git a/packages/web/src/pages/App.module.css b/packages/web/src/pages/App.module.css
index 156cbee1a37..aa32095f87a 100644
--- a/packages/web/src/pages/App.module.css
+++ b/packages/web/src/pages/App.module.css
@@ -43,17 +43,6 @@ body {
   z-index: 5;
 }
 
-.draggableArea {
-  position: absolute;
-  top: 0;
-  left: var(--nav-width);
-  right: 0;
-  height: 88px;
-  background: rgba(0, 0, 0, 0);
-  opacity: 0;
-  -webkit-app-region: drag;
-}
-
 .mainContentWrapper {
   margin-left: var(--nav-width);
   margin-bottom: 88px;
diff --git a/packages/web/src/pages/sign-on/SignOn.tsx b/packages/web/src/pages/sign-on/SignOn.tsx
index e23636c1d5e..1310f34728f 100644
--- a/packages/web/src/pages/sign-on/SignOn.tsx
+++ b/packages/web/src/pages/sign-on/SignOn.tsx
@@ -49,12 +49,15 @@ const SignOn = ({
 
   useEffect(() => {
     // Check for referrer before redirecting if signed in to support retroactive referrals
+    // @ts-ignore
     const referrerHandle = new URLSearchParams(location.search).get('ref')
     if (referrerHandle) {
+      // @ts-ignore
       fetchReferrer(referrerHandle)
     }
 
     if (isInitialRender && hasAccount) {
+      // @ts-ignore
       replaceRoute(TRENDING_PAGE)
     }
   }, [isInitialRender, hasAccount, location, fetchReferrer, replaceRoute])
@@ -88,4 +91,5 @@ function mapDispatchToProps(dispatch: Dispatch) {
   }
 }
 
+// @ts-ignore
 export default withRouter(connect(mapStateToProps, mapDispatchToProps)(SignOn))
diff --git a/packages/web/src/pages/sign-on/SignOnProvider.tsx b/packages/web/src/pages/sign-on/SignOnProvider.tsx
index 4c19315ebc3..0f23c5ae30a 100644
--- a/packages/web/src/pages/sign-on/SignOnProvider.tsx
+++ b/packages/web/src/pages/sign-on/SignOnProvider.tsx
@@ -159,6 +159,7 @@ export class SignOnProvider extends Component<SignOnProps, SignOnState> {
     if (this.state.initialPage) {
       this.props.goToRoute(TRENDING_PAGE)
     } else if (this.props.routeOnExit) {
+      // @ts-ignore
       this.props.goToRoute(this.props.routeOnExit)
     } else {
       // Go back a route
@@ -485,6 +486,7 @@ export class SignOnProvider extends Component<SignOnProps, SignOnState> {
       return <Children {...childProps} {...mobileProps} />
     } else {
       const Children = this.props.children as ComponentType<DesktopSignOnProps>
+      // @ts-ignore
       return <Children {...childProps} {...desktopProps} />
     }
   }
diff --git a/packages/web/src/pages/sign-up-page/SignUpRootPage.tsx b/packages/web/src/pages/sign-up-page/SignUpRootPage.tsx
index 93bbf37b1a2..bd267c10e03 100644
--- a/packages/web/src/pages/sign-up-page/SignUpRootPage.tsx
+++ b/packages/web/src/pages/sign-up-page/SignUpRootPage.tsx
@@ -9,6 +9,10 @@ import {
   FinishProfileState
 } from './pages/FinishProfilePage'
 import { PickHandlePage, PickHandleState } from './pages/PickHandlePage'
+import {
+  SelectArtistsPage,
+  SelectArtistsState
+} from './pages/SelectArtistsPage'
 import { SelectGenrePage, SelectGenreState } from './pages/SelectGenrePage'
 import { SignUpPage, SignUpState } from './pages/SignUpPage'
 
@@ -18,6 +22,7 @@ type SignUpRootState =
   | PickHandleState
   | FinishProfileState
   | SelectGenreState
+  | SelectArtistsState
 
 export const SignUpRootPage = () => {
   const [signUpState, setSignUpState] = useState<SignUpRootState>({
@@ -42,7 +47,10 @@ export const SignUpRootPage = () => {
       {signUpState.stage === 'finish-profile' ? (
         <FinishProfilePage onNext={setSignUpState} />
       ) : null}
-      {signUpState.stage === 'select-genre' ? <SelectGenrePage /> : null}
+      {signUpState.stage === 'select-genre' ? (
+        <SelectGenrePage onNext={setSignUpState} />
+      ) : null}
+      {signUpState.stage === 'select-artists' ? <SelectArtistsPage /> : null}
     </div>
   )
 }
diff --git a/packages/web/src/pages/sign-up-page/components/GenrePill.tsx b/packages/web/src/pages/sign-up-page/components/GenrePill.tsx
new file mode 100644
index 00000000000..ecbf559adcc
--- /dev/null
+++ b/packages/web/src/pages/sign-up-page/components/GenrePill.tsx
@@ -0,0 +1,17 @@
+import { InputHTMLAttributes } from 'react'
+
+type GenrePillProps = InputHTMLAttributes<HTMLInputElement> & {
+  label: string
+}
+
+export const GenrePill = (props: GenrePillProps) => {
+  const { label, ...other } = props
+  return (
+    <div>
+      <label>
+        <input {...other} type='checkbox' />
+        {label}
+      </label>
+    </div>
+  )
+}
diff --git a/packages/web/src/pages/sign-up-page/pages/FinishProfilePage.tsx b/packages/web/src/pages/sign-up-page/pages/FinishProfilePage.tsx
index ebd3fa2139a..07de8c51538 100644
--- a/packages/web/src/pages/sign-up-page/pages/FinishProfilePage.tsx
+++ b/packages/web/src/pages/sign-up-page/pages/FinishProfilePage.tsx
@@ -3,7 +3,9 @@ import { useCallback } from 'react'
 import { Nullable } from '@audius/common'
 import { HarmonyButton } from '@audius/stems'
 import { Formik, Form } from 'formik'
+import { useDispatch } from 'react-redux'
 
+import { setValueField } from 'common/store/pages/signon/actions'
 import { TextField } from 'components/form-fields'
 
 import { CoverPhotoField } from '../components/CoverPhotoField'
@@ -41,11 +43,15 @@ const initialValues = {
 
 export const FinishProfilePage = (props: FinishProfilePageProps) => {
   const { onNext } = props
+  const dispatch = useDispatch()
+
   const handleSubmit = useCallback(
     (values: FinishProfileValues) => {
+      const { displayName } = values
+      dispatch(setValueField('name', displayName))
       onNext({ stage: 'select-genre' })
     },
-    [onNext]
+    [dispatch, onNext]
   )
 
   return (
diff --git a/packages/web/src/pages/sign-up-page/pages/PickHandlePage.tsx b/packages/web/src/pages/sign-up-page/pages/PickHandlePage.tsx
index fee556cb057..a4c2d06c004 100644
--- a/packages/web/src/pages/sign-up-page/pages/PickHandlePage.tsx
+++ b/packages/web/src/pages/sign-up-page/pages/PickHandlePage.tsx
@@ -2,7 +2,9 @@ import { useCallback } from 'react'
 
 import { HarmonyButton } from '@audius/stems'
 import { Formik, Form } from 'formik'
+import { useDispatch } from 'react-redux'
 
+import { setValueField } from 'common/store/pages/signon/actions'
 import { TextField } from 'components/form-fields'
 
 import { FinishProfileState } from './FinishProfilePage'
@@ -33,11 +35,15 @@ type PickHandlePageProps = {
 
 export const PickHandlePage = (props: PickHandlePageProps) => {
   const { onNext } = props
+  const dispatch = useDispatch()
+
   const handleSubmit = useCallback(
     (values: PickHandleValues) => {
+      const { handle } = values
+      dispatch(setValueField('handle', handle))
       onNext({ stage: 'finish-profile' })
     },
-    [onNext]
+    [dispatch, onNext]
   )
 
   return (
diff --git a/packages/web/src/pages/sign-up-page/pages/SelectArtistsPage.tsx b/packages/web/src/pages/sign-up-page/pages/SelectArtistsPage.tsx
new file mode 100644
index 00000000000..48eac8e3731
--- /dev/null
+++ b/packages/web/src/pages/sign-up-page/pages/SelectArtistsPage.tsx
@@ -0,0 +1,44 @@
+import { ChangeEvent, useCallback, useState } from 'react'
+
+import { getGenres } from 'common/store/pages/signon/selectors'
+import { useSelector } from 'utils/reducer'
+
+const messages = {
+  header: 'Follow At Least 3 Artists',
+  description:
+    'Curate your feed with tracks uploaded or reposted by anyone you follow. Click the artist’s photo to preview their music.',
+  continue: 'Continue'
+}
+
+export type SelectArtistsState = {
+  stage: 'select-artists'
+}
+
+export const SelectArtistsPage = () => {
+  const genres = useSelector((state) => ['Featured', ...getGenres(state)])
+  const [currentGenre, setCurrentGenre] = useState('Featured')
+
+  const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    setCurrentGenre(e.target.value)
+  }, [])
+
+  return (
+    <div>
+      <h1>{messages.header}</h1>
+      <p>{messages.description}</p>
+      <div role='radiogroup'>
+        {genres.map((genre) => (
+          <label key={genre}>
+            <input
+              type='radio'
+              value={genre}
+              checked={genre === currentGenre}
+              onChange={handleChange}
+            />
+            {genre}
+          </label>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/packages/web/src/pages/sign-up-page/pages/SelectGenrePage.tsx b/packages/web/src/pages/sign-up-page/pages/SelectGenrePage.tsx
index b1833b17ace..a7f7b7fd819 100644
--- a/packages/web/src/pages/sign-up-page/pages/SelectGenrePage.tsx
+++ b/packages/web/src/pages/sign-up-page/pages/SelectGenrePage.tsx
@@ -1,7 +1,20 @@
-import { useCallback } from 'react'
+import { ChangeEvent, useCallback } from 'react'
 
-import { Genre } from '@audius/common'
+import { GENRES, convertGenreLabelToValue } from '@audius/common'
+import { HarmonyButton } from '@audius/stems'
 import { Form, Formik } from 'formik'
+import { useDispatch } from 'react-redux'
+
+import { setField } from 'common/store/pages/signon/actions'
+import {
+  getHandleField,
+  getNameField
+} from 'common/store/pages/signon/selectors'
+import { useSelector } from 'utils/reducer'
+
+import { GenrePill } from '../components/GenrePill'
+
+import { SelectArtistsState } from './SelectArtistsPage'
 
 export type SelectGenreState = {
   stage: 'select-genre'
@@ -9,27 +22,77 @@ export type SelectGenreState = {
 
 const messages = {
   header: 'Select Your Genres',
-  description: 'Start by picking some of your favorite genres.'
+  description: 'Start by picking some of your favorite genres.',
+  continue: 'Continue'
 }
 
-type SelectGenreValues = {
-  genres: Genre[]
-}
+const genres = GENRES.map((genre) => ({
+  value: genre,
+  label: convertGenreLabelToValue(genre)
+}))
+
+type SelectGenreValues = Record<string, boolean>
 
-const initialValues = {
-  genres: []
+const initialValues = genres.reduce(
+  (acc, genre) => ({
+    ...acc,
+    [genre.value]: false
+  }),
+  {} as SelectGenreValues
+)
+
+type SelectGenrePageProps = {
+  onNext: (state: SelectArtistsState) => void
 }
 
-export const SelectGenrePage = () => {
-  const handleSubmit = useCallback((values: SelectGenreValues) => {}, [])
+export const SelectGenrePage = (props: SelectGenrePageProps) => {
+  const { onNext } = props
+  const { value: displayName } = useSelector(getNameField)
+  const { value: handle } = useSelector(getHandleField)
+  const dispatch = useDispatch()
+
+  const handleSubmit = useCallback(
+    (values: SelectGenreValues) => {
+      const genres = Object.keys(values).filter((genre) => values[genre])
+      dispatch(setField('genres', genres))
+      onNext({ stage: 'select-artists' })
+    },
+    [dispatch, onNext]
+  )
 
   return (
     <div>
+      <div>
+        <p>{displayName}</p>
+        <p>{handle}</p>
+      </div>
       <h1>{messages.header}</h1>
       <p>{messages.description}</p>
 
       <Formik initialValues={initialValues} onSubmit={handleSubmit}>
-        <Form>hello world</Form>
+        {({ values, setValues }) => {
+          const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+            setValues({ ...values, [e.target.name]: !values[e.target.name] })
+          }
+
+          return (
+            <Form>
+              {genres.map((genre) => {
+                const { label, value } = genre
+                return (
+                  <GenrePill
+                    key={value}
+                    label={label}
+                    name={value}
+                    checked={!!values[value]}
+                    onChange={handleChange}
+                  />
+                )
+              })}
+              <HarmonyButton type='submit' text={messages.continue} />
+            </Form>
+          )
+        }}
       </Formik>
     </div>
   )
diff --git a/packages/web/src/store/types.ts b/packages/web/src/store/types.ts
index db4f3abdc81..9e3f870b66e 100644
--- a/packages/web/src/store/types.ts
+++ b/packages/web/src/store/types.ts
@@ -18,7 +18,7 @@ import {
 } from '@audius/common'
 import { RouterState } from 'connected-react-router'
 
-import signOnReducer from 'common/store/pages/signon/reducer'
+import SignOnPageState from 'common/store/pages/signon/types'
 import { SearchAiBarState } from 'common/store/search-ai-bar/types'
 import { SearchBarState } from 'common/store/search-bar/types'
 import { EmbedModalState } from 'components/embed-modal/store/types'
@@ -48,7 +48,7 @@ export type AppState = CommonState & {
 
   searchBar: SearchBarState
   searchAiBar: SearchAiBarState
-  signOn: ReturnType<typeof signOnReducer>
+  signOn: SignOnPageState
 
   // Config
   reachability: ReachabilityState