0

I am trying to build a single page app but like twitter for cs50 web project using Django

I am using fetch API to get the all the posts on the site and use javascript to plug them in like this :

document.querySelector('#all-posts-view').innerHTML = '';

        fetch(`all_posts`,{
             headers: new Headers({ 'secure': 'secure'})
            })
        .then(response => response.json())
       
        .then(posts => {
             console.log(posts)

            posts.forEach(function(post) {
              
                let div = document.createElement("div");
                div.setAttribute('id', 'post'); 
                console.log(post.author)
                div.innerHTML = ` <a href='profile/${post.author}'   id='profile-page' data-profile=${post.author_id} data-name=${post.author} > <P>${post.timestamp}</p> <h1 class="capitalize">${post.author}</h1></a>  <h3>${post.post}</h3>  <p>${post.likes}</p> <button onclick='style.color = "blue"'>Likes</button> {%if ${post.author} == 'zero'%} zzz{%endif%}`
                document.querySelector("#all-posts-view").append(div);                                                
           })
        })

and each div has a button to like the post , but when the user click on the button and the likes go up by one I do not know how can I show to that user that the like button was clicked because if the page is refreshed the function will just show normal posts and the user will not be able to tell if he actually liked the post or not

When the button is clicked :

After refreshing: After refreshing:

So how can I keep the button clicked to that user ? do I need a global variable to represent the user? or is my approach is wrong in the first place?

this is my views.py to that function :

def all_posts(request):
    
    posts = Post.objects.all()
    posts = posts.order_by("-timestamp").all()
    return JsonResponse([post.serialize() for post in posts], safe=False)
unknown anonymous
  • 3
  • 2

1 Answers1

0

At first, you have to save the state that the user liked this post.

For example :

map : textPostId | UserIdentifier

You can save the state in persistent storage like a Database where you saved those posts or you can also save the state in browser storage (local, session storage).

Finally, you will retrieve states from storage and make a decision if the user liked this post or not.

Flow :

  1. while fetching the posts, you need to check which posts are liked by this user by checking states.

  2. Users see the posts when you fetch the posts with likes.

  3. when the user liked/unliked the post, then you will save that this user liked/unliked this post in storage.

  4. refresh the page and do step 1 again.

akash
  • 727
  • 5
  • 13
  • do you mean I should query twice with fetch? or can I send two lists when requests by fetch? – unknown anonymous Aug 16 '22 at 13:57
  • It's completely your decision. while fetching posts from django server, you can return the response like this `posts : [{ post...., isLiked : true/false }]` – akash Aug 17 '22 at 09:36