Merge branch 'main' into 2468-reorder-the-icons-in-the-header

.github/ISSUE_TEMPLATE/bug-report.md

@@ -25,7 +25,7 @@ labels: Bug
 
 ### Additional Information
 
-<!-- Add any other context (e.g. logs, screenshots, environment etc.) about the problem here. -->
+<!-- Add any other context (e.g. logs, screenshots, environment, related issues etc.) about the problem here. -->
 
 <details>
   <summary>Traceback</summary>

.github/ISSUE_TEMPLATE/task.md

@@ -16,4 +16,4 @@ A clear and concise description of what you want to happen.
 A clear and concise description of any alternative solutions or features you've considered.
 
 **Additional context**
-Add any other context or screenshots about the feature request here.
+Add any other context or screenshots about the feature request here. If applicable link any related issues or back-end issues.

README.md

@@ -17,29 +17,22 @@ React JS and React Native App for [Integreat](https://integreat-app.de), [Malte]
 - [Project Structure](#project-structure)
 - [Getting Started](#getting-started)
   - [Prerequisites](#prerequisites)
-  - [Project setup](#project-setup)
+  - [Project Setup](#project-setup)
 - [Further Reading](#further-reading)
 
 ## Contributing
 
+First, make sure you have a look at our [conventions](docs/conventions.md).
+
 You can contribute by:
 
-- [Creating Pull requests](docs/contributing.md#pull-requests)
-- [Reporting bugs](docs/contributing.md#bug-reporting)
+- [Reporting bugs](docs/contributing.md#reporting-issues-and-bugs)
+- [Creating pull requests](docs/contributing.md#pull-requests)
+- [Reviewing pull requests](docs/contributing.md#reviews)
 
 If you want to know more about Integreat or if you want to join us, contact [Leandra](mailto:[email protected]),
 [Steffen](mailto:[email protected]) or [our info mail](mailto:[email protected]) and visit our [website](https://integreat-app.de).
 
-We use this emoji code for reviewing:
-
-- :+1: or `:+1:` This is great! It always feels good when somebody likes your work. Show them!
-- :question: or `:question:` I have a question / can you clarify?
-- :x: or `:x:` This has to change. It’s possibly an error or strongly violates existing conventions.
-- :wrench: or `:wrench:` This is a well-meant suggestion. Take it or leave it.
-- :upside_down_face: or `:upside_down_face:` This is a nitpick. Normally related to a small formatting or stylizing detail that shouldn’t block moving forward.
-- :thought_balloon: or `:thought_balloon:` I’m just thinking out loud here. Something doesn’t necessarily have to change, but I want to make sure to share my thoughts.
-- :clown_face: or `:clown_face:` This is a complaint about something with no obvious answer, not necessarily a problem originating from changes.
-
 ## Project Structure
 
 This is a monorepo and contains the following projects:

assets/README.md

@@ -0,0 +1,19 @@
+# Assets
+
+All build-config and platform independent assets should be placed in this directory.
+All assets should use kebab-case naming.
+
+## Icons
+
+### Conventions
+
+Icons should be added to the corresponding [icons](icons) subfolder.
+Normal icons are supposed to follow the following conventions:
+
+- Use the SVG format
+- Resize to 24x24px with width and height set
+- The viewbox starts at (0, 0)
+- Set the general icon color to `currentColor` (using `fill="currentColor"`)
+- The SVG should be as simple and reduced as possible
+
+If the icon has e.g. a build-config dependent background, you can use `fill="var(--theme-color, none)"`.

docs/contributing.md

@@ -5,7 +5,17 @@ by [reporting a bug](#reporting-issues-and-bugs), [opening a pull request](#pull
 or [contacting us](#contact-us) if you don't know where to start. Please make sure to have a look at
 our [conventions](conventions.md).
 
-## Contact us
+Before contributing, please make sure to have a look at our [conventions](conventions.md).
+
+## Contents
+
+- [Contact](#contact-us)
+- [Reporting Issues and Bugs](#reporting-issues-and-bugs)
+- [Pull Requests](#pull-requests)
+- [Release Notes](#release-notes)
+- [Reviews](#reviews)
+
+## Contact Us
 
 If you don't know where to start or if you want to know more about Integreat,
 contact [Leandra](mailto:[email protected]),
@@ -23,7 +33,7 @@ our [project views](https://github.com/orgs/digitalfabrik/projects/2/views/1).
 
 If you open a new issue, please make sure to follow the templates and create meaningful issues and bugs.
 
-## Pull requests
+## Pull Requests
 
 Before starting to write code and opening a pull request, please take a look [at our conventions](conventions.md).
 
@@ -58,3 +68,15 @@ The release notes can be found [here](../release-notes) and are automatically mo
 release.
 They are also shown in the stores and
 the [release section of github](https://github.com/digitalfabrik/integreat-app/releases).
+
+### Reviews
+
+We use the following emoji code for reviewing:
+
+- :+1: or `:+1:` This is great! It always feels good when somebody likes your work. Show them!
+- :question: or `:question:` I have a question / can you clarify?
+- :x: or `:x:` This has to change. It’s possibly an error or strongly violates existing conventions.
+- :wrench: or `:wrench:` This is a well-meant suggestion. Take it or leave it.
+- :upside_down_face: or `:upside_down_face:` This is a nitpick. Normally related to a small formatting or stylizing detail that shouldn’t block moving forward.
+- :thought_balloon: or `:thought_balloon:` I’m just thinking out loud here. Something doesn’t necessarily have to change, but I want to make sure to share my thoughts.
+- :clown_face: or `:clown_face:` This is a complaint about something with no obvious answer, not necessarily a problem originating from changes.

docs/conventions.md

@@ -6,8 +6,10 @@
 - [Testing](#testing)
 - [Code Quality](#code-quality)
 - [Commit Messages and Pull Requests](#commit-messages-and-pull-request)
+- [Reviews](#reviews)
 - [Versioning](#versioning)
 - [Folder Structure](#folder-structure)
+- [Assets and Icons](#assets-and-icons)
 
 ## Naming
 
@@ -89,6 +91,10 @@ write good commit messages. Commit messages should have the following schema:
 
 The same applies for PR names.
 
+## Reviews
+
+We use an [emoji code](contributing.md#reviews) for reviewing.
+
 ## Versioning
 
 Versions consist of a version name and a version code.
@@ -135,3 +141,8 @@ src
     │   LanguageDetector.ts
     |   indext.ts
 ```
+
+## Assets and Icons
+
+We place our build-config and platform independent assets and icons in the [assets](../assets) in the root directory.
+See more information in the corresponding [README](../assets/README.md).

native/src/components/Caption.tsx

@@ -12,8 +12,13 @@ const H1 = styled(Text)`
 `
 type CaptionProps = {
   title: string
+  language?: string
 }
 
-const Caption = ({ title }: CaptionProps): ReactElement => <H1 android_hyphenationFrequency='full'>{title}</H1>
+const Caption = ({ title, language }: CaptionProps): ReactElement => (
+  <H1 android_hyphenationFrequency='full' accessibilityLanguage={language}>
+    {title}
+  </H1>
+)
 
 export default Caption

native/src/components/CategoryListItem.tsx

@@ -68,7 +68,7 @@ const CategoryListItem = ({
   onItemPress,
 }: CategoryListItemProps): ReactElement => (
   <>
-    <FlexStyledLink role='link' onPress={() => onItemPress({ path: category.path })}>
+    <FlexStyledLink role='link' onPress={() => onItemPress({ path: category.path })} accessibilityLanguage={language}>
       <DirectionContainer language={language}>
         <CategoryEntryContainer>
           <TitleDirectionContainer language={language}>

native/src/components/CityEntry.tsx

@@ -1,11 +1,12 @@
-import React, { Fragment, memo, ReactElement } from 'react'
+import React, { Fragment, memo, ReactElement, useContext } from 'react'
 import { Text } from 'react-native'
 import Highlighter from 'react-native-highlight-words'
 import styled from 'styled-components/native'
 
 import { normalizeString } from 'shared'
 import { CityModel } from 'shared/api'
 
+import { AppContext } from '../contexts/AppContextProvider'
 import testID from '../testing/testID'
 import Pressable from './base/Pressable'
 
@@ -52,6 +53,7 @@ const CityEntry = ({ city, query, navigateToDashboard }: CityEntryProps): ReactE
       ? Object.keys(city.aliases).filter(alias => normalizeString(alias).includes(normalizedQuery))
       : []
   const aliases = matchingAliases.slice(0, MAX_NUMBER_OF_ALIASES_SHOWN)
+  const { languageCode } = useContext(AppContext)
 
   const Aliases =
     aliases.length > 0 ? (
@@ -86,7 +88,11 @@ const CityEntry = ({ city, query, navigateToDashboard }: CityEntryProps): ReactE
     ) : null
 
   return (
-    <CityListItem role='link' {...testID('City-Entry')} onPress={() => navigateToDashboard(city)}>
+    <CityListItem
+      role='link'
+      {...testID('City-Entry')}
+      onPress={() => navigateToDashboard(city)}
+      accessibilityLanguage={languageCode}>
       <>
         <Label
           searchWords={[normalizedQuery]}

native/src/components/Header.tsx

@@ -20,6 +20,7 @@ import {
   SETTINGS_ROUTE,
 } from 'shared'
 import { LanguageModel, FeedbackRouteType } from 'shared/api'
+import { config } from 'translations'
 
 import { NavigationProps, RouteProps, RoutesParamsType, RoutesType } from '../constants/NavigationTypes'
 import buildConfig from '../constants/buildConfig'
@@ -199,32 +200,45 @@ const Header = ({
       ]
     : []
 
-  const getHeaderText = (): string => {
+  const getHeaderText = (): { text: string; language?: string } => {
     const currentTitle = (route.params as { title?: string } | undefined)?.title
     if (!previousRoute) {
       // Home/Dashboard: Show current route title, i.e. city name
-      return currentTitle ?? ''
+      return { text: currentTitle ?? '', language: config.sourceLanguage }
     }
 
-    const previousParams = previousRoute.params
-
-    const currentRouteIsPoi = route.name === POIS_ROUTE
+    const poisRouteParams = route.params as RoutesParamsType[PoisRouteType] | undefined
+    const isSinglePoi = !!poisRouteParams?.slug || poisRouteParams?.multipoi !== undefined
     const notFromDeepLink = previousRoute.name === POIS_ROUTE
-    if (currentRouteIsPoi && notFromDeepLink) {
-      const poisRouteParams = route.params as RoutesParamsType[PoisRouteType]
-      if (poisRouteParams.slug || poisRouteParams.multipoi !== undefined) {
-        return t('locations')
+    if (isSinglePoi && notFromDeepLink) {
+      return { text: t('locations'), language: undefined } // system language
+    }
+
+    const previousRouteTitle = (previousRoute.params as { path?: string } | undefined)?.path
+
+    if (previousRouteTitle) {
+      return { text: previousRouteTitle, language: languageCode }
+    }
+
+    if (previousRoute.name === CATEGORIES_ROUTE) {
+      return {
+        text: t('localInformation'),
+        language: languageCode,
       }
     }
 
-    const previousRouteTitle = (previousParams as { title?: string } | undefined)?.title
-    return previousRouteTitle ?? t(previousRoute.name === 'categories' ? 'localInformation' : previousRoute.name)
+    return { text: previousRoute.name, language: undefined } // system language
   }
 
   return (
     <BoxShadow>
       <Horizontal>
-        <HeaderBox goBack={navigation.goBack} canGoBack={canGoBack} text={getHeaderText()} />
+        <HeaderBox
+          goBack={navigation.goBack}
+          canGoBack={canGoBack}
+          text={getHeaderText().text}
+          language={getHeaderText().language}
+        />
         <CustomHeaderButtons cancelLabel={t('cancel')} items={items} overflowItems={overflowItems} />
       </Horizontal>
     </BoxShadow>

native/src/components/HeaderBox.tsx

@@ -31,9 +31,10 @@ type HeaderBoxProps = {
   goBack?: () => void
   canGoBack?: boolean
   text?: string
+  language?: string
 }
 
-const HeaderBox = ({ goBack, canGoBack = true, text }: HeaderBoxProps): ReactElement => {
+const HeaderBox = ({ goBack, canGoBack = true, text, language }: HeaderBoxProps): ReactElement => {
   const deviceWidth = useWindowDimensions().width
   const theme = useTheme()
   const { t } = useTranslation('common')
@@ -49,10 +50,14 @@ const HeaderBox = ({ goBack, canGoBack = true, text }: HeaderBoxProps): ReactEle
   ) : (
     <StyledIcon Icon={AppIcon} />
   )
+
   return (
     <HorizontalLeft>
       {HeaderIcon}
-      <HeaderText allowFontScaling={false} fontSize={deviceWidth * dimensions.fontScaling}>
+      <HeaderText
+        allowFontScaling={false}
+        fontSize={deviceWidth * dimensions.fontScaling}
+        accessibilityLanguage={language}>
         {text}
       </HeaderText>
     </HorizontalLeft>

native/src/components/ListItem.tsx

@@ -54,7 +54,7 @@ type ListItemProps = {
 }
 
 const ListItem = ({ language, title, thumbnail, children, Icon, navigateTo }: ListItemProps): ReactElement => (
-  <StyledPressable onPress={navigateTo} role='link'>
+  <StyledPressable onPress={navigateTo} accessibilityLanguage={language} role='link'>
     <ListItemView language={language}>
       <Thumbnail source={thumbnail} />
       <Description>

native/src/components/MapView.tsx

@@ -119,11 +119,11 @@ const MapView = ({
   )
 
   const onRequestLocation = useCallback(async () => {
-    if (userLocation) {
-      moveTo(userLocation)
+    const newUserLocation = userLocation ?? (await refreshPermissionAndLocation())?.coordinates
+    if (newUserLocation) {
+      moveTo(newUserLocation)
       setFollowUserLocation(true)
     }
-    await refreshPermissionAndLocation()
   }, [refreshPermissionAndLocation, moveTo, userLocation])
 
   useEffect(() => {

native/src/components/NewsListItem.tsx

@@ -7,6 +7,7 @@ import { LocalNewsModel, TunewsModel } from 'shared/api'
 import { ArrowBackIcon } from '../assets'
 import { EXCERPT_MAX_LINES } from '../constants'
 import { contentDirection } from '../constants/contentDirection'
+import { useAppContext } from '../hooks/useCityAppContext'
 import TimeStamp from './TimeStamp'
 import Icon from './base/Icon'
 import Pressable from './base/Pressable'
@@ -81,12 +82,13 @@ export const ReadMore = styled(Text)<{ isTunews: boolean }>`
 const NewsListItem = ({ index, newsItem, navigateToNews, isTunews }: NewsListItemProps): ReactElement => {
   const { t, i18n } = useTranslation('news')
   const timestamp = newsItem instanceof LocalNewsModel ? newsItem.timestamp : null
+  const { languageCode } = useAppContext()
 
   return (
     <>
       <Divider firstItem={index === 0} />
       <ListItemWrapper>
-        <StyledPressable onPress={navigateToNews} role='link'>
+        <StyledPressable onPress={navigateToNews} accessibilityLanguage={languageCode} role='link'>
           <Description>
             <Title>{newsItem.title}</Title>
             <Content numberOfLines={EXCERPT_MAX_LINES}>{newsItem.content}</Content>
@@ -96,11 +98,13 @@ const NewsListItem = ({ index, newsItem, navigateToNews, isTunews }: NewsListIte
               </TimeStampContent>
             )}
           </Description>
+        </StyledPressable>
+        <Pressable role='link' onPress={navigateToNews}>
           <ReadMoreWrapper language={i18n.language}>
             <ReadMore isTunews={isTunews} onPress={navigateToNews}>{`${t('readMore')}`}</ReadMore>
             <StyledIcon Icon={ArrowBackIcon} directionDependent reverse isTunews={isTunews} />
           </ReadMoreWrapper>
-        </StyledPressable>
+        </Pressable>
       </ListItemWrapper>
     </>
   )

native/src/components/Page.tsx

@@ -76,7 +76,7 @@ const Page = ({
 
   return (
     <Container $padding={padding}>
-      {!loading && title ? <Caption title={title} /> : null}
+      {!loading && title ? <Caption title={title} language={language} /> : null}
       {!loading && BeforeContent}
       <RemoteContent
         content={content}

native/src/components/SearchListItem.tsx

@@ -114,7 +114,11 @@ const SearchListItem = ({
   )
 
   return (
-    <FlexStyledLink onPress={navigateToSearchResult} role='link' accessibilityHint={t('itemHint')}>
+    <FlexStyledLink
+      onPress={navigateToSearchResult}
+      role='link'
+      accessibilityHint={t('itemHint')}
+      accessibilityLanguage={language}>
       <DirectionContainer language={language}>
         <SearchEntryContainer>
           <TitleDirectionContainer language={language}>