diff --git a/App.tsx b/App.tsx index 53ecbfd..66a25d6 100644 --- a/App.tsx +++ b/App.tsx @@ -38,6 +38,7 @@ import initLocales from './src/utils/Locales'; import { NavigationContainerRef } from '@react-navigation/core'; import GENERAL_STYLES from './src/constants/Styles'; import CollapsibleProvider from './src/components/providers/CollapsibleProvider'; +import CacheProvider from './src/components/providers/CacheProvider'; // Native optimizations https://reactnavigation.org/docs/react-native-screens // Crashes app when navigating away from webview on android 9+ @@ -212,27 +213,29 @@ export default class App extends React.Component<{}, StateType> { return ( - - - - - - - - - + + + + + + + + + + + ); diff --git a/src/components/Screens/WebSectionList.tsx b/src/components/Screens/WebSectionList.tsx index 282eaa0..c4619b7 100644 --- a/src/components/Screens/WebSectionList.tsx +++ b/src/components/Screens/WebSectionList.tsx @@ -67,6 +67,8 @@ type Props = { isLoading: boolean ) => React.ReactElement | null; stickyHeader?: boolean; + cache?: RawData; + onCacheUpdate?: (newCache: RawData) => void; }; const styles = StyleSheet.create({ @@ -200,6 +202,8 @@ function WebSectionList(props: Props) { showLoading={false} autoRefreshTime={props.autoRefreshTime} refreshOnFocus={props.refreshOnFocus} + cache={props.cache} + onCacheUpdate={props.onCacheUpdate} /> { + setCacheState((prevState) => ({ + ...prevState, + cache: { + ...prevState.cache, + ...newCache, + }, + })); + }; + + const resetCache = () => { + setCacheState((prevState) => ({ + ...prevState, + cache: undefined, + })); + }; + + const [cacheState, setCacheState] = useState({ + cache: undefined, + setCache: setCache, + resetCache: resetCache, + }); + + return ( + + {props.children} + + ); +} diff --git a/src/screens/Services/Proximo/ProximoListScreen.tsx b/src/screens/Services/Proximo/ProximoListScreen.tsx index eec4662..97e1208 100644 --- a/src/screens/Services/Proximo/ProximoListScreen.tsx +++ b/src/screens/Services/Proximo/ProximoListScreen.tsx @@ -48,6 +48,7 @@ import { MainRoutes, MainStackParamsList, } from '../../../navigation/MainNavigator'; +import { useCachedProximoArticles } from '../../../utils/cacheContext'; function sortPrice(a: ProximoArticleType, b: ProximoArticleType): number { return a.price - b.price; @@ -110,13 +111,14 @@ const styles = StyleSheet.create({ }, }); -type ArticlesType = Array; +export type ArticlesType = Array; type Props = StackScreenProps; function ProximoListScreen(props: Props) { const navigation = useNavigation(); const theme = useTheme(); + const { articles, setArticles } = useCachedProximoArticles(); const modalRef = useRef(); const [currentSearchString, setCurrentSearchString] = useState(''); @@ -367,6 +369,8 @@ function ProximoListScreen(props: Props) { renderItem={getRenderItem} updateData={currentSearchString + currentSortMode} itemHeight={LIST_ITEM_HEIGHT} + cache={articles} + onCacheUpdate={setArticles} /> ); diff --git a/src/screens/Services/Proximo/ProximoMainScreen.tsx b/src/screens/Services/Proximo/ProximoMainScreen.tsx index 1240530..8dd5f63 100644 --- a/src/screens/Services/Proximo/ProximoMainScreen.tsx +++ b/src/screens/Services/Proximo/ProximoMainScreen.tsx @@ -30,6 +30,7 @@ import Urls from '../../../constants/Urls'; import { readData } from '../../../utils/WebData'; import { useNavigation } from '@react-navigation/core'; import { useLayoutEffect } from 'react'; +import { useCachedProximoCategories } from '../../../utils/cacheContext'; const LIST_ITEM_HEIGHT = 84; @@ -55,7 +56,7 @@ export type ProximoArticleType = { category: ProximoCategoryType; }; -type CategoriesType = Array; +export type CategoriesType = Array; const styles = StyleSheet.create({ item: { @@ -92,6 +93,7 @@ function sortFinalData(a: ProximoCategoryType, b: ProximoCategoryType): number { function ProximoMainScreen() { const navigation = useNavigation(); const theme = useTheme(); + const { categories, setCategories } = useCachedProximoCategories(); useLayoutEffect(() => { navigation.setOptions({ @@ -233,6 +235,8 @@ function ProximoMainScreen() { createDataset={createDataset} refreshOnFocus={true} renderItem={getRenderItem} + cache={categories} + onCacheUpdate={setCategories} /> ); } diff --git a/src/utils/cacheContext.ts b/src/utils/cacheContext.ts index 0a39723..f159ff2 100644 --- a/src/utils/cacheContext.ts +++ b/src/utils/cacheContext.ts @@ -1,21 +1,54 @@ import React, { useContext } from 'react'; +import { ArticlesType } from '../screens/Services/Proximo/ProximoListScreen'; +import { CategoriesType } from '../screens/Services/Proximo/ProximoMainScreen'; -export type CacheContextType = { - cache: T | undefined; - setCache: (newCache: T) => void; +export type CacheType = { + proximo?: { + articles?: ArticlesType; + categories?: CategoriesType; + }; +}; + +export type CacheContextType = { + cache: CacheType | undefined; + setCache: (newCache: CacheType) => void; resetCache: () => void; }; -export const CacheContext = React.createContext>({ +export const CacheContext = React.createContext({ cache: undefined, setCache: () => undefined, resetCache: () => undefined, }); -function getCacheContext() { - return CacheContext as React.Context>; +export function useCache() { + return useContext(CacheContext); } -export function useCache() { - return useContext(getCacheContext()); +export function useCachedProximoCategories() { + const { cache, setCache } = useCache(); + const categories = cache?.proximo?.categories; + const setCategories = (newCategories: CategoriesType) => { + setCache({ + proximo: { + categories: newCategories, + articles: cache?.proximo?.articles, + }, + }); + }; + return { categories, setCategories }; +} + +export function useCachedProximoArticles() { + const { cache, setCache } = useCache(); + const articles = cache?.proximo?.articles; + const setArticles = (newArticles: ArticlesType) => { + setCache({ + proximo: { + categories: cache?.proximo?.categories, + articles: newArticles, + }, + }); + }; + return { articles, setArticles }; }