chore(playground): more stuff

Author: Akryum

packages/playground/app/components/message/MessageItem.vue

@@ -7,6 +7,14 @@ const props = defineProps<{
 const store = useStore()
 
 const { data: message } = await store.Message.queryFirst(props.id)
+
+async function updateText() {
+  const { faker } = await import('@faker-js/faker')
+
+  await message.value?.$update({
+    text: faker.lorem.paragraph(),
+  })
+}
 </script>
 
 <template>
@@ -55,6 +63,14 @@ const { data: message } = await store.Message.queryFirst(props.id)
         <span class="opacity-50 ml-auto text-sm">
           {{ message.timeAgo }}
         </span>
+
+        <UButton
+          icon="lucide:edit"
+          label="Update text"
+          size="xs"
+          variant="ghost"
+          @click="updateText()"
+        />
       </div>
       <p
         class="px-4 py-2 bg-gray-100 dark:bg-gray-800 rounded-lg"

packages/playground/app/pages/messages/cache.vue

@@ -3,22 +3,57 @@ const store = useStore()
 
 // Load all messages
 const [
-  { data: messages },
-  { data: users },
-  { data: bots },
+  { data: messages, refresh: refreshMessages },
+  { data: users, refresh: refreshUsers },
+  { data: bots, refresh: refreshBots },
 ] = await Promise.all([
   store.Message.queryMany(),
   store.User.queryMany(),
   store.Bot.queryMany(),
 ])
 
+async function refresh() {
+  await Promise.all([
+    refreshMessages(),
+    refreshUsers(),
+    refreshBots(),
+  ])
+}
+
 const selectedUser = shallowRef<typeof users.value[number] | null>(users.value?.[0] ?? null)
+
+const receivedMessages = computed(() => selectedUser.value?.receivedMessages ?? [])
+const sentMessages = computed(() => selectedUser.value?.sentMessages ?? [])
+
+async function sendMessage(receive = false) {
+  if (!selectedUser.value) {
+    return
+  }
+
+  const { faker } = await import('@faker-js/faker')
+
+  const selectedUserId = selectedUser.value.id
+  const recipientIds = users.value.map(user => user.id).filter(id => id !== selectedUserId)
+  const recipientId = recipientIds[Math.floor(Math.random() * recipientIds.length)]
+
+  await store.Message.create({
+    authorId: receive ? recipientId : selectedUserId,
+    recipientId: receive ? selectedUserId : recipientId,
+    text: faker.lorem.paragraph(),
+  })
+}
 </script>
 
 <template>
   <div class="p-4 space-y-4">
     <h1>Read related items from cache</h1>
 
+    <UButton
+      icon="lucide:refresh-cw"
+      label="Refresh"
+      @click="refresh()"
+    />
+
     <div class="flex overflow-x-auto">
       <UButtonGroup>
         <UButton
@@ -37,6 +72,19 @@ const selectedUser = shallowRef<typeof users.value[number] | null>(users.value?.
     </div>
 
     <div v-if="selectedUser">
+      <div class="flex gap-2">
+        <UButton
+          icon="lucide:arrow-up"
+          label="Send message"
+          @click="sendMessage()"
+        />
+        <UButton
+          icon="lucide:arrow-down"
+          label="Receive message"
+          @click="sendMessage(true)"
+        />
+      </div>
+
       <UTabs
         :items="[
           {
@@ -55,14 +103,14 @@ const selectedUser = shallowRef<typeof users.value[number] | null>(users.value?.
         <template #received>
           <div>
             <MessageItem
-              v-for="{ id } in selectedUser.receivedMessages"
+              v-for="{ id } in receivedMessages"
               :id
               :key="id"
               skip-nested-fetch
             />
 
             <div
-              v-if="!selectedUser.receivedMessages.length"
+              v-if="!receivedMessages.length"
               class="text-center text-gray-500 p-4"
             >
               No messages
@@ -73,14 +121,14 @@ const selectedUser = shallowRef<typeof users.value[number] | null>(users.value?.
         <template #sent>
           <div>
             <MessageItem
-              v-for="{ id } in selectedUser.sentMessages"
+              v-for="{ id } in sentMessages"
               :id
               :key="id"
               skip-nested-fetch
             />
 
             <div
-              v-if="!selectedUser.sentMessages.length"
+              v-if="!sentMessages.length"
               class="text-center text-gray-500 p-4"
             >
               No messages

packages/playground/app/pages/todo/index.vue

@@ -43,6 +43,8 @@ createTodo.$onSuccess(() => {
 
         <UButton
           icon="lucide:refresh-cw"
+          color="neutral"
+          variant="soft"
           class="px-3"
           @click="refresh()"
         />