Winston Wk 6 | API Implementation

Class Post():

    ...

    def to_dict(self):
        """
        Convert post to dict
        """

        return {
            "id": self.id,
            "header": self.header,
            "body": self.body,
            "imageLocation": self.imageLocation,
            "timestamp": self.timestamp,
            "user_id": self.user_id,
            "collections": self.collections
        }

    def to_json(self):
        """
        String representation of post in json
        """
        return json.dumps(self.to_dict(), default=str)

// Function to render the post's markdown and display it
function renderPost() {
    // Get the post data from the server
    const post = "{{ post | safe }}";

    // Take the body of the post and parse its markdown
    const body = marked.parse(
        `{{post.body}}`.replaceAll("&lt;", "<").replaceAll("&gt;", ">")
    );
    // Header doesn't need markdown parsing
    const header = "{{post.header}}";

    // Create the template, and fill in any variables that have been created through the replaceAll() function
    const template = `
            <div id="header">
                <h2 class="text-4xl">
                    <b>postHeader</b>
                    <i class="text-2xl"
                        >by
                        <a
                            href="{{ url_for('user', id=post.author.id )}}"
                            class="underline"
                            >{{ post.author.username }}</a
                        ></i
                    >
                    <br>
                    <i class="opacity-50 text-xl" id="saveButton">
                        {% if current_user.is_active %}
                        <button id="save">Save</button>
                        {% endif %}
                    </i>
                </h2>
            </div>
            <br />
            <div class="px-4" id="body">
                {% autoescape false %} postBody {% endautoescape %}
            </div>`
        .replaceAll("postHeader", header)
        .replaceAll("postBody", body);

    // Change the data in the postContainer to hold the new post
    const postContainer = document.getElementById("postContainer");
    postContainer.innerHTML = template;
}

// When the DOM is loaded, check if the user has saved the post
document.addEventListener("DOMContentLoaded", () => {
    if ("{{ current_user.is_active }}" == "True") {
        // In the case that the user is logged in, check if they have saved the post, else remove the button
        const postCollection = JSON.parse(
            eval(`{% if current_user.is_active %}
                '{{ current_user.collections[0].to_json() | safe }}'
            )['posts']
            {% else %}
            '[]'
            {% endif %}`)
        );
        // If the post is saved, disable it and change the text to 'Saved!'
        if (postCollection.includes(post)) {
            save.classList.add("disabled");
            save.innerHTML = "Saved!";
        }
    } else {
        save.innerHTML = "";
    }
    // If it's not saved, add an event listener to the button to save it
    if (save.classList.contains("disabled") == false) {
        save.addEventListener("click", async function () {
            // Feedback to say it's saving
            save.innerHTML = "Saving...";

            // time & time2 make sure that the saving animation is at least 1 second long so as to make it seem more trustworthy and not just a flash
            // https://www.youtube.com/watch?v=O6ZQ9r8a3iw - Why Some Apps Are Intentionally Slow - Cheddar Explains
            const time = new Date().getTime();
            await fetch("{{ url_for('save_post', id=post.id) }}", {
                method: "POST",
            });

            const time2 = new Date().getTime();
            if (time2 - time < 1000) {
                await wait(1000 - (time2 - time));
            }

            // After saving, disable the button, change the text to 'Saved!' and remove the event listener
            save.classList.add("disabled");
            save.innerHTML = "Saved!";
            save.removeEventListener("click", this);
        });
    }
});

# IMPORTANT NOTE: THIS CODE IS NOT TESTED AND MAY CONTAIN ERRORS

# API Endpoints
@app.route('/api', methods=["POST"])
def api():
    # Flask jsonify funtion to return a JSON response
    return jsonify(response="Invalid request", status="error"), 400

@app.route('/api/posts', methods=["POST"])
def api_posts():
    """
    Get post by id
    """
    # Get any data associated with the request
    data = request.get_json()

    # If there is no data or the data doesn't contain a post id, return an error
    if not data or not data.get('id'):
        return jsonify(response="Invalid request", status='error'), 400

    post = Post.query.get(data.get('id'))

    # If the post doesn't exist, return an error
    if not post:
        return jsonify(response="Post not found", status='error'), 404

    # Create a response dictionary to be returned which contains the post data and associated data
    response = {
        'id': post.id,
        'subject': post.subject,
        'body': post.body,
        'timestamp': post.timestamp,
        'user_id': post.user_id,
        'comments': {
            comment.id: {
                'id': comment.id,
                'body': comment.body,
                'timestamp': comment.timestamp,
                'user_id': comment.user_id,
                'post_id': comment.post_id,
            } for comment in post.comments.all()
        },
    }

    # Return the response
    return jsonify(**response), 200


@app.route('/api/posts/all', methods=["POST"])
def api_posts_all():
    """
    Get all posts
    """

    # Get all posts
    posts = Post.query.all()

    # Create a response dictionary to be returned which contains the post data and associated data
    response = {
        'posts': {
            post.id: {
                'id': post.id,
                'subject': post.subject,
                'body': post.body,
                'timestamp': post.timestamp,
                'user_id': post.user_id,
                'comments': {
                    comment.id: {
                        'id': comment.id,
                        'body': comment.body,
                        'timestamp': comment.timestamp,
                        'user_id': comment.user_id,
                        'post_id': comment.post_id,
                    } for comment in post.comments.all()
                }
            } for post in posts
        }
    }, 200

    # Return the response
    return jsonify(**response), 200