fix state update

src/components/Screens/ErrorView.tsx

@@ -132,7 +132,11 @@ function getMessage(props: Props) {
     }
   }
 
-  fullMessage.message += `\n\nCode {${props.status}:${props.code}}`;
+  if (props.code !== undefined) {
+    fullMessage.message += `\n\nCode {${props.status}:${props.code}}`;
+  } else {
+    fullMessage.message += `\n\nCode {${props.status}}`;
+  }
   if (props.message != null) {
     fullMessage.message = props.message;
   }

src/components/Screens/RequestScreen.tsx

@@ -11,6 +11,7 @@ export type RequestScreenProps<T> = {
   render: (
     data: T | undefined,
     loading: boolean,
+    lastRefreshDate: Date | undefined,
     refreshData: (newRequest?: () => Promise<T>) => void,
     status: REQUEST_STATUS,
     code?: REQUEST_CODES
@@ -37,8 +38,15 @@ const MIN_REFRESH_TIME = 5 * 1000;
 
 export default function RequestScreen<T>(props: Props<T>) {
   const refreshInterval = useRef<number>();
-  const [loading, status, code, data, refreshData] = useRequestLogic<T>(
-    () => props.request(),
+  const [
+    loading,
+    lastRefreshDate,
+    status,
+    code,
+    data,
+    refreshData,
+  ] = useRequestLogic<T>(
+    props.request,
     props.cache,
     props.onCacheUpdate,
     props.refreshOnFocus,
@@ -81,16 +89,6 @@ export default function RequestScreen<T>(props: Props<T>) {
     }, [props.cache, props.refreshOnFocus])
   );
 
-  // useEffect(() => {
-  //   if (status === REQUEST_STATUS.BAD_TOKEN && props.onMajorError) {
-  //     props.onMajorError(status, code);
-  //   }
-  //   // eslint-disable-next-line react-hooks/exhaustive-deps
-  // }, [status, code]);
-
-  // if (status === REQUEST_STATUS.BAD_TOKEN && props.onMajorError) {
-  //   return <View />;
-  // } else
   if (data === undefined && loading && props.showLoading !== false) {
     return <BasicLoadingScreen />;
   } else if (
@@ -110,6 +108,13 @@ export default function RequestScreen<T>(props: Props<T>) {
       />
     );
   } else {
-    return props.render(data, loading, refreshData, status, code);
+    return props.render(
+      data,
+      loading,
+      lastRefreshDate,
+      refreshData,
+      status,
+      code
+    );
   }
 }

src/components/Screens/WebSectionList.tsx

@@ -17,20 +17,16 @@
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import React, { useState } from 'react';
+import React from 'react';
 import i18n from 'i18n-js';
-import { Snackbar } from 'react-native-paper';
 import {
   RefreshControl,
   SectionListData,
   SectionListProps,
   StyleSheet,
-  View,
 } from 'react-native';
 import ErrorView from './ErrorView';
-import { TAB_BAR_HEIGHT } from '../Tabbar/CustomTabBar';
 import CollapsibleSectionList from '../Collapsible/CollapsibleSectionList';
-import GENERAL_STYLES from '../../constants/Styles';
 import RequestScreen, { RequestScreenProps } from './RequestScreen';
 import { CollapsibleComponentPropsType } from '../Collapsible/CollapsibleComponent';
 import { REQUEST_CODES, REQUEST_STATUS } from '../../utils/Requests';
@@ -62,6 +58,7 @@ type Props<ItemT, RawData> = Omit<
     createDataset: (
       data: RawData | undefined,
       loading: boolean,
+      lastRefreshDate: Date | undefined,
       refreshData: (newRequest?: () => Promise<RawData>) => void,
       status: REQUEST_STATUS,
       code?: REQUEST_CODES
@@ -69,6 +66,7 @@ type Props<ItemT, RawData> = Omit<
     renderListHeaderComponent?: (
       data: RawData | undefined,
       loading: boolean,
+      lastRefreshDate: Date | undefined,
       refreshData: (newRequest?: () => Promise<RawData>) => void,
       status: REQUEST_STATUS,
       code?: REQUEST_CODES
@@ -87,12 +85,6 @@ const styles = StyleSheet.create({
  * To force the component to update, change the value of updateData.
  */
 function WebSectionList<ItemT, RawData>(props: Props<ItemT, RawData>) {
-  const [snackbarVisible, setSnackbarVisible] = useState(false);
-
-  const showSnackBar = () => setSnackbarVisible(true);
-
-  const hideSnackBar = () => setSnackbarVisible(false);
-
   const getItemLayout = (
     height: number,
     _data: Array<SectionListData<ItemT>> | null,
@@ -108,6 +100,7 @@ function WebSectionList<ItemT, RawData>(props: Props<ItemT, RawData>) {
   const render = (
     data: RawData | undefined,
     loading: boolean,
+    lastRefreshDate: Date | undefined,
     refreshData: (newRequest?: () => Promise<RawData>) => void,
     status: REQUEST_STATUS,
     code?: REQUEST_CODES
@@ -116,13 +109,11 @@ function WebSectionList<ItemT, RawData>(props: Props<ItemT, RawData>) {
     const dataset = props.createDataset(
       data,
       loading,
+      lastRefreshDate,
       refreshData,
       status,
       code
     );
-    if (!data && !loading) {
-      showSnackBar();
-    }
     return (
       <CollapsibleSectionList
         {...props}
@@ -143,6 +134,7 @@ function WebSectionList<ItemT, RawData>(props: Props<ItemT, RawData>) {
             ? props.renderListHeaderComponent(
                 data,
                 loading,
+                lastRefreshDate,
                 refreshData,
                 status,
                 code
@@ -157,7 +149,7 @@ function WebSectionList<ItemT, RawData>(props: Props<ItemT, RawData>) {
               button={{
                 icon: 'refresh',
                 text: i18n.t('general.retry'),
-                onPress: refreshData,
+                onPress: () => refreshData(),
               }}
             />
           )
@@ -170,32 +162,16 @@ function WebSectionList<ItemT, RawData>(props: Props<ItemT, RawData>) {
   };
 
   return (
-    <View style={GENERAL_STYLES.flex}>
-      <RequestScreen<RawData>
-        request={props.request}
-        render={render}
-        showError={false}
-        showLoading={false}
-        autoRefreshTime={props.autoRefreshTime}
-        refreshOnFocus={props.refreshOnFocus}
-        cache={props.cache}
-        onCacheUpdate={props.onCacheUpdate}
-      />
-      <Snackbar
-        visible={snackbarVisible}
-        onDismiss={hideSnackBar}
-        action={{
-          label: 'OK',
-          onPress: hideSnackBar,
-        }}
-        duration={4000}
-        style={{
-          bottom: TAB_BAR_HEIGHT,
-        }}
-      >
-        {i18n.t('general.listUpdateFail')}
-      </Snackbar>
-    </View>
+    <RequestScreen<RawData>
+      request={props.request}
+      render={render}
+      showError={false}
+      showLoading={false}
+      autoRefreshTime={props.autoRefreshTime}
+      refreshOnFocus={props.refreshOnFocus}
+      cache={props.cache}
+      onCacheUpdate={props.onCacheUpdate}
+    />
   );
 }
 

src/screens/Proxiwash/ProxiwashScreen.tsx

@@ -52,7 +52,6 @@ import GENERAL_STYLES from '../../constants/Styles';
 import { readData } from '../../utils/WebData';
 import { useFocusEffect, useNavigation } from '@react-navigation/core';
 import { setupMachineNotification } from '../../utils/Notifications';
-import { REQUEST_STATUS } from '../../utils/Requests';
 import ProximoListHeader from '../../components/Lists/Proximo/ProximoListHeader';
 
 const REFRESH_TIME = 1000 * 10; // Refresh every 10 seconds
@@ -110,8 +109,6 @@ function ProxiwashScreen() {
     ) as 'tripodeB' | 'washinsa'
   );
 
-  const lastrefreshDate = useRef<Date | undefined>(undefined);
-
   const modalStateStrings: { [key in MachineStates]: string } = {
     [MachineStates.AVAILABLE]: i18n.t('screens.proxiwash.modal.ready'),
     [MachineStates.RUNNING]: i18n.t('screens.proxiwash.modal.running'),
@@ -418,21 +415,17 @@ function ProxiwashScreen() {
   };
 
   const renderListHeaderComponent = (
-    _data: FetchedDataType | undefined,
-    loading: boolean,
-    _refreshData: (newRequest?: () => Promise<FetchedDataType>) => void,
-    status: REQUEST_STATUS
+    data: FetchedDataType | undefined,
+    _loading: boolean,
+    lastRefreshDate: Date | undefined
   ) => {
-    const success = status === REQUEST_STATUS.SUCCESS;
-    if (success && !loading) {
-      lastrefreshDate.current = new Date();
+    if (data) {
+      return (
+        <ProximoListHeader date={lastRefreshDate} selectedWash={selectedWash} />
+      );
+    } else {
+      return null;
     }
-    return (
-      <ProximoListHeader
-        date={lastrefreshDate.current}
-        selectedWash={selectedWash}
-      />
-    );
   };
 
   let data: LaundromatType;

src/utils/customHooks.tsx

@@ -55,24 +55,24 @@ export function useRequestLogic<T>(
 ) {
   const [response, setResponse] = useState<{
     loading: boolean;
+    lastRefreshDate?: Date;
     status: REQUEST_STATUS;
     code?: number;
     data: T | undefined;
   }>({
     loading: startLoading !== false && cache === undefined,
+    lastRefreshDate: undefined,
     status: REQUEST_STATUS.SUCCESS,
     code: undefined,
     data: undefined,
   });
-  const [lastRefreshDate, setLastRefreshDate] = useState<Date | undefined>(
-    undefined
-  );
 
   const refreshData = (newRequest?: () => Promise<T>) => {
     let canRefresh;
-    if (lastRefreshDate && minRefreshTime) {
-      const last = lastRefreshDate;
-      canRefresh = new Date().getTime() - last.getTime() > minRefreshTime;
+    if (response.lastRefreshDate && minRefreshTime) {
+      canRefresh =
+        new Date().getTime() - response.lastRefreshDate.getTime() >
+        minRefreshTime;
     } else {
       canRefresh = true;
     }
@@ -83,12 +83,12 @@ export function useRequestLogic<T>(
           loading: true,
         }));
       }
-      setLastRefreshDate(new Date());
       const r = newRequest ? newRequest : request;
       r()
         .then((requestResponse: T) => {
           setResponse({
             loading: false,
+            lastRefreshDate: new Date(),
             status: REQUEST_STATUS.SUCCESS,
             code: undefined,
             data: requestResponse,
@@ -100,23 +100,25 @@ export function useRequestLogic<T>(
         .catch(() => {
           setResponse((prevState) => ({
             loading: false,
+            lastRefreshDate: prevState.lastRefreshDate,
             status: REQUEST_STATUS.CONNECTION_ERROR,
-            code: 0,
+            code: undefined,
             data: prevState.data,
           }));
-          setLastRefreshDate(undefined);
         });
     }
   };
 
   const value: [
     boolean,
+    Date | undefined,
     REQUEST_STATUS,
     number | undefined,
     T | undefined,
     (newRequest?: () => Promise<T>) => void
   ] = [
     response.loading,
+    response.lastRefreshDate,
     response.status,
     response.code,
     cache ? cache : response.data,