From 3e01fbab8892116b2cbf5d3aca69a7c32f49a127 Mon Sep 17 00:00:00 2001 From: Dylan Jeffers Date: Wed, 16 Nov 2022 11:21:39 -0800 Subject: [PATCH] [C-1465] Address mobile upload tech debt (#2270) --- README.md | 16 +++ .../mobile/src/components/core/TagInput.tsx | 45 +++++-- .../mobile/src/components/core/TextInput.tsx | 1 - .../edit-profile-screen/EditProfileScreen.tsx | 6 +- .../screens/favorites-screen/FilterInput.tsx | 1 + .../ListSelectionScreen.tsx | 1 + .../src/screens/search-screen/SearchBar.tsx | 1 + .../trending-screen/TrendingFilterDrawer.tsx | 1 + .../{ => components}/UploadStackScreen.tsx | 0 .../{ => components}/UploadingTrackTile.tsx | 10 +- .../screens/upload-screen/components/index.ts | 2 + .../upload-screen/fields/ReleaseDateField.tsx | 5 +- .../upload-screen/fields/SubmenuList.tsx | 1 + .../screens/upload-screen/fields/TagField.tsx | 12 +- .../upload-screen/fields/TextField.tsx | 2 - .../mobile/src/screens/upload-screen/index.ts | 1 + .../src/screens/upload-screen/index.tsx | 1 - .../screens/AdvancedOptionsScreen.tsx | 2 +- .../CompleteTrackForm.tsx} | 73 ++--------- .../CompleteTrackScreen.tsx | 60 +++++++++ .../CompleteTrackStack.tsx | 11 +- .../screens/CompleteTrackScreen/index.ts | 1 + .../upload-screen/screens/IsrcIswcScreen.tsx | 2 +- .../screens/LicenseTypeScreen.tsx | 114 +++++++++--------- .../screens/RemixSettingsScreen.tsx | 5 +- .../{ => screens}/SelectTrackScreen.tsx | 19 ++- .../screens/TrackVisibilityScreen.tsx | 2 +- .../{ => screens}/UploadCompleteScreen.tsx | 2 +- .../{ => screens}/UploadScreen.tsx | 4 +- .../{ => screens}/UploadingTracksScreen.tsx | 4 +- .../screens/upload-screen/screens/index.ts | 4 + .../screens/upload-screen/types/FormValues.ts | 9 ++ .../upload-screen/{ => types}/ParamList.ts | 8 +- .../src/screens/upload-screen/types/index.ts | 2 + 34 files changed, 248 insertions(+), 180 deletions(-) rename packages/mobile/src/screens/upload-screen/{ => components}/UploadStackScreen.tsx (100%) rename packages/mobile/src/screens/upload-screen/{ => components}/UploadingTrackTile.tsx (91%) create mode 100644 packages/mobile/src/screens/upload-screen/index.ts delete mode 100644 packages/mobile/src/screens/upload-screen/index.tsx rename packages/mobile/src/screens/upload-screen/{CompleteTrackScreen.tsx => screens/CompleteTrackScreen/CompleteTrackForm.tsx} (59%) create mode 100644 packages/mobile/src/screens/upload-screen/screens/CompleteTrackScreen/CompleteTrackScreen.tsx rename packages/mobile/src/screens/upload-screen/{ => screens/CompleteTrackScreen}/CompleteTrackStack.tsx (80%) create mode 100644 packages/mobile/src/screens/upload-screen/screens/CompleteTrackScreen/index.ts rename packages/mobile/src/screens/upload-screen/{ => screens}/SelectTrackScreen.tsx (87%) rename packages/mobile/src/screens/upload-screen/{ => screens}/UploadCompleteScreen.tsx (98%) rename packages/mobile/src/screens/upload-screen/{ => screens}/UploadScreen.tsx (85%) rename packages/mobile/src/screens/upload-screen/{ => screens}/UploadingTracksScreen.tsx (96%) create mode 100644 packages/mobile/src/screens/upload-screen/types/FormValues.ts rename packages/mobile/src/screens/upload-screen/{ => types}/ParamList.ts (66%) create mode 100644 packages/mobile/src/screens/upload-screen/types/index.ts diff --git a/README.md b/README.md index e4911bcec0..f38cf714a5 100644 --- a/README.md +++ b/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 [--dev] packages/ +``` +where is the name of the package from npm, and 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. \ No newline at end of file diff --git a/packages/mobile/src/components/core/TagInput.tsx b/packages/mobile/src/components/core/TagInput.tsx index 9f49cbd11b..eb43159c38 100644 --- a/packages/mobile/src/components/core/TagInput.tsx +++ b/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) => { ) : 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 = ( + + {tagCount}/10 + + ) + + 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 }} diff --git a/packages/mobile/src/components/core/TextInput.tsx b/packages/mobile/src/components/core/TextInput.tsx index b2a391a1c3..2427fdabb3 100644 --- a/packages/mobile/src/components/core/TextInput.tsx +++ b/packages/mobile/src/components/core/TextInput.tsx @@ -278,7 +278,6 @@ export const TextInput = forwardRef( underlineColorAndroid='transparent' autoComplete='off' autoCorrect={false} - returnKeyType='search' selectionColor={secondary} placeholderTextColor={styles.placeholderText.color} value={value} diff --git a/packages/mobile/src/screens/edit-profile-screen/EditProfileScreen.tsx b/packages/mobile/src/screens/edit-profile-screen/EditProfileScreen.tsx index 8946146389..dbcfde1057 100644 --- a/packages/mobile/src/screens/edit-profile-screen/EditProfileScreen.tsx +++ b/packages/mobile/src/screens/edit-profile-screen/EditProfileScreen.tsx @@ -77,11 +77,7 @@ const EditProfileForm = (props: FormikProps) => { }, [editStatus, navigation]) return ( - + { placeholder={placeholder} value={value} onChangeText={onChangeText} + returnKeyType='search' Icon={IconFilter} /> diff --git a/packages/mobile/src/screens/list-selection-screen/ListSelectionScreen.tsx b/packages/mobile/src/screens/list-selection-screen/ListSelectionScreen.tsx index 1ea54ea460..f81a91b2a0 100644 --- a/packages/mobile/src/screens/list-selection-screen/ListSelectionScreen.tsx +++ b/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' /> { clearable={!isLoading && clearable} onClear={onClear} onSubmitEditing={handleSubmit} + returnKeyType='search' /> ) } diff --git a/packages/mobile/src/screens/trending-screen/TrendingFilterDrawer.tsx b/packages/mobile/src/screens/trending-screen/TrendingFilterDrawer.tsx index d5280feaaa..a70da375d9 100644 --- a/packages/mobile/src/screens/trending-screen/TrendingFilterDrawer.tsx +++ b/packages/mobile/src/screens/trending-screen/TrendingFilterDrawer.tsx @@ -91,6 +91,7 @@ export const TrendingFilterDrawer = () => { style={styles.search} value={searchValue} onChangeText={setSearchValue} + returnKeyType='search' /> ({ 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) => { /> )} - + {title} diff --git a/packages/mobile/src/screens/upload-screen/components/index.ts b/packages/mobile/src/screens/upload-screen/components/index.ts index 42a5dd31e7..5e0bd606de 100644 --- a/packages/mobile/src/screens/upload-screen/components/index.ts +++ b/packages/mobile/src/screens/upload-screen/components/index.ts @@ -1 +1,3 @@ export * from './RemixTrackPill' +export * from './UploadingTrackTile' +export * from './UploadStackScreen' diff --git a/packages/mobile/src/screens/upload-screen/fields/ReleaseDateField.tsx b/packages/mobile/src/screens/upload-screen/fields/ReleaseDateField.tsx index adbc01680a..4f96609348 100644 --- a/packages/mobile/src/screens/upload-screen/fields/ReleaseDateField.tsx +++ b/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} diff --git a/packages/mobile/src/screens/upload-screen/fields/SubmenuList.tsx b/packages/mobile/src/screens/upload-screen/fields/SubmenuList.tsx index 26c4c31c73..e56fefb96c 100644 --- a/packages/mobile/src/screens/upload-screen/fields/SubmenuList.tsx +++ b/packages/mobile/src/screens/upload-screen/fields/SubmenuList.tsx @@ -12,6 +12,7 @@ type SubmenuListProps = { style?: StyleProp } +// 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) => diff --git a/packages/mobile/src/screens/upload-screen/fields/TagField.tsx b/packages/mobile/src/screens/upload-screen/fields/TagField.tsx index f2f86f9248..aa8c3c5cb3 100644 --- a/packages/mobile/src/screens/upload-screen/fields/TagField.tsx +++ b/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(name) - const tagCount = value?.split(',').length ?? 0 - const tagCountColor = - tagCount < 8 ? 'neutralLight4' : tagCount < 9 ? 'warning' : 'error' - return ( - {tagCount}/10 - - } onChangeText={onChange(name)} onBlur={onBlur(name)} placeholder={messages.placeholder} + maxTags={10} /> ) } diff --git a/packages/mobile/src/screens/upload-screen/fields/TextField.tsx b/packages/mobile/src/screens/upload-screen/fields/TextField.tsx index ea7c8f50a1..3c1d01555c 100644 --- a/packages/mobile/src/screens/upload-screen/fields/TextField.tsx +++ b/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 ( ({ @@ -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) => { +export const CompleteTrackForm = (props: FormikProps) => { const { handleSubmit, isSubmitting, errors, touched } = props const errorsKeys = Object.keys(errors) const hasErrors = @@ -111,7 +95,7 @@ export const CompleteTrackForm = (props: FormikProps) => { @@ -130,40 +114,3 @@ export const CompleteTrackForm = (props: FormikProps) => { ) } - -export const CompleteTrackScreen = () => { - const { params } = useRoute>() - const { metadata, file } = params - const navigation = useNavigation() - - 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 ( - - ) -} diff --git a/packages/mobile/src/screens/upload-screen/screens/CompleteTrackScreen/CompleteTrackScreen.tsx b/packages/mobile/src/screens/upload-screen/screens/CompleteTrackScreen/CompleteTrackScreen.tsx new file mode 100644 index 0000000000..2674b31a0d --- /dev/null +++ b/packages/mobile/src/screens/upload-screen/screens/CompleteTrackScreen/CompleteTrackScreen.tsx @@ -0,0 +1,60 @@ +import { useCallback } from 'react' + +import type { UploadTrack } from '@audius/common' +import { useRoute } from '@react-navigation/native' +import { Formik } from 'formik' +import * as Yup from 'yup' + +import { useNavigation } from 'app/hooks/useNavigation' + +import type { FormValues, UploadParamList, UploadRouteProp } from '../../types' + +import { CompleteTrackStack } from './CompleteTrackStack' + +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 CompleteTrackScreen = () => { + const { params } = useRoute>() + const { metadata, file } = params + const navigation = useNavigation() + + const initialValues: FormValues = { + ...metadata, + licenseType: { + allowAttribution: false, + commercialUse: false, + derivativeWorks: false + } + } + + const handleSubmit = useCallback( + (values: FormValues) => { + // 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 ( + + initialValues={initialValues} + onSubmit={handleSubmit} + component={CompleteTrackStack} + validationSchema={CompleteTrackSchema} + /> + ) +} diff --git a/packages/mobile/src/screens/upload-screen/CompleteTrackStack.tsx b/packages/mobile/src/screens/upload-screen/screens/CompleteTrackScreen/CompleteTrackStack.tsx similarity index 80% rename from packages/mobile/src/screens/upload-screen/CompleteTrackStack.tsx rename to packages/mobile/src/screens/upload-screen/screens/CompleteTrackScreen/CompleteTrackStack.tsx index 880f554f4a..5c91c5a949 100644 --- a/packages/mobile/src/screens/upload-screen/CompleteTrackStack.tsx +++ b/packages/mobile/src/screens/upload-screen/screens/CompleteTrackScreen/CompleteTrackStack.tsx @@ -1,10 +1,8 @@ -import type { TrackMetadata } from '@audius/common' import { createNativeStackNavigator } from '@react-navigation/native-stack' import type { FormikProps } from 'formik' -import { useAppScreenOptions } from '../app-screen/useAppScreenOptions' +import { useAppScreenOptions } from 'app/screens/app-screen/useAppScreenOptions' -import { CompleteTrackForm } from './CompleteTrackScreen' import { AdvancedOptionsScreen, IsrcIswcScreen, @@ -13,13 +11,16 @@ import { SelectGenreScreen, SelectMoodScreen, TrackVisibilityScreen -} from './screens' +} from '..' +import type { FormValues } from '../../types' + +import { CompleteTrackForm } from './CompleteTrackForm' const Stack = createNativeStackNavigator() const screenOptionOverrides = { headerRight: () => null } -export const CompleteTrackStack = (props: FormikProps) => { +export const CompleteTrackStack = (props: FormikProps) => { const screenOptions = useAppScreenOptions(screenOptionOverrides) return ( diff --git a/packages/mobile/src/screens/upload-screen/screens/CompleteTrackScreen/index.ts b/packages/mobile/src/screens/upload-screen/screens/CompleteTrackScreen/index.ts new file mode 100644 index 0000000000..f3cd1e68c8 --- /dev/null +++ b/packages/mobile/src/screens/upload-screen/screens/CompleteTrackScreen/index.ts @@ -0,0 +1 @@ +export * from './CompleteTrackScreen' diff --git a/packages/mobile/src/screens/upload-screen/screens/IsrcIswcScreen.tsx b/packages/mobile/src/screens/upload-screen/screens/IsrcIswcScreen.tsx index 5cc38ad5fc..d93d9d2d5f 100644 --- a/packages/mobile/src/screens/upload-screen/screens/IsrcIswcScreen.tsx +++ b/packages/mobile/src/screens/upload-screen/screens/IsrcIswcScreen.tsx @@ -3,7 +3,7 @@ import { View } from 'react-native' import IconInfo from 'app/assets/images/iconInfo.svg' import { makeStyles } from 'app/styles' -import { UploadStackScreen } from '../UploadStackScreen' +import { UploadStackScreen } from '../components' import { TextField } from '../fields' const messages = { diff --git a/packages/mobile/src/screens/upload-screen/screens/LicenseTypeScreen.tsx b/packages/mobile/src/screens/upload-screen/screens/LicenseTypeScreen.tsx index 4236b60746..e5648d6b85 100644 --- a/packages/mobile/src/screens/upload-screen/screens/LicenseTypeScreen.tsx +++ b/packages/mobile/src/screens/upload-screen/screens/LicenseTypeScreen.tsx @@ -2,7 +2,7 @@ import { useEffect } from 'react' import type { Nullable } from '@audius/common' import { useField } from 'formik' -import { View } from 'react-native' +import { ScrollView, View } from 'react-native' import { computeLicense } from 'utils/creativeCommons' import IconCreativeCommons from 'app/assets/images/creativeCommons/cc.svg' @@ -12,7 +12,7 @@ import { makeStyles } from 'app/styles' import { spacing } from 'app/styles/spacing' import { useThemeColors } from 'app/utils/theme' -import { UploadStackScreen } from '../UploadStackScreen' +import { UploadStackScreen } from '../components' import { computeLicenseIcons } from '../utils/computeLicenseIcons' const messages = { @@ -120,61 +120,63 @@ export const LicenseTypeScreen = () => { icon={IconCreativeCommons} variant='white' > - - - {messages.allowAttributionLabel} - + + + + {messages.allowAttributionLabel} + + + + + {messages.commercialUseLabel} + + + + + {messages.derivativeWorksLabel} + + + + + {licenseIcons ? ( + + {licenseIcons.map(([Icon, key]) => ( + + ))} + + ) : null} + {licenseType} + {licenseDescription ? ( + + + {licenseDescription} + + + ) : null} + - - - {messages.commercialUseLabel} - - - - - {messages.derivativeWorksLabel} - - - - - {licenseIcons ? ( - - {licenseIcons.map(([Icon, key]) => ( - - ))} - - ) : null} - {licenseType} - {licenseDescription ? ( - - - {licenseDescription} - - - ) : null} - - + ) } diff --git a/packages/mobile/src/screens/upload-screen/screens/RemixSettingsScreen.tsx b/packages/mobile/src/screens/upload-screen/screens/RemixSettingsScreen.tsx index adce6afd9d..becc449a0c 100644 --- a/packages/mobile/src/screens/upload-screen/screens/RemixSettingsScreen.tsx +++ b/packages/mobile/src/screens/upload-screen/screens/RemixSettingsScreen.tsx @@ -20,8 +20,7 @@ import { useNavigation } from 'app/hooks/useNavigation' import { makeStyles } from 'app/styles' import { getTrackRoute } from 'app/utils/routes' -import { UploadStackScreen } from '../UploadStackScreen' -import { RemixTrackPill } from '../components' +import { UploadStackScreen, RemixTrackPill } from '../components' const { getTrack, getUser, getStatus } = remixSettingsSelectors const { fetchTrack, reset } = remixSettingsActions @@ -171,7 +170,7 @@ export const RemixSettingsScreen = () => { styles={{ root: styles.inputRoot, input: styles.input }} value={remixOfInput} onChangeText={handleLinkInput} - returnKeyType='default' + returnKeyType='done' /> {parentTrack && parentTrackArtist && !isInvalidParentTrack ? ( diff --git a/packages/mobile/src/screens/upload-screen/SelectTrackScreen.tsx b/packages/mobile/src/screens/upload-screen/screens/SelectTrackScreen.tsx similarity index 87% rename from packages/mobile/src/screens/upload-screen/SelectTrackScreen.tsx rename to packages/mobile/src/screens/upload-screen/screens/SelectTrackScreen.tsx index 1fb12ea2bd..e031fe542a 100644 --- a/packages/mobile/src/screens/upload-screen/SelectTrackScreen.tsx +++ b/packages/mobile/src/screens/upload-screen/screens/SelectTrackScreen.tsx @@ -13,10 +13,9 @@ import { makeStyles } from 'app/styles' import { spacing } from 'app/styles/spacing' import { useThemeColors } from 'app/utils/theme' -import { TopBarIconButton } from '../app-screen' - -import type { UploadParamList } from './ParamList' -import { processTrackFile } from './utils/processTrackFile' +import { TopBarIconButton } from '../../app-screen' +import type { UploadParamList } from '../types/ParamList' +import { processTrackFile } from '../utils/processTrackFile' const messages = { screenTitle: 'Upload', @@ -50,7 +49,7 @@ export const SelectTrackScreen = () => { const navigation = useNavigation() const [navigatedBack, setNavigatedBack] = useState(false) - const [{ value: track, loading, error }, handlePickTrack] = + const [{ value: track, loading, error }, handleSelectTrack] = useAsyncFn(async () => { try { const trackFile = await DocumentPicker.pickSingle({ @@ -83,10 +82,6 @@ export const SelectTrackScreen = () => { } }, [loading]) - const handleBack = useCallback(() => { - navigation.goBack() - }, [navigation]) - const isLoading = loading || (track && !navigatedBack) return ( @@ -94,7 +89,9 @@ export const SelectTrackScreen = () => { title={messages.title} icon={IconUpload} variant='secondary' - topbarLeft={} + topbarLeft={ + + } > { size='large' icon={isLoading ? LoadingSpinner : undefined} disabled={isLoading} - onPress={handlePickTrack} + onPress={handleSelectTrack} /> {error && !loading ? ( {error.message} diff --git a/packages/mobile/src/screens/upload-screen/screens/TrackVisibilityScreen.tsx b/packages/mobile/src/screens/upload-screen/screens/TrackVisibilityScreen.tsx index 2e5f8055db..6970b85fe6 100644 --- a/packages/mobile/src/screens/upload-screen/screens/TrackVisibilityScreen.tsx +++ b/packages/mobile/src/screens/upload-screen/screens/TrackVisibilityScreen.tsx @@ -4,7 +4,7 @@ import IconHidden from 'app/assets/images/iconHidden.svg' import { Divider, Text } from 'app/components/core' import { makeStyles } from 'app/styles' -import { UploadStackScreen } from '../UploadStackScreen' +import { UploadStackScreen } from '../components' import { SwitchField } from '../fields' const messages = { diff --git a/packages/mobile/src/screens/upload-screen/UploadCompleteScreen.tsx b/packages/mobile/src/screens/upload-screen/screens/UploadCompleteScreen.tsx similarity index 98% rename from packages/mobile/src/screens/upload-screen/UploadCompleteScreen.tsx rename to packages/mobile/src/screens/upload-screen/screens/UploadCompleteScreen.tsx index 3a4d94350e..d76d99a582 100644 --- a/packages/mobile/src/screens/upload-screen/UploadCompleteScreen.tsx +++ b/packages/mobile/src/screens/upload-screen/screens/UploadCompleteScreen.tsx @@ -27,7 +27,7 @@ import { useNavigation } from 'app/hooks/useNavigation' import { makeStyles } from 'app/styles' import { getTrackRoute } from 'app/utils/routes' -import { UploadStackScreen } from './UploadStackScreen' +import { UploadStackScreen } from '../components' const { getTracks } = uploadSelectors const { getAccountUser } = accountSelectors const { fetchTrack } = trackPageActions diff --git a/packages/mobile/src/screens/upload-screen/UploadScreen.tsx b/packages/mobile/src/screens/upload-screen/screens/UploadScreen.tsx similarity index 85% rename from packages/mobile/src/screens/upload-screen/UploadScreen.tsx rename to packages/mobile/src/screens/upload-screen/screens/UploadScreen.tsx index 8028e4e194..359551c429 100644 --- a/packages/mobile/src/screens/upload-screen/UploadScreen.tsx +++ b/packages/mobile/src/screens/upload-screen/screens/UploadScreen.tsx @@ -1,8 +1,8 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack' -import { useAppScreenOptions } from '../app-screen/useAppScreenOptions' +import { useAppScreenOptions } from '../../app-screen/useAppScreenOptions' -import { CompleteTrackScreen } from './CompleteTrackScreen' +import { CompleteTrackScreen } from './CompleteTrackScreen/CompleteTrackScreen' import { SelectTrackScreen } from './SelectTrackScreen' import { UploadCompleteScreen } from './UploadCompleteScreen' import { UploadingTracksScreen } from './UploadingTracksScreen' diff --git a/packages/mobile/src/screens/upload-screen/UploadingTracksScreen.tsx b/packages/mobile/src/screens/upload-screen/screens/UploadingTracksScreen.tsx similarity index 96% rename from packages/mobile/src/screens/upload-screen/UploadingTracksScreen.tsx rename to packages/mobile/src/screens/upload-screen/screens/UploadingTracksScreen.tsx index 0509f219d5..6b8e3a5075 100644 --- a/packages/mobile/src/screens/upload-screen/UploadingTracksScreen.tsx +++ b/packages/mobile/src/screens/upload-screen/screens/UploadingTracksScreen.tsx @@ -14,8 +14,8 @@ import { useNavigation } from 'app/hooks/useNavigation' import { makeStyles } from 'app/styles' import { useThemeColors } from 'app/utils/theme' -import type { UploadRouteProp } from './ParamList' -import { UploadingTrackTile } from './UploadingTrackTile' +import { UploadingTrackTile } from '../components' +import type { UploadRouteProp } from '../types' const { uploadTracks } = uploadActions const { getUploadProgress, getUploadSuccess } = uploadSelectors diff --git a/packages/mobile/src/screens/upload-screen/screens/index.ts b/packages/mobile/src/screens/upload-screen/screens/index.ts index 9260d55362..21bf531d6c 100644 --- a/packages/mobile/src/screens/upload-screen/screens/index.ts +++ b/packages/mobile/src/screens/upload-screen/screens/index.ts @@ -5,3 +5,7 @@ export * from './AdvancedOptionsScreen' export * from './TrackVisibilityScreen' export * from './IsrcIswcScreen' export * from './LicenseTypeScreen' +export * from './UploadScreen' +export * from './UploadingTracksScreen' +export * from './UploadCompleteScreen' +export * from './CompleteTrackScreen' diff --git a/packages/mobile/src/screens/upload-screen/types/FormValues.ts b/packages/mobile/src/screens/upload-screen/types/FormValues.ts new file mode 100644 index 0000000000..6ffaf82143 --- /dev/null +++ b/packages/mobile/src/screens/upload-screen/types/FormValues.ts @@ -0,0 +1,9 @@ +import type { ExtendedTrackMetadata } from '@audius/common' + +export type FormValues = ExtendedTrackMetadata & { + licenseType: { + allowAttribution: boolean + commercialUse: boolean + derivativeWorks: boolean + } +} diff --git a/packages/mobile/src/screens/upload-screen/ParamList.ts b/packages/mobile/src/screens/upload-screen/types/ParamList.ts similarity index 66% rename from packages/mobile/src/screens/upload-screen/ParamList.ts rename to packages/mobile/src/screens/upload-screen/types/ParamList.ts index eba2d6f2c1..e1e41788f0 100644 --- a/packages/mobile/src/screens/upload-screen/ParamList.ts +++ b/packages/mobile/src/screens/upload-screen/types/ParamList.ts @@ -1,8 +1,10 @@ import type { RouteProp } from '@react-navigation/native' -import type { CompleteTrackParams } from './CompleteTrackScreen' -import type { UploadingTracksParams } from './UploadingTracksScreen' -import type { RemixSettingsParams } from './screens' +import type { + UploadingTracksParams, + CompleteTrackParams, + RemixSettingsParams +} from '../screens' export type UploadParamList = { SelectTrack: undefined diff --git a/packages/mobile/src/screens/upload-screen/types/index.ts b/packages/mobile/src/screens/upload-screen/types/index.ts new file mode 100644 index 0000000000..acda272897 --- /dev/null +++ b/packages/mobile/src/screens/upload-screen/types/index.ts @@ -0,0 +1,2 @@ +export * from './ParamList' +export * from './FormValues'