Wish Editor

index.html

<h2>Lista de Presentes - Vodka de Casa Nova</h2>
<h6>OBS: Todas as imagens são exemplos.</h6>
<div id="app"></div>
<div class="author">Made with ♥ by <a href="https://github.com/joismar/" target="_blank">Joismar</a></div>  
</div>
<div class="inspiration">
  Inspired by:
  <a href="https://codepen.io/_danko/pen/RRYVNQ" target="_blank">Danko Pen</a>
</div>

script.babel

// TODO: ajeitar espaçamento do botão e duplicidade
// TODO: criar lista de codigos ao inves de um só
// TODO: subir no github pages

class WishList extends React.Component {
  constructor(props) {
    super(props);
    this.store = new SteinStore(
      "https://api.steinhq.com/v1/storages/618d988dc582292380b45370"
    );
    this.state = {
      wishes: []
    }; 
    this.getData();
  }
  
  async getData() {
    await this.store.read("Wishes").then(data => {
      this.setState({
        wishes: data.map(data => ({
          id: parseInt(data.ID),
          name: data.ITEM,
          dsp: parseInt(data.DISPONIVEL),
          qty: parseInt(data.QUANTIDADE),
          cod: JSON.parse(data.COD),
          status: Boolean(parseInt(data.STATUS)),
          img: data.IMG
        }))
      });
      console.log(this.state);
    });
  }
  
  async updateWish(wishId, status, res, dsp) {
    await this.store.edit("Wishes", {
      search: { ID: wishId.toString() },
      set: { STATUS: parseInt(status), COD: JSON.stringify(res), DISPONIVEL: dsp}
    })
      .then(res => {
      console.log(res);
    });
  }
  
  arrayRemove(arr, value) { 
    return arr.filter(function(ele){ 
      return ele != value; 
    });
  }
  
  addWish(wishId) {
    let newState = Object.assign({}, this.state)
    let wish = _.find(newState.wishes, {id: wishId});
    if (wish.status) {
      let res = window.prompt("Digite um código de segurança caso queira cancelar a reserva depois:", "");
      if (res) {
        if (wish.dsp == 1) {
          wish.status = !wish.status
        }
        wish.dsp -= 1
        wish.cod.push(parseInt(res))
        this.setState(newState)
        this.updateWish(parseInt(wishId), wish.status ? 1 : 0, wish.cod, wish.dsp)
      } else if (res === "") {
        window.alert("Precisa digitar um código válido!");
      }
    } else {
      let res = window.prompt("Digite um código de segurança para cancelar a reserva:", "");
      if (res && wish.cod.includes(parseInt(res))) {
        wish.status = !wish.status
        wish.dsp += 1
        wish.cod = this.arrayRemove(wish.cod, parseInt(res))
        this.setState(newState)
        this.updateWish(parseInt(wishId), wish.status ? 1 : 0, wish.cod, wish.dsp)
      } else {
        window.alert("Codigo inválido!");
      }
      // this.store.read("Wishes", { search: { ID: wishId } }).then(data => {
      //   if (data && data.length != 0) {
      //     wish.status = !wish.status
      //     wish.dsp += 1
      //     this.setState(newState)
      //     this.updateWish(parseInt(wishId), wish.status ? 1 : 0, "", wish.dsp)
      //   } else {
      //     window.alert("Codigo inválido!");
      //   }
      // });
    }
  }
  
  removeWish(wishId) {
    let newState = Object.assign({}, this.state)
    let wish = _.find(newState.wishes, {id: wishId});
    let res = window.prompt("Digite um código de segurança para cancelar a reserva:", "");
    if (res && wish.cod.includes(parseInt(res))) {
      wish.dsp += 1
      wish.cod = this.arrayRemove(wish.cod, parseInt(res))
      this.setState(newState)
      this.updateWish(parseInt(wishId), wish.status ? 1 : 0, wish.cod, wish.dsp)
    } else {
      window.alert("Codigo inválido!");
    }
    // this.store.read("Wishes", { search: { COD: res } }).then(data => {
    //   if (data && data.length != 0) {
    //     wish.dsp += 1
    //     this.setState(newState)
    //     this.updateWish(parseInt(wishId), wish.status ? 1 : 0, "", wish.dsp)
    //   } else {
    //     window.alert("Codigo inválido!");
    //   }
    // });
  }
  
