LUN-357: Make vocabulary list reusable

src/routes/vocabulary-list/VocabularyListScreen.tsx → src/components/VocabularyList.tsx

@@ -1,15 +1,12 @@
-import { RouteProp } from '@react-navigation/native'
-import { StackNavigationProp } from '@react-navigation/stack'
-import React, { ComponentType, useState } from 'react'
+import React, { useState } from 'react'
 import { FlatList } from 'react-native'
 import styled from 'styled-components/native'
 
-import Title from '../../components/Title'
-import { Document } from '../../constants/endpoints'
-import labels from '../../constants/labels.json'
-import { RoutesParams } from '../../navigation/NavigationTypes'
-import VocabularyListItem from './components/VocabularyListItem'
-import VocabularyListModal from './components/VocabularyListModal'
+import { Document } from '../constants/endpoints'
+import labels from '../constants/labels.json'
+import Title from './Title'
+import VocabularyListItem from './VocabularyListItem'
+import VocabularyListModal from './VocabularyListModal'
 
 const Root = styled.View`
   background-color: ${props => props.theme.colors.background};
@@ -18,17 +15,11 @@ const Root = styled.View`
   padding: 0 ${props => props.theme.spacings.sm};
 `
 
-const StyledList = styled(FlatList)`
-  width: 100%;
-` as ComponentType as new () => FlatList<Document>
-
 interface VocabularyListScreenProps {
-  route: RouteProp<RoutesParams, 'VocabularyList'>
-  navigation: StackNavigationProp<RoutesParams, 'VocabularyList'>
+  documents: Document[]
 }
 
-const VocabularyListScreen = ({ route }: VocabularyListScreenProps): JSX.Element => {
-  const { documents } = route.params
+const VocabularyList = ({ documents }: VocabularyListScreenProps): JSX.Element => {
   const [isModalVisible, setIsModalVisible] = useState(false)
   const [selectedDocumentIndex, setSelectedDocumentIndex] = useState<number>(0)
 
@@ -58,7 +49,7 @@ const VocabularyListScreen = ({ route }: VocabularyListScreenProps): JSX.Element
         description={`${documents.length} ${documents.length === 1 ? labels.general.word : labels.general.words}`}
       />
 
-      <StyledList
+      <FlatList
         data={documents}
         renderItem={renderItem}
         keyExtractor={item => `${item.id}`}
@@ -68,4 +59,4 @@ const VocabularyListScreen = ({ route }: VocabularyListScreenProps): JSX.Element
   )
 }
 
-export default VocabularyListScreen
+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};

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

@@ -3,14 +3,14 @@ import { Modal, SafeAreaView } from 'react-native'
 import { widthPercentageToDP as wp } from 'react-native-responsive-screen'
 import styled from 'styled-components/native'
 
-import { CloseCircleIconWhite, 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 { Document } from '../../../constants/endpoints'
-import labels from '../../../constants/labels.json'
+import { CloseCircleIconWhite, ArrowRightIcon } from '../../assets/images'
+import { BUTTONS_THEME } from '../constants/data'
+import { Document } from '../constants/endpoints'
+import labels from '../constants/labels.json'
+import AudioPlayer from './AudioPlayer'
+import Button from './Button'
+import ImageCarousel from './ImageCarousel'
+import WordItem from './WordItem'
 
 const ModalContainer = styled.View`
   background-color: ${props => props.theme.colors.background};

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

@@ -1,9 +1,9 @@
 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)

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

@@ -1,9 +1,9 @@
 import { fireEvent } from '@testing-library/react-native'
 import React from 'react'
 
-import labels from '../../../../constants/labels.json'
-import DocumentBuilder from '../../../../testing/DocumentBuilder'
-import render from '../../../../testing/render'
+import labels from '../../constants/labels.json'
+import DocumentBuilder from '../../testing/DocumentBuilder'
+import render from '../../testing/render'
 import VocabularyListModal from '../VocabularyListModal'
 
 jest.mock('../../../../components/AudioPlayer', () => {

src/navigation/Navigator.tsx

@@ -7,10 +7,10 @@ import labels from '../constants/labels.json'
 import { useTabletHeaderHeight } from '../hooks/useTabletHeaderHeight'
 import ResultDetailScreen from '../routes/ResultDetailScreen'
 import ResultScreen from '../routes/ResultScreen'
+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'

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};

src/routes/VocabularyListScreen.tsx

@@ -0,0 +1,17 @@
+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 }: VocabularyListScreenProps): JSX.Element => (
+  <VocabularyList documents={route.params.documents} />
+)
+
+export default VocabularyListScreen

src/routes/vocabulary-list/__tests__/VocabularyListScreen.spec.tsx → src/routes/__tests__/VocabularyListScreen.spec.tsx

@@ -1,15 +1,12 @@
-import { CommonActions, RouteProp } from '@react-navigation/native'
 import { fireEvent } from '@testing-library/react-native'
 import React, { ComponentProps } from 'react'
 
-import labels from '../../../constants/labels.json'
-import { RoutesParams } from '../../../navigation/NavigationTypes'
-import DocumentBuilder from '../../../testing/DocumentBuilder'
-import createNavigationMock from '../../../testing/createNavigationPropMock'
-import { mockUseLoadAsyncWithData } from '../../../testing/mockUseLoadFromEndpoint'
-import render from '../../../testing/render'
-import VocabularyListScreen from '../VocabularyListScreen'
-import VocabularyListModal from '../components/VocabularyListModal'
+import VocabularyList from '../../components/VocabularyList'
+import VocabularyListModal from '../../components/VocabularyListModal'
+import labels from '../../constants/labels.json'
+import DocumentBuilder from '../../testing/DocumentBuilder'
+import { mockUseLoadAsyncWithData } from '../../testing/mockUseLoadFromEndpoint'
+import render from '../../testing/render'
 
 jest.mock('../../../components/AudioPlayer', () => {
   const Text = require('react-native').Text
@@ -38,27 +35,13 @@ jest.mock('../components/VocabularyListModal', () => {
   )
 })
 
-describe('VocabularyListScreen', () => {
+describe('VocabularyList', () => {
   const documents = new DocumentBuilder(2).build()
-  const route: RouteProp<RoutesParams, 'VocabularyList'> = {
-    key: '',
-    name: 'VocabularyList',
-    params: {
-      documents,
-      disciplineId: 1,
-      disciplineTitle: 'My discipline title',
-      closeExerciseAction: CommonActions.goBack()
-    }
-  }
-
-  const navigation = createNavigationMock<'VocabularyList'>()
 
   it('should display vocabulary list', () => {
     mockUseLoadAsyncWithData(documents)
 
-    const { getByText, getAllByText, getAllByTestId } = render(
-      <VocabularyListScreen route={route} navigation={navigation} />
-    )
+    const { getByText, getAllByText, getAllByTestId } = render(<VocabularyList documents={documents} />)
 
     expect(getByText(labels.exercises.vocabularyList.title)).toBeTruthy()
     expect(getByText(`2 ${labels.general.words}`)).toBeTruthy()
@@ -71,7 +54,7 @@ describe('VocabularyListScreen', () => {
   })
 
   it('should open vocabulary modal when pressing vocabulary', () => {
-    const { getByText } = render(<VocabularyListScreen route={route} navigation={navigation} />)
+    const { getByText } = render(<VocabularyList documents={documents} />)
 
     const vocabulary = getByText('Auto')
     fireEvent.press(vocabulary)