React/Flux app data structure

Question

i'm building an Gmail-like email browser client app prototype and i need a little help/advice structuring my React/Flux app. I decided to use pure Flux to get a better idea of how it works.

It's a simple email client with a list of letters, grouped by folders and tags and an ability to add letters to favorites.

So, i have a LettersStore containing an array of letters. The single letter data object looks something like this

{
  id: 0,
  new: true, //unread
  checked: false, 
  starred: false, 
  folder: "inbox", //could be 'sent', 'spam', 'drafts'
  sender: "Sender Name",
  subject: "Re:",
  snippet: "Hello there, how are you...",
  body: "Hello there, how are you doing, Mike?",
  date: "02.19.2016 16:30",
  tags:["personal", "urgent"]
}

So what i'm trying to achieve is to let users navigate through folders (inbox, sent, drafts, spam) and filters (starred, tag, etc.)

In both folders and filters there has to be a way to select (check) some/all letters. The view state depends on how many letters are selected (the Select-all checkbox update, just like on Gmail). When the user selects a letter, the Flux action is being triggered and the state of the app updates.

The controller-view on top of the app does all the calls to the LettersStore public methods and passes the data down as props, but i'm not sure, what public methods the LettersStore should have. Currently it has:

emitChange()
addChangeListener()
removeChangeListener()

getAll() //returns array
areSomeLettersInFolderChecked(folderName) //returns bool
areAllLettersInFolderChecked(folderName) //returns bool

countNewLettersInAllFolders() //returns object

This works ok with folders, but when it comes to filters, it doesn't make sense anymore, since a starred letter is in some folder, and i feel like it's not the right thing to add specific methods like areSomeLettersInFilterChecked(filterType) etc.

Also, just like in Gmail, there has to be a way to select letter in the "Starred" filter, which belongs to the "Inbox" folder, then navigate to "Inbox" folder and keep that letter selected.

Maybe i should move the areSomeLettersInFolderChecked-like stuff to the component level?

I'm sure here has to be a proper way of doing it. Thanks in advance!

Answer 1

Rather than trying to encapsulate all the possible states and filters into your letter objects, keep it dumb. Normalize it and use supporting data structures to represent the other characteristics.

I'd strip it down to just the following properties:

{
  id: 0,
  sender: "Sender Name",
  subject: "Re:",
  snippet: "Hello there, how are you...",
  body: "Hello there, how are you doing, Mike?",
  date: "02.19.2016 16:30",
  tags:["personal", "urgent"]
}

Your LetterStore can stay the same, or alternatively you could use an object or map to store letters against their id's for quick lookups later.

Now we need to represent the properties we removed from the message.

We can use individual sets to determine whether a message belongs to the new, checked and starred categories.

For instance, to star a message, just add it's id to the starred set.

var starred = new Set();
starred.add(message.id);

You can easily check whether a message is starred later on.

function isStarred(message) {
  return starred.has(message.id);
}

The pattern would be the same for checked and unread.

To represent folders you probably want to use a combination of objects and sets.

var folders = {
  inbox: new Set(),
  sent: new Set(),
  spam: new Set(),
  drafts: new Set()
}

Simplifying your structures into these sets makes designing queries quite easy. Here are some examples of the methods you talked about implemented with sets.

function checkAll() {
  messages.forEach(function(message) {
    checked.add(message.id);
  });
  return checked;
}

function isChecked(message) {
  return checked.has(message.id);
}

function inFolder(name, message) {
  return folders[name].has(message.id);
}

// is message checked and in inbox
if(isChecked(message) && inFolder('inbox', message)) {
  // do something
}

It becomes easy to construct complex queries, simply by checking whether messages belong to multiple sets.