gistfile1.txt

// I wated to take a look at way to structure data that we've used on the RCE and other apps
// basically it looks like this:

const flatList = {
  byId: {
    1: {
      id: 1,
      someProp: true,
      text: 'A sample text',
    },
    2: {
      id: 2,
      someProp: true,
      text: 'A sample text',
    },
  },
  items: [1, 2],
};

// I'm not saying this is the best solution for everything, just a different approach :)
// it may or may not work for whatever it is you're trying to achieve
// I'll highlight both advantages and drawbacks to using it

// Consider you get this data from a service somewhere

const SAMPLE_DATA = [
  {
    id: 1,
    someProp: true,
    text: 'A sample text',
  },
  {
    id: 2,
    someProp: false,
    text: 'sample text',
  },
  {
    id: 3,
    someProp: true,
    text: 'sample text',
  },
];

// add the data to the list
// this is a step we could potentially skip altogether if we were just going with a plain array
function setInitialState(data = SAMPLE_DATA) {
  data.forEach(item => {
    flatList.byId[item.id] = item;
    flatList.items.push(id);
  });
}

// now that we've got some data in there,
// we can spot a drawback to this versus just using the array
function loopThrough() {
  flatList.items.map(id => {
    const item = flatList.byId[id];
    // do stuff here
  });
}

// a bit more verbose than the alternative
function loopThroughArray() {
  SAMPLE_DATA.map(item => {
    // do stuff here
  });
}

// adding an element
function add(data) {
  const id = data.id || randomId();
  flatList.byId[id] = {
    ...data,
    id,
  };
  flatList.items.push(id);
}

// edit an element; this is where we start seeing some benefits
// easier to find things if they're stored by id, as opposed to in an ordered list
// there's no need to run an actual array.find() here
function edit(id, changed) {
  flatList.byId[id] = {
    ...flatList[id],
    ...changed,
  };
}

// remove an element
// the advantage here would again be that we only need to alter an array of ids
// versus an array of potentially large objects
function remove(id) {
  // deleting the actual data is optional here, since we'll be using the list to actually get the data
  delete flatList.byId[id];
  flatList.items.splice(indexOf(id), 1);
}

// reorder
// the advantage here is that we only sort the list of ids
// instead of moving large objects around in an array
// all while allowing us to keep the original order stored in the original list array
function sort(prop) {
  return flatList.items.sort((id1, id2) => {
    const value1 = flatList.byId[id1].prop;
    const value2 = flatList.byId[id2].prop;
    if (value1 === value2) {
      return 0;
    } else {
      return value1 > value2 ? 1 : -1;
    }
  });
}

// filter
// the advantage here again is that we're only filtering a list of ids
// retaining the original (full) list
function filter(field, value) {
  return flatList.items.filter(id => flatList.byId[id][field] === value);
}

// next let's look at nested data
const TOC_NESTED = [
  {
    id: 'a1',
    title: 'Chapter',
    visible: true,
    children: [
      {
        id: 'a2',
        title: 'Lesson1',
        visible: true,
        children: [
          {
            id: 'a4',
            visible: false,
            title: 'some page',
          },
        ],
      },
      {
        id: 'a3',
        visible: true,
        title: 'Lesson2',
      },
    ],
  },
];

const TOC_FLAT = {
  byId: {
    a1: {
      id: 'a1',
      title: 'Chapter',
      children: ['a2'],
      visible: true,
    },
    a2: {
      id: 'a2',
      parentId: 'a1',
      title: 'Lesson1',
      children: ['a4'],
      visible: true,
    },
    a3: {
      id: 'a3',
      title: 'Lesson2',
      visible: true,
    },
    a4: {
      id: 'a4',
      parentId: 'a2',
      title: 'some page',
      visible: false,
    },
  },
  items: ['a1', 'a2', 'a3', 'a4'],
};

// it's a bit cheaper/easier to find the visible elements here
// all we need to do is to filter the items array and only return visible elements
function getVisible() {
  TOC_FLAT.items
    .filter(id => TOC_FLAT.byId[id].visible)
    .map(id => TOC_FLAT.byId[id]);
  // we can also map and get the actual items, or just return the ids if this will be used later for rendering
}

// I should have also added an example for the nested structure, but ran out of time :D