[C-1465] Address mobile upload tech debt (#2270)

README.md

@@ -77,3 +77,19 @@ npm run stems
 # common in watch mode
 npm run common
 ```
+
+### Installing and Updating packages
+
+Installing and updating a package in a sub-package requires a special approach in a monorepo. Simply running `npm i --save some-package` in a sub-package will fail because lerna is needed to symlink local packages. Use the following command instead:
+
+```bash
+npx lerna add <package-name> [--dev] packages/<sub-repo>
+```
+where <package-name> is the name of the package from npm, and <sub-repo> is the name of the sub-project you want to add the package to. (use --dev if it's a dev dependency)
+
+To update a package, manually update the version in the relevant package.json, and then run `npm i` from the root. A script to upgrade `@audius/sdk` in all sub-packages is a present in root package.json is available:
+
+```bash
+npm run update-sdk
+```
+It's possible to run a modified version of this command to do more complex upgrade logic across sub-repos, so use it as a guide.

packages/mobile/src/components/core/TagInput.tsx

@@ -17,7 +17,9 @@ import { Text } from './Text'
 import type { TextInputProps } from './TextInput'
 import { TextInput } from './TextInput'
 
-type TagInputProps = TextInputProps
+type TagInputProps = TextInputProps & {
+  maxTags: number
+}
 
 const useStyles = makeStyles(({ palette, spacing, typography }) => ({
   tags: {
@@ -54,7 +56,15 @@ const useStyles = makeStyles(({ palette, spacing, typography }) => ({
 const emptyTags = []
 
 export const TagInput = (props: TagInputProps) => {
-  const { value, onChangeText, placeholder, onFocus, onBlur, ...other } = props
+  const {
+    value,
+    onChangeText,
+    placeholder,
+    onFocus,
+    onBlur,
+    maxTags,
+    ...other
+  } = props
   const [inputValue, setInputValue] = useState('')
   const [isFocused, setIsFocused] = useState(false)
   const { staticWhite } = useThemeColors()
@@ -82,11 +92,29 @@ export const TagInput = (props: TagInputProps) => {
     </View>
   ) : null
 
-  const handleChangeText = useCallback((value: string) => {
-    if (!value.includes(' ')) {
-      setInputValue(value)
-    }
-  }, [])
+  const tagCount = tags.length
+  const nearLimit = (7.0 / 8.0) * maxTags
+  const tagCountColor =
+    tagCount < nearLimit
+      ? 'neutralLight4'
+      : tagCount < maxTags
+      ? 'warning'
+      : 'error'
+
+  const endAdornment = (
+    <Text variant='body' color={tagCountColor}>
+      {tagCount}/10
+    </Text>
+  )
+
+  const handleChangeText = useCallback(
+    (value: string) => {
+      if (!value.includes(' ') && tagCount !== maxTags) {
+        setInputValue(value)
+      }
+    },
+    [tagCount, maxTags]
+  )
 
   const handleAddTag = useCallback(() => {
     onChangeText?.(uniq([...tags, trimToAlphaNumeric(inputValue)]).join(','))
@@ -131,7 +159,8 @@ export const TagInput = (props: TagInputProps) => {
       onChangeText={handleChangeText}
       onKeyPress={handleKeyPress}
       startAdornment={startAdornment}
-      returnKeyType='default'
+      endAdornment={endAdornment}
+      returnKeyType='done'
       onFocus={handleFocus}
       onBlur={handleBlur}
       styles={{ input: styles.input }}

packages/mobile/src/components/core/TextInput.tsx

@@ -278,7 +278,6 @@ export const TextInput = forwardRef<RNTextInput, TextInputProps>(
             underlineColorAndroid='transparent'
             autoComplete='off'
             autoCorrect={false}
-            returnKeyType='search'
             selectionColor={secondary}
             placeholderTextColor={styles.placeholderText.color}
             value={value}

packages/mobile/src/screens/edit-profile-screen/EditProfileScreen.tsx

@@ -77,11 +77,7 @@ const EditProfileForm = (props: FormikProps<ProfileValues>) => {
   }, [editStatus, navigation])
 
   return (
-    <FormScreen
-      variant='secondary'
-      onReset={handleReset}
-      onSubmit={handleSubmit}
-    >
+    <FormScreen variant='white' onReset={handleReset} onSubmit={handleSubmit}>
       <FormImageInput
         name='cover_photo'
         styles={{ imageContainer: styles.coverPhoto }}

packages/mobile/src/screens/favorites-screen/FilterInput.tsx

@@ -25,6 +25,7 @@ export const FilterInput = (props: FilterInputProps) => {
         placeholder={placeholder}
         value={value}
         onChangeText={onChangeText}
+        returnKeyType='search'
         Icon={IconFilter}
       />
     </Tile>

packages/mobile/src/screens/list-selection-screen/ListSelectionScreen.tsx

@@ -130,6 +130,7 @@ export const ListSelectionScreen = (props: ListSelectionProps) => {
           placeholder={searchText}
           styles={{ root: styles.search, input: styles.searchInput }}
           onChangeText={setFilterInput}
+          returnKeyType='search'
         />
         <FlatList
           renderItem={renderItem}

packages/mobile/src/screens/search-screen/SearchBar.tsx

@@ -85,6 +85,7 @@ export const SearchBar = () => {
       clearable={!isLoading && clearable}
       onClear={onClear}
       onSubmitEditing={handleSubmit}
+      returnKeyType='search'
     />
   )
 }

packages/mobile/src/screens/trending-screen/TrendingFilterDrawer.tsx

@@ -91,6 +91,7 @@ export const TrendingFilterDrawer = () => {
           style={styles.search}
           value={searchValue}
           onChangeText={setSearchValue}
+          returnKeyType='search'
         />
         <FlatList
           keyboardShouldPersistTaps='handled'

packages/mobile/src/screens/upload-screen/UploadingTrackTile.tsx → packages/mobile/src/screens/upload-screen/components/UploadingTrackTile.tsx

@@ -11,7 +11,9 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
   tile: {
     marginBottom: spacing(4)
   },
-  tileContent: { padding: spacing(4) },
+  tileContent: {
+    padding: spacing(4)
+  },
   content: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -22,6 +24,10 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
     width: spacing(12),
     marginRight: spacing(4),
     backgroundColor: palette.neutralLight6
+  },
+  title: {
+    flex: 1,
+    width: 1
   }
 }))
 
@@ -47,7 +53,7 @@ export const UploadingTrackTile = (props: UploadingTrackTileProps) => {
             />
           )}
         </DynamicImage>
-        <Text fontSize='large' weight='demiBold'>
+        <Text weight='demiBold' style={styles.title}>
           {title}
         </Text>
       </View>

packages/mobile/src/screens/upload-screen/components/index.ts

@@ -1 +1,3 @@
 export * from './RemixTrackPill'
+export * from './UploadingTrackTile'
+export * from './UploadStackScreen'

packages/mobile/src/screens/upload-screen/fields/ReleaseDateField.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useMemo, useRef, useState } from 'react'
 
 import type { Nullable } from '@audius/common'
 import { Theme } from '@audius/common'
@@ -77,6 +77,7 @@ export const ReleaseDateField = () => {
   const [isOpen, setIsOpen] = useState(false)
   const { primary } = useThemeColors()
   const theme = useThemeVariant()
+  const maximumDate = useRef(new Date())
 
   const releaseDate = useMemo(
     () => (value ? new Date(value) : new Date()),
@@ -126,7 +127,7 @@ export const ReleaseDateField = () => {
         themeVariant={theme === Theme.DEFAULT ? 'light' : 'dark'}
         isDarkModeEnabled={theme !== Theme.DEFAULT}
         accentColor={primary}
-        maximumDate={new Date()}
+        maximumDate={maximumDate.current}
         modalStyleIOS={styles.datePickerModal}
         customConfirmButtonIOS={ConfirmDateButton}
         customCancelButtonIOS={CancelDateButton}

packages/mobile/src/screens/upload-screen/fields/SubmenuList.tsx

@@ -12,6 +12,7 @@ type SubmenuListProps = {
   style?: StyleProp<ViewStyle>
 }
 
+// Helper component to manage spacing and borders for a list of contextual-submenu fields
 export const SubmenuList = (props: SubmenuListProps) => {
   const { children, removeBottomDivider, style } = props
   const updatedChildren = Children.map(children, (child: ReactElement, index) =>

packages/mobile/src/screens/upload-screen/fields/TagField.tsx

@@ -1,7 +1,7 @@
 import type { TrackMetadata } from '@audius/common'
 import { useField } from 'formik'
 
-import { TagInput, Text } from 'app/components/core'
+import { TagInput } from 'app/components/core'
 import { makeStyles } from 'app/styles'
 
 const useStyles = makeStyles(({ spacing }) => ({
@@ -21,22 +21,14 @@ export const TagField = () => {
   const name = 'tags'
   const [{ value, onChange, onBlur }] = useField<TrackMetadata['tags']>(name)
 
-  const tagCount = value?.split(',').length ?? 0
-  const tagCountColor =
-    tagCount < 8 ? 'neutralLight4' : tagCount < 9 ? 'warning' : 'error'
-
   return (
     <TagInput
       style={styles.root}
       value={value ?? ''}
-      endAdornment={
-        <Text variant='body' color={tagCountColor}>
-          {tagCount}/10
-        </Text>
-      }
       onChangeText={onChange(name)}
       onBlur={onBlur(name)}
       placeholder={messages.placeholder}
+      maxTags={10}
     />
   )
 }

packages/mobile/src/screens/upload-screen/fields/TextField.tsx

@@ -44,8 +44,6 @@ export const TextField = (props: TextFieldProps) => {
   const errorMessage =
     errorMessageProp || (error ? `${capitalize(name)} ${error}` : undefined)
 
-  console.log('touched?', touched, error)
-
   return (
     <View style={styles.root}>
       <TextInput

packages/mobile/src/screens/upload-screen/index.ts

@@ -0,0 +1 @@
+export { UploadScreen } from './screens'

packages/mobile/src/screens/upload-screen/screens/AdvancedOptionsScreen.tsx

@@ -2,7 +2,7 @@ import { View } from 'react-native'
 
 import IconIndent from 'app/assets/images/iconIndent.svg'
 
-import { UploadStackScreen } from '../UploadStackScreen'
+import { UploadStackScreen } from '../components'
 import {
   IsrcField,
   LicenseTypeField,

packages/mobile/src/screens/upload-screen/CompleteTrackScreen.tsx → packages/mobile/src/screens/upload-screen/screens/CompleteTrackScreen/CompleteTrackForm.tsx

@@ -1,11 +1,6 @@
-import { useCallback } from 'react'
-
-import type { TrackMetadata, UploadTrack } from '@audius/common'
-import { useRoute } from '@react-navigation/native'
+import type { UploadTrack } from '@audius/common'
 import type { FormikProps } from 'formik'
-import { Formik } from 'formik'
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
-import * as Yup from 'yup'
 
 import IconArrow from 'app/assets/images/iconArrow.svg'
 import IconCaretRight from 'app/assets/images/iconCaretRight.svg'
@@ -15,11 +10,8 @@ import { InputErrorMessage } from 'app/components/core/InputErrorMessage'
 import { useNavigation } from 'app/hooks/useNavigation'
 import { makeStyles } from 'app/styles'
 
-import { TopBarIconButton } from '../app-screen'
-
-import { CompleteTrackStack } from './CompleteTrackStack'
-import type { UploadParamList, UploadRouteProp } from './ParamList'
-import { UploadStackScreen } from './UploadStackScreen'
+import { TopBarIconButton } from '../../../app-screen'
+import { UploadStackScreen } from '../../components'
 import {
   PickArtworkField,
   SelectGenreField,
@@ -30,14 +22,15 @@ import {
   SubmenuList,
   RemixSettingsField,
   AdvancedOptionsField
-} from './fields'
+} from '../../fields'
+import type { FormValues } from '../../types'
 
 const messages = {
   screenTitle: 'Complete Track',
-  name: 'Track Name',
+  trackName: 'Tcrack Name',
+  trackNameError: 'Track Name Required',
   continue: 'Continue',
-  fixErrors: 'Fix Errors To Continue',
-  trackNameError: 'Track Name Required'
+  fixErrors: 'Fix Errors To Continue'
 }
 
 const useStyles = makeStyles(({ spacing }) => ({
@@ -54,18 +47,9 @@ const useStyles = makeStyles(({ spacing }) => ({
   }
 }))
 
-const CompleteTrackSchema = Yup.object().shape({
-  title: Yup.string().required('Required'),
-  artwork: Yup.object({
-    url: Yup.string().nullable().required('Required')
-  }),
-  genre: Yup.string().required('Required'),
-  description: Yup.string().max(1000).nullable()
-})
-
 export type CompleteTrackParams = UploadTrack
 
-export const CompleteTrackForm = (props: FormikProps<TrackMetadata>) => {
+export const CompleteTrackForm = (props: FormikProps<FormValues>) => {
   const { handleSubmit, isSubmitting, errors, touched } = props
   const errorsKeys = Object.keys(errors)
   const hasErrors =
@@ -111,7 +95,7 @@ export const CompleteTrackForm = (props: FormikProps<TrackMetadata>) => {
           <PickArtworkField />
           <TextField
             name='title'
-            label={messages.name}
+            label={messages.trackName}
             required
             errorMessage={messages.trackNameError}
           />
@@ -130,40 +114,3 @@ export const CompleteTrackForm = (props: FormikProps<TrackMetadata>) => {
     </UploadStackScreen>
   )
 }
-
-export const CompleteTrackScreen = () => {
-  const { params } = useRoute<UploadRouteProp<'CompleteTrack'>>()
-  const { metadata, file } = params
-  const navigation = useNavigation<UploadParamList>()
-
-  const initialValues = {
-    ...metadata,
-    licenseType: {
-      allowAttribution: false,
-      commercialUse: false,
-      derivativeWorks: false
-    }
-  }
-
-  const handleSubmit = useCallback(
-    (values) => {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { licenseType, ...trackValues } = values
-      navigation.push('UploadingTracks', {
-        tracks: [
-          { file, preview: null, metadata: { ...metadata, ...trackValues } }
-        ]
-      })
-    },
-    [navigation, file, metadata]
-  )
-
-  return (
-    <Formik
-      initialValues={initialValues}
-      onSubmit={handleSubmit}
-      component={CompleteTrackStack}
-      validationSchema={CompleteTrackSchema}
-    />
-  )
-}