ghostguild-org/app/pages/updates/user/[id].vue

<template>
  <div>
    <PageHeader
      :title="user?.name ? `${user.name}'s Updates` : 'User Updates'"
      :subtitle="user?.name ? `All updates from ${user.name}` : 'Loading...'"
      theme="stone"
      size="medium"
    />

    <section class="py-12 px-4">
      <UContainer class="px-4">
        <!-- Loading State -->
        <div
          v-if="pending && !updates.length"
          class="flex justify-center items-center py-20"
        >
          <div class="text-center">
            <div
              class="w-8 h-8 border-4 border-stone-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
            ></div>
            <p class="text-stone-400">Loading updates...</p>
          </div>
        </div>

        <!-- Updates Feed -->
        <div v-else-if="updates.length" class="space-y-6">
          <UpdateCard
            v-for="update in updates"
            :key="update._id"
            :update="update"
            :show-preview="true"
            @edit="handleEdit"
            @delete="handleDelete"
          />

          <!-- Load More -->
          <div v-if="hasMore" class="flex justify-center pt-4">
            <UButton
              variant="outline"
              color="neutral"
              :loading="loadingMore"
              @click="loadMore"
            >
              Load More
            </UButton>
          </div>
        </div>

        <!-- Empty State -->
        <div v-else class="text-center py-20">
          <div class="w-16 h-16 mx-auto mb-4 opacity-50">
            <svg
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              class="text-stone-600"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
              />
            </svg>
          </div>
          <h3 class="text-lg font-medium text-stone-300 mb-2">
            No updates yet
          </h3>
          <p class="text-stone-400">
            {{ user?.name || "This user" }} hasn't posted any updates.
          </p>
        </div>
      </UContainer>
    </section>

    <!-- Delete Confirmation Modal -->
    <UModal
      v-model:open="showDeleteModal"
      title="Delete Update?"
      description="Are you sure you want to delete this update? This action cannot be undone."
    >
      <template #footer>
        <div class="flex justify-end gap-3">
          <UButton
            variant="ghost"
            color="neutral"
            @click="showDeleteModal = false"
          >
            Cancel
          </UButton>
          <UButton color="red" :loading="deleting" @click="confirmDelete">
            Delete
          </UButton>
        </div>
      </template>
    </UModal>
  </div>
</template>

<script setup>
const route = useRoute();
const userId = computed(() => route.params.id);

const updates = ref([]);
const user = ref(null);
const pending = ref(false);
const loadingMore = ref(false);
const hasMore = ref(false);
const total = ref(0);

const showDeleteModal = ref(false);
const updateToDelete = ref(null);
const deleting = ref(false);

// Load user updates
const loadUpdates = async () => {
  pending.value = true;
  try {
    const response = await $fetch(`/api/updates/user/${userId.value}`, {
      params: { limit: 20, skip: 0 },
    });
    updates.value = response.updates;
    user.value = response.user;
    total.value = response.total;
    hasMore.value = response.hasMore;
  } catch (error) {
    console.error("Failed to load updates:", error);
  } finally {
    pending.value = false;
  }
};

// Load more updates
const loadMore = async () => {
  loadingMore.value = true;
  try {
    const response = await $fetch(`/api/updates/user/${userId.value}`, {
      params: { limit: 20, skip: updates.value.length },
    });
    updates.value.push(...response.updates);
    hasMore.value = response.hasMore;
  } catch (error) {
    console.error("Failed to load more updates:", error);
  } finally {
    loadingMore.value = false;
  }
};

// Handle edit
const handleEdit = (update) => {
  navigateTo(`/updates/${update._id}/edit`);
};

// Handle delete
const handleDelete = (update) => {
  updateToDelete.value = update;
  showDeleteModal.value = true;
};

// Confirm delete
const confirmDelete = async () => {
  if (!updateToDelete.value) return;

  deleting.value = true;
  try {
    await $fetch(`/api/updates/${updateToDelete.value._id}`, {
      method: "DELETE",
    });

    // Remove from list
    updates.value = updates.value.filter(
      (u) => u._id !== updateToDelete.value._id,
    );
    total.value--;

    showDeleteModal.value = false;
    updateToDelete.value = null;
  } catch (error) {
    console.error("Failed to delete update:", error);
    alert("Failed to delete update. Please try again.");
  } finally {
    deleting.value = false;
  }
};

onMounted(() => {
  loadUpdates();
});

useHead({
  title: computed(() => user.value?.name ? `${user.value.name}'s Updates - Ghost Guild` : 'User Updates - Ghost Guild'),
});
</script>