Make ImageList reuseable

src/components/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"
+        v-for="(flake, index) in imageSnowflakes"
         :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;
+  props: {
+    imageSnowflakes: {
+      type: Array,
+      required: true,
     },
-    ...mapActions(["setStateImageSnowflakes"]),
   },
 };
 </script>
\ No newline at end of file

src/views/Home.vue

@@ -2,13 +2,14 @@
   <div class="flex flex-row">
     <section
       v-show="!sideBarHidden"
-      class="flex flex-col sticky top-0 h-screen w-1/3"
+      class="flex flex-col sticky top-0 h-screen w-72"
     >
       <button @click="sideBarHidden = true" class="self-end mt-2">
         <IconXCircle
           class="stroke-current text-gray-500 hover:text-gray-600"
         ></IconXCircle>
       </button>
+      <input type="text" />
       <TagCreation></TagCreation>
       <UserAuthentication class="absolute bottom-0"></UserAuthentication>
     </section>
@@ -23,7 +24,14 @@
         height="27"
       ></IconChevronsRight>
     </button>
-    <ImageList></ImageList>
+    <div>
+      <PaginationBar
+        :current-page="currentPage"
+        :last-page="lastPage"
+        @onPageChange="pageChange"
+      />
+      <ImageList :imageSnowflakes="imageSnowflakes"></ImageList>
+    </div>
   </div>
 </template>
 
@@ -34,6 +42,8 @@ import TagCreation from "@/components/TagCreation.vue";
 import UserAuthentication from "@/components/UserAuthentication.vue";
 import IconXCircle from "@/components/icons/IconXCircle.vue";
 import IconChevronsRight from "@/components/icons/IconChevronsRight.vue";
+import PaginationBar from "@/components/PaginationBar.vue";
+import paths from "@/assets/js/paths.js";
 
 export default {
   components: {
@@ -43,11 +53,38 @@ export default {
     UserAuthentication,
     IconXCircle,
     IconChevronsRight,
+    PaginationBar,
   },
   data: function () {
     return {
       sideBarHidden: false,
+      imageSnowflakes: [],
+      currentPage: 0,
+      lastPage: 0,
     };
   },
+  methods: {
+    async pageChange() {
+      this.currentPage = Number(
+        window.location.pathname.split("/").pop().match(/^\d+$/)
+      );
+      window.scrollTo(0, 0);
+      this.imageSnowflakes = await this.getImageSnowflakes(this.currentPage);
+    },
+    async getLastPage() {
+      const response = await fetch(paths.ImagePage);
+      const lastPage = await response.text();
+      return lastPage;
+    },
+    async getImageSnowflakes(pageEntry) {
+      const response = await fetch(paths.ImagePageField(pageEntry));
+      const snowflakes = await response.json();
+      return snowflakes;
+    },
+  },
+  async created() {
+    this.lastPage = Number(await this.getLastPage());
+    this.pageChange();
+  },
 };
 </script>