diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx index 02cf68717..96c999260 100644 --- a/src/components/Dropdown.tsx +++ b/src/components/Dropdown.tsx @@ -78,6 +78,7 @@ const Dropdown = ({ fontFamily: theme.fonts.contentFontRegular, paddingHorizontal: wp('2%'), }} + listMode='SCROLLVIEW' /> {showErrorValidation && ( {errorMessage.length > 0 && {errorMessage}} diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx index d47a6d5ad..2063b48ad 100644 --- a/src/components/ListItem.tsx +++ b/src/components/ListItem.tsx @@ -21,6 +21,7 @@ const Container = styled(GenericListItemContainer)<{ feedback: EXERCISE_FEEDBACK }>` min-height: ${hp('12%')}px; + width: 100%; justify-content: center; flex-direction: column; border-top-width: 1px; diff --git a/src/routes/process-user-vocabulary/UserVocabularyProcessScreen.tsx b/src/routes/process-user-vocabulary/UserVocabularyProcessScreen.tsx index 8810663b6..c5f4b58fb 100644 --- a/src/routes/process-user-vocabulary/UserVocabularyProcessScreen.tsx +++ b/src/routes/process-user-vocabulary/UserVocabularyProcessScreen.tsx @@ -13,7 +13,6 @@ import { TitleWithSpacing } from '../../components/Title' import { ContentError } from '../../components/text/Content' import { HintText } from '../../components/text/Hint' import { ARTICLES, BUTTONS_THEME, getArticleWithLabel } from '../../constants/data' -import { Images } from '../../constants/endpoints' import { RoutesParams } from '../../navigation/NavigationTypes' import { addUserDocument, getNextUserVocabularyId, incrementNextUserVocabularyId } from '../../services/AsyncStorage' import { getLabels } from '../../services/helpers' @@ -85,45 +84,42 @@ const UserVocabularyProcessScreen = ({ navigation }: UserVocabularyProcessScreen return } - const id = await getNextUserVocabularyId() - await incrementNextUserVocabularyId() - - const imagePaths: Images = [] - images.forEach(image => { - const index = images.indexOf(image) - const path = `${DocumentDirectoryPath}/image-${id}-${index}.txt` - writeFile(path, image, 'utf8') - .then(() => imagePaths.push({ id: index, image: path })) - .catch(reportError) - }) - - await addUserDocument({ - id, - word, - article: ARTICLES[articleId], - document_image: imagePaths, - audio: '', - alternatives: [], - }) - - navigation.navigate('UserVocabularyList', { headerBackLabel: getLabels().general.back }) - - setWord('') - setArticleId(null) - setImages([]) + try { + const id = await getNextUserVocabularyId() + await incrementNextUserVocabularyId() + + const imagePaths = await Promise.all( + images.map(async (image, index) => { + const path = `${DocumentDirectoryPath}/image-${id}-${index}.txt` + await writeFile(path, image, 'utf8') + return { id: index, image: path } + }) + ) + + await addUserDocument({ + id, + word, + article: ARTICLES[articleId], + document_image: imagePaths, + audio: '', + alternatives: [], + }) + + navigation.navigate('UserVocabularyList', { headerBackLabel: getLabels().general.back }) + + setWord('') + setArticleId(null) + setImages([]) + } catch (e) { + reportError(e) + } } const pushImage = (uri: string): void => setImages(old => [...old, uri]) const deleteImage = (uri: string): void => setImages(images => images.filter(image => image !== uri)) if (showImageSelectionOverlay) { - return ( - - ) + return } // TODO add Keyboard handling for input fields LUN-424 diff --git a/src/routes/process-user-vocabulary/components/ImageSelectionOverlay.tsx b/src/routes/process-user-vocabulary/components/ImageSelectionOverlay.tsx index dee522ccb..f26ec102e 100644 --- a/src/routes/process-user-vocabulary/components/ImageSelectionOverlay.tsx +++ b/src/routes/process-user-vocabulary/components/ImageSelectionOverlay.tsx @@ -35,11 +35,10 @@ const Container = styled.View` interface ImageSelectionOverlayProps { setVisible: (visible: boolean) => void - numberOfImages: number pushImage: (imageUri: string) => void } -const ImageSelectionOverlay = ({ setVisible, pushImage, numberOfImages }: ImageSelectionOverlayProps): ReactElement => { +const ImageSelectionOverlay = ({ setVisible, pushImage }: ImageSelectionOverlayProps): ReactElement => { const camera = useRef(null) const takeImage = async () => { @@ -47,9 +46,7 @@ const ImageSelectionOverlay = ({ setVisible, pushImage, numberOfImages }: ImageS const options = { quality: 0.5, base64: true } const data = await camera.current.takePictureAsync(options) setVisible(false) - if (numberOfImages < 3) { - pushImage(data.uri) - } + pushImage(data.uri) } } diff --git a/src/routes/process-user-vocabulary/components/__tests__/ImageSelectionOverlay.spec.tsx b/src/routes/process-user-vocabulary/components/__tests__/ImageSelectionOverlay.spec.tsx index b77b9e790..6fb8f9829 100644 --- a/src/routes/process-user-vocabulary/components/__tests__/ImageSelectionOverlay.spec.tsx +++ b/src/routes/process-user-vocabulary/components/__tests__/ImageSelectionOverlay.spec.tsx @@ -14,9 +14,7 @@ jest.mock('react-native-camera', () => ({ describe('ImageSelectionOverlay', () => { it('should render shutter and gallery icon', () => { - const { getByTestId } = render( - - ) + const { getByTestId } = render() expect(getByTestId('take-image-icon')).toBeDefined() expect(getByTestId('gallery-icon')).toBeDefined() })