  render() {
    return (<SingleWish wishes={this.state.wishes} addWish={(wishId) => this.addWish(wishId)} removeWish={(wishId) => this.removeWish(wishId)} />);
  }  
}

class SingleWish extends React.Component  {
  render() {  
    const listItem = this.props.wishes.map((wish) => {
      return (
        <li className={!(wish.status && wish.dsp > 0) ? 'card active' : 'card notactive'} key={wish.id}>
          {(wish.status && wish.dsp > 0) ? '' : <div className="card-warn"><span>RESERVADO</span></div>}
          <span className="absolute-qtd">{wish.dsp} disponivel</span>
          <img className="card-img" src={wish.img}/>
          <div className="div-name">
            <span className="card-name">{wish.name}</span>
          </div>
          {(wish.dsp < wish.qty && wish.dsp != 0) ? <button onClick={() => this.props.removeWish(wish.id)}>REMOVER RESERVA</button> : ''}
          <button onClick={() => this.props.addWish(wish.id)}>{(wish.status && wish.dsp > 0) ? 'RESERVAR' : 'REMOVER RESERVA'}</button>
        </li>
      );
    })
    
    return (
      <div className="container">
        <ul className="wish-list">
          { listItem }
        </ul>
      </div>
      );
  }
}

const domNode = document.getElementById('app');
ReactDOM.render(<WishList />, domNode)

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.24.0/axios.min.js"></script>
<script src="https://unpkg.com/stein-js-client"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

style.scss

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;1,300;1,400&display=swap');

body {
  font-family: 'Open Sans', sans-serif;
  color: chocolate;
  background-color: #FBAB7E;
  background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
}

h2 {
  margin: 70px 0 0px;
  text-align: center;
  color: rgba(240, 89, 7);
  font-weight: bold;
}

h6 {
  text-align: center;
  margin: 20px 0 50px;
  color: chocolate;
}

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 630px;
  padding-left: 0;
  margin: 0 auto;
}

li {
  display: flex;
  flex-direction: column;
  padding: 10px;
  margin: 10px 5px;
  list-style: none;
  border: 1px solid #2f70e1;
  width: 200px;
  position: relative;
  align-self: end;
}

.card {
  background: #F4E1BA;
  border: 0;
}

.div-name {
  flex: 1;
  display: flex;
  margin: 10px 0;
}

.card-warn {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(240, 89, 7, 0.82);
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.absolute-qtd {
  position: absolute;
  right: -8px;
  top: -8px;
  background: chocolate;
  color: white;
  padding: 3px 5px;
  border-radius: inherit;
  font-size: .8em;
}

.card-warn > span {
  position: absolute;
  left: 50%;
  top: 38%;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-weight: bold;
}

span {
  font-style: italic;
}

.active,
.active a {
  // color: #fff;
  // background: #2f70e1;   
}
button {
  
}
.active {
  color: white;
  // background: #fff;
  button {
    background: white;
    color: #EF3434;
  }
  button, span {
    z-index: 9999;
  }
}
.notactive {
  color: rgba(240, 89, 7);
  button {
    color: #fff;
    background: rgba(240, 89, 7);
  }
}
button {
  padding: 5px;
  width: 100%;
  border: 0;
  cursor: pointer;
  font-weight: bold;
  &:hover {
    box-shadow: 1px 2px 3px rgba(0, 0, 0, .15), -1px 2px 3px rgba(0, 0, 0, .15);
  }
  &:focus {
    outline: 0;
  }
}
.author {
  margin-top: 50px;
  margin-bottom: 10px;
  font-size: 14px;
  text-align: center;
}
.inspiration {
  text-align: center;
  font-size: 14px;
}

styles

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />

wish-editor.markdown

Wish Editor

A Pen by Joismar Braga on CodePen.

License.