Questions & Answers

I want to implement infinite scroll in sub comments, but I have no idea what to do. I've tried to push the addition data, but nothing is gonna work.

public function mount($link)
{
    $this->link = $link;
    $campaign = Campaign::where('status', 1)->where('link', $this->link)->first();

    if ($campaign) {
        $this->campaignId = $campaign->id;
        $this->campaign = $campaign;

        $this->comments = new Collection();
        $this->subComments = new Collection();
        $this->loadFirst();
    }
}

public function loadSubData($parentCommentId)
{
    $this->perPage++;

    $this->comments1 = Comment::orderBy('id', 'desc')->where('campaign_id', $this->campaignId)->cursorPaginate(3, ['*'], 'cursor', Cursor::fromEncoded($this->nextCursor));
    $this->comments1->getCollection()->transform(function ($value) use ($parentCommentId) {
        $datas = [];

        $userComment = User::where('id', $value->user_id)->first();
        $countSubComments = SubComment::orderBy('id', 'desc')->where('parent_comment_id', $value->id)->get();

        $datas['id'] = $value->id;
        $datas['user_id'] = $userComment;
        $datas['comment'] = $value->comment;
        $datas['updated_at'] = $value->updated_at;
        $datas['count_sub_comment'] = count($countSubComments);

        $this->subComments1 = SubComment::orderBy('id', 'desc')->where('parent_comment_id', $parentCommentId)->cursorPaginate($this->perPage, ['*'], 'cursor', Cursor::fromEncoded($this->nextCursorSubComment));
        $datas['sub_comments'] =  $this->subComments1->getCollection()->transform(function ($subValue) {
            $datas2 = [];

            $userSubComment = User::where('id', $subValue->user_id)->first();

            $datas2['id'] = $subValue->id;
            $datas2['user'] = $userSubComment;
            $datas2['sub_comment'] = $subValue->sub_comment;
            $datas2['updated_at'] = $subValue->updated_at;
            $datas2['has_more_pages'] = $this->subComments1->hasMorePages();

            return $datas2;
        });

        $this->subComments->push(...$datas['sub_comments']); // problem here

        return $datas;
    });
}

Actually, is more easier to do infinite scroll in parent comments, just add piece of code below:

public function loadMoreComments()
{
    if ($this->hasMorePages !== null  && !$this->hasMorePages) {
        return;
    }

    $this->loadAllData();

    $this->comments->push(...$this->comments1->items()); // $this->comments1 is new coming data

    if ($this->hasMorePages = $this->comments1->hasMorePages()) {
        $this->nextCursor = $this->comments1->nextCursor()->encode();
    }
}

But it's more tricky when I've tried this in sub comments.

So, the expectation when users click view more comments, loadSubData($id) is called.