tout-doux/resources/ts/App.vue

<script setup lang="ts">
import { ref, onMounted, onBeforeMount } from "vue";
import { getComments, postComment } from "@/api/comments";
import type { Comment } from "@/types";

const visible = ref<boolean>(false);
const comments = ref<Comment[]>([]);
const commentInput = ref<string>("");

function fetchComments() {
    getComments()
        .then((data: Comment[]) => {
            comments.value = data;
        })
        .catch(() => {
            //ignore
        });
}

function sendComment() {
    if (commentInput.value.trim()) {
        postComment(commentInput.value.trim())
            .finally(() => {
                commentInput.value = "";
                fetchComments();
            })
            .catch(() => {
                //ignore
            });
    }
}

onBeforeMount(fetchComments);

onMounted(() => {
    setTimeout(() => {
        visible.value = true;
    });
});
</script>

<template>
    <main :style="{ display: visible ? 'inherit' : 'none' }">
        <div class="hero bg-base-200 min-h-screen">
            <div class="hero-content text-center">
                <div class="max-w-md">
                    <ul class="list bg-base-100 rounded-box shadow-md">
                        <li class="p-4 pb-2 text-xl opacity-60 tracking-wide">
                            Comments
                        </li>

                        <li
                            v-for="comment in comments"
                            :key="comment.id"
                            class="list-row"
                        >
                            <div class="avatar avatar-placeholder">
                                <div
                                    class="bg-neutral text-neutral-content size-10 rounded-box"
                                >
                                    <span class="text-xs">{{
                                        comment.content[0]
                                    }}</span>
                                </div>
                            </div>
                            <div>
                                <div class="text-xs opacity-60">
                                    {{ comment.created_at }}
                                </div>
                                <div class="font-semibold">
                                    {{ comment.content }}
                                </div>
                            </div>
                        </li>
                        <li class="list-row">
                            <div>
                                <input
                                    v-model="commentInput"
                                    type="text"
                                    placeholder="Type here"
                                    class="input"
                                    @keyup.enter="sendComment"
                                />
                            </div>
                            <div>
                                <button
                                    class="btn"
                                    :disabled="commentInput.trim().length === 0"
                                    @click="sendComment"
                                >
                                    Send
                                </button>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </main>
</template>