LUN-357: Replace vocabulary detail modal with own route

src/components/VocabularyList.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { FlatList } from 'react-native'
+import styled from 'styled-components/native'
+
+import { Document } from '../constants/endpoints'
+import labels from '../constants/labels.json'
+import Title from './Title'
+import VocabularyListItem from './VocabularyListItem'
+
+const Root = styled.View`
+  background-color: ${props => props.theme.colors.background};
+  height: 100%;
+  width: 100%;
+  padding: 0 ${props => props.theme.spacings.sm};
+`
+
+interface VocabularyListScreenProps {
+  documents: Document[]
+  onItemPress: (index: number) => void
+}
+
+const VocabularyList = ({ documents, onItemPress }: VocabularyListScreenProps): JSX.Element => {
+  const renderItem = ({ item, index }: { item: Document; index: number }): JSX.Element => (
+    <VocabularyListItem document={item} onPress={() => onItemPress(index)} />
+  )
+
+  return (
+    <Root>
+      <Title
+        title={labels.exercises.vocabularyList.title}
+        description={`${documents.length} ${documents.length === 1 ? labels.general.word : labels.general.words}`}
+      />
+
+      <FlatList
+        data={documents}
+        renderItem={renderItem}
+        keyExtractor={item => `${item.id}`}
+        showsVerticalScrollIndicator={false}
+      />
+    </Root>
+  )
+}
+
+export default VocabularyList

src/routes/vocabulary-list/components/VocabularyListItem.tsx → src/components/VocabularyListItem.tsx

@@ -2,11 +2,11 @@ import React, { ReactElement } from 'react'
 import { widthPercentageToDP as wp } from 'react-native-responsive-screen'
 import styled from 'styled-components/native'
 
-import AudioPlayer from '../../../components/AudioPlayer'
-import ListItem from '../../../components/ListItem'
-import { ContentTextLight } from '../../../components/text/Content'
-import { Document } from '../../../constants/endpoints'
-import { getArticleColor } from '../../../services/helpers'
+import { Document } from '../constants/endpoints'
+import { getArticleColor } from '../services/helpers'
+import AudioPlayer from './AudioPlayer'
+import ListItem from './ListItem'
+import { ContentTextLight } from './text/Content'
 
 const StyledImage = styled.Image`
   margin-right: ${props => props.theme.spacings.sm};
@@ -31,10 +31,10 @@ const Speaker = styled.View`
 
 export interface VocabularyListItemProp {
   document: Document
-  setIsModalVisible?: () => void
+  onPress: () => void
 }
 
