Refactor news components

eslint-problems

@@ -134,23 +134,6 @@
 ./source/views/menus/types.ts
  35:29 warning Unexpected any. Specify a different type @typescript-eslint/no-explicit-any
 
-./source/views/news/news-container.tsx
- 28:2 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types
- 34:14 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types
- 59:2 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types
-
-./source/views/news/news-list.tsx
- 22:19 warning Unexpected any. Specify a different type @typescript-eslint/no-explicit-any
- 29:16 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types
- 33:20 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types
- 39:15 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types
- 47:17 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types
- 49:2 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types
-
-./source/views/news/news-row.tsx
- 14:13 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types
- 22:2 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types
-
 ./source/views/settings/components/logo.tsx
  26:2 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types
  32:2 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types
@@ -307,5 +290,5 @@
 ./source/views/student-orgs/util.ts
  3:8 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types
 
-✖ 192 problems (0 errors, 192 warnings)
+✖ 181 problems (0 errors, 181 warnings)
 

images/news-sources/index.ts

@@ -1 +1,5 @@
 export {ksto} from '../streaming'
+
+export * as mess from './mess.png'
+export * as oleville from './oleville.png'
+export * as stolaf from './stolaf.png'

source/navigation/routes.tsx

@@ -29,7 +29,7 @@ import {
  MenuItemDetailView,
  DetailNavigationOptions,
 } from '@frogpond/food-menu/food-item-detail'
-// import NewsView from '../views/news'
+import * as news from '../views/news'
 import * as settings from '../views/settings/'
 // import SISView from '../views/sis'
 import * as streaming from '../views/streaming'
