Implement client-side cache to cache latest news data
Description
To avoid reloading news feed data each time the home screen is loaded, we need to cache the data after downloaded for the first time. If the user attempted to see the news again, the app does not have to fetch data from the Internet again.
Possible solutions:
- Use React Native's
AsyncStorage
- Use 3rd party library, e.g.
react-native-cache
-
Use Cloud Firestore on FirebasePreferred since other feature also using it, e.g. #21 (closed)- EDIT: The backend will be an API that serves data from Google Sheets, so probably we won't use Cloud Firestore
The resulting work of this issue will be used as the template for other features that require caching.
Proposed algorithm:
- Before mounting (loading) the component
- Check if previous copy of data exists in the cache
- If exists AND not expired yet, load the data from the cache and pass it to the required component
- Otherwise, load the data remotely from the API and store it into the cache
Tasks
-
Determine cache expiry time - E.g. 1 hour? 1 day?
-
Allow user to manually refresh news feed data - E.g. via a click action on the news title?
-
Implement caching functionality - May need to modify
App.js
(to setup the cache framework/library) - Need to modify
NewsListContainer.js
(put the functionality here)
- May need to modify
Edited by Daya Adianto