fix: 🐛 tapping Okay on reaction will make it update immediately

This commit is contained in:
tamania 2023-07-31 18:23:03 -07:00 committed by ThatOneCalculator
parent 2bd9db9ea5
commit 2818b5b634
No known key found for this signature in database
GPG key ID: 8703CACD01000000

View file

@ -5,14 +5,15 @@
/></template> /></template>
<MkSpacer :content-max="800"> <MkSpacer :content-max="800">
<MkPagination <MkPagination
ref="paginationEl"
v-slot="{ items }" v-slot="{ items }"
:pagination="pagination" :pagination="pagination"
class="ruryvtyk _content" class="ruryvtyk _gaps_m"
> >
<section <section
v-for="(announcement, i) in items" v-for="announcement in items"
:key="announcement.id" :key="announcement.id"
class="_card announcement" class="announcement _panel"
> >
<div class="_title"> <div class="_title">
<span v-if="$i && !announcement.isRead">🆕 </span> <span v-if="$i && !announcement.isRead">🆕 </span>
@ -31,7 +32,7 @@
/> />
</div> </div>
<div v-if="$i && !announcement.isRead" class="_footer"> <div v-if="$i && !announcement.isRead" class="_footer">
<MkButton primary @click="read(items, announcement, i)" <MkButton primary @click="read(announcement.id)"
><i class="ph-check ph-bold ph-lg"></i> ><i class="ph-check ph-bold ph-lg"></i>
{{ i18n.ts.gotIt }}</MkButton {{ i18n.ts.gotIt }}</MkButton
> >
@ -43,7 +44,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {} from "vue"; import { ref } from "vue";
import MkPagination from "@/components/MkPagination.vue"; import MkPagination from "@/components/MkPagination.vue";
import MkButton from "@/components/MkButton.vue"; import MkButton from "@/components/MkButton.vue";
import * as os from "@/os"; import * as os from "@/os";
@ -55,13 +56,14 @@ const pagination = {
limit: 10, limit: 10,
}; };
// TODO: const paginationEl = ref<InstanceType<typeof MkPagination>>();
function read(items, announcement, i) { function read(id: string) {
items[i] = { if (!paginationEl.value) return;
...announcement, paginationEl.value.updateItem(id, (announcement) => {
isRead: true, announcement.isRead = true;
}; return announcement;
os.api("i/read-announcement", { announcementId: announcement.id }); });
os.api("i/read-announcement", { announcementId: id });
} }
const headerActions = $computed(() => []); const headerActions = $computed(() => []);