[C-1496 C-1497 C-1498,C-1499 C-1501 C-1502 C-1503] Address Design-QA (#…

…2278)

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

@@ -143,24 +143,34 @@ export const TagInput = (props: TagInputProps) => {
   const handleKeyPress = useCallback(
     (e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
       const { key: keyValue } = e.nativeEvent
+      const removeTagKeys = ['Backspace']
+      const addTagKeys = [' ', ',']
 
-      if (!inputValue && keyValue === 'Backspace') {
+      if (!inputValue && removeTagKeys.includes(keyValue)) {
         onChangeText?.(tags.slice(0, -1).join(','))
-      } else if (inputValue && (keyValue === ' ' || keyValue === ',')) {
+      } else if (inputValue && addTagKeys.includes(keyValue)) {
         handleAddTag()
       }
     },
     [inputValue, tags, onChangeText, handleAddTag]
   )
 
+  const handleSubmitEditing = useCallback(() => {
+    if (inputValue) {
+      handleAddTag()
+    }
+  }, [inputValue, handleAddTag])
+
   return (
     <TextInput
       value={inputValue}
       onChangeText={handleChangeText}
       onKeyPress={handleKeyPress}
       startAdornment={startAdornment}
       endAdornment={endAdornment}
-      returnKeyType='done'
+      returnKeyType='next'
+      blurOnSubmit={false}
+      onSubmitEditing={handleSubmitEditing}
       onFocus={handleFocus}
       onBlur={handleBlur}
       styles={{ input: styles.input }}

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

@@ -1,22 +1,17 @@
 import type { ComponentType } from 'react'
 import { useState, useCallback } from 'react'
 
+import type { Nullable } from '@audius/common'
 import type { ListRenderItem } from 'react-native'
 import { FlatList, View } from 'react-native'
 import { TouchableOpacity } from 'react-native-gesture-handler'
 import type { SvgProps } from 'react-native-svg'
 
-import {
-  Screen,
-  TextInput,
-  Text,
-  RadioButton,
-  Divider,
-  Button
-} from 'app/components/core'
-import { useNavigation } from 'app/hooks/useNavigation'
+import { TextInput, Text, RadioButton, Divider } from 'app/components/core'
 import { makeStyles } from 'app/styles'
 
+import { UploadStackScreen } from '../components'
+
 export type ListSelectionData = { label: string; value: string }
 
 export type ListSelectionProps = {
@@ -25,7 +20,7 @@ export type ListSelectionProps = {
   searchText: string
   data: ListSelectionData[]
   renderItem: ListRenderItem<ListSelectionData>
-  onChange: (value: string) => void
+  onChange: (value: Nullable<string>) => void
   value: string
 }
 
@@ -34,7 +29,7 @@ const messages = {
   done: 'Done'
 }
 
-const useStyles = makeStyles(({ spacing, typography, palette }) => ({
+const useStyles = makeStyles(({ spacing, typography }) => ({
   root: {
     justifyContent: 'space-between'
   },
@@ -61,14 +56,6 @@ const useStyles = makeStyles(({ spacing, typography, palette }) => ({
   },
   radio: {
     marginRight: spacing(4)
-  },
-  confirmSelection: {
-    paddingHorizontal: spacing(4),
-    paddingTop: spacing(6),
-    paddingBottom: spacing(12),
-    backgroundColor: palette.white,
-    borderTopWidth: 1,
-    borderTopColor: palette.neutralLight6
   }
 }))
 
@@ -80,32 +67,25 @@ export const ListSelectionScreen = (props: ListSelectionProps) => {
     renderItem: renderItemProp,
     data,
     onChange,
-    value: valueProp
+    value
   } = props
 
   const styles = useStyles()
 
-  const [value, setValue] = useState(valueProp)
   const [filterInput, setFilterInput] = useState('')
   const filterRegexp = new RegExp(filterInput, 'i')
 
-  const navigation = useNavigation()
-
-  const handleSubmit = useCallback(() => {
-    onChange(value)
-    navigation.goBack()
-  }, [onChange, value, navigation])
-
   const renderItem: ListRenderItem<ListSelectionData> = useCallback(
     (info) => {
       const { value: itemValue } = info.item
       const isSelected = value === itemValue
 
+      const handleChange = () => {
+        onChange(isSelected ? null : itemValue)
+      }
+
       return (
-        <TouchableOpacity
-          style={styles.listItem}
-          onPress={() => setValue(itemValue)}
-        >
+        <TouchableOpacity style={styles.listItem} onPress={handleChange}>
           <View style={styles.listItemContent}>
             <RadioButton checked={isSelected} style={styles.radio} />
             {renderItemProp(info)}
@@ -118,13 +98,18 @@ export const ListSelectionScreen = (props: ListSelectionProps) => {
         </TouchableOpacity>
       )
     },
-    [renderItemProp, value, styles]
+    [renderItemProp, value, styles, onChange]
   )
 
   const filteredData = data.filter(({ label }) => label.match(filterRegexp))
 
   return (
-    <Screen title={screenTitle} icon={icon} variant='white' style={styles.root}>
+    <UploadStackScreen
+      title={screenTitle}
+      icon={icon}
+      variant='white'
+      style={styles.root}
+    >
       <View style={styles.content}>
         <TextInput
           placeholder={searchText}
@@ -138,17 +123,7 @@ export const ListSelectionScreen = (props: ListSelectionProps) => {
           ItemSeparatorComponent={Divider}
           data={filteredData}
         />
-        <View style={styles.confirmSelection}>
-          <Button
-            variant='primary'
-            size='large'
-            title={messages.done}
-            onPress={handleSubmit}
-            fullWidth
-            disabled={!value}
-          />
-        </View>
       </View>
-    </Screen>
+    </UploadStackScreen>
   )
 }

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

@@ -30,12 +30,14 @@ const remixLinkInputDebounceMs = 1000
 const messages = {
   screenTitle: 'Remix Settings',
   isRemixLabel: 'This Track is a Remix',
-  isRemixLinkDescription: 'Paste the link to the Audius track you’ve remixed',
+  isRemixLinkDescription: 'Paste the link to the Audius track you’ve remixed.',
   hideRemixLabel: 'Hide Remixes on Track Page',
   hideRemixDescription:
-    'Hide remixes of this track to prevent them showing on your track page.',
+    'Hide remixes of this track to prevent them from showing on your track page.',
   done: 'Done',
-  invalidRemixLink: 'Please paste a valid Audius track URL'
+  invalidRemixUrl: 'Please paste a valid Audius track URL',
+  missingRemixUrl: 'Must include a link to the original track',
+  remixUrlPlaceholder: 'Track URL'
 }
 
 const useStyles = makeStyles(({ spacing, palette, typography }) => ({
@@ -55,8 +57,7 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
     paddingLeft: spacing(4)
   },
   input: {
-    fontSize: typography.fontSize.large,
-    color: palette.neutralLight4
+    fontSize: typography.fontSize.large
   }
 }))
 
@@ -88,6 +89,7 @@ export const RemixSettingsScreen = () => {
     useField<boolean>('field_visibility.remixes')
   const [isTrackRemix, setIsTrackRemix] = useState(Boolean(remixOf))
   const [remixOfInput, setRemixOfInput] = useState(remixOf ?? '')
+  const [isRemixUrlMissing, setIsRemixUrlMissing] = useState(false)
   const navigation = useNavigation()
   const dispatch = useDispatch()
   const parentTrack = useSelector(getTrack)
@@ -119,18 +121,30 @@ export const RemixSettingsScreen = () => {
 
   useFocusEffect(handleFocus)
 
-  const handleLinkInput = useCallback(
+  const handleChangeLink = useCallback(
     (value: string) => {
       setRemixOfInput(value)
       handleFetchParentTrack(value)
+      setIsRemixUrlMissing(false)
     },
     [handleFetchParentTrack]
   )
 
+  const handleChangeIsRemix = useCallback((isRemix: boolean) => {
+    setIsTrackRemix(isRemix)
+    if (!isRemix) {
+      setIsRemixUrlMissing(false)
+    }
+  }, [])
+
   const handleSubmit = useCallback(() => {
-    navigation.goBack()
-    dispatch(reset())
-  }, [navigation, dispatch])
+    if (isTrackRemix && !remixOf) {
+      setIsRemixUrlMissing(true)
+    } else {
+      navigation.goBack()
+      dispatch(reset())
+    }
+  }, [navigation, dispatch, isTrackRemix, remixOf])
 
   useEffect(() => {
     setRemixOf(
@@ -139,6 +153,8 @@ export const RemixSettingsScreen = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [parentTrack, isTrackRemix])
 
+  const hasErrors = isTrackRemix && (isInvalidParentTrack || isRemixUrlMissing)
+
   return (
     <UploadStackScreen
       title={messages.screenTitle}
@@ -151,15 +167,15 @@ export const RemixSettingsScreen = () => {
           fullWidth
           title={messages.done}
           onPress={handleSubmit}
-          disabled={isInvalidParentTrack}
+          disabled={hasErrors}
         />
       }
     >
       <View>
         <View style={styles.setting}>
           <View style={styles.option}>
             <Text {...labelProps}>{messages.isRemixLabel}</Text>
-            <Switch value={isTrackRemix} onValueChange={setIsTrackRemix} />
+            <Switch value={isTrackRemix} onValueChange={handleChangeIsRemix} />
           </View>
           {isTrackRemix ? (
             <View>
@@ -169,14 +185,21 @@ export const RemixSettingsScreen = () => {
               <TextInput
                 styles={{ root: styles.inputRoot, input: styles.input }}
                 value={remixOfInput}
-                onChangeText={handleLinkInput}
+                onChangeText={handleChangeLink}
+                placeholder={messages.remixUrlPlaceholder}
                 returnKeyType='done'
               />
               {parentTrack && parentTrackArtist && !isInvalidParentTrack ? (
                 <RemixTrackPill track={parentTrack} user={parentTrackArtist} />
               ) : null}
-              {isInvalidParentTrack ? (
-                <InputErrorMessage message={messages.invalidRemixLink} />
+              {hasErrors ? (
+                <InputErrorMessage
+                  message={
+                    isInvalidParentTrack
+                      ? messages.invalidRemixUrl
+                      : messages.missingRemixUrl
+                  }
+                />
               ) : null}
             </View>
           ) : null}

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

@@ -3,7 +3,8 @@ import { useField } from 'formik'
 
 import IconGenre from 'app/assets/images/iconGenre.svg'
 import { Text } from 'app/components/core'
-import { ListSelectionScreen } from 'app/screens/list-selection-screen'
+
+import { ListSelectionScreen } from './ListSelectionScreen'
 
 const messages = {
   screenTitle: 'Select Genre',
@@ -13,7 +14,7 @@ const messages = {
 const genres = GENRES.map((genre) => ({ value: genre, label: genre }))
 
 export const SelectGenreScreen = () => {
-  const [{ value, onChange }] = useField('genre')
+  const [{ value }, , { setValue }] = useField('genre')
 
   return (
     <ListSelectionScreen
@@ -27,7 +28,7 @@ export const SelectGenreScreen = () => {
       icon={IconGenre}
       searchText={messages.searchText}
       value={value}
-      onChange={onChange('genre')}
+      onChange={setValue}
     />
   )
 }

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

@@ -3,10 +3,11 @@ import { View, Image } from 'react-native'
 
 import IconMood from 'app/assets/images/iconMood.svg'
 import { Text } from 'app/components/core'
-import { ListSelectionScreen } from 'app/screens/list-selection-screen'
 import { makeStyles } from 'app/styles'
 import { moodMap } from 'app/utils/moods'
 
+import { ListSelectionScreen } from './ListSelectionScreen'
+
 const messages = {
   screenTitle: 'Select Mood',
   searchText: 'Search Moods'
@@ -33,7 +34,7 @@ const useStyles = makeStyles(({ spacing }) => ({
 
 export const SelectMoodScreen = () => {
   const styles = useStyles()
-  const [{ value, onChange }] = useField('mood')
+  const [{ value }, , { setValue }] = useField('mood')
 
   return (
     <ListSelectionScreen
@@ -50,7 +51,7 @@ export const SelectMoodScreen = () => {
       icon={IconMood}
       searchText={messages.searchText}
       value={value}
-      onChange={onChange('mood')}
+      onChange={setValue}
     />
   )
 }

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

@@ -36,7 +36,7 @@ const { getTrack } = cacheTracksSelectors
 const messages = {
   title: 'Upload',
   complete: 'Upload Complete',
-  share: 'Spread the work and share it with your fans!',
+  share: 'Spread the word and share it with your fans!',
   twitterShareText: (title: string) =>
     `Check out my new track, ${title} on @AudiusProject #Audius`,
   copyLink: 'Copy Link',
@@ -85,23 +85,20 @@ export const UploadCompleteScreen = () => {
   const dispatch = useDispatch()
   const accountUser = useSelector(getAccountUser)
   const uploadedTrack = useSelector((state) => getTrack(state, { permalink }))
-
-  console.log('uploaded track?', uploadedTrack)
+  const trackRoute = getTrackRoute(track!, true)
 
   useEffectOnce(() => {
     const params = parseTrackRoute(permalink)
-    console.log('params!', params)
     if (params) {
       const { slug, handle } = params
       dispatch(fetchTrack(null, slug!, handle!))
     }
   })
 
   const handleCopyLink = useCallback(() => {
-    const link = ''
-    Clipboard.setString(link)
+    Clipboard.setString(trackRoute)
     toast({ content: messages.shareToast, type: 'info' })
-  }, [toast])
+  }, [trackRoute, toast])
 
   const handleClose = useCallback(() => {
     navigation.navigate('Feed')