@@ -214,10 +214,16 @@ export function RootStack(): JSX.Element {
  options={orgs.DetailNavigationOptions}
  />
  </Stack.Group>
+ <Stack.Group>
+ <Stack.Screen
+ component={news.View}
+ name="News"
+ options={news.NavigationOptions}
+ />
+ </Stack.Group>
  {/*
  <Stack.Screen component={JobDetail} name="JobDetail" />
  <Stack.Screen component={Menus} name="Menus" />
- <Stack.Screen component={News} name="News" />
  <Stack.Screen component={SIS} name="SIS" />
  <Stack.Screen
  component={CourseSearchResults}

source/views/news/index.tsx

@@ -1,57 +1,66 @@
 import * as React from 'react'
-import {TabNavigator, TabBarIcon} from '@frogpond/navigation-tabs'
-
-import * as newsImages from '../../../images/news-sources'
-import NewsContainer from './news-container'
-
-const NewsView = TabNavigator({
- StOlafNewsView: {
- screen: ({navigation}) => (
- <NewsContainer
- navigation={navigation}
- source="stolaf"
- thumbnail={newsImages.stolaf}
- title="St. Olaf"
- />
- ),
- navigationOptions: {
+
+import {TabBarIcon} from '@frogpond/navigation-tabs'
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
+import {NativeStackNavigationOptions} from '@react-navigation/native-stack'
+
+import * as newsImages from '../../../images/news-sources/index'
+import {NewsList} from './news-list'
+
+type Params = {
+ StOlafNewsView: undefined
+ MessNewsView: undefined
+ OlevilleNewsView: undefined
+}
+
+const Tabs = createBottomTabNavigator<Params>()
+
+const StOlafNewsView = () => (
+ <NewsList source="stolaf" thumbnail={newsImages.stolaf.default} />
+)
+const MessNewsView = () => (
+ <NewsList source="mess" thumbnail={newsImages.mess.default} />
+)
+const OlevilleNewsView = () => (
+ <NewsList source="oleville" thumbnail={newsImages.oleville.default} />
+)
+
+const NewsView = (): JSX.Element => {
+ return (
+ <Tabs.Navigator>
+ <Tabs.Screen
+ component={StOlafNewsView}
+ name="StOlafNewsView"
+ options={{
  tabBarLabel: 'St. Olaf',
  tabBarIcon: TabBarIcon('school'),
- },
- },
-
- OlevilleNewsView: {
- screen: ({navigation}) => (
- <NewsContainer
- navigation={navigation}
- source="oleville"
- thumbnail={newsImages.oleville}
- title="Oleville"
+ headerShown: false,
+ }}
  />
- ),
- navigationOptions: {
+ <Tabs.Screen
+ component={MessNewsView}
+ name="MessNewsView"
+ options={{
+ tabBarLabel: 'The Mess',
+ tabBarIcon: TabBarIcon('newspaper'),
+ headerShown: false,
+ }}
+ />
+ <Tabs.Screen
+ component={OlevilleNewsView}
+ name="OlevilleNewsView"
+ options={{
  tabBarLabel: 'Oleville',
  tabBarIcon: TabBarIcon('happy'),
- },
- },
-
- MessNewsView: {
- screen: ({navigation}) => (
- <NewsContainer
- navigation={navigation}
- source="mess"
- thumbnail={newsImages.mess}
- title="The Mess"
+ headerShown: false,
+ }}
  />
- ),
- navigationOptions: {
- tabBarLabel: 'The Mess',
- tabBarIcon: TabBarIcon('paper'),
- },
- },
-})
-NewsView.navigationOptions = {
- title: 'News',
+ </Tabs.Navigator>
+ )
 }
 
-export default NewsView
+export {NewsView as View}
+
+export const NavigationOptions: NativeStackNavigationOptions = {
+ title: 'News',
+}

source/views/news/news-list.tsx

@@ -1,12 +1,18 @@
 import * as React from 'react'
-import {StyleSheet, FlatList} from 'react-native'
-import * as c from '@frogpond/colors'
+import {FlatList, StyleSheet} from 'react-native'
 import type {StoryType} from './types'
+import {API} from '@frogpond/api'
+import * as c from '@frogpond/colors'
+import {useFetch} from 'react-async'
 import {ListSeparator} from '@frogpond/lists'
-import {NoticeView} from '@frogpond/notice'
-import type {TopLevelViewPropsType} from '../types'
-import {NewsRow} from './news-row'
+import {LoadingView, NoticeView} from '@frogpond/notice'
 import {openUrl} from '@frogpond/open-url'
+import {NewsRow} from './news-row'
+
+type Props = {
+ source: string | {url: string; type: 'rss' | 'wp-json'}
+ thumbnail: false | number
+}
 
 const styles = StyleSheet.create({
  listContainer: {
@@ -17,54 +23,72 @@ const styles = StyleSheet.create({
  },
 })
 
-type Props = TopLevelViewPropsType & {
- name: string
- onRefresh: () => any
- entries: StoryType[]
- loading: boolean
- thumbnail: false | number
+const useNews = (source: Props['source']) => {
+ let url
+ if (typeof source === 'string') {
+ url = API(`/news/named/${source}`)
+ } else if (source.type === 'rss') {
+ url = API('/news/rss', {url: source.url})
+ } else if (source.type === 'wp-json') {
+ url = API('/news/wpjson', {url: source.url})
+ } else {
+ throw new Error('invalid news source type!')
  }
 
-export class NewsList extends React.PureComponent<Props> {
- onPressNews = (url: string) => {
-  return openUrl(url)
+ return useFetch<StoryType[]>(url, {
+  headers: {accept: 'application/json'},
+ })
 }
 
- renderSeparator = () => (
- <ListSeparator
- spacing={{left: this.props.thumbnail === false ? undefined : 101}}
- />
- )
-
- renderItem = ({item}: {item: StoryType}) => (
- <NewsRow
- onPress={this.onPressNews}
- story={item}
- thumbnail={this.props.thumbnail}
- />
- )
-
- keyExtractor = (item: StoryType) => item.title
+export const NewsList = (props: Props): JSX.Element => {
+ let {
+ data = [],
+ error,
+ reload,
+ isPending,
+ isInitial,
+ isLoading,
+ } = useNews(props.source)
 
- render() {
  // remove all entries with blank excerpts
  // remove all entries with a <form from the list
-  let entries = this.props.entries
+ let entries = data
  .filter((entry) => entry.excerpt.trim() !== '')
  .filter((entry) => !entry.content.includes('<form'))
 
+ if (error) {
+ return (
+ <NoticeView
+ buttonText="Try Again"
+ onPress={reload}
+ text="A problem occured while loading the news stories"
+ />
+ )
+ }
+
  return (
  <FlatList
- ItemSeparatorComponent={this.renderSeparator}
- ListEmptyComponent={<NoticeView text="No news." />}
+ ItemSeparatorComponent={() => (
+ <ListSeparator
+ spacing={{left: props.thumbnail === false ? undefined : 101}}
+ />
+ )}
+ ListEmptyComponent={
+ isLoading ? <LoadingView /> : <NoticeView text="No news." />
+ }
  contentContainerStyle={styles.contentContainer}
  data={entries}
- keyExtractor={this.keyExtractor}
- onRefresh={this.props.onRefresh}
- refreshing={this.props.loading}
- renderItem={this.renderItem}
+ keyExtractor={(item: StoryType) => item.title}
+ onRefresh={reload}
+ refreshing={isPending && !isInitial}
+ renderItem={({item}: {item: StoryType}) => (
+ <NewsRow
+ onPress={(url: string) => openUrl(url)}
+ story={item}
+ thumbnail={props.thumbnail}
+ />
+ )}
  style={styles.listContainer}
  />
  )
 }
-}