Fix broken track upload for electronic subgenres on mobile (#3835)

Co-authored-by: Nikki Kang <kangaroo233@gmail.com>
AudiusProject · Aug 1, 2023 · 6337949 · 6337949
1 parent f643695
commit 6337949
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 10 deletions.
diff --git a/packages/common/src/utils/genres.ts b/packages/common/src/utils/genres.ts
@@ -85,6 +85,7 @@ export const getCanonicalName = (genre: Genre | any) => {
   return genre
 }
 
+/** User-facing genre labels. Use `convertGenreLabelToValue` to get the correct genre value (to set as the genre in track metadata). */
 export const GENRES = [
   Genre.ELECTRONIC,
   Genre.ROCK,
@@ -115,11 +116,13 @@ export const GENRES = [
   Genre.LATIN,
   Genre.LOFI,
   Genre.HYPERPOP,
-  ...Object.keys(ELECTRONIC_SUBGENRES).map(
-    (subgenre) => `${ELECTRONIC_PREFIX}${subgenre}`
-  )
+  ...Object.values(ELECTRONIC_SUBGENRES)
 ]
 
+export const convertGenreLabelToValue = (genreLabel: typeof GENRES[number]) => {
+  return genreLabel.replace(ELECTRONIC_PREFIX, '')
+}
+
 const NEWLY_ADDED_GENRES: string[] = []
 
 export const TRENDING_GENRES = GENRES.filter(

diff --git a/packages/mobile/src/screens/edit-track-screen/screens/SelectGenreScreen.tsx b/packages/mobile/src/screens/edit-track-screen/screens/SelectGenreScreen.tsx
@@ -1,4 +1,4 @@
-import { GENRES } from '@audius/common'
+import { convertGenreLabelToValue, GENRES } from '@audius/common'
 import { useField } from 'formik'
 
 import IconGenre from 'app/assets/images/iconGenre.svg'
@@ -11,7 +11,10 @@ const messages = {
   searchText: 'Select Genres'
 }
 
-const genres = GENRES.map((genre) => ({ value: genre, label: genre }))
+const genres = GENRES.map((genre) => ({
+  value: convertGenreLabelToValue(genre),
+  label: genre
+}))
 
 export const SelectGenreScreen = () => {
   const [{ value }, , { setValue }] = useField('genre')

diff --git a/packages/web/src/components/data-entry/FormTile.js b/packages/web/src/components/data-entry/FormTile.js
@@ -2,7 +2,7 @@ import { Component, useState, useCallback } from 'react'
 
 import {
   GENRES,
-  ELECTRONIC_PREFIX,
+  convertGenreLabelToValue,
   getCanonicalName,
   createRemixOfMetadata,
   creativeCommons,
@@ -252,10 +252,7 @@ const BasicForm = (props) => {
               isRequired={props.requiredFields.genre}
               error={props.invalidFields.genre}
               onSelect={(value) =>
-                props.onChangeField(
-                  'genre',
-                  value.replace(ELECTRONIC_PREFIX, '')
-                )
+                props.onChangeField('genre', convertGenreLabelToValue(value))
               }
               size='large'
             />

diff --git a/packages/web/src/pages/upload-page/fields/TrackMetadataFields.tsx b/packages/web/src/pages/upload-page/fields/TrackMetadataFields.tsx
@@ -56,6 +56,7 @@ export const TrackMetadataFields = (props: TrackMetadataFieldsProps) => {
             aria-label={messages.genre}
             placeholder={messages.genre}
             mount='parent'
+            // TODO: Use correct value for Genres based on label (see `convertGenreLabelToValue`)
             menu={{ items: GENRES }}
             size='large'
           />