diff --git a/src/components/ImageItem.vue b/src/components/ImageItem.vue index 231369f7217a225b4c3657fb7f5093d7da7bdd4b..4492a7568d27524979c1b20987b5bde409a3eea6 100644 --- a/src/components/ImageItem.vue +++ b/src/components/ImageItem.vue @@ -2,22 +2,22 @@ <div @click.ctrl.shift.exact=" checked = !checked; - $emit('checked', checked, hash); + $emit('checked', checked, flake); " id="image-container" > <div @click=" checked = !checked; - $emit('checked', checked, hash); + $emit('checked', checked, flake); " v-show="checked" id="checkmark" > X </div> - <router-link @click.ctrl.shift.native.prevent :to="`/image/${hash}`"> - <img :src="`/api/image/${hash}/file`" /> + <router-link @click.ctrl.shift.native.prevent :to="`/image/${flake}`"> + <img :src="`/api/image/snowflake/${flake}/preview`" /> </router-link> </div> </template> @@ -30,7 +30,7 @@ export default { }; }, props: { - hash: { + flake: { required: true, }, }, @@ -56,4 +56,4 @@ img { left: 0.4em; padding: 0.4em 0.6em; } -</style> \ No newline at end of file +</style> diff --git a/src/components/ImageList.vue b/src/components/ImageList.vue index 90f0e0413bcd0bd81db4d197073bfe19e70c0e41..9d15f86332ea2a8595f406f19494ecb421682445 100644 --- a/src/components/ImageList.vue +++ b/src/components/ImageList.vue @@ -7,11 +7,11 @@ /> <div class="w-full flex flex-row flex-wrap justify-center"> <div - v-for="(hash, index) in stateHashArray" + v-for="(flake, index) in stateImageSnowflakes" :key="index" class="max-w-xs flex flex-col" > - <ImageItem :hash="hash" @checked="appendToDeleteArray"></ImageItem> + <ImageItem :flake="flake" @checked="appendToDeleteArray"></ImageItem> </div> </div> <PaginationBar @@ -47,7 +47,7 @@ export default { }; }, computed: { - ...mapState(["stateUser", "stateHashArray"]), + ...mapState(["stateUser", "stateImageSnowflakes"]), }, async created() { this.lastPage = Number(await this.getLastPage()); @@ -59,21 +59,12 @@ export default { window.location.pathname.split("/").pop().match(/^\d+$/) ); window.scrollTo(0, 0); - this.setStateHashArray(await this.getHashArray(this.currentPage)); + this.setStateImageSnowflakes(await this.getSnowflakes(this.currentPage)); }, - async getHashArray(pageEntry) { - const response = await fetch(`/api/page/${pageEntry}/image`); - const imageEntries = await response.json(); - if (imageEntries === null) { - return; - } - let hashArray = []; - imageEntries.forEach((imageEntry) => { - if (imageEntry.hash !== "") { - hashArray.unshift(imageEntry.hash); - } - }); - return hashArray; + async getSnowflakes(pageEntry) { + const response = await fetch(`/api/page/${pageEntry}/`); + const snowflakes = await response.json(); + return snowflakes; }, async getLastPage() { const response = await fetch("/api/page"); @@ -96,7 +87,7 @@ export default { } this.deleteArray = []; }, - ...mapActions(["setStateHashArray"]), + ...mapActions(["setStateImageSnowflakes"]), }, }; </script> diff --git a/src/store/index.js b/src/store/index.js index aafa4122561375ef039e1fcf6072f751ab7c9d43..548afb5a59015dea832d9fad2706a9a8270e8378 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1,49 +1,48 @@ -import Vue from 'vue' -import Vuex from 'vuex' -import VuexPersistedState from 'vuex-persistedstate' +import Vue from "vue"; +import Vuex from "vuex"; +import VuexPersistedState from "vuex-persistedstate"; -Vue.use(Vuex) +Vue.use(Vuex); const vuexLocal = VuexPersistedState({ key: "imageboard", - paths: ['stateUser'] -}) + paths: ["stateUser"], +}); export default new Vuex.Store({ state: { - stateHashArray: [], + stateImageSnowflakes: [], stateUser: { id: null, privileged: null, username: null, - secret: null - } + secret: null, + }, }, mutations: { - setStateHashArray(state, array) { - state.stateHashArray = array + setStateImageSnowflakes(state, array) { + state.stateImageSnowflakes = array; }, addStateHashArray(state, hash) { - state.stateHashArray.unshift(hash) + state.stateImageSnowflakes.unshift(hash); }, saveStateUser(state, payload) { - state.stateUser.id = payload.id - state.stateUser.privileged = payload.privileged - state.stateUser.username = payload.username - state.stateUser.secret = payload.secret - } + state.stateUser.id = payload.id; + state.stateUser.privileged = payload.privileged; + state.stateUser.username = payload.username; + state.stateUser.secret = payload.secret; + }, }, actions: { - setStateHashArray(context, payload) { - context.commit('setStateHashArray', payload); + setStateImageSnowflakes(context, payload) { + context.commit("setStateImageSnowflakes", payload); }, addStateHashArray(context, payload) { - context.commit('addStateHashArray', payload); + context.commit("addStateHashArray", payload); }, saveStateUser(context, payload) { - context.commit('saveStateUser', payload); - } - }, - modules: { + context.commit("saveStateUser", payload); + }, }, + modules: {}, plugins: [vuexLocal], -}) +});