Skip to content
Snippets Groups Projects
Commit cbae26e3 authored by Trirst's avatar Trirst
Browse files

Move the update hash array function to the relevant component

parent c5deb13d
Branches
No related tags found
No related merge requests found
Pipeline #768 passed
<template> <template>
<section id="list-container"> <section id="list-container">
<div id="item-container" v-for="(hash, index) in hashArray" :key="index"> <div
id="item-container"
v-for="(hash, index) in stateHashArray"
:key="index"
>
<ImageItem :hash="hash" @checked="appendToDeleteArray"></ImageItem> <ImageItem :hash="hash" @checked="appendToDeleteArray"></ImageItem>
</div> </div>
<button v-show="deleteArray.length" @click="deleteImages(deleteArray)"> <button v-show="deleteArray.length" @click="deleteImages(deleteArray)">
...@@ -11,7 +15,7 @@ ...@@ -11,7 +15,7 @@
<script> <script>
import ImageItem from "@/components/ImageItem.vue"; import ImageItem from "@/components/ImageItem.vue";
import { mapState } from "vuex"; import { mapState, mapActions } from "vuex";
export default { export default {
components: { components: {
ImageItem, ImageItem,
...@@ -21,15 +25,21 @@ export default { ...@@ -21,15 +25,21 @@ export default {
deleteArray: [], deleteArray: [],
}; };
}, },
props: {
hashArray: {
required: true,
},
},
computed: { computed: {
...mapState(["stateUser"]), ...mapState(["stateUser", "stateHashArray"]),
},
created() {
this.updateHashArray();
}, },
methods: { methods: {
async updateHashArray() {
const response = await fetch("../api/image");
const data = await response.json();
if (data) {
this.setStateHashArray(data);
console.log("Set State Hash Array");
}
},
appendToDeleteArray(...args) { appendToDeleteArray(...args) {
const [checked, hash] = args; const [checked, hash] = args;
checked checked
...@@ -46,6 +56,7 @@ export default { ...@@ -46,6 +56,7 @@ export default {
} }
this.deleteArray = []; this.deleteArray = [];
}, },
...mapActions(["setStateHashArray"]),
}, },
}; };
</script> </script>
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<UserAuthentication class="absolute bottom-0"></UserAuthentication> <UserAuthentication class="absolute bottom-0"></UserAuthentication>
</div> </div>
</section> </section>
<ImageList :hashArray="stateHashArray"></ImageList> <ImageList></ImageList>
</div> </div>
</template> </template>
...@@ -16,7 +16,6 @@ import ImageList from "@/components/ImageList.vue"; ...@@ -16,7 +16,6 @@ import ImageList from "@/components/ImageList.vue";
import ImageUpload from "@/components/ImageUpload.vue"; import ImageUpload from "@/components/ImageUpload.vue";
import TagCreation from "@/components/TagCreation.vue"; import TagCreation from "@/components/TagCreation.vue";
import UserAuthentication from "@/components/UserAuthentication.vue"; import UserAuthentication from "@/components/UserAuthentication.vue";
import { mapState, mapActions } from "vuex";
export default { export default {
components: { components: {
...@@ -25,23 +24,6 @@ export default { ...@@ -25,23 +24,6 @@ export default {
TagCreation, TagCreation,
UserAuthentication, UserAuthentication,
}, },
computed: {
...mapState(["stateHashArray"]),
},
created() {
this.updateHashArray();
},
methods: {
async updateHashArray() {
const response = await fetch("../api/image");
const data = await response.json();
if (data) {
this.setStateHashArray(data);
console.log("Set State Hash Array");
}
},
...mapActions(["setStateHashArray"]),
},
}; };
</script> </script>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment