983: Upgrade prettier and add trailing commas

.prettierrc

@@ -1,11 +1,12 @@
 {
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
   "semi": false,
   "singleQuote": true,
   "arrowParens": "avoid",
   "printWidth": 120,
   "bracketSameLine": true,
   "jsxSingleQuote": true,
+  "endOfLine": "auto",
   "importOrder": ["^(\\.)+(\\/)+"],
-  "importOrderSeparation": true,
-  "endOfLine": "auto"
+  "importOrderSeparation": true
 }

package.json

@@ -102,7 +102,7 @@
     "jest-transform-stub": "^2.0.0",
     "metro-react-native-babel-preset": "^0.77.0",
     "patch-package": "^8.0.0",
-    "prettier": "^2.7.1",
+    "prettier": "^3.2.5",
     "react-dom": "18.2.0",
     "react-test-renderer": "18.2.0",
     "ts-jest": "^29.1.2",

src/components/ImageCarousel.tsx

@@ -80,7 +80,7 @@ const ImageCarousel = ({ images, minimized = false }: ImageCarouselProps): React
         !!currentIndex &&
         allSize > 1 &&
         imagesUrls.map((item, index) =>
-          index + 1 === currentIndex ? <ActiveDot key={item.url} /> : <Dot key={item.url} />
+          index + 1 === currentIndex ? <ActiveDot key={item.url} /> : <Dot key={item.url} />,
         )}
     </PaginationView>
   )

src/components/ListItem.tsx

@@ -159,7 +159,7 @@ const ListItem = ({
       }
       setPressInY(null)
     },
-    [pressInY, updatePressed, onPress]
+    [pressInY, updatePressed, onPress],
   )
 
   const titleToRender =

src/components/__tests__/CameraOverlay.spec.tsx