-const VocabularyListItem = ({ document, setIsModalVisible }: VocabularyListItemProp): ReactElement => {
+const VocabularyListItem = ({ document, onPress }: VocabularyListItemProp): ReactElement => {
   const { article, word, document_image: documentImage } = document
 
   const title = <StyledTitle articleColor={getArticleColor(article)}>{article.value}</StyledTitle>
@@ -43,13 +43,11 @@ const VocabularyListItem = ({ document, setIsModalVisible }: VocabularyListItemP
       <StyledImage testID='image' source={{ uri: documentImage[0].image }} width={24} height={24} />
     ) : undefined
 
-  const noop = () => undefined
-
   return (
     <ListItem
       title={title}
       description={word}
-      onPress={setIsModalVisible ?? noop}
+      onPress={onPress}
       icon={icon}
       rightChildren={
         <Speaker>

src/components/__tests__/VocabularyList.spec.tsx

@@ -0,0 +1,55 @@
+import { fireEvent } from '@testing-library/react-native'
+import React from 'react'
+
+import labels from '../../constants/labels.json'
+import DocumentBuilder from '../../testing/DocumentBuilder'
+import { mockUseLoadAsyncWithData } from '../../testing/mockUseLoadFromEndpoint'
+import render from '../../testing/render'
+import VocabularyList from '../VocabularyList'
+
+jest.mock('../AudioPlayer', () => {
+  const Text = require('react-native').Text
+  return () => <Text>AudioPlayer</Text>
+})
+
+describe('VocabularyList', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  const onItemPress = jest.fn()
+  const documents = new DocumentBuilder(2).build()
+
+  it('should display vocabulary list', () => {
+    mockUseLoadAsyncWithData(documents)
+
+    const { getByText, getAllByText, getAllByTestId } = render(
+      <VocabularyList documents={documents} onItemPress={onItemPress} />
+    )
+
+    expect(getByText(labels.exercises.vocabularyList.title)).toBeTruthy()
+    expect(getByText(`2 ${labels.general.words}`)).toBeTruthy()
+    expect(getByText('Der')).toBeTruthy()
+    expect(getByText('Spachtel')).toBeTruthy()
+    expect(getByText('Das')).toBeTruthy()
+    expect(getByText('Auto')).toBeTruthy()
+    expect(getAllByText('AudioPlayer')).toHaveLength(2)
+    expect(getAllByTestId('image')).toHaveLength(2)
+  })
+
+  it('should call onItemPress with correct index', () => {
+    const { getByText } = render(<VocabularyList documents={documents} onItemPress={onItemPress} />)
+
+    expect(onItemPress).toHaveBeenCalledTimes(0)
+
+    fireEvent.press(getByText('Auto'))
+
+    expect(onItemPress).toHaveBeenCalledTimes(1)
+    expect(onItemPress).toHaveBeenCalledWith(1)
+
+    fireEvent.press(getByText('Spachtel'))
+
+    expect(onItemPress).toHaveBeenCalledTimes(2)
+    expect(onItemPress).toHaveBeenCalledWith(0)
+  })
+})

src/routes/vocabulary-list/components/__tests__/VocabularyListItem.spec.tsx → src/components/__tests__/VocabularyListItem.spec.tsx

@@ -1,14 +1,17 @@
+import { fireEvent } from '@testing-library/react-native'
 import React from 'react'
 import 'react-native'
 
-import { ARTICLES } from '../../../../constants/data'
-import { Document } from '../../../../constants/endpoints'
-import render from '../../../../testing/render'
+import { ARTICLES } from '../../constants/data'
+import { Document } from '../../constants/endpoints'
+import render from '../../testing/render'
 import VocabularyListItem from '../VocabularyListItem'
 
-jest.mock('../../../../components/AudioPlayer', () => () => null)
+jest.mock('../AudioPlayer', () => () => null)
 
 describe('VocabularyListItem', () => {
+  const onPress = jest.fn()
+
   const document: Document = {
     article: ARTICLES[1],
     audio: '',
@@ -19,17 +22,21 @@ describe('VocabularyListItem', () => {
   }
 
   it('should display image passed to it', () => {
-    const { getByTestId } = render(<VocabularyListItem document={document} />)
+    const { getByTestId } = render(<VocabularyListItem document={document} onPress={onPress} />)
     expect(getByTestId('image')).toHaveProp('source', { uri: document.document_image[0].image })
   })
 
   it('should display article passed to it', () => {
-    const { queryByText } = render(<VocabularyListItem document={document} />)
+    const { queryByText } = render(<VocabularyListItem document={document} onPress={onPress} />)
     expect(queryByText(document.article.value)).toBeTruthy()
   })
 
   it('should display word passed to it', () => {
-    const { queryByText } = render(<VocabularyListItem document={document} />)
-    expect(queryByText(document.word)).toBeTruthy()
+    const { getByText } = render(<VocabularyListItem document={document} onPress={onPress} />)
+    expect(getByText(document.word)).toBeTruthy()
+
+    expect(onPress).toHaveBeenCalledTimes(0)
+    fireEvent.press(getByText(document.word))
+    expect(onPress).toHaveBeenCalledTimes(1)
   })
 })

src/navigation/NavigationTypes.ts

@@ -16,6 +16,10 @@ interface ExerciseParams {
   closeExerciseAction: CommonNavigationAction
 }
 
+type DetailExerciseParams = ExerciseParams & {
+  documentIndex: number
+}
+
 export interface ExercisesParams extends Omit<ExerciseParams, 'documents' | 'closeExerciseAction'> {
   discipline: Discipline
   documents: Document[] | null
@@ -47,6 +51,7 @@ export type RoutesParams = {
     discipline: Discipline
     initialSelection: boolean
   }
+  VocabularyDetail: DetailExerciseParams
   Exercises: ExercisesParams
   VocabularyList: ExerciseParams
   WordChoiceExercise: ExerciseParams

src/navigation/Navigator.tsx

@@ -7,10 +7,11 @@ import labels from '../constants/labels.json'
 import { useTabletHeaderHeight } from '../hooks/useTabletHeaderHeight'
 import ResultDetailScreen from '../routes/ResultDetailScreen'
 import ResultScreen from '../routes/ResultScreen'
+import VocabularyDetailScreen from '../routes/VocabularyDetailScreen'
+import VocabularyListScreen from '../routes/VocabularyListScreen'
 import ArticleChoiceExerciseScreen from '../routes/choice-exercises/ArticleChoiceExerciseScreen'
 import WordChoiceExerciseScreen from '../routes/choice-exercises/WordChoiceExerciseScreen'
 import ExerciseFinishedScreen from '../routes/exercise-finished/ExerciseFinishedScreen'
-import VocabularyListScreen from '../routes/vocabulary-list/VocabularyListScreen'
 import WriteExerciseScreen from '../routes/write-exercise/WriteExerciseScreen'
 import BottomTabNavigator from './BottomTabNavigator'
 import { RoutesParams } from './NavigationTypes'
@@ -33,6 +34,11 @@ const HomeStackNavigator = (): JSX.Element | null => {
           component={VocabularyListScreen}
           options={({ navigation }) => options(overviewExercises, navigation, false)}
         />
+        <Stack.Screen
+          name='VocabularyDetail'
+          component={VocabularyDetailScreen}
+          options={({ navigation }) => options('', navigation, true)}
+        />
         <Stack.Screen
           name='WordChoiceExercise'
           component={WordChoiceExerciseScreen}

src/routes/ResultDetailScreen.tsx

@@ -9,10 +9,10 @@ import { DoubleCheckCircleIconWhite, ArrowRightIcon, RepeatIcon } from '../../as
 import Button from '../components/Button'
 import Loading from '../components/Loading'
 import Title from '../components/Title'
+import VocabularyListItem from '../components/VocabularyListItem'
 import { BUTTONS_THEME, ExerciseKeys, RESULTS } from '../constants/data'
 import labels from '../constants/labels.json'
 import { DocumentResult, RoutesParams } from '../navigation/NavigationTypes'
-import VocabularyListItem from './vocabulary-list/components/VocabularyListItem'
 
 const Root = styled.View`
   background-color: ${prop => prop.theme.colors.background};
@@ -73,7 +73,12 @@ const ResultDetailScreen = ({ route, navigation }: ResultScreenProps): JSX.Eleme
     />
   )
 
-  const Item = ({ item }: { item: DocumentResult }): JSX.Element => <VocabularyListItem document={item.document} />
+  const Item = ({ item, index }: { item: DocumentResult; index: number }): JSX.Element => (
+    <VocabularyListItem
+      document={item.document}
+      onPress={() => navigation.navigate('VocabularyDetail', { ...route.params, documentIndex: index })}
+    />
+  )
 
   const repeatIncorrectEntries = (): void =>
     navigation.navigate('WriteExercise', {

src/routes/VocabularyDetailScreen.tsx

@@ -0,0 +1,62 @@
+import { RouteProp } from '@react-navigation/native'
+import { StackNavigationProp } from '@react-navigation/stack'
+import React, { ReactElement } from 'react'
+import styled from 'styled-components/native'
+
+import { ArrowRightIcon } from '../../assets/images'
+import AudioPlayer from '../components/AudioPlayer'
+import Button from '../components/Button'
+import ImageCarousel from '../components/ImageCarousel'
+import WordItem from '../components/WordItem'
+import { BUTTONS_THEME } from '../constants/data'
+import labels from '../constants/labels.json'
+import { RoutesParams } from '../navigation/NavigationTypes'
+
+const ItemContainer = styled.View`
+  margin: ${props => props.theme.spacings.xl} 0;
+  height: 10%;
+  width: 85%;
+  align-self: center;
+`
+
+const ButtonContainer = styled.View`
+  display: flex;
+  align-self: center;
+`
+
+interface VocabularyDetailScreenProps {
+  route: RouteProp<RoutesParams, 'VocabularyDetail'>
+  navigation: StackNavigationProp<RoutesParams, 'VocabularyDetail'>
+}
+
+const VocabularyDetailScreen = ({ route, navigation }: VocabularyDetailScreenProps): ReactElement => {
+  const { documents, documentIndex } = route.params
+  const document = documents[documentIndex]
+  const { word, article, document_image: image } = document
+  const hasNextDocument = documentIndex + 1 < documents.length
+
+  const goToNextWord = () =>
+    navigation.navigate('VocabularyDetail', { ...route.params, documentIndex: documentIndex + 1 })
+
+  return (
+    <>
+      <ImageCarousel images={image} />
+      <AudioPlayer document={document} disabled={false} />
+      <ItemContainer>
+        <WordItem answer={{ word, article }} />
+      </ItemContainer>
+      <ButtonContainer>
+        {hasNextDocument && (
+          <Button
+            label={labels.exercises.next}
+            iconRight={ArrowRightIcon}
+            onPress={goToNextWord}
+            buttonTheme={BUTTONS_THEME.contained}
+          />
+        )}
+      </ButtonContainer>
+    </>
+  )
+}
+
+export default VocabularyDetailScreen

src/routes/VocabularyListScreen.tsx

@@ -0,0 +1,19 @@
+import { RouteProp } from '@react-navigation/native'
+import { StackNavigationProp } from '@react-navigation/stack'
+import React from 'react'
+
+import VocabularyList from '../components/VocabularyList'
+import { RoutesParams } from '../navigation/NavigationTypes'
+
+interface VocabularyListScreenProps {
+  route: RouteProp<RoutesParams, 'VocabularyList'>
+  navigation: StackNavigationProp<RoutesParams, 'VocabularyList'>
+}
+
+const VocabularyListScreen = ({ route, navigation }: VocabularyListScreenProps): JSX.Element => {
+  const onItemPress = (index: number) =>
+    navigation.navigate('VocabularyDetail', { ...route.params, documentIndex: index })
+  return <VocabularyList documents={route.params.documents} onItemPress={onItemPress} />
+}
+
+export default VocabularyListScreen

src/routes/home/HomeScreen.tsx

@@ -7,6 +7,7 @@ import styled from 'styled-components/native'
 import HeaderWithMenu from '../../components/HeaderWithMenu'
 import { ContentSecondary } from '../../components/text/Content'
 import { Heading } from '../../components/text/Heading'
+import { Discipline } from '../../constants/endpoints'
 import labels from '../../constants/labels.json'
 import useReadCustomDisciplines from '../../hooks/useReadCustomDisciplines'
 import useReadSelectedProfessions from '../../hooks/useReadSelectedProfessions'
@@ -48,16 +49,25 @@ const HomeScreen = ({ navigation }: HomeScreenProps): JSX.Element => {
     navigation.navigate('AddCustomDiscipline')
   }
 
+  const navigateToDisciplineSelection = (discipline: Discipline): void => {
+    navigation.navigate('DisciplineSelection', { discipline })
+  }
+
   const customDisciplineItems = customDisciplines?.map(customDiscipline => (
     <DisciplineCard
       key={customDiscipline}
       identifier={{ apiKey: customDiscipline }}
       refresh={refreshCustomDisciplines}
+      onPress={navigateToDisciplineSelection}
     />
   ))
 
   const selectedProfessionItems = selectedProfessions?.map(profession => (
-    <DisciplineCard key={profession} identifier={{ disciplineId: profession }} />
+    <DisciplineCard
+      key={profession}
+      identifier={{ disciplineId: profession }}
+      onPress={navigateToDisciplineSelection}
+    />
   ))
 
   return (