2537: Merge news

native/src/BottomTabNavigator.tsx

@@ -12,7 +12,6 @@ import {
   CATEGORIES_TAB_ROUTE,
   EVENTS_ROUTE,
   EVENTS_TAB_ROUTE,
-  LOCAL_NEWS_TYPE,
   NEWS_ROUTE,
   NEWS_TAB_ROUTE,
   PLACES_ROUTE,
@@ -66,11 +65,7 @@ const EventsStackScreen = () => (
 
 const NewsStackScreen = () => (
   <NewsStack.Navigator screenOptions={{ header: defaultHeader, animation: 'none' }}>
-    <NewsStack.Screen
-      name={NEWS_ROUTE}
-      initialParams={{ newsId: null, newsType: LOCAL_NEWS_TYPE }}
-      component={NewsContainer}
-    />
+    <NewsStack.Screen name={NEWS_ROUTE} initialParams={{ id: null }} component={NewsContainer} />
   </NewsStack.Navigator>
 )
 
@@ -128,7 +123,7 @@ const BottomTabNavigator = ({ navigation }: BottomTabNavigatorProps): ReactEleme
     return <LoadingErrorHandler loading={loading} error={error} refresh={refresh} />
   }
 
-  const { eventsEnabled, placesEnabled, localNewsEnabled, tuNewsEnabled, chatEnabled } = cachedData.region
+  const { eventsEnabled, placesEnabled, newsEnabled, chatEnabled } = cachedData.region
   const chatVisible = buildConfig().featureFlags.chat && chatEnabled
 
   const Tabs = [
@@ -152,7 +147,7 @@ const BottomTabNavigator = ({ navigation }: BottomTabNavigatorProps): ReactEleme
         }}
       />
     ),
