simplify web section list

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<REQUEST_STATUS, REQUEST_STATUS.SUCCESS>;
+  status?: REQUEST_STATUS;
-  code?: Exclude<REQUEST_CODES, REQUEST_CODES.SUCCESS>;
+  code?: REQUEST_CODES;
   icon?: string;
   message?: string;
   loading?: boolean;

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<T> = {
   request: () => Promise<T>;
@@ -13,7 +13,7 @@ export type RequestScreenProps<T> = {
     loading: boolean,
     refreshData: (newRequest?: () => Promise<T>) => void,
     status: REQUEST_STATUS,
-    code: number | undefined
+    code?: REQUEST_CODES
   ) => React.ReactElement;
   cache?: T;
   onCacheUpdate?: (newCache: T) => void;

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<ItemT> = Array<{
   title: string;
@@ -45,31 +42,36 @@ export type SectionListDataType<ItemT> = Array<{
   keyExtractor?: (data: ItemT) => string;
 }>;
 
-type Props<ItemT, RawData> = {
+type Props<ItemT, RawData> = Omit<
-  request: () => Promise<RawData>;
+  CollapsibleComponentPropsType,
-  refreshOnFocus: boolean;
+  'children' | 'paddedProps'
-  renderItem: (data: SectionListRenderItemInfo<ItemT>) => React.ReactNode;
+> &
-  createDataset: (
+  Omit<
-    data: RawData | undefined,
+    RequestScreenProps<RawData>,
-    isLoading: boolean
+    | 'render'
-  ) => SectionListDataType<ItemT>;
+    | 'showLoading'
-
+    | 'showError'
-  onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    | 'refresh'
-  showError?: boolean;
+    | 'onFinish'
-  itemHeight?: number | null;
+    | 'onMajorError'
-  autoRefreshTime?: number;
+  > &
-  updateData?: number | string;
+  Omit<
-  renderListHeaderComponent?: (
+    SectionListProps<ItemT>,
-    data?: RawData
+    'sections' | 'getItemLayout' | 'ListHeaderComponent' | 'ListEmptyComponent'
-  ) => React.ComponentType<any> | React.ReactElement | null;
+  > & {
-  renderSectionHeader?: (
+    createDataset: (
-    data: { section: SectionListData<ItemT> },
+      data: RawData | undefined,
-    isLoading: boolean
+      isLoading: boolean
-  ) => React.ReactElement | null;
+    ) => SectionListDataType<ItemT>;
-  stickyHeader?: boolean;
+    renderListHeaderComponent?: (
-  cache?: RawData;
+      data?: RawData
-  onCacheUpdate?: (newCache: RawData) => void;
+    ) => React.ComponentType<any> | React.ReactElement | null;
-};
+    renderSectionHeader?: (
+      data: { section: SectionListData<ItemT> },
+      isLoading: boolean
+    ) => React.ReactElement | null;
+    itemHeight?: number | null;
+  };
 
 const styles = StyleSheet.create({
   container: {
@@ -100,48 +102,12 @@ function WebSectionList<ItemT, RawData>(props: Props<ItemT, RawData>) {
     };
   };
 
-  const getRenderSectionHeader = (
-    data: { section: SectionListData<ItemT> },
-    loading: boolean
-  ) => {
-    const { renderSectionHeader } = props;
-    if (renderSectionHeader) {
-      return (
-        <Animatable.View
-          animation={'fadeInUp'}
-          duration={500}
-          useNativeDriver={true}
-        >
-          {renderSectionHeader(data, loading)}
-        </Animatable.View>
-      );
-    }
-    return null;
-  };
-
-  const getRenderItem = (data: SectionListRenderItemInfo<ItemT>) => {
-    const { renderItem } = props;
-    return (
-      <Animatable.View
-        animation={'fadeInUp'}
-        duration={500}
-        useNativeDriver={true}
-      >
-        {renderItem(data)}
-      </Animatable.View>
-    );
-  };
-
-  const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-    if (props.onScroll) {
-      props.onScroll(event);
-    }
-  };
-
   const render = (
     data: RawData | undefined,
     loading: boolean,
-    refreshData: (newRequest?: () => Promise<RawData>) => void
+    refreshData: (newRequest?: () => Promise<RawData>) => void,
+    status: REQUEST_STATUS,
+    code?: REQUEST_CODES
   ) => {
     const { itemHeight } = props;
     const dataset = props.createDataset(data, loading);
@@ -150,8 +116,8 @@ function WebSectionList<ItemT, RawData>(props: Props<ItemT, RawData>) {
     }
     return (
       <CollapsibleSectionList
+        {...props}
         sections={dataset}
-        extraData={props.updateData}
         paddedProps={(paddingTop) => ({
           refreshControl: (
             <RefreshControl
@@ -161,9 +127,7 @@ function WebSectionList<ItemT, RawData>(props: Props<ItemT, RawData>) {
             />
           ),
         })}
-        renderSectionHeader={(info) => getRenderSectionHeader(info, loading)}
+        renderItem={props.renderItem}
-        renderItem={getRenderItem}
-        stickySectionHeadersEnabled={props.stickyHeader}
         style={styles.container}
         ListHeaderComponent={
           props.renderListHeaderComponent != null
@@ -171,11 +135,10 @@ function WebSectionList<ItemT, RawData>(props: Props<ItemT, RawData>) {
             : null
         }
         ListEmptyComponent={
-          loading ? (
+          loading ? undefined : (
-            <BasicLoadingScreen />
-          ) : (
             <ErrorView
-              status={ERROR_TYPE.CONNECTION_ERROR}
+              status={status}
+              code={code}
               button={{
                 icon: 'refresh',
                 text: i18n.t('general.retry'),
@@ -187,8 +150,6 @@ function WebSectionList<ItemT, RawData>(props: Props<ItemT, RawData>) {
         getItemLayout={
           itemHeight ? (d, i) => getItemLayout(itemHeight, d, i) : undefined
         }
-        onScroll={onScroll}
-        hasTab={true}
       />
     );
   };

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<PropsType, StateType> {
    */
   getRenderItem = ({ item }: { item: FeedItemType }) => this.getFeedItem(item);
 
-  getRenderSectionHeader = (
+  getRenderSectionHeader = (data: {
-    data: { section: SectionListData<FeedItemType> },
+    section: SectionListData<FeedItemType>;
-    isLoading: boolean
+  }) => {
-  ) => {
     const { props } = this;
+    const icon = data.section.icon;
     if (data.section.data.length > 0) {
       return (
         <Headline style={styles.sectionHeader}>{data.section.title}</Headline>
@@ -335,16 +335,14 @@ class HomeScreen extends React.Component<PropsType, StateType> {
         >
           {data.section.title}
         </Headline>
-        {isLoading ? (
+        {icon ? (
-          <ActivityIndicator style={styles.activityIndicator} />
-        ) : (
           <MaterialCommunityIcons
-            name="access-point-network-off"
+            name={icon}
             size={100}
             color={props.theme.colors.textDisabled}
             style={GENERAL_STYLES.center}
           />
-        )}
+        ) : null}
       </View>
     );
   };
@@ -406,6 +404,7 @@ class HomeScreen extends React.Component<PropsType, StateType> {
   ): Array<{
     title: string;
     data: [] | Array<FeedItemType>;
+    icon?: string;
     id: string;
   }> => {
     if (fetchedData) {
@@ -433,6 +432,7 @@ class HomeScreen extends React.Component<PropsType, StateType> {
           ? 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<PropsType, StateType> {
             renderItem={this.getRenderItem}
             itemHeight={FEED_ITEM_HEIGHT}
             onScroll={this.onScroll}
-            showError={false}
             renderSectionHeader={this.getRenderSectionHeader}
             renderListHeaderComponent={this.getListHeader}
           />

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}
     />

src/screens/Proxiwash/ProxiwashScreen.tsx

@@ -512,7 +512,7 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
             renderSectionHeader={this.getRenderSectionHeader}
             autoRefreshTime={REFRESH_TIME}
             refreshOnFocus={true}
-            updateData={state.machinesWatched.length}
+            extraData={state.machinesWatched.length}
           />
         </View>
         <MascotPopup

src/screens/Services/Proximo/ProximoListScreen.tsx

@@ -367,7 +367,7 @@ function ProximoListScreen(props: Props) {
         createDataset={createDataset}
         refreshOnFocus={true}
         renderItem={getRenderItem}
-        updateData={currentSearchString + currentSortMode}
+        extraData={currentSearchString + currentSortMode}
         itemHeight={LIST_ITEM_HEIGHT}
         cache={articles}
         onCacheUpdate={setArticles}

src/screens/Services/SelfMenuScreen.tsx

@@ -201,7 +201,7 @@ class SelfMenuScreen extends React.Component<PropsType> {
         refreshOnFocus={true}
         renderItem={this.getRenderItem}
         renderSectionHeader={this.getRenderSectionHeader}
-        stickyHeader={true}
+        stickySectionHeadersEnabled={true}
       />
     );
   }