ImageList.vue

<template>
  <section class="w-full">
    <PaginationBar
      :current-page="currentPage"
      :last-page="lastPage"
      @onPageChange="pageChange"
    />
    <div class="w-full flex flex-row flex-wrap justify-center">
      <div
        v-for="(flake, index) in stateImageSnowflakes"
        :key="index"
        class="max-w-xs flex flex-col"
      >
        <ImageItem :flake="flake"></ImageItem>
      </div>
    </div>
    <PaginationBar
      :current-page="currentPage"
      :last-page="lastPage"
      @onPageChange="pageChange"
    />
  </section>
</template>

<script>
import ImageItem from "@/components/ImageItem.vue";
import PaginationBar from "@/components/PaginationBar.vue";
import { mapState, mapActions } from "vuex";
import paths from "@/assets/js/paths.js";

export default {
  components: {
    ImageItem,
    PaginationBar,
  },
  data: () => {
    return {
      currentPage: 0,
      lastPage: 0,
    };
  },
  computed: {
    ...mapState(["stateImageSnowflakes"]),
  },
  async created() {
    this.lastPage = Number(await this.getLastPage());
    this.pageChange();
  },
  methods: {
    async pageChange() {
      this.currentPage = Number(
        window.location.pathname.split("/").pop().match(/^\d+$/)
      );
      window.scrollTo(0, 0);
      this.setStateImageSnowflakes(await this.getSnowflakes(this.currentPage));
    },
    async getSnowflakes(pageEntry) {
      const response = await fetch(paths.ImagePageField(pageEntry));
      const snowflakes = await response.json();
      return snowflakes;
    },
    async getLastPage() {
      const response = await fetch(paths.ImagePage);
      const lastPage = await response.text();
      return lastPage;
    },
    ...mapActions(["setStateImageSnowflakes"]),
  },
};
</script>