-    (localNewsEnabled || tuNewsEnabled) && (
+    newsEnabled && (
       <Tab.Screen
         name={NEWS_TAB_ROUTE}
         component={NewsStackScreen}

native/src/__tests__/Navigator.spec.tsx

@@ -145,7 +145,7 @@ describe('Navigator', () => {
         categories: null as never,
         events: [],
         places: [],
-        localNews: [],
+        news: [],
       },
       loading: false,
       error: null,

native/src/assets/index.ts

@@ -1,12 +1,12 @@
 import EventThumbnailPlaceholder1 from '../../../assets/event-thumbnail-placeholder-1.jpg'
 import EventThumbnailPlaceholder2 from '../../../assets/event-thumbnail-placeholder-2.jpg'
 import EventThumbnailPlaceholder3 from '../../../assets/event-thumbnail-placeholder-3.jpg'
+import AmalNewsLogo from '../../../assets/icons/amal-news.svg'
 import EditLocationIcon from '../../../assets/icons/edit-location.svg'
 import NotAccessibleIcon from '../../../assets/icons/not-accessible.svg'
 import SignPostIcon from '../../../assets/icons/signpost-outline.svg'
 import SprungbrettIcon from '../../../assets/icons/sprungbrett.svg'
-import TuNewsActiveIcon from '../../../assets/icons/tu-news-active.svg'
-import TuNewsInactiveIcon from '../../../assets/icons/tu-news-inactive.svg'
+import TuNewsIcon from '../../../assets/icons/tu-news.svg'
 import IntroLanguageIcon from '../../../assets/intro/language.svg'
 import IntroNewsIcon from '../../../assets/intro/news.svg'
 import IntroOfflineIcon from '../../../assets/intro/offline.svg'
@@ -15,6 +15,7 @@ import IntroSearchIcon from '../../../assets/intro/search.svg'
 import IntroWelcomeIcon from '../../../assets/intro/welcome.svg'
 
 export {
+  AmalNewsLogo,
   EditLocationIcon,
   EventThumbnailPlaceholder1,
   EventThumbnailPlaceholder2,
@@ -28,6 +29,5 @@ export {
   NotAccessibleIcon,
   SignPostIcon,
   SprungbrettIcon,
-  TuNewsActiveIcon,
-  TuNewsInactiveIcon,
+  TuNewsIcon,
 }

native/src/components/List.tsx

@@ -21,7 +21,6 @@ type ListProps<T> = {
   scrollEnabled?: boolean
   accessibilityLabel?: string
   refresh?: () => void
-  onEndReached?: () => void
   style?: ViewStyle
   keyboardShouldPersistTaps?: 'always' | 'never' | 'handled'
 }
@@ -34,7 +33,6 @@ const List = <T,>({
   footer,
   refresh,
   accessibilityLabel,
-  onEndReached,
   scrollEnabled,
   style,
   keyboardShouldPersistTaps = 'never',
@@ -49,7 +47,6 @@ const List = <T,>({
     ListEmptyComponent={
       typeof noItemsMessage === 'string' ? <ListEmptyComponent noItemsMessage={noItemsMessage} /> : noItemsMessage
     }
-    onEndReached={onEndReached}
     showsVerticalScrollIndicator={false}
     onEndReachedThreshold={1}
     scrollEnabled={scrollEnabled}

native/src/components/News.tsx

@@ -1,112 +1,129 @@
-import { TFunction } from 'i18next'
 import React, { ReactElement } from 'react'
 import { useTranslation } from 'react-i18next'
-import { ScrollView } from 'react-native'
+import { Pressable, ScrollView, View } from 'react-native'
+import styled from 'styled-components/native'
 
-import { NewsRouteType, NewsType, TU_NEWS_TYPE, replaceLinks, tuNewsLabel } from 'shared'
-import { LocalNewsModel, TuNewsModel, ErrorCodes } from 'shared/api'
+import {
+  NEWS_ROUTE,
+  NEWS_SOURCE_FILTERS,
+  NewsRouteType,
+  NewsSourceFilter as NewsSourceFilterType,
+  replaceLinks,
+} from 'shared'
+import { AMAL_NEWS_SOURCE, ErrorCodes, LOCAL_NEWS_SOURCE, NewsModel, RegionModel } from 'shared/api'
 
+import { AmalNewsLogo, TuNewsIcon } from '../assets'
 import { NavigationProps } from '../constants/NavigationTypes'
 import { contentAlignmentRTLText } from '../constants/contentDirection'
 import useNavigate from '../hooks/useNavigate'
 import useSetRouteTitle from '../hooks/useSetRouteTitle'
+import useSnackbar from '../hooks/useSnackbar'
 import useTtsPlayer from '../hooks/useTtsPlayer'
+import openExternalUrl from '../utils/openExternalUrl'
+import Caption from './Caption'
 import Failure from './Failure'
 import List from './List'
-import LoadingSpinner from './LoadingSpinner'
 import NewsListItem from './NewsListItem'
 import Page from './Page'
 import TimeStamp from './TimeStamp'
+import ToggleTextButtonGroup from './ToggleTextButtonGroup'
+import Icon from './base/Icon'
 import Text from './base/Text'
 
-const getPageTitle = (
-  selectedNewsType: NewsType,
-  selectedNewsItem: LocalNewsModel | TuNewsModel | null | undefined,
-  t: TFunction,
-): string => {
-  if (selectedNewsItem?.title) {
-    return selectedNewsItem.title
-  }
-  if (selectedNewsType === TU_NEWS_TYPE) {
-    return tuNewsLabel
-  }
-  return t('localNews.pageTitle')
-}
+const NewsSourceLogo = styled(Icon)`
+  width: 100%;
+  height: 64px;
+`
 
-type NewsModelsType = (LocalNewsModel | TuNewsModel)[]
+const NewsSourceLink = styled(Pressable)`
+  padding-top: 16px;
+`
+
+const ListHeaderContainer = styled(View)`
+  padding-inline: 16px;
+  padding-bottom: 16px;
+  gap: 8px;
+`
 
 type NewsProps = {
-  news: NewsModelsType
-  navigateToNews: (newsId: number) => void
-  newsId: number | null
+  news: NewsModel[]
+  id: number | null
+  region: RegionModel
   languageCode: string
-  selectedNewsType: NewsType
-  loadMore?: () => void
-  loadingMore?: boolean
   refresh: () => void
+  newsSource: NewsSourceFilterType
+  setNewsSource: (value: NewsSourceFilterType) => void
 }
 
-const News = ({
-  news,
-  loadMore,
-  newsId,
-  languageCode,
-  selectedNewsType,
-  navigateToNews,
-  refresh,
-  loadingMore,
-}: NewsProps): ReactElement => {
-  const selectedNewsItem = news.find(_newsItem => _newsItem.id === newsId)
+const News = ({ news, id, languageCode, region, refresh, newsSource, setNewsSource }: NewsProps): ReactElement => {
+  const selectedNewsItem = news.find(item => item.id === id)
+  const { navigateTo } = useNavigate()
   const { t } = useTranslation('news')
+  const showSnackbar = useSnackbar()
   useTtsPlayer(selectedNewsItem)
 
   const navigation = useNavigate().navigation as NavigationProps<NewsRouteType>
-  useSetRouteTitle({ navigation, title: getPageTitle(selectedNewsType, selectedNewsItem, t) })
-
-  const rendersNewsListItem = ({ item }: { item: LocalNewsModel | TuNewsModel }) => {
-    const navigateToNewsDetail = () => navigateToNews(item.id)
+  useSetRouteTitle({ navigation, title: selectedNewsItem?.title ?? t('news') })
 
-    return <NewsListItem key={item.id} newsItem={item} navigateToNews={navigateToNewsDetail} />
-  }
+  const rendersNewsListItem = ({ item }: { item: NewsModel }) => (
+    <NewsListItem
+      key={item.id}
+      newsItem={item}
+      navigateToNews={() => navigateTo({ route: NEWS_ROUTE, regionCode: region.code, languageCode, id: item.id })}
+    />
+  )
 
   if (selectedNewsItem) {
     return (
       <ScrollView>
         <Page
           title={selectedNewsItem.title}
           content={
-            selectedNewsItem instanceof LocalNewsModel
+            selectedNewsItem.source === LOCAL_NEWS_SOURCE
               ? replaceLinks(selectedNewsItem.content)
               : selectedNewsItem.content
           }
           language={languageCode}
           footer={
-            selectedNewsItem instanceof LocalNewsModel && (
-              <Text
-                style={{
-                  paddingVertical: 16,
-                  textAlign: contentAlignmentRTLText(selectedNewsItem.title),
-                  alignSelf: 'center',
-                }}>
-                <TimeStamp lastUpdate={selectedNewsItem.timestamp} showText={false} />
+            <View>
+              <Text style={{ paddingVertical: 16, textAlign: contentAlignmentRTLText(selectedNewsItem.title) }}>
+                <TimeStamp lastUpdate={selectedNewsItem.lastUpdate} showText={false} />
               </Text>
-            )
+              {selectedNewsItem.source !== LOCAL_NEWS_SOURCE && (
+                <NewsSourceLink onPress={() => openExternalUrl(selectedNewsItem.externalUrl, showSnackbar)} role='link'>
+                  <NewsSourceLogo icon={selectedNewsItem.source === AMAL_NEWS_SOURCE ? AmalNewsLogo : TuNewsIcon} />
+                </NewsSourceLink>
+              )}
+            </View>
           }
         />
       </ScrollView>
     )
   }
 
-  if (newsId !== null) {
+  if (id !== null) {
     return <Failure code={ErrorCodes.PageNotFound} retry={refresh} />
   }
 
+  const showNewsSourceFilter = region.localNewsEnabled && region.externalNewsEnabled
+
   return (
     <List
       items={news}
-      onEndReached={loadMore}
       noItemsMessage={t('currentlyNoNews')}
-      footer={loadingMore ? <LoadingSpinner testID='loadingSpinner' /> : undefined}
+      header={
+        <ListHeaderContainer>
+          <Caption title={t('news')} />
+          {showNewsSourceFilter && (
+            <ToggleTextButtonGroup
+              setValue={setNewsSource}
+              value={newsSource}
+              options={NEWS_SOURCE_FILTERS}
+              getLabel={t}
+            />
+          )}
+        </ListHeaderContainer>
+      }
       renderItem={rendersNewsListItem}
       refresh={refresh}
     />