echo75 / my-movie-db

MIT License
1 stars 0 forks source link

#CleanCode Generic vs. concrete code #13

Closed Dr4gon closed 1 year ago

Dr4gon commented 1 year ago

@echo75 What's the purpose of using one call instead of having a click handler for each button?

WatchListe.vue

                  <td class="td_delete" @click="handleButtonClick">
                    <button
                      type="button"
                      class="btn btn-secondary btn-sm about"
                      style="margin: 1px 2px"
                      :data-imdbid="movie.imdbID"
                      data-bs-toggle="modal"
                      data-bs-target=".movie-modal"
                    >
                      About this movie
                    </button>
                    <button
                      type="button"
                      class="btn btn-secondary btn-sm watched"
                      style="margin: 1 2px"
                      :data-imdbid="movie.imdbID"
                    >
                      Mark as watched
                    </button>
                    <button
                      type="button"
                      class="btn btn-secondary btn-sm delete"
                      style="margin: 1px 2px"
                      :data-imdbid="movie.imdbID"
                    >
                      Delete
                    </button>
                  </td>
    handleButtonClick(event) {
      const target = event.target

      if (target.classList.contains('delete')) {
        this.handleDeleteClick(event)
      } else if (target.classList.contains('about')) {
        this.handleAboutClick(event)
        this.fetchDetailedInfo(event)
        this.fetchReviews(event)
      } else if (target.classList.contains('watched')) {
        this.handleWatchedClick(event)
      }
    },  
echo75 commented 1 year ago

I can understand the topic of this issue. I coded it this way because of the CSS animations.