Angular: get updated records after comment added

Question

I have a post section in which user can add comments and reply. I have applied pagination logic to post section. When page loads initial 5 records of first page, I am displaying. Then I have reload button, on its click next 5 records of second page gets fetched from api and appended (concat used) to previous result like wise happens. I am calling getallpost function every time when reload button hits, when comment/reply gets added to get updated entries/data from api.

getallpost function.

getallpost() {
    this.formData = new FormData();
    this.formData.append("page", this.pageNumber);
    this.formData.append("perpage", this.perPageRecords);
    this.postService.getAllEventsPost(this.formData).subscribe((result) => {
     
        if (result['status'] === false) {
         
        } else {
          this.totalRecords = result.data.pagination.totalRecords;
          this.lastPage = result.data.pagination.LastPage;
          this.selectedpost = this.selectedpost.concat((result as any).data.data);
          this.selectedpost.map((item) => {
            item.show = false;
            item.isReadMore = true;
            item.isShow = true;
           
          });
        
        }
      
      });
  }

pageNumber = 1 , perPageRecords = 5 , selectedpost = [] are defined.

on Relaod button click function is as follows.

 onReloadbuttonClick() {
    this.pageNumber++;
    this.getallpost();
  }

When comment/reply gets added function is like below

 onSubmit(post_id) {
    this.loading = true;
    if (this.f.comment.value) {
      this.postService
        .addPostComment(this.id, post_id, this.f.comment.value)
        .subscribe((data) => {
          if (data['message'] === 'Token is Expired') {
            this.loading = false;
            this.authService.logout();
          } else {
            if (data['status'] === false) {
              if (data['errors']) {
                console.log(data['errors'][0].comment);
              }
              this.loading = false;
            } else {
              this.form.reset();
              this.getallpost();
           
              this.notifyService.showSuccess(
                'Comment added successfully!!',
                ''
              );
              this.loading = false;
            }
          }
        });
    } else {
      this.notifyService.showWarning('Please enter the comment.', '');
      this.loading = false;
      return;
    }
  }

Reload button works as expected. The problem I am facing is when I add comment/reply it gets added and success message gets displayed. But the comment I added not gets shown at that point even if I am calling getallpost function.

Its because of this.selectedpost = this.selectedpost.concat((result as any).data.data); this line current page number value new updated data gets fetched and appended again and not get replaced with new updated data. Means e.g. initially there are 5 records of first page fetched. After comment added to one of the post then getallpost function gets called and 5 records of first page gets called again having respective updated post with comment added. Ideally only data should get updated and should not get appended.

Which logic should I apply to get updated records in this.selectedpost after comment/reply added in above case without reloading/refreshing page (like without using location.reload etc)?

I have tried some logics but those are not working as expected with reload button.

Please guide and help. Thanks.

Answer 1

I am not sure whether I understood your problem statement properly or not.

Let me know if something is not making sense.

new updated data gets fetched and appended again and not get replaced with new updated data.

Just set selectedpost = [] each time you click on reload or before calling getAllPost() or inside of getAllPost() before assigning.

Which logic should I apply to get updated records in this.selectedpost after comment/reply added in above case without reloading/refreshing page

Call getAllPost inside onSubmit after successful addition of comment to avoid reload/refresh

         } else {
          this.form.reset();
          this.getallpost(); // You are already doing this.
       
          this.notifyService.showSuccess(
            'Comment added successfully!!',
            ''
          );

There will be a delay obviously in getting updated details from DB using API. Hence you can show the spinner at the comment section level and populate as soon as you get the details.

I am assuming your API returns a proper response after adding comments.