Application State

In RebelChat we use redux as main application state handler. Here is Store design document.

Structure

We use redux in order to handle state of the app, our store has following structure.

{
  currentTeam: teamObject,
  teams: [
     channelObject, 
     channelObject, 
     channelObject
  ],
  activeChannels: { 
       [teamObject.id]: channelObject, 
       [teamObject.id]: channelObject
  },
  channels: {
    [teamObject.id]: {
      [channelObject.id]: channelObject, 
      [channelObject.id]: channelObject, 
      [channelObject.id]: channelObject,
      ...
    }
  },
  users: {
    [teamObject.id]: {
      [userObject.id]: userObject, 
      [userObject.id]: userObject, 
      [userObject.id]: userObject,
      ...
    }
  },
  messages: {
    [`${teamObject.id}#${channelObject.id}`]: {
      [messageObject.id]: messageObject,
      [messageObject.id]: messageObject,
      [messageObject.id]: messageObject,
      ...
    }
  }
}

First Level Objects

• Team Object
• Channel Object
• User Object
• Message Object

teamObject

This object represents entire Team we should keep it as simple and generic as possible.

{
  this.id = id || _.uniqueId()
  this.userId = userId
  this.name = name
  this.icon = icon || 'http://www.seaicons.com/wp-content/uploads/2015/10/chat-irc-icon.png'
  this.status = status || 'new'
}

channelObject

This object represent each Channel within the team. It can be at least two types personal and group

{
  this.id = id || _.uniqueId()
  this.teamId = teamId
  this.name = name
  this.type = type
  this.topic = topic
  this.memberIds = memberIds || []
  this.isMember = isMember || false
  this.unreadCount = unreadCount || 0
  this.lastRead = lastRead || new Date()
}

userObject

This object represents User in a team.

{
  this.id = id || _.uniqueId()
  this.teamId = teamId
  this.username = username
  this.avatar = avatar || 'https://i2.wp.com/koding-cdn.s3.amazonaws.com/images/default.avatar.140.png?ssl=1'
  this.displayName = displayName
  this.email = email
  this.status = status || 'online' // required ['online', 'offline', 'inactive', ...]
}

messageObject

This object represents Message.

{
    this.id = id || uniqueId()
    this.teamId = teamId
    this.senderId = senderId
    this.channelId = channelId
    this.text = text
    this.createdAt = createdAt || nowTs()
    this.state = state || 'new'
}