HomeNextEvents.vue

<template>
  <aside v-if="!loading" class="lg:flex">
    <div
      v-for="(column, num) in columns"
      :key="num"
      class="flex-1"
      :class="num === 1 && 'lg:ml-4'"
    >
      <a
        v-for="(event, index) in column"
        :key="index"
        :href="`https://forum.monnaie-libre.fr/t/${event.slug}/${event.id}`"
        targe="_blank"
        class="block hover:bg-hover-light dark-hover:text-gray-800 p-2 mt-1 rounded-lg transition-colors"
      >
        <div class="event-date text-sm text-gray-500">
          {{ prettyDate(event.event.start) }}
        </div>
        <div>{{ event.title }}</div>
      </a>
    </div>
  </aside>

  <div v-else class="h-80 flex items-center">
    <span class="loading-state h-12 w-12 scale-150 transform mx-auto" />
  </div>
</template>

<script>
import { fetchNextEvents } from '~/libs/api-forum'

export default {
  name: 'HomeNextEvents',
  data() {
    return {
      events: [],
      loading: false,
      cols: 2,
    }
  },
  computed: {
    columns() {
      const columns = []
      const mid = Math.ceil(this.events.length / this.cols)
      for (let col = 0; col < this.cols; col++) {
        columns.push(this.events.slice(col * mid, col * mid + mid))
      }
      return columns
    },
  },
  async mounted() {
    this.loading = true
    this.events = await fetchNextEvents(`?start=${this.formatDateForParams()}`)
    this.loading = false
  },

  methods: {
    formatDateForParams(date = new Date()) {
      const offset = date.getTimezoneOffset()
      date = new Date(date.getTime() - offset * 60 * 1000)
      return date.toISOString().split('T')[0]
    },
    prettyDate(date) {
      const formatter = new Intl.DateTimeFormat(
        this.$i18n.locale,
        this.$i18n.dateTimeFormats[this.$i18n.locale].full
      )
      return formatter
        .formatToParts(Date.parse(date))
        .map(({ type, value }) => {
          switch (type) {
            case 'literal':
              return value === ', ' ? ' à ' : value === ':' ? 'h' : value
            default:
              return value
          }
        })
        .reduce((string, part) => string + part)
    },
  },
}
</script>

<style lang="postcss" scoped>
.event-date:first-letter {
  text-transform: uppercase;
}
</style>