fix: delete proof display (#378)

* fix: delete proof display * fix: use the unique store * fix: use backend proofTotal --------- Co-authored-by: dq18 <>
openfoodfacts · Feb 27, 2024 · bc16444 · bc16444
1 parent 4f11bea
commit bc16444
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 12 deletions.
diff --git a/src/components/ProofDeleteChip.vue b/src/components/ProofDeleteChip.vue
@@ -47,6 +47,7 @@
 
 <script>
 import api from '../services/api'
+import { useAppStore } from '../store'
 
 export default {
   props: {
@@ -75,14 +76,11 @@ export default {
           // if response.status == 204
           this.loading = false
           this.deleteSuccessMessage = true
-          this.removeProofCard()
+          const store = useAppStore()
+          store.removeProof(this.proof.id)
           this.closeDialog()
         })
     },
-    removeProofCard() {
-      const proofCardCol = document.getElementById(`proof_${this.proof.id}`)
-      proofCardCol.remove()
-    },
     openDialog() {
       this.dialog = true
     },

diff --git a/src/store.js b/src/store.js
@@ -11,6 +11,8 @@ export const useAppStore = defineStore('app', {
       recent_locations: [],
       language: localStorage.getItem('user-locale') || import.meta.env.VITE_DEFAULT_LOCALE,  // 'en'
       country: import.meta.env.VITE_DEFAULT_COUNTRY,  // 'FR',
+      proofs: [],
+      proofTotal: null,
     },
   }),
   getters: {
@@ -31,6 +33,9 @@ export const useAppStore = defineStore('app', {
     },
     getUserCountry: (state) => {
       return state.user.country
+    },
+    getUserProofTotal: (state) => {
+      return state.user.proofTotal
     }
   },
   actions: {
@@ -59,6 +64,18 @@ export const useAppStore = defineStore('app', {
     },
     setCountry(country) {
       this.user.country = country
+    },
+    setProofTotal(proofTotal) {
+      this.user.proofTotal = proofTotal
+    },
+    addProof(proof) {
+      if (!this.user.proofs.some(existingProof => existingProof.id === proof.id)) {
+        this.user.proofs.push(proof)
+      }
+    },
+    removeProof(proofId) {
+      this.user.proofs = this.user.proofs.filter(proof => proof.id !== proofId)
+      this.user.proofTotal -= 1
     }
   },
   // pinia-plugin-persistedstate

diff --git a/src/views/UserDashboardProofList.vue b/src/views/UserDashboardProofList.vue
@@ -6,7 +6,7 @@
   <v-row>
     <v-col>
       <v-chip class="mr-2" label variant="text" prepend-icon="mdi-tag-multiple-outline">
-        {{ $t('UserDashboard.UserProofTotal', { count: userProofTotal }) }}
+        {{ $t('UserDashboard.UserProofTotal', { count: this.appStore.getUserProofTotal }) }}
       </v-chip>
       <v-btn size="small" prepend-icon="mdi-arrow-left" to="/dashboard">
         {{ $t('UserDashboard.Title') }}
@@ -22,12 +22,12 @@
   </h2>
 
   <v-row>
-    <v-col cols="12" sm="6" md="4" v-for="proof in userProofList" :key="proof">
+    <v-col cols="12" sm="6" md="4" v-for="proof in appStore.user.proofs" :key="proof">
       <ProofCard :proof="proof" height="100%"></ProofCard>
     </v-col>
   </v-row>
 
-  <v-row v-if="userProofList.length < userProofTotal" class="mb-2">
+  <v-row v-if="this.appStore.user.proofs.length < this.appStore.getUserProofTotal" class="mb-2">
     <v-col align="center">
       <v-btn size="small" :loading="loading" @click="getUserProofs">{{ $t('UserDashboard.LoadMore') }}</v-btn>
     </v-col>
@@ -46,8 +46,6 @@ export default {
   },
   data() {
     return {
-      userProofList: [],
-      userProofTotal: null,
       userProofPage: 0,
       loading: false,
     }
@@ -67,8 +65,9 @@ export default {
       this.userProofPage += 1
       return api.getProofs({ owner: this.username, page: this.userProofPage })
         .then((data) => {
-          this.userProofList.push(...data.items)
-          this.userProofTotal = data.total
+          data.items.forEach(proof => this.appStore.addProof(proof))
+          this.appStore.user.proofs.sort((a, b) => new Date(b.created) - new Date(a.created))
+          this.appStore.setProofTotal(data.total)
           this.loading = false
         })
     },