Using IndexDB for packet storage

[gabhijit]

Right now we are using localStorage for storing packets locally. This has a limitation of local storage capacity of 5MB. We should evaluate details of how we are going to be using indexDB for local storage of the packets.

1. As far as possible, let's not use any wrapper libraries but understand the indexDB APIs

[gabhijit]

@mayurhyphenOs : I believe I have figured out a first level approach to achieve this. Some details need to be fleshed out, but the following approach should work -

Look at the documentation of IndexDB on https://developers.google.com/web/ilt/pwa/working-with-indexeddb

More specifically you'll need to understand - What are databases, what are object stores and what is keypath (Ignore what I said yesterday!) and what are transactions.

We'll have at-least one ObjectStore called packets object store - where the frames will be indexed by their frame numbers (frame.frameno) So this should be keyPath. You will understand more when you study the concepts above.

The idea is as follows -

1. When you receive new batch of packets - you open a 'transaction' to save those packets in the IndexDB.
2. In the success callback of that transaction, you will need to update the current 'window' using the min and max of the packets received just now.
3. Once you have a full window - issue another transaction (don't write this as inline function, but a separate function because we may need to perform this again onScroll) to read the window worth of packets - I believe the frameno based indexes should help here and this read could likely be very fast.
4. In the 'success' callback of this 'read' transaction - update an additional state called packetsToRender. These are the actual packets that should be there in the HTML table.
5. your RenderPackets should use this state to update the tables.

We were making a mistake of getItem in the render function. That was a wrong code. Had we written code correctly in the first place of - getting the packets to be rendered in the useEffect the problem we faced yesterday would not have come.

[mayurhyphenOs]

@mayurhyphenOs Use then instead of async/await for implementation