JSON History

by João Vitor Scheuermann

HTML

<div class="wrapper">
  <div class="history">
    <div class="title">history:</div>
    <div id="content" class="contentWrapper"></div>
  </div>
  <div class="line">
    <div id="add" class="btn">add history</div>
    <div id="back" class="btn">back</div>
    <div id="forward" class="btn">forward</div>
  </div>
</div>

SCSS

* {
  margin: 0;
  padding: 0;
  
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 6px;
  font-family: Roboto-Thin;
}

.wrapper {
  width: 100%;
  height: 100%;
  
  > .history {
    width: calc(100% - 10px);
    height: 500px;
    margin: 5px 5px 0 5px;      
    background: #000000;
    
    display: flex;
    flex-direction: column;

    > .title {
      margin: 20px;
      color: #ffffff;
      user-select: none;
    }

    > .contentWrapper {
      overflow-y: scroll;
      width: 100%;
      height: 100%;
      
      > .item {
        margin: 0 0 1px 0;
        padding: 7px;
        background: #ffffff;
        
        &.current {
          background: #07f672;
        }
      }
    }
  }
  
  > .line {    
    display: flex;
    flex-direction: row;   
    margin: 0 5px 5px 5px;
    
    width: calc(100% - 10px);
    
    background: #000000;
    
    > .btn {
      padding: 20px 30px;
      background: #000000;
      color: #ffffff;
      cursor: pointer;
      user-select: none;
    }
  }
}

JavaScript

function generateInt () {
	return parseInt(Math.random() * 100)
}

class Banner {
  constructor(callBack = () => {}) {
    this._id = generateInt()
    this._callBack = callBack

    this._data = generateInt()
  }
  
  get id () {
  	return this._id
  }

  get data () {
    return this._data
  }

  set data (value) {
    this._data = value
    this._callBack()
  }  
  
  toJSON () {
  	return {
      id: this._id,
      data: this.data
    }
  }
  
  change () {
  	this.data = generateInt()
  }
}

/* class History {
  constructor() {
    this._states = []
    this._state = null
  }

  get lastState() {
    this._states[this._states.length - 1]
  }

  push(banner) {    
     function isSameVersion (stateA, stateB) {
      return stateA.version === stateB.version
    }
    
    function findVersionIndex (states, state) {
      return states.findIndex(existingState => existingState.version === state.version)
    }    
    
    if (this._state && !isSameVersion(this._state, banner)) {
      let versionIndex = findVersionIndex(this._states, banner)
      let currentStateIndex = findVersionIndex(this._states, this._state)
      
      if (versionIndex === -1) {
        if (currentStateIndex < this._states.length - 1) {
          
        }
      
        let obj = banner.toJSON()
        this._state = obj
        this._states.push(this._state)
        banner.version++
      } 
    } else {
      let obj = banner.toJSON()
      this._state = obj
      this._states.push(this._state)
      banner.version++
    }   
  }

  back() {
    function findVersionIndex (states, state) {
      return states.findIndex(existingState => existingState.version === state.version)
    }
    
    let currentStateIndex = findVersionIndex(this._states, this._state)
    
    if (currentStateIndex > 0) {
      this.state = this._states[currentStateIndex - 1]
    }
  }

  forward() {
    let currentStateIndex = this._stateIndex(this.state)
    if (currentStateIndex < this._states.length - 1) {
...