Sync files locally

[fayd]

For CodeDay Labs

The current behavior in our app is that whenever the user navigates to a folder, we hit the APIs and fetch their files again. This results in unnecessary API calls even if the list of files for that specific folder hasn't even changed.

How can this be improved?

Well, we can simply make use of the browser's indexeddb to locally store the list of files.

Basically, whenever we fetch the list of files for the first time using an API, we will store the response we get locally. And then, whenever the user fetches the list again for that specific folder, we get our response from there instead of making a get request every time.

Next, we will have a sync button so that the users can refresh their local data (and sync with the APIs). Whenever a file gets uploaded using our app, sync it locally too.

You may use any npm packages for interacting with indexeddb.

[fayd]

Make sure to refer to https://github.com/faisalsayed10/firefiles/blob/main/docs/CONTRIBUTING.md

[fayd]

I'm imagining the indexeddb schema to be something like this:

{
	"drive-name-1": [
		{
			"name": "cat.jpg",
			"size": 1280
			"url": "https://example.com/download",
			"fullpath": "parentfolder/childfolder/cat.jpg",
		},
		{
			"name": "document.pdf",
			"size": 1280
			"url": "https://example.com/download",
			"fullpath": "folder2/document.pdf",
		},
		// .........
	],
	"drive-name-2": [
		{
			"name": "anotherfile.jpg",
			"size": 1280
			"url": "https://example.com/download",
			"fullpath": "parentfolder/anotherfile.jpg",
		},
		{
			"name": "anotherfile.pdf",
			"size": 1280
			"url": "https://example.com/download",
			"fullpath": "anotherfile.pdf",
		},
		// .........
	],
}

Note: Currently in our app, each File type has the following properties:

export type DriveFile = {
	name: string;
	url?: string;
	parent: string;
	fullPath: string;
	bucketName?: string;
	bucketUrl?: string;
	size?: string;
	contentType?: string;
	createdAt?: string;
	updatedAt?: string;
};

[Phoebe Wang]

Me and @elainezhong77 are working on this issue! If there's any advice or suggestions, please let us know. Thank you :)

[fayd]

I would suggest you look for any libraries (react hooks perhaps) that make interacting with the indexed-db easier. Other than that if y'all get stuck at any point, please let me know, happy to help!