LUN-400: Adjustments for add image

digitalfabrik · Oct 11, 2022 · dafd644 · dafd644
1 parent 52893d7
commit dafd644
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 42 deletions.
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
@@ -78,6 +78,7 @@ const Dropdown = <T extends ValueType>({
           fontFamily: theme.fonts.contentFontRegular,
           paddingHorizontal: wp('2%'),
         }}
+        listMode='SCROLLVIEW'
       />
       {showErrorValidation && (
         <ErrorContainer>{errorMessage.length > 0 && <ContentError>{errorMessage}</ContentError>}</ErrorContainer>

diff --git 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
@@ -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 (
-      <ImageSelectionOverlay
-        setVisible={setShowImageSelectionOverlay}
-        pushImage={pushImage}
-        numberOfImages={images.length}
-      />
-    )
+    return <ImageSelectionOverlay setVisible={setShowImageSelectionOverlay} pushImage={pushImage} />
   }
 
   // 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
@@ -35,21 +35,18 @@ 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<RNCamera>(null)
 
   const takeImage = async () => {
     if (camera.current) {
       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
@@ -14,9 +14,7 @@ jest.mock('react-native-camera', () => ({
 
 describe('ImageSelectionOverlay', () => {
   it('should render shutter and gallery icon', () => {
-    const { getByTestId } = render(
-      <ImageSelectionOverlay setVisible={jest.fn()} numberOfImages={0} pushImage={jest.fn()} />
-    )
+    const { getByTestId } = render(<ImageSelectionOverlay setVisible={jest.fn()} pushImage={jest.fn()} />)
     expect(getByTestId('take-image-icon')).toBeDefined()
     expect(getByTestId('gallery-icon')).toBeDefined()
   })