render() {
    const pagination = this.props.recordingsCursor.toJS();
    const needPagination = pagination.total > pagination.limit;
    const nbPages = Math.ceil(pagination.total / pagination.limit);
    const pagesArray = new Array(nbPages).fill(0);
    const currentPage = Math.floor(pagination.offset / pagination.limit);

    return (
      <div className="data-view bg-default-soft">
        {this.props.recordingStatus.get('isRecording')
            && (
            <Recording
              id={this.props.recordingStatus.get('recordingId')}
              dateStart={this.props.recordingStatus.get('dateStarted')}
              counterData={this.props.counterSummary}
              countingAreas={this.props.countingAreas}
              nbPaths={this.props.totalItemsTracked}
              filename={this.props.recordingStatus.get('filename')}
              active
            />
            )}
        {this.props.recordingHistory.map((recording) => (
          <Recording
            key={recording.get('id')}
            id={recording.get('id')}
            dateStart={recording.get('dateStart')}
            dateEnd={recording.get('dateEnd')}
            counterData={recording.get('counterSummary')}
            countingAreas={recording.get('areas')}
            filename={recording.get('filename')}
            nbPaths={recording.getIn(['trackerSummary', 'totalItemsTracked'])}
          />
        ))}
        {needPagination
            && (
            <div className="flex justify-center mb-8">
              {pagesArray.map((value, index) => (
                <button
                  key={index}
                  className={`btn btn-default ${index === currentPage ? 'btn-default--active' : ''}`}
                  onClick={() => {
                    this.props.dispatch(fetchHistory(index * pagination.limit, pagination.limit));
                  }}
                >
                  {index}
                </button>
              ))}
            </div>
            )}
        <style jsx>
          {`
            .data-view {
              width: 100%;
              height: 100%;
              overflow: scroll;
              padding-top: 100px;
            }
          `}
        </style>
      </div>
    );
  }
TODO SPLIT THIS INTO TWO COMPONENT TO HAVE ONE THAT RENDERS ALL THE TIME (current recording)
AND THE HISTORY THAT JUST RENDERS ONCE