From 35a4b377f86ba93ad25b8ab925c2a2cb887defa7 Mon Sep 17 00:00:00 2001 From: Arnaud Vergnet Date: Tue, 11 May 2021 08:47:54 +0200 Subject: [PATCH] simplify web section list --- src/components/Screens/ErrorView.tsx | 4 +- src/components/Screens/RequestScreen.tsx | 4 +- src/components/Screens/WebSectionList.tsx | 123 ++++++------------ src/screens/Home/HomeScreen.tsx | 21 ++- src/screens/Planex/GroupSelectionScreen.tsx | 2 +- src/screens/Proxiwash/ProxiwashScreen.tsx | 2 +- .../Services/Proximo/ProximoListScreen.tsx | 2 +- src/screens/Services/SelfMenuScreen.tsx | 2 +- 8 files changed, 60 insertions(+), 100 deletions(-) diff --git a/src/components/Screens/ErrorView.tsx b/src/components/Screens/ErrorView.tsx index f71ff7f..c21b77a 100644 --- a/src/components/Screens/ErrorView.tsx +++ b/src/components/Screens/ErrorView.tsx @@ -26,8 +26,8 @@ import * as Animatable from 'react-native-animatable'; import { REQUEST_CODES, REQUEST_STATUS } from '../../utils/Requests'; type Props = { - status?: Exclude; - code?: Exclude; + status?: REQUEST_STATUS; + code?: REQUEST_CODES; icon?: string; message?: string; loading?: boolean; diff --git a/src/components/Screens/RequestScreen.tsx b/src/components/Screens/RequestScreen.tsx index 0f9c66f..b5f2e0c 100644 --- a/src/components/Screens/RequestScreen.tsx +++ b/src/components/Screens/RequestScreen.tsx @@ -4,7 +4,7 @@ import { useRequestLogic } from '../../utils/customHooks'; import { useFocusEffect } from '@react-navigation/native'; import BasicLoadingScreen from './BasicLoadingScreen'; import i18n from 'i18n-js'; -import { REQUEST_STATUS } from '../../utils/Requests'; +import { REQUEST_CODES, REQUEST_STATUS } from '../../utils/Requests'; export type RequestScreenProps = { request: () => Promise; @@ -13,7 +13,7 @@ export type RequestScreenProps = { loading: boolean, refreshData: (newRequest?: () => Promise) => void, status: REQUEST_STATUS, - code: number | undefined + code?: REQUEST_CODES ) => React.ReactElement; cache?: T; onCacheUpdate?: (newCache: T) => void; diff --git a/src/components/Screens/WebSectionList.tsx b/src/components/Screens/WebSectionList.tsx index c4619b7..9a35726 100644 --- a/src/components/Screens/WebSectionList.tsx +++ b/src/components/Screens/WebSectionList.tsx @@ -21,22 +21,19 @@ import React, { useState } from 'react'; import i18n from 'i18n-js'; import { Snackbar } from 'react-native-paper'; import { - NativeScrollEvent, - NativeSyntheticEvent, RefreshControl, SectionListData, - SectionListRenderItemInfo, + SectionListProps, StyleSheet, View, } from 'react-native'; -import * as Animatable from 'react-native-animatable'; import ErrorView from './ErrorView'; -import BasicLoadingScreen from './BasicLoadingScreen'; import { TAB_BAR_HEIGHT } from '../Tabbar/CustomTabBar'; -import { ERROR_TYPE } from '../../utils/WebData'; import CollapsibleSectionList from '../Collapsible/CollapsibleSectionList'; import GENERAL_STYLES from '../../constants/Styles'; -import RequestScreen from './RequestScreen'; +import RequestScreen, { RequestScreenProps } from './RequestScreen'; +import { CollapsibleComponentPropsType } from '../Collapsible/CollapsibleComponent'; +import { REQUEST_CODES, REQUEST_STATUS } from '../../utils/Requests'; export type SectionListDataType = Array<{ title: string; @@ -45,31 +42,36 @@ export type SectionListDataType = Array<{ keyExtractor?: (data: ItemT) => string; }>; -type Props = { - request: () => Promise; - refreshOnFocus: boolean; - renderItem: (data: SectionListRenderItemInfo) => React.ReactNode; - createDataset: ( - data: RawData | undefined, - isLoading: boolean - ) => SectionListDataType; - - onScroll?: (event: NativeSyntheticEvent) => void; - showError?: boolean; - itemHeight?: number | null; - autoRefreshTime?: number; - updateData?: number | string; - renderListHeaderComponent?: ( - data?: RawData - ) => React.ComponentType | React.ReactElement | null; - renderSectionHeader?: ( - data: { section: SectionListData }, - isLoading: boolean - ) => React.ReactElement | null; - stickyHeader?: boolean; - cache?: RawData; - onCacheUpdate?: (newCache: RawData) => void; -}; +type Props = Omit< + CollapsibleComponentPropsType, + 'children' | 'paddedProps' +> & + Omit< + RequestScreenProps, + | 'render' + | 'showLoading' + | 'showError' + | 'refresh' + | 'onFinish' + | 'onMajorError' + > & + Omit< + SectionListProps, + 'sections' | 'getItemLayout' | 'ListHeaderComponent' | 'ListEmptyComponent' + > & { + createDataset: ( + data: RawData | undefined, + isLoading: boolean + ) => SectionListDataType; + renderListHeaderComponent?: ( + data?: RawData + ) => React.ComponentType | React.ReactElement | null; + renderSectionHeader?: ( + data: { section: SectionListData }, + isLoading: boolean + ) => React.ReactElement | null; + itemHeight?: number | null; + }; const styles = StyleSheet.create({ container: { @@ -100,48 +102,12 @@ function WebSectionList(props: Props) { }; }; - const getRenderSectionHeader = ( - data: { section: SectionListData }, - loading: boolean - ) => { - const { renderSectionHeader } = props; - if (renderSectionHeader) { - return ( - - {renderSectionHeader(data, loading)} - - ); - } - return null; - }; - - const getRenderItem = (data: SectionListRenderItemInfo) => { - const { renderItem } = props; - return ( - - {renderItem(data)} - - ); - }; - - const onScroll = (event: NativeSyntheticEvent) => { - if (props.onScroll) { - props.onScroll(event); - } - }; - const render = ( data: RawData | undefined, loading: boolean, - refreshData: (newRequest?: () => Promise) => void + refreshData: (newRequest?: () => Promise) => void, + status: REQUEST_STATUS, + code?: REQUEST_CODES ) => { const { itemHeight } = props; const dataset = props.createDataset(data, loading); @@ -150,8 +116,8 @@ function WebSectionList(props: Props) { } return ( ({ refreshControl: ( (props: Props) { /> ), })} - renderSectionHeader={(info) => getRenderSectionHeader(info, loading)} - renderItem={getRenderItem} - stickySectionHeadersEnabled={props.stickyHeader} + renderItem={props.renderItem} style={styles.container} ListHeaderComponent={ props.renderListHeaderComponent != null @@ -171,11 +135,10 @@ function WebSectionList(props: Props) { : null } ListEmptyComponent={ - loading ? ( - - ) : ( + loading ? undefined : ( (props: Props) { getItemLayout={ itemHeight ? (d, i) => getItemLayout(itemHeight, d, i) : undefined } - onScroll={onScroll} - hasTab={true} /> ); }; diff --git a/src/screens/Home/HomeScreen.tsx b/src/screens/Home/HomeScreen.tsx index 0d2c7c4..f21e546 100644 --- a/src/screens/Home/HomeScreen.tsx +++ b/src/screens/Home/HomeScreen.tsx @@ -26,7 +26,7 @@ import { StyleSheet, } from 'react-native'; import i18n from 'i18n-js'; -import { ActivityIndicator, Headline, withTheme } from 'react-native-paper'; +import { Headline, withTheme } from 'react-native-paper'; import { CommonActions } from '@react-navigation/native'; import { StackNavigationProp } from '@react-navigation/stack'; import * as Animatable from 'react-native-animatable'; @@ -315,11 +315,11 @@ class HomeScreen extends React.Component { */ getRenderItem = ({ item }: { item: FeedItemType }) => this.getFeedItem(item); - getRenderSectionHeader = ( - data: { section: SectionListData }, - isLoading: boolean - ) => { + getRenderSectionHeader = (data: { + section: SectionListData; + }) => { const { props } = this; + const icon = data.section.icon; if (data.section.data.length > 0) { return ( {data.section.title} @@ -335,16 +335,14 @@ class HomeScreen extends React.Component { > {data.section.title} - {isLoading ? ( - - ) : ( + {icon ? ( - )} + ) : null} ); }; @@ -406,6 +404,7 @@ class HomeScreen extends React.Component { ): Array<{ title: string; data: [] | Array; + icon?: string; id: string; }> => { if (fetchedData) { @@ -433,6 +432,7 @@ class HomeScreen extends React.Component { ? i18n.t('screens.home.feedLoading') : i18n.t('screens.home.feedError'), data: [], + icon: isLoading ? undefined : 'access-point-network-off', id: SECTIONS_ID[1], }, ]; @@ -473,7 +473,6 @@ class HomeScreen extends React.Component { renderItem={this.getRenderItem} itemHeight={FEED_ITEM_HEIGHT} onScroll={this.onScroll} - showError={false} renderSectionHeader={this.getRenderSectionHeader} renderListHeaderComponent={this.getListHeader} /> diff --git a/src/screens/Planex/GroupSelectionScreen.tsx b/src/screens/Planex/GroupSelectionScreen.tsx index d65f4b0..d4ccb26 100644 --- a/src/screens/Planex/GroupSelectionScreen.tsx +++ b/src/screens/Planex/GroupSelectionScreen.tsx @@ -259,7 +259,7 @@ function GroupSelectionScreen() { createDataset={createDataset} refreshOnFocus={true} renderItem={getRenderItem} - updateData={currentSearchString + favoriteGroups.length} + extraData={currentSearchString + favoriteGroups.length} cache={groups} onCacheUpdate={setGroups} /> diff --git a/src/screens/Proxiwash/ProxiwashScreen.tsx b/src/screens/Proxiwash/ProxiwashScreen.tsx index 3296895..6b656a9 100644 --- a/src/screens/Proxiwash/ProxiwashScreen.tsx +++ b/src/screens/Proxiwash/ProxiwashScreen.tsx @@ -512,7 +512,7 @@ class ProxiwashScreen extends React.Component { renderSectionHeader={this.getRenderSectionHeader} autoRefreshTime={REFRESH_TIME} refreshOnFocus={true} - updateData={state.machinesWatched.length} + extraData={state.machinesWatched.length} /> { refreshOnFocus={true} renderItem={this.getRenderItem} renderSectionHeader={this.getRenderSectionHeader} - stickyHeader={true} + stickySectionHeadersEnabled={true} /> ); }