CS50W Project network, can't figure how to implement the Paginator

I've been trying to implement the paginator function for about two months now. I've tried many different approaches, but they always lead to new bugs.

In views.py, I load the posts and send them to JavaScript. In loadPosts and loadProfile, I pass the fetch function as a parameter to the buttons. Everything else works fine. The buttons call the fetch function, and the posts are displayed.

The issue is: once I load the second page of profile posts, then switch to loadPosts and click "next" again, it loads the profile posts instead. I’ve already tried using removeEventListener and flags, but I couldn’t figure out how to properly reset the event listener when switching between the functions.

[06/Jun/2025 09:01:10] "GET /post?start=0&end=9 HTTP/1.1" 200 825 [06/Jun/2025 09:01:10] "GET /post/new?start=0&end=9 HTTP/1.1" 200 810

// Switch between the pages: 

document.querySelector("#profile-link").addEventListener('click', function(event) {
        // Top left username, to load the profile
        loadProfile(loggedInUsername)
    });

document.querySelector("#index").addEventListener('click', function(event) {
        event.preventDefault();
        loadPosts()
    });



@csrf_exempt
def post_view(request, username = None):
    if request.method == "GET":
        # Loading all posts
        if username == None:
            posts = Post.objects.all().order_by('-date')
            start = int(request.GET.get("start") or 0 )
            end = int(request.GET.get("end") or (start + 9))
            posts_in_range = posts[start:end+1].values("text","date","user__username")
            return JsonResponse({"posts": list(posts_in_range)})
        else:
            # Loading a profile
            user = User.objects.get(username=username)
            user_id = user.id
            posts = Post.objects.filter(user_id=user_id).order_by('-date')
            start = int(request.GET.get("start") or 0 )
            end = int(request.GET.get("end") or (start + 9))
            posts_in_range = posts[start:end+1].values("text","date","user__username")
            return JsonResponse({"posts": list(posts_in_range)})



// Loads all the posts on the All Posts page
    function loadPosts() {
        let counter = 1;
        let start = (page - 1) * 10;
        let end = start + 9;
        if (page < 1) {
            page = 1
        }
        // Fetch all posts
        fetch(`/post?start=${start}&end=${end}`,null)
            .then(response => response.json())
            .then(data => {
                buttons(counter, `/post?start=${start}&end=${end}`)
                // Hidding buttons and content
                document.getElementById("slider").style.display = "none";
                document.querySelector("#following").innerHTML = "";
                document.querySelector("#posts").innerHTML = "";
                document.getElementById("new-post-form").style.display = "block";
                // buttons next and previous
                data.posts.forEach(add_Post);
            })
    }

    // Loading a profile page
    function loadProfile(username, loggedInUsername) {
        let counter = 1;
        let start = (page - 1) * 10;
        let end = start + 9;
        if (page < 1) {
            page = 1
        }
        // Fetch profile 
        fetch(`/post/${username}?start=${start}&end=${end}`)
            .then(response => response.json())
            .then(data => {
                console.log(username)
                buttons(counter, `/post/${username}?start=${start}&end=${end}`, username)
                document.getElementById("slider").style.display = "none";
                document.querySelector("#following").innerHTML = "";
                document.getElementById("new-post-form").style.display = "none";
                document.querySelector("#posts").innerHTML = "";
                // Checks if a username is already followed
                checkFollow(username)
                // Check if the logged in user wants to see his own profile
                if (username === loggedInUsername) {
                    // Hide the follow function so user cannot follow himself
                    document.getElementById("slider").style.display = "none";
                    // Loads posts
                    if (data.posts.length > 0) {
                        data.posts.forEach(add_Post);
                    }
                } else {
                    // Load profile content
                    document.getElementById("slider").style.display = "block";
                    const checkbox = document.querySelector('.switch input[type="checkbox"]');
                    checkbox.addEventListener('change', function(event) {
                        handleCheckboxChange(username);
                    });
                    if (data.posts.length > 0) {
                        data.posts.forEach(add_Post);
                    }
                }
            })
    }



    function buttons(counter, url, username) {
        const previous = document.getElementById("previous");
        const next = document.getElementById("next");
        console.log(username)

        // If no username fetch all posts
    if (!username) {
            function handleNextClick() {
            counter++;
            start = (counter - 1) * 10;
            end = start + 9;
            const newUrl = `/post?start=${start}&end=${end}`
            load(counter, newUrl, start, end);
        }

    function handlePreviousClick() {
            counter--;
            start = (counter - 1) * 10;
            end = start + 9;
            const newUrl = `/post?start=${start}&end=${end}`
            load(counter, newUrl, start, end);
        }


        }

        // load profile
        else {
        function handleNextClick() {
            counter++;
            start = (counter - 1) * 10;
            end = start + 9;
            const newUrl = `/post/${username}?start=${start}&end=${end}`
            load(counter, newUrl, start, end);
        }

        function handlePreviousClick() {
            counter--;
            start = (counter - 1) * 10;
            end = start + 9;
            const newUrl = `/post/${username}?start=${start}&end=${end}`
            load(counter, newUrl, start, end);
        }
    }

         function handleClick(event) {
                    if (event.target.id === "next") {
                        handleNextClick();
                    }
                    else if (event.target.id === "previous") {
                        handlePreviousClick();
                    }
                }
        fetch(url)
            .then(response => response.json())
            .then(data => {
                pageContainer.removeEventListener("click", handleClick);
                pageContainer.addEventListener("click", handleClick);
            });
        }

   // Loads the post after being called by buttons
    function load(page, newUrl, start, end) {
        console.log(load)
        fetch(newUrl)
            .then(response => response.json())
            .then(data => {
                // Clear previous posts
                document.querySelector("#posts").innerHTML = "";
                if (data.posts.length > 0) {
                    data.posts.forEach(add_Post);
                }
            });
    }

Вернуться на верх