1233: Removed some unnessary props and renamed the file

digitalfabrik · Nov 20, 2023 · 773d118 · 773d118
1 parent 9ac544a
commit 773d118
Show file tree

Hide file tree

Showing 13 changed files with 55 additions and 131 deletions.
diff --git a/native/src/components/Categories.tsx b/native/src/components/Categories.tsx
@@ -9,7 +9,7 @@ import { URL_PREFIX } from '../constants/webview'
 import TileModel from '../models/TileModel'
 import testID from '../testing/testID'
 import { LanguageResourceCacheStateType, PageResourceCacheStateType } from '../utils/DataContainer'
-import CategoryListItem from './CategoryListItem'
+import CategoryList from './CategoryList'
 import OrganizationContentInfo from './OrganizationContentInfo'
 import Page from './Page'
 import Tiles from './Tiles'
@@ -81,7 +81,7 @@ const Categories = ({
       path={category.path}
       AfterContent={category.organization && <OrganizationContentInfo organization={category.organization} />}
       Footer={children.map(it => (
-        <CategoryListItem
+        <CategoryList
           key={it.path}
           category={it}
           subCategories={categories.getChildren(it)}

diff --git a/native/src/components/CategoryListItem.tsx → native/src/components/CategoryList.tsx b/native/src/components/CategoryListItem.tsx → native/src/components/CategoryList.tsx
@@ -60,7 +60,7 @@ type CategoryListItemProps = {
   language: string
 }
 
-const CategoryListItem = ({
+const CategoryList = ({
   language,
   category,
   subCategories,
@@ -99,4 +99,4 @@ const CategoryListItem = ({
   </>
 )
 
-export default memo(CategoryListItem)
+export default memo(CategoryList)
diff --git a/native/src/components/LayoutedScrollView.tsx b/native/src/components/LayoutedScrollView.tsx
@@ -7,20 +7,19 @@ import Layout from './Layout'
 type LayoutedScrollViewProps = {
   children?: React.ReactNode
   refreshControl?: React.ReactElement<RefreshControlProps>
-  nestedScrollEnabled?: boolean
 }
 
 const LayoutedScrollView = (props: LayoutedScrollViewProps): ReactElement => {
-  const { children, refreshControl, nestedScrollEnabled = true } = props
+  const { children, refreshControl } = props
   return (
     <Layout>
       <ScrollView
         keyboardShouldPersistTaps='always'
+        nestedScrollEnabled
         refreshControl={refreshControl}
         contentContainerStyle={{
           flexGrow: 1,
-        }}
-        nestedScrollEnabled={nestedScrollEnabled}>
+        }}>
         {children}
       </ScrollView>
     </Layout>

diff --git a/native/src/components/List.tsx b/native/src/components/List.tsx
@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react'
-import { FlatList, RefreshControl, AccessibilityRole } from 'react-native'
+import { FlatList, RefreshControl } from 'react-native'
 import styled from 'styled-components/native'
 
 const NoItemsMessage = styled.Text`
@@ -16,7 +16,7 @@ type ListProps<T> = {
   Header?: ReactElement
   Footer?: ReactElement
   scrollEnabled?: boolean
-  accessibilityRole?: AccessibilityRole | undefined
+  accessibilityLabel?: string
   refresh?: () => void
   onEndReached?: () => void
 }
@@ -28,7 +28,7 @@ const List = <T,>({
   Header,
   Footer,
   refresh,
-  accessibilityRole,
+  accessibilityLabel,
   onEndReached,
   scrollEnabled,
 }: ListProps<T>): ReactElement => (
@@ -51,7 +51,8 @@ const List = <T,>({
     }}
     onEndReachedThreshold={1}
     scrollEnabled={scrollEnabled}
-    accessibilityRole={accessibilityRole}
+    accessibilityRole='list'
+    accessibilityLabel={accessibilityLabel}
   />
 )
 

diff --git a/native/src/components/SearchListItem.tsx b/native/src/components/SearchListItem.tsx
@@ -8,7 +8,7 @@ import { SEARCH_PREVIEW_MAX_CHARS } from '../constants'
 import { contentDirection } from '../constants/contentDirection'
 import { PageResourceCacheStateType } from '../utils/DataContainer'
 import { getCachedThumbnail } from './Categories'
-import { CategoryThumbnail } from './CategoryListItem'
+import { CategoryThumbnail } from './CategoryList'
 import Pressable from './base/Pressable'
 
 const FlexStyledLink = styled(Pressable)`

diff --git a/native/src/components/SubCategoryListItem.tsx b/native/src/components/SubCategoryListItem.tsx
@@ -6,7 +6,7 @@ import { CategoryModel } from 'api-client'
 import { contentDirection } from '../constants/contentDirection'
 import { PageResourceCacheStateType } from '../utils/DataContainer'
 import { getCachedThumbnail } from './Categories'
-import { CategoryThumbnail } from './CategoryListItem'
+import { CategoryThumbnail } from './CategoryList'
 import Pressable from './base/Pressable'
 
 const SubCategoryTitleContainer = styled.View<{ language: string }>`

diff --git a/...nents/__tests__/CategoryListItem.spec.tsx → ...omponents/__tests__/CategoryList.spec.tsx b/...nents/__tests__/CategoryListItem.spec.tsx → ...omponents/__tests__/CategoryList.spec.tsx
@@ -3,14 +3,14 @@ import React from 'react'
 import { CategoriesMapModelBuilder, CityModelBuilder, LanguageModelBuilder } from 'api-client'
 
 import render from '../../testing/render'
-import CategoryListItem from '../CategoryListItem'
+import CategoryList from '../CategoryList'
 
 jest.mock('styled-components')
 jest.mock('react-native-webview', () => ({
   default: () => jest.fn(),
 }))
 
-describe('CategoryListItem', () => {
+describe('CategoryList', () => {
   const cityModel = new CityModelBuilder(1).build()[0]!
   const language = new LanguageModelBuilder(1).build()[0]!
   const { categories: categoriesMapModel, resourceCache } = new CategoriesMapModelBuilder(
@@ -29,7 +29,7 @@ describe('CategoryListItem', () => {
 
   it('should render category and subcategories', () => {
     const { getByText } = render(
-      <CategoryListItem
+      <CategoryList
         category={category}
         subCategories={subCategories}
         onItemPress={onItemPress}

diff --git a/native/src/components/__tests__/SearchListItem.spec.tsx b/native/src/components/__tests__/SearchListItem.spec.tsx
@@ -14,7 +14,7 @@ jest.mock('react-native-webview', () => ({
 describe('SearchListItem', () => {
   const cityModel = new CityModelBuilder(1).build()[0]!
   const language = new LanguageModelBuilder(1).build()[0]!
-  const accessibilityHint = 'Navigates to the chosen item'
+  const accessibilityHint = 'Navigates to the chosen page'
   const { categories: categoriesMapModel, resourceCache } = new CategoriesMapModelBuilder(
     cityModel.code,
     language.code,

diff --git a/native/src/components/base/TextButton.tsx b/native/src/components/base/TextButton.tsx
@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react'
-import { StyleProp, ViewStyle, AccessibilityRole } from 'react-native'
+import { StyleProp, ViewStyle } from 'react-native'
 import styled from 'styled-components/native'
 
 import Pressable from './Pressable'
@@ -25,31 +25,17 @@ type TextButtonProps = {
   text: string
   onPress: () => Promise<void> | void
   disabled?: boolean
-  accessible?: boolean
-  focusable?: boolean
-  accessibilityRole?: AccessibilityRole | undefined
   type?: 'primary' | 'clear'
   style?: StyleProp<ViewStyle>
 }
 
-const TextButton = ({
-  text,
-  onPress,
-  disabled = false,
-  type = 'primary',
-  style,
-  accessible,
-  accessibilityRole,
-  focusable,
-}: TextButtonProps): ReactElement => (
+const TextButton = ({ text, onPress, disabled = false, type = 'primary', style }: TextButtonProps): ReactElement => (
   <StyledPressable
     onPress={onPress}
     primary={type === 'primary'}
     disabled={disabled}
     style={style}
-    accessible={accessible}
-    accessibilityRole={accessibilityRole}
-    focusable={focusable}>
+    accessibilityRole='button'>
     <StyledText>{text}</StyledText>
   </StyledPressable>
 )

diff --git a/native/src/routes/CityNotCooperating.tsx b/native/src/routes/CityNotCooperating.tsx
@@ -3,22 +3,19 @@ import React, { ReactElement, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components/native'
 
-import List from '../components/List'
-import NothingFound from '../components/NothingFound'
 import Icon from '../components/base/Icon'
 import TextButton from '../components/base/TextButton'
 import buildConfig, { buildConfigAssets } from '../constants/buildConfig'
 
-const Container = styled.View`
+const Container = styled.ScrollView`
   display: flex;
-  flex: 1;
-  margin: 30px 30px 0 30px;
+  padding: 30px;
 `
 
 const Heading = styled.Text`
   font-family: ${props => props.theme.fonts.native.decorativeFontBold};
   font-size: 18px;
-  margin: 20px 20px 30px;
+  padding: 20px 20px 40px;
   text-align: center;
 `
 
@@ -30,7 +27,6 @@ const ListHeading = styled(Heading)`
   align-self: flex-start;
   font-size: 15px;
   padding: 10px 0;
-  margin-bottom: -200px;
 `
 
 const ListItem = styled.View`
@@ -56,56 +52,31 @@ const StepExplanation = styled.Text`
   padding-bottom: 4px;
 `
 
-const FooterContainer = styled.View`
-  display: flex;
-  justify-content: flex-end;
-  margin-bottom: 330px;
-`
-
 const StyledButton = styled(TextButton)`
   z-index: 1;
   margin: 15px auto 0;
   width: 70%;
 `
 
 const TemplateText = styled.Text`
+  top: -20px;
   border: 1px solid ${props => props.theme.colors.themeColor};
   padding: 50px 30px 30px;
-  margin-top: -20px;
+  margin-bottom: 40px;
 `
 
 const StyledIcon = styled(Icon)`
-  margin: 10px 0;
   align-self: center;
   width: 50%;
-  height: 30%;
+  height: 20%;
 `
 
-type Step = {
-  number: string
-  id: string
-  explanation: string
-}
-
 const CityNotCooperating = (): ReactElement | null => {
   const { t } = useTranslation('cityNotCooperating')
   const [isCopied, setIsCopied] = useState<boolean>(false)
   const template = buildConfig().featureFlags.cityNotCooperatingTemplate
   const CityNotCooperatingIcon = buildConfigAssets().CityNotCooperatingIcon
 
-  const steps: Step[] = [
-    {
-      id: '1',
-      number: '1',
-      explanation: 'findOutMail',
-    },
-    {
-      id: '2',
-      number: '2',
-      explanation: 'sendText',
-    },
-  ]
-
   if (!template) {
     return null
   }
@@ -115,43 +86,24 @@ const CityNotCooperating = (): ReactElement | null => {
     setIsCopied(true)
   }
 
-  const renderStepsList = ({ item }: { item: Step; index: number }) => (
-    <ListItem>
-      <StepNumber>{item.number}</StepNumber>
-      <StepExplanation>{t(item.explanation)}</StepExplanation>
-    </ListItem>
-  )
-
-  const CooperationHeader = (
-    <>
+  return (
+    <Container>
       <Heading>{t('callToAction')}</Heading>
+
       <Description>{t('explanation')}</Description>
       {CityNotCooperatingIcon && <StyledIcon Icon={CityNotCooperatingIcon} />}
       <ListHeading>{t('whatToDo')}</ListHeading>
-    </>
-  )
-
-  const CooperationFooter = (
-    <FooterContainer>
-      <StyledButton
-        onPress={copyToClipboard}
-        text={isCopied ? t('common:copied') : t('copyText')}
-        accessibilityRole='button'
-      />
+      <ListItem>
+        <StepNumber>1</StepNumber>
+        <StepExplanation>{t('findOutMail')}</StepExplanation>
+      </ListItem>
+      <ListItem>
+        <StepNumber>2</StepNumber>
+        <StepExplanation>{t('sendText')}</StepExplanation>
+      </ListItem>
+
+      <StyledButton onPress={copyToClipboard} text={isCopied ? t('common:copied') : t('copyText')} />
       <TemplateText>{template}</TemplateText>
-    </FooterContainer>
-  )
-
-  return (
-    <Container>
-      <List
-        items={steps}
-        accessibilityRole='list'
-        renderItem={renderStepsList}
-        Header={CooperationHeader}
-        Footer={CooperationFooter}
-        noItemsMessage={<NothingFound />}
-      />
     </Container>
   )
 }

diff --git a/native/src/routes/SearchModal.tsx b/native/src/routes/SearchModal.tsx
@@ -101,8 +101,8 @@ const SearchModal = ({
       resourceCache={resourceCache[item.category.path] ?? {}}
       contentWithoutHtml={item.contentWithoutHtml}
       language={languageCode}
+      accessibilityHint={t('itemHint')}
       query={query}
-      accessibilityHint={t(`It navigates to the description of the item`)}
       onItemPress={onItemPress}
     />
   )
@@ -114,7 +114,7 @@ const SearchModal = ({
         <List
           items={searchResults}
           renderItem={renderItem}
-          accessibilityRole='text'
+          accessibilityLabel={`${searchCategories(categories, query).length} ${t('searchResults')}`}
           noItemsMessage={
             <>
               <NothingFound />

diff --git a/translations/translations.json b/translations/translations.json
@@ -8368,6 +8368,8 @@
     "de": {
       "nothingFound": "Es wurden leider keine passenden Ergebnisse gefunden.",
       "searchPlaceholder": "Suche",
+      "itemHint": "Es navigiert zur Beschreibung der Seite",
+      "searchResults": "Suchergebnisse",
       "pageTitle": "Suche",
       "delete": "Eingabe löschen"
     },