Personal Level Icon

--- title: "personal-level-icon" description: "An icon to signal whether you're the only recipient, one of many recipients, or part of a mailing list." assumed_experience: "No experience with React, Flux, Electron, or N1." github: "https://github.com/nylas/N1/tree/master/examples/N1-Personal-Level-Indicators" image: "../images/examples-screencap-personal-level-icon.png" --- Personal Level Icon

¶

Personal Level Icon

Show an icon for each thread to indicate whether you’re the only recipient, one of many recipients, or a member of a mailing list.

Access core components by requiring nylas-exports.

{Utils, DraftStore, React} = require 'nylas-exports'

Access N1 React components by requiring nylas-component-kit.

{RetinaImg} = require 'nylas-component-kit'

class PersonalLevelIcon extends React.Component

¶

Note: You should assign a new displayName to avoid naming conflicts when injecting your item
```
  @displayName: 'PersonalLevelIcon'
```

In the constructor, we’re setting the component’s initial state.

  constructor: (@props) ->
    @state =
      level: @_calculateLevel(@props.thread)

¶

React components’ render methods return a virtual DOM element to render. The returned DOM fragment is a result of the component’s state and props. In that sense, render methods are deterministic.
```
  render: =>
    React.createElement("div", {"className": "personal-level-icon"},
      (@_renderIcon())
    )
```

Some application logic which is specific to this package to decide which character to render.

  _renderIcon: =>
    switch @state.level
      when 0 then ""
      when 1 then "\u3009"
      when 2 then "\u300b"
      when 3 then "\u21ba"

Some more application logic which is specific to this package to decide what level of personalness is related to the thread.

  _calculateLevel: (thread) =>
    hasMe = (thread.participants.filter (p) -> p.isMe()).length > 0
    numOthers = thread.participants.length - hasMe
    if not hasMe
      return 0
    if numOthers > 1
      return 1
    if numOthers is 1
      return 2
    else
      return 3

module.exports = PersonalLevelIcon