async function historyLoad() {
    const historyDiv = document.getElementById("story-list");
    historyDiv.textContent = "";

    const readingHistory = JSON.parse(
        localStorage.getItem("readingHistory") ?? "[]"
    );

    for (let i = 0; i < readingHistory.length; i++) {
        const story = await (
            await fetch(`/api/getStory?id=${readingHistory[i]}`)
        ).json();

        const searchEle = document.createElement("a");
        searchEle.className = "listed-story";
        searchEle.href =
            "/story?id=" +
            story.id +
            (localStorage.getItem(`${story.id}_progress`)
                ? `&chapter=${localStorage.getItem(`${story.id}_progress`)}`
                : "");
        const coverEle = document.createElement("img");
        coverEle.src = story.cover;
        const div = document.createElement("div");
        const titleEle = document.createElement("h3");
        titleEle.textContent = story.title;
        div.appendChild(titleEle);
        const descEle = document.createElement("p");
        descEle.innerHTML = story.description.replace("\n", "<br/>");
        div.appendChild(descEle);
        searchEle.appendChild(coverEle);
        searchEle.appendChild(div);
        historyDiv?.appendChild(searchEle);
    }
}

window.onload = async () => {
    await historyLoad();
};