Currently, @masgras2 switched to loading in Images on the client-side in an asynchronous manner instead of a synchronous manner, meaning the Images aren't loaded one after another. Instead, Images are loaded in at the same time and appear once they load in. However, this has some flaws:
Images show one by one, instead of all showing at the same time. This is because this is dependent on how quickly the API handles each GET \image request. In order to resolve this, we can increase the load that the API can handle on AWS.
There's no way of checking if the image that we want to get already exists in Expo Filesystem. This is a drastic performance hit on the client-side because making GET \image requests is O(n) and expensive.
Linked issue: #176
High Level
We need to build a cache that maps Vocab Items to an Expo Filesystem URI. This cache will be stored in AsyncStorage. This will be used to check if a file we want already exists on a client's device, as well as removing files that haven't been used in a long time. The cache will also implement LRU policy along with invalidating files after a specific period of time.
Methods
GET - Gets audio or image from the cache, meaning it will return the URI associated with a specific vocab item id. If there isn't any data, or the file hasn't been updated for the past day, then return null or undefined.
PUT - data in the cache, meaning it maps a vocab item to a uri and saves it to AsyncStorage. If we run out of space in Expo Filesystem, remove the files that have been least recently used.
DELETE- Removes data from the cache, meaning it would remove a vocab item/uri mapping along with deleting the associated file from Expo Filesystem.
It would be nice to have the PUT method directly integrated with our axios code that fetches and uploads Audio/Images from the backend (in client/src/api/api.js, see downloadImageFile, downloadAudioFile, uploadImageFile, and uploadAudioFile. This is because whenever we fetch a file from the API, we can to keep record of that in the cache. Also, whenever we upload a file to the API, then we want to keep that file saved locally in Expo filesystem.
This is a tricky issue, especially if you haven't worked with caches and the Expo Filesystem before, and this should take at least 3 weeks to fully complete. We can break this up into multiple parts:
Be able to save files in the cache after downloadImageFile() or downloadAudioFile()
Get files from the cache when already saved
Be able to save files in the cache after uploadImageFile() or uploadAudioFile()
Delete files from the cache when we run out of space
Motivation
Currently, @masgras2 switched to loading in Images on the client-side in an asynchronous manner instead of a synchronous manner, meaning the Images aren't loaded one after another. Instead, Images are loaded in at the same time and appear once they load in. However, this has some flaws:
GET \imagerequest. In order to resolve this, we can increase the load that the API can handle on AWS.GET \imagerequests is O(n) and expensive.Linked issue: #176
High Level
We need to build a cache that maps Vocab Items to an Expo Filesystem URI. This cache will be stored in AsyncStorage. This will be used to check if a file we want already exists on a client's device, as well as removing files that haven't been used in a long time. The cache will also implement LRU policy along with invalidating files after a specific period of time.
Methods
It would be nice to have the PUT method directly integrated with our axios code that fetches and uploads Audio/Images from the backend (in
client/src/api/api.js, seedownloadImageFile,downloadAudioFile,uploadImageFile, anduploadAudioFile. This is because whenever we fetch a file from the API, we can to keep record of that in the cache. Also, whenever we upload a file to the API, then we want to keep that file saved locally in Expo filesystem.This is a tricky issue, especially if you haven't worked with caches and the Expo Filesystem before, and this should take at least 3 weeks to fully complete. We can break this up into multiple parts:
downloadImageFile()ordownloadAudioFile()uploadImageFile()oruploadAudioFile()Resources
uploadAsync()andcreateDownloadResumable()for uploading and getting files.