Lingering Issue:
In the scenario where a user leaves a comment and subsequently opts to load more comments, they may encounter at least one duplicate comment.
Root Cause:
Using Laravel Pagination, the script leverages Axios to fetch the last 10 items. Upon adding a comment and fetching the next set of 10 items, the order shifts by one element, resulting in a repeated item.
Attempts to Resolve:
Initial Approach: I attempted utilizing Array.prototype.includes() or Lodash Includes:
data(){
return { items: [] };
}
...
addWithoutRedudancy(newItems){
for(let item of newItems){
if( ! _.includes( this.items, item ) ) this.items.push(item);
}
}
Challenges Faced:
Even with seemingly identical objects, when comparing $vm0.items[10] == $vm0.items[11], it returns false despite looking similar and having the same properties. This inconsistency hinders the detection of redundant objects. It's unclear why these objects are stored differently; perhaps due to asynchronous fetching via axios on different timings?
Furthermore, even if addressed, after a user posts 8 new comments, only 2 new comments are returned from pagination (controller), instead of the expected 10 following comments.
Alternate Attempt
/**
* Fetch all relevant comments.
*
* @param string $username
* @param Selllink $selllink
*/
public function index($username, $selllink)
{
//Route::prefix('/{username}/{selllink}
//Sellink gets the model of sell and loads all comments to that sell.
//get me the latest first (we want to see the current comments)
//take only 10 coments with paginatation
return $selllink->sell->comments()
->latest()
->offset($addedCommentsNumber??) //that can't work...
->paginate(10);
}
Challenges Persist: Offsetting the entire table isn't feasible. The goal is to offset paginated comments and incorporate the missing comments.
Resolution Needed
There must be a more efficient solution to address this issue, but the best approach remains elusive.
Additional Explanation (if required):
Utilizing a Vue Comment Component, I retrieve data from my CommentController employing Pagination:
methods: {
fetch(){
axios.get(this.url()).then(this.refresh);
},
url() {
this.page++;
return `${location.pathname}/comments?page=${this.page}`;
},
refresh({data}){
this.dataSet = data;
this.addWithoutRedudancy(data.data);
},
}
To access additional comments, users simply click the "load more" button triggering the retrieval of additional comments