Best method to keep track of a users progression through reading sections of text

Similar to zyBooks if you are familiar with it, I want to track the sections the user has read through and checked completed with a button.

However, conceptually I am having trouble thinking of what to store in my mongo database, besides just an object or an array of objects that contains each section and bool values, to track their progress. A section will have around 10 subsections. But there will be around 8 sections total. So a total of 80 subsections to keep track of.

This is what I was thinking of but it seems inefficient.

const sectionArray = [
  {
    section: "1",
    completed: false,
    subsections: [
      {
        name: "1.1",
        completed: false,
      },
      {
        name: "1.2",
        completed: false,
      },
      {
        name: "1.3",
        completed: false,
      },
    ],
  },
  {
    section: "2",
    completed: false,
    subsections: [
      {
        name: "2.1",
        completed: false,
      },
      {
        name: "2.2",
        completed: false,
      },
      {
        name: "2.3",
        completed: false,
      },
    ],
  },
...
];

I will also display a section and its subsections content depending on which the user decides to view using react and material ui.

I do not want to commit to my method if there is a better alternative.

Answer

I think your approach is totally fine with that amount of data.

The question is, what do you mean with “inefficient” ?

From a performance point of view, 80 elements are just no problem. Maybe you just don’t feel well with handling that code (which is a valid reason).

An alternative would be:

const sectionArray = [
  { section: "1", completed: false },
  { section: "1.1", completed: false },
  { section: "1.2", completed: false },
]

or (quicker access of the sections, e.g. without a .find()):

const sectionCollection = {
  "1": false,
  "1.1": false,
  "1.2": false,
]

Maybe you don’t need to store the main sections, if they are implicitly done when all sub sections are done ?

const sectionCollection = { 
  "1.1": false,  // "1" is implicitly done if all "1.x" are done
  "1.2": false,
]

Probably not an appropriate alternative (would be more efficient if most items are likely always false):

const sectionArray = [ "1", "1.3", "3.2" ] // 1, 1.3, 3.2 are 'true', all others are 'false'

Just for fun: You might also use integers as section IDs (which is ridiculously over optimizing on the wrong end):

const sectionCollection = [ 100, 103, 302 ]    // list of integers
const sectionCollection = [ 0x10, 0x13, 0x32 ] // using hex or bin
const sectionCollection = { [100]: false, [101]: true } // integer keys

And then even store a Byte array instead of JSON.