Set up todo style list

[eklem]

Needs to be possible to be checked as done and tracket how many steps for each of the workshop parts that are done. And also if they are fully done/finished.

Look at this howto: https://www.freecodecamp.org/news/build-a-todo-app-from-scratch-with-reactjs/

[eklem]

Start with building a todo-list app that persists: MDN - Beginning our React todo list

Then figure out how to just set tasks in code instead of from a user interaction, and check if tasks are persisted already.

[eklem]

The only thing needed to be stored is the done-state of each task: true/false. If ID doesn't exist, it can be set and set to false.

[eklem]

So each checkbox element has an ID. First check if exists in key/value DB. If no, add ID and set it to false. If yes, check if true/false. Then populate checkbox.

[eklem]

Needs a second table, and that is which workshop session each ID connects to. So we can aggregate how far you've gotten on each task.

[eklem]

Check out how to define types: Learn a bit about type definition and TypeScript #20

[eklem]

The actual info that will be stored:

• ID: [number]
• WorkshopID: A, B, C or D
• Done: true/false

Modules on the page:

• checkbox
• display of how many checkboxes are checked for each workshopID. I.e. 4 of 5 where the word is a string variable and the class for the container tag is either class='unfinished' or class='finished'

[eklem]

And some stuff to read for how to work with IndexedDb in React with TypeScript:

• https://javascript.plainenglish.io/working-with-indexeddb-in-typescript-react-ad504a1bdae3
• https://medium.com/@KevinBGreene/type-safe-indexeddb-using-typescript-declarative-schema-and-codegen-8708f16ca374

[eklem]

Try using the idb library. It is typed.

[eklem]

Start with a static component, and build from there. https://react.dev/learn/your-first-component

This one seems like a more proper example for what I'm looking for: https://stackoverflow.com/questions/76926981/how-do-i-build-a-html-element-in-a-variable-with-props

Or a little simpler: https://stackoverflow.com/questions/38486660/how-to-add-a-classname-id-to-react-bootstrap-component

[eklem]

React's useState seems to be the way to go: https://react.dev/reference/react/useState

[eklem]

idb seems too low level, testing dexie

[eklem]

Check out how to use promises with Dexie: https://dexie.org/docs/Promise/Promise