@@ -14,7 +14,7 @@ describe('CameraOverlay', () => {
     const { getByTestId, queryByTestId, findByTestId } = render(
       <CameraOverlay setVisible={setVisible}>
         <Text>Children</Text>
-      </CameraOverlay>
+      </CameraOverlay>,
     )
     const closeIcon = await findByTestId('close-circle-icon-white')
     expect(closeIcon).toBeDefined()
@@ -27,7 +27,7 @@ describe('CameraOverlay', () => {
     const { findByTestId } = render(
       <CameraOverlay setVisible={setVisible}>
         <Text>Children</Text>
-      </CameraOverlay>
+      </CameraOverlay>,
     )
     const closeIcon = await findByTestId('close-circle-icon-white')
     expect(closeIcon).toBeDefined()

src/components/__tests__/CustomTextInput.spec.tsx

@@ -8,21 +8,21 @@ describe('CustomTextInput', () => {
 
   it('should show placeholder text', () => {
     const { getByPlaceholderText } = render(
-      <CustomTextInput value='' clearable placeholder='Test' onChangeText={onChangeText} />
+      <CustomTextInput value='' clearable placeholder='Test' onChangeText={onChangeText} />,
     )
     expect(getByPlaceholderText('Test')).toBeTruthy()
   })
 
   it('should not show clear indicator with empty input', () => {
     const { queryByTestId } = render(
-      <CustomTextInput value='' clearable placeholder='Test' onChangeText={onChangeText} />
+      <CustomTextInput value='' clearable placeholder='Test' onChangeText={onChangeText} />,
     )
     expect(queryByTestId('clearInput')).toBeNull()
   })
 
   it('should show indicator when input was set', () => {
     const { getByTestId } = render(
-      <CustomTextInput value='My Input' clearable placeholder='Test' onChangeText={onChangeText} />
+      <CustomTextInput value='My Input' clearable placeholder='Test' onChangeText={onChangeText} />,
     )
     expect(getByTestId('clearInput')).toBeTruthy()
   })

src/components/__tests__/ExerciseHeader.spec.tsx

@@ -29,7 +29,7 @@ describe('ExerciseHeader', () => {
         feedbackType={FeedbackType.vocabularyItem}
         feedbackForId={1}
         exerciseKey={ExerciseKeys.vocabularyList}
-      />
+      />,
     )
     expect(getByTestId('customModal')).toBeTruthy()
     expect(getByTestId('customModal').props.visible).toBe(false)

src/components/__tests__/FavoriteButton.spec.tsx

@@ -16,7 +16,7 @@ describe('FavoriteButton', () => {
     render(
       <NavigationContainer>
         <FavoriteButton vocabularyItem={vocabularyItem} />
-      </NavigationContainer>
+      </NavigationContainer>,
     )
 
   it('should add favorite on click', async () => {

src/components/__tests__/FeedbackModal.spec.tsx

@@ -16,7 +16,7 @@ describe('FeedbackModal', () => {
 
   it('should have a disabled send button when message is empty', () => {
     const { getByText, getByPlaceholderText } = render(
-      <FeedbackModal visible onClose={onClose} feedbackType={FeedbackType.vocabularyItem} feedbackForId={1} />
+      <FeedbackModal visible onClose={onClose} feedbackType={FeedbackType.vocabularyItem} feedbackForId={1} />,
     )
     expect(getByText(getLabels().feedback.sendFeedback)).toBeDisabled()
     const feedbackInputField = getByPlaceholderText(getLabels().feedback.feedbackPlaceholder)
@@ -26,7 +26,7 @@ describe('FeedbackModal', () => {
 
   it('should get a cleared feedback text when clear button was clicked', () => {
     const { getByPlaceholderText, getByTestId } = render(
-      <FeedbackModal visible onClose={onClose} feedbackType={FeedbackType.vocabularyItem} feedbackForId={1} />
+      <FeedbackModal visible onClose={onClose} feedbackType={FeedbackType.vocabularyItem} feedbackForId={1} />,
     )
     const feedbackInputField = getByPlaceholderText(getLabels().feedback.feedbackPlaceholder)
     fireEvent.changeText(feedbackInputField, 'Mein Feedback')
@@ -36,7 +36,7 @@ describe('FeedbackModal', () => {
 
   it('should send feedback', () => {
     const { getByText, getByPlaceholderText } = render(
-      <FeedbackModal visible onClose={onClose} feedbackType={FeedbackType.vocabularyItem} feedbackForId={1} />
+      <FeedbackModal visible onClose={onClose} feedbackType={FeedbackType.vocabularyItem} feedbackForId={1} />,
     )
     const feedbackInputField = getByPlaceholderText(getLabels().feedback.feedbackPlaceholder)
     const emailInputField = getByPlaceholderText(getLabels().feedback.mailPlaceholder)

src/components/__tests__/ListItem.spec.tsx

@@ -23,7 +23,7 @@ describe('ListItem', () => {
         badgeLabel={badge}
         arrowDisabled={arrowDisabled}
         disabled={disabled}
-      />
+      />,
     )
 
   it('should render texts', () => {

src/components/__tests__/Loading.spec.tsx

@@ -12,7 +12,7 @@ describe('Loading', () => {
     render(
       <Loading isLoading={isLoading}>
         <Text>{childText}</Text>
-      </Loading>
+      </Loading>,
     )
 
   it('should not render children when isLoading is true', () => {

src/components/__tests__/NotAuthorisedView.spec.tsx

@@ -16,15 +16,21 @@ describe('NotAuthorisedView', () => {
 
   it('should render description', () => {
     const { getByText } = render(
-      <NotAuthorisedView setVisible={setVisible} description={getLabels().general.camera.noAuthorization.description} />
+      <NotAuthorisedView
+        setVisible={setVisible}
+        description={getLabels().general.camera.noAuthorization.description}
+      />,
     )
     const isNoAuthDescription = getByText(getLabels().general.camera.noAuthorization.description)
     expect(isNoAuthDescription).toBeTruthy()
   })
 
   it('should successfully go back', () => {
     const { getByText } = render(
-      <NotAuthorisedView setVisible={setVisible} description={getLabels().general.camera.noAuthorization.description} />
+      <NotAuthorisedView
+        setVisible={setVisible}
+        description={getLabels().general.camera.noAuthorization.description}
+      />,
     )
     const buttonVisible = getByText(getLabels().general.back)
     fireEvent.press(buttonVisible)
@@ -34,7 +40,10 @@ describe('NotAuthorisedView', () => {
   it('should open settings successfully', () => {
     mocked(Linking.openSettings).mockImplementationOnce(Promise.resolve)
     const { getByText } = render(
-      <NotAuthorisedView setVisible={setVisible} description={getLabels().general.camera.noAuthorization.description} />
+      <NotAuthorisedView
+        setVisible={setVisible}
+        description={getLabels().general.camera.noAuthorization.description}
+      />,
     )
     const message = getByText(getLabels().settings.settings)
     fireEvent.press(message)

src/components/__tests__/RouteWrapper.spec.tsx

@@ -14,7 +14,7 @@ describe('RouteWrapper', () => {
     const { queryByTestId } = render(
       <RouteWrapper bottomBackgroundColor={theme.colors.background}>
         <div />
-      </RouteWrapper>
+      </RouteWrapper>,
     )
     expect(queryByTestId('hiddenContainer')).toBeDefined()
     Platform.OS = platform
@@ -26,7 +26,7 @@ describe('RouteWrapper', () => {
     const { queryByTestId } = render(
       <RouteWrapper bottomBackgroundColor={theme.colors.background}>
         <div />
-      </RouteWrapper>
+      </RouteWrapper>,
     )
     expect(queryByTestId('hiddenContainer')).toBeNull()
     Platform.OS = platform

src/components/__tests__/ServerResponseHandler.spec.tsx

@@ -14,7 +14,7 @@ describe('ServerResponseHandler', () => {
     const { getByText } = render(
       <ServerResponseHandler error={error} loading={false} refresh={refresh}>
         TestContent
-      </ServerResponseHandler>
+      </ServerResponseHandler>,
     )
 
     expect(getByText(error.message)).toBeTruthy()
@@ -26,7 +26,7 @@ describe('ServerResponseHandler', () => {
     const { getByTestId } = render(
       <ServerResponseHandler error={null} loading refresh={refresh}>
         TestContent
-      </ServerResponseHandler>
+      </ServerResponseHandler>,
     )
 
     expect(getByTestId('loading')).toBeTruthy()
@@ -36,7 +36,7 @@ describe('ServerResponseHandler', () => {
     const { getByText } = render(
       <ServerResponseHandler error={null} loading={false} refresh={refresh}>
         <Text>TestContent</Text>
-      </ServerResponseHandler>
+      </ServerResponseHandler>,
     )
 
     expect(getByText('TestContent')).toBeTruthy()

src/components/__tests__/VocabularyList.spec.tsx

@@ -28,7 +28,7 @@ describe('VocabularyList', () => {
     mockUseLoadAsyncWithData(vocabularyItems)
 
     const { getByText, getAllByText, getAllByTestId } = render(
-      <VocabularyList title='Title' vocabularyItems={vocabularyItems} onItemPress={onItemPress} />
+      <VocabularyList title='Title' vocabularyItems={vocabularyItems} onItemPress={onItemPress} />,
     )
 
     expect(getByText('Title')).toBeTruthy()
@@ -43,7 +43,7 @@ describe('VocabularyList', () => {
 
   it('should call onItemPress with correct index', () => {
     const { getByText } = render(
-      <VocabularyList title='Title' vocabularyItems={vocabularyItems} onItemPress={onItemPress} />
+      <VocabularyList title='Title' vocabularyItems={vocabularyItems} onItemPress={onItemPress} />,
     )
 
     expect(onItemPress).toHaveBeenCalledTimes(0)

src/constants/theme/colors.ts

@@ -30,4 +30,4 @@ export const COLORS = {
   chartColor4: '#D9D9D9',
 }
 
-export type Color = typeof COLORS[keyof typeof COLORS]
+export type Color = (typeof COLORS)[keyof typeof COLORS]

src/hooks/helpers.ts

@@ -22,7 +22,7 @@ export type ServerResponseDiscipline = {
 
 export const formatDiscipline = (
   item: ServerResponseDiscipline,
-  loadingInfo: DisciplinesRequestParams
+  loadingInfo: DisciplinesRequestParams,
 ): Discipline => ({
   ...item,
   numberOfChildren: item.total_discipline_children || item.total_training_sets || item.total_documents,

src/hooks/useLoadAsync.ts

@@ -5,7 +5,7 @@ export const loadAsync = async <T, P>(
   params: P,
   setData: (data: T | null) => void,
   setError: (error: Error | null) => void,
-  setLoading: (loading: boolean) => void
+  setLoading: (loading: boolean) => void,
 ): Promise<void> => {
   setLoading(true)
 

src/hooks/useLoadVocabularyItems.ts

@@ -19,7 +19,7 @@ export type VocabularyItemFromServer = {
 
 export const formatVocabularyItemFromServer = (
   vocabularyItemFromServer: VocabularyItemFromServer,
-  apiKey?: string
+  apiKey?: string,
 ): VocabularyItem => ({
   id: vocabularyItemFromServer.id,
   word: vocabularyItemFromServer.word,
@@ -36,7 +36,7 @@ export const formatVocabularyItemFromServer = (
 
 export const formatVocabularyItemsFromServer = (
   vocabularyItemFromServers: VocabularyItemFromServer[],
-  apiKey?: string
+  apiKey?: string,
 ): VocabularyItem[] => vocabularyItemFromServers.map(item => formatVocabularyItemFromServer(item, apiKey))
 
 export const loadVocabularyItems = async ({

src/navigation/BottomTabNavigator.tsx

@@ -41,7 +41,7 @@ const BottomTabNavigator = (): JSX.Element | null => {
   const { data: isDevMode } = useLoadAsync(getDevMode, null)
   const { data: numberOfWordsNeedingRepetition, refresh: refreshRepetitionBadge } = useLoadAsync(
     RepetitionService.getNumberOfWordsNeedingRepetitionWithUpperBound,
-    undefined
+    undefined,
   )
 
   useFocusEffect(refreshRepetitionBadge)

src/routes/__tests__/OverlayMenuScreen.spec.tsx

@@ -14,7 +14,7 @@ describe('OverlayMenu', () => {
     const { getByTestId } = renderWithTheme(
       <NavigationContainer>
         <OverlayMenu navigation={navigation} />
-      </NavigationContainer>
+      </NavigationContainer>,
     )
     const close = getByTestId('close-icon-white')
     expect(close).toBeTruthy()
@@ -31,7 +31,7 @@ describe('OverlayMenu', () => {
     const { getByText } = renderWithTheme(
       <NavigationContainer>
         <OverlayMenu navigation={navigation} />
-      </NavigationContainer>
+      </NavigationContainer>,
     )
 
     const item = getByText(menuItem)

src/routes/__tests__/ProfessionSelectionScreen.spec.tsx

@@ -36,7 +36,7 @@ describe('ProfessionSelectionScreen', () => {
     mocked(useReadSelectedProfessions).mockReturnValueOnce(getReturnOf(null))
 
     const { findByText, queryAllByTestId } = render(
-      <ProfessionSelectionScreen route={getRoute()} navigation={navigation} />
+      <ProfessionSelectionScreen route={getRoute()} navigation={navigation} />,
     )
     expect(await findByText(getLabels().scopeSelection.skipSelection)).toBeDefined()
     const profession = await findByText(mockDisciplines()[0].title)
@@ -56,7 +56,7 @@ describe('ProfessionSelectionScreen', () => {
     mocked(useReadSelectedProfessions).mockReturnValueOnce(getReturnOf([mockDisciplines()[0].id]))
 
     const { findByText, queryAllByTestId } = render(
-      <ProfessionSelectionScreen route={getRoute()} navigation={navigation} />
+      <ProfessionSelectionScreen route={getRoute()} navigation={navigation} />,
     )
     expect(await findByText(getLabels().scopeSelection.confirmSelection)).toBeDefined()
     const profession = await findByText(mockDisciplines()[0].title)

src/routes/__tests__/VocabularyListScreen.spec.tsx

@@ -51,7 +51,7 @@ describe('VocabularyListScreen', () => {
     mockUseLoadAsyncWithData(vocabularyItems)
 
     const { getByText, getAllByText, getAllByTestId } = render(
-      <VocabularyListScreen route={route} navigation={navigation} />
+      <VocabularyListScreen route={route} navigation={navigation} />,
     )
 
     expect(getByText(getLabels().exercises.vocabularyList.title)).toBeTruthy()

src/routes/add-custom-discipline/AddCustomDisciplineScreen.tsx

@@ -74,7 +74,7 @@ const AddCustomDiscipline = ({ navigation }: AddCustomDisciplineScreenProps): JS
         setErrorMessage(
           error.response?.status === HTTP_STATUS_CODE_FORBIDDEN
             ? getLabels().addCustomDiscipline.error.wrongCode
-            : getLabels().addCustomDiscipline.error.technical
+            : getLabels().addCustomDiscipline.error.technical,
         )
       })
       .finally(() => setLoading(false))

src/routes/add-custom-discipline/__tests__/AddCustomDisciplineScreen.spec.tsx

@@ -45,7 +45,7 @@ describe('AddCustomDisciplineScreen', () => {
     const submitButton = await findByText(getLabels().addCustomDiscipline.submitLabel)
     fireEvent.press(submitButton)
     await waitFor(() =>
-      expect(RNAsyncStorage.setItem).toHaveBeenCalledWith('customDisciplines', '["test","another_test_discipline"]')
+      expect(RNAsyncStorage.setItem).toHaveBeenCalledWith('customDisciplines', '["test","another_test_discipline"]'),
     )
     await waitFor(() => expect(navigation.goBack).toHaveBeenCalled())
   })
@@ -63,7 +63,7 @@ describe('AddCustomDisciplineScreen', () => {
 
   it('should show wrong-code-error', async () => {
     const { findByText, getByText, findByPlaceholderText } = render(
-      <AddCustomDisciplineScreen navigation={navigation} />
+      <AddCustomDisciplineScreen navigation={navigation} />,
     )
     mocked(loadDiscipline).mockRejectedValueOnce({ response: { status: 403 } })
     const textField = await findByPlaceholderText(getLabels().addCustomDiscipline.placeholder)

src/routes/choice-exercises/ArticleChoiceExerciseScreen.tsx

@@ -21,7 +21,7 @@ const ArticleChoiceExerciseScreen = ({ navigation, route }: ArticleChoiceExercis
   const answerOptions = ARTICLES.filter(it => it.id !== 0 && it.id !== 4)
 
   const singularVocabularyItems = vocabularyItems.filter(it =>
-    answerOptions.some(answerOption => JSON.stringify(it.article) === JSON.stringify(answerOption))
+    answerOptions.some(answerOption => JSON.stringify(it.article) === JSON.stringify(answerOption)),
   )
 
   const vocabularyItemToAnswers = (vocabularyItem: VocabularyItem): Answer[] =>

src/routes/choice-exercises/__tests__/ArticleChoiceExerciseScreen.spec.tsx

@@ -74,7 +74,7 @@ describe('ArticleChoiceExerciseScreen', () => {
 
   it('should not allow to skip last vocabularyItem', () => {
     const { queryByText, getByText, getAllByText } = render(
-      <ArticleChoiceExerciseScreen route={route} navigation={navigation} />
+      <ArticleChoiceExerciseScreen route={route} navigation={navigation} />,
     )
 
     expect(getAllByText(/Spachtel/)).toHaveLength(3)