Build some basic list-management functionality

[easoncxz]

The idea is to quickly add accounts to other lists.

Reference material

• Create and manage lists
• GET lists/list

[easoncxz]

Looking good. List of Lists is arriving in the UI.

The next step is to dig more information out about each List:

• Mainly, this would be the member Users.
• Secondarily, getting a few tweets from the List would also be good.

[easoncxz]

API summary:

• GET lists/members: see who's in the list
• GET lists/statuses: see the timeline of this list

Implementation tasks:

• Figure out a cursor-aware all-pages download procedure for members of a list.
• Think about how to store the data in IndexedDB. What schema, e.g. what indices to use?

Related reading:

• idb on npm: https://www.npmjs.com/package/idb
• MDN IndexedDB guide: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB
• MDN createIndex: https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/createIndex

Question:

• How to create an index on an object-store that uses auto-increment keys? Since there is no keyPath, not sure what to pass as keyPath to createIndex.

[easoncxz]

Some progress:

[easoncxz]

Looking very good -- I got some kind of manual-JOIN working in idb. As such, I was able to load from idb:

I got confused a lot by the question of what should be the keyPath for the index. This is the crucial diff:

diff --git a/frontend-app/src/dom/twitter/storage.ts b/frontend-app/src/dom/twitter/storage.ts
index e262fb2..cd2ce8c 100644
--- a/frontend-app/src/dom/twitter/storage.ts
+++ b/frontend-app/src/dom/twitter/storage.ts
@@ -67,7 +67,7 @@ export async function openMyDB(): Promise<IDBPDatabase<TwitDb>> {
             autoIncrement: true,
           });
           // TODO: what to use as index keyPath?
-          listMemberships.createIndex('by-list', [], {
+          listMemberships.createIndex('by-list', 'listIdStr', {
             unique: false,
           });
         }

Over the course of debugging it, I came across another crucial question and answer -- how to do composite keys in IndexedDB object-stores? See this StackOverflow post:

• https://stackoverflow.com/questions/33852508/how-to-create-an-indexeddb-composite-key

Update: In fact, I later came across more errors, and found a StackOverflow that points out precisely my problem -- [] is not valid as a keyPath:

• StackOverflow: https://stackoverflow.com/questions/43273983/invalid-key-path-in-indexeddb-restrictions
• Related MDN reference doc: createIndex https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/createIndex

[easoncxz]

Added new journal about IndexedDB index concerns:

• IndexedDB composite indices and sorted queries

[easoncxz]

For showing the tweets of a given user in the middle-pane in this UI, we're finally facing the problem of dealing with timelines. See Twitter docs:

• Guide, mostly about since_id and max_id
• GET statuses/user_timeline

[easoncxz]

I have an incredibly ugly UI that demonstrates the ability to "focus" on a user:

The thing toggles, and stuff works.

[easoncxz]

Pretty steady progress here:

[easoncxz]

As of commits 40cd7af and 6aa146c, there is a rather useful amount of functionality now: any member-user of any list can now be added to or removed from any list.

It's starting to be useful enough that screenshots would show more than I prefer them to! Closing this issue now.