To fix the favourite button we can open our Question model then go to isFavorited method. In this method we'll see that we took the current user's id using auth()->id(). Note that auth() will use web authentication guard by default. That's why when working with API this method will return null.

So to fix this issue you have at least two options:

• Specify the api guard in the auth function call.

public function isFavorited()
{
    return $this->favorites()->where('user_id', auth('api')->id())->count() > 0;
}

• Or call auth() function from the request.

public function isFavorited()
{
  return $this->favorites()->where('user_id', request()->user()->id())->count() > 0;
}

Now if go to your browser and hit the favourite button it will working just fine.

Alright before we end this lesson let's replace the Back to all Questions button in the Question component

<div class="ml-auto">
  <a href="/questions" class="btn btn-outline-secondary">Back to all Questions</a>
</div>

With router-link component.

<router-link exact :to="{ name: 'questions' }" class="btn btn-outline-secondary">Back to all Questions</router-link>

Note that we specify exact attribute in the component. This will make sure that active class will only applied  if the path in the current url in exact match mode. If you didn't specify this attribute you will have the button active.

Summary

So now that we have almost complete functionalities in our single page application. Our next job is to show the current user's posts (answers and questions) in MyPostsPage component. And we'll do that in the next lesson.

Let's commit all changes into our git repo.

git add .
git commit -m "Fix some issues on QeustionPage component"
git push origin lesson-62