script.js

function loadDoc(url, func) {
    var xhttp = new XMLHttpRequest();
    xhttp.onload = function () {
        if (xhttp.status == 200) {
            func(xhttp.response);
        } else {
            console.log("Request failed:", url);
        }
    };
    xhttp.open("GET", url);
    xhttp.send();
}

function handleSignup() {
    var xhttp = new XMLHttpRequest();
    xhttp.onload = function () {
        var data = JSON.parse(xhttp.response);
        if (data.status == "ok") {
            window.location.href = "/feed";
        } else {
            document.getElementById("divMessage").innerHTML = data.message;
        }
    };

    xhttp.open("POST", "/signup", true);

    var formData = new FormData();
    formData.append("email", document.getElementById("txtEmail").value);
    formData.append("username", document.getElementById("txtUsername").value);
    formData.append("password", document.getElementById("txtPassword").value);

    xhttp.send(formData);
}

function handleLogin() {
    var xhttp = new XMLHttpRequest();
    xhttp.onload = function () {
        var data = JSON.parse(xhttp.response);
        if (data.status == "ok") {
            window.location.href = "/feed";
        } else {
            document.getElementById("divMessage").innerHTML = data.message;
        }
    };

    xhttp.open("POST", "/login", true);

    var formData = new FormData();
    formData.append("email", document.getElementById("txtEmail").value);
    formData.append("password", document.getElementById("txtPassword").value);

    xhttp.send(formData);
}

function handleLogout() {
    var xhttp = new XMLHttpRequest();
    xhttp.onload = function () {
        window.location.href = "/login";
    };
    xhttp.open("POST", "/logout", true);
    xhttp.send();
}

function loadFeed() {
    loadDoc("/api/feed", function (response) {
        var data = JSON.parse(response);
        var posts = data.posts;
        var currentUser = data.current_user;
        var temp = "";

        for (var i = 0; i < posts.length; i++) {
            var p = posts[i];
            var date = new Date(p.timestamp * 1000);
            var dateStr = date.toLocaleString();

            temp += "<div class='post_container' onclick=\"window.location.href='/post/" + p.post_id + "';\" style='cursor:pointer;'>";
            temp += "<b><a href='/profile/" + p.username + "' onclick='event.stopPropagation();'>@" + p.username + "</a></b><br/>";
            temp += "<div>" + p.content + "</div>";
            temp += "<div>" + dateStr + " <a href='/post/" + p.post_id + "' onclick='event.stopPropagation();'>[ reply ]</a>";

            if (p.username == currentUser) {
                temp += " <button onclick=\"event.stopPropagation(); deletePost('" + p.post_id + "');\">🗑</button>";
            }

            temp += "</div>";
            temp += "</div>";
        }

        document.getElementById("divFeed").innerHTML = temp;
    });
}

function createPost() {
    var xhttp = new XMLHttpRequest();
    xhttp.onload = function () {
        loadFeed();
        document.getElementById("txtPost").value = "";
    };

    xhttp.open("POST", "/api/post", true);

    var formData = new FormData();
    formData.append("content", document.getElementById("txtPost").value);

    xhttp.send(formData);
}

function loadProfile(username) {
    loadDoc("/api/profile/" + username, function (response) {
        var data = JSON.parse(response);

        if (data.status != "ok") {
            document.getElementById("divProfile").innerHTML = "Profile not found.";
            return;
        }

        var user = data.user;
        var posts = data.posts;
        var temp = "";

        temp += "<img src='" + user.photo_url + "?t=" + new Date().getTime() + "' width='120'><br/>";
        temp += "<h3>@" + user.username + "</h3>";

        if (data.is_own_profile) {
            temp += "<textarea id='txtPost' rows='3' style='width:95%;'></textarea><br/>";
            temp += "<button onclick='createPost();'>Post</button><hr/>";
        }

        for (var i = 0; i < posts.length; i++) {
            var p = posts[i];
            var date = new Date(p.timestamp * 1000);
            var dateStr = date.toLocaleString();

            temp += "<div class='post_container' onclick=\"window.location.href='/post/" + p.post_id + "';\" style='cursor:pointer;'>";
            temp += "<div>" + p.content + "</div>";
            temp += "<div>" + dateStr + " <a href='/post/" + p.post_id + "' onclick='event.stopPropagation();'>[ reply ]</a>";

            if (data.is_own_profile) {
                temp += " <button onclick=\"event.stopPropagation(); deletePost('" + p.post_id + "');\">🗑</button>";
            }

            temp += "</div>";
            temp += "</div>";
        }

        document.getElementById("divProfile").innerHTML = temp;
    });
}

function loadPost(postId) {
    loadDoc("/api/post/" + postId, function (response) {
        var data = JSON.parse(response);
        var post = data.post;
        var replies = data.replies;
        var temp = "";

        var postDate = new Date(post.timestamp * 1000);
        var postDateStr = postDate.toLocaleString();

        temp += "<div class='post_container'>";
        temp += "<b><a href='/profile/" + post.username + "'>@" + post.username + "</a></b><br/>";
        temp += post.content + "<br/>";
        temp += postDateStr;
        temp += "</div><hr/>";

        temp += "<textarea id='txtReply' rows='3' style='width:95%;'></textarea><br/>";
        temp += "<button onclick=\"createReply('" + postId + "');\">Reply</button><hr/>";

        for (var i = 0; i < replies.length; i++) {
            var r = replies[i];
            var replyDate = new Date(r.timestamp * 1000);
            var replyDateStr = replyDate.toLocaleString();

            temp += "<div class='reply_container'>";
            temp += "<b><a href='/profile/" + r.username + "'>@" + r.username + "</a></b>: ";
            temp += r.content + "<br/>";
            temp += "<small>" + replyDateStr + "</small>";
            temp += "</div>";
        }

        document.getElementById("divPost").innerHTML = temp;
    });
}

function createReply(postId) {
    var xhttp = new XMLHttpRequest();
    xhttp.onload = function () {
        loadPost(postId);
    };

    xhttp.open("POST", "/api/reply", true);

    var formData = new FormData();
    formData.append("post_id", postId);
    formData.append("content", document.getElementById("txtReply").value);

    xhttp.send(formData);
}

function deletePost(postId) {
    var xhttp = new XMLHttpRequest();
    xhttp.onload = function () {
        var data = JSON.parse(xhttp.response);
        if (data.status == "ok") {
            var usernameField = document.getElementById("hdnUsername");
            if (usernameField) {
                loadProfile(usernameField.value);
            } else {
                loadFeed();
            }
        } else {
            alert(data.message);
        }
    };

    xhttp.open("POST", "/api/delete_post", true);

    var formData = new FormData();
    formData.append("post_id", postId);

    xhttp.send(formData);
}

function uploadPhoto() {
    var usernameField = document.getElementById("hdnUsername");
    if (!usernameField) {
        console.log("No username field found");
        return;
    }

    var xhttp = new XMLHttpRequest();
    xhttp.onload = function () {
        loadProfile(usernameField.value);
    };

    xhttp.open("POST", "/api/upload_photo", true);

    var formData = new FormData();
    formData.append("photo", document.getElementById("filePhoto").files[0]);

    xhttp.send(formData);
}

console.log("Twitter project JS loaded");