Architecture discussion

[colindavey]

Re Mark's recent comments on slack re picking an architecture, here are some thoughts for discussion.

I like the idea of getting the data from the existing REST API, and putting it in IndexedDB when the site is first loaded, as Mark suggested. We have about four pages that need to use this data to load themselves, and modify themselves when the user changes a search setting.

So, each page will need a refresh function that gets the slice of data it needs from IndexedDB, and spreads it into the DOM. This function would get called when the page loads, and when there are changes by the user of the page's widgets that call for a refresh.

There would be a javascript function that loads the data and puts it into IndexedDB when a page is loaded. Maybe every time a page is loaded it calls this function, and the function does nothing if the data is already there.

There would also be some common javascript functions that can be shared by all the pages in the process of getting the slice of data they need.

Here are some thoughts about how to get there from here.

I currently have code that gets the code from airtable using airtable's javascript API. It is built into a version of the Table of Contents page. I need to modify it to instead use the existing REST API, and put it into IndexedDB. I also need to make it a function that is independent of the Table of Contents page (It pretty much is, but needs to be moved to a separate .js file and made sure it still works).

While I'm doing that, the other pages can be prepared. For example:

-- Currently, they have hard coded data in html. We can move the hard-codedness into javascript. Create a refresh function for the page that has hardcoded values in an array, e.g.

[{Name: YMCA, Address: 123 Main St., Phone number: 541-111-1111...}, ... {Name: Eugene Mission, Address: 999 Washington St., Phone number: 541-999-9999...}]

and puts them in the DOM. (Later, the hard-coded data will be replaced by a call to get the real data.

To do this, delete all the items currently in the div, and give the div an ID. Code used by index_dyn.html can be used as an example for how to do this.

-- Put code behind all the widgets to call the refresh routine. Have the refresh routine do a console.log with the state of all the widgets on the page that affect how the data would be sliced.

[markdav-is]

I was able to publish the REST API and Docs here: https://littlehelpbook.com/swagger/index.html

[markdav-is]

we new have some statis data folks can play with included in the statis web assets https://github.com/OpenEugene/little-help-book-web/tree/develop/table-of-contents-style-homepage/data