Forem: Silver343

Chrip Beyond (Bootcamp) part 5 Pagination

Silver343 — Tue, 30 Jan 2024 12:09:24 +0000

As you have built chirper you may have built up a large amount of chirps, as this number grows chirp index page will start taking longer to load.

We can demonstrait this using seeders.

Seeders

Seeders allow us to create large amounts of data. In a larger application, you may have a different seeder class for each of the models, but to keep things simple, we will update the included DatabaseSeeder.

In the DatabaseSeeder we can use our model factories to create the data. We want a user with chirps, followers, and users to follow all with their own chirps.

<?php

namespace Database\Seeders;

// use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use App\Models\Chirp;
use App\Models\User;
use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    public function run(): void
    {
        User::factory()
            ->has(Chirp::factory()->count(200))
            ->has(
                User::factory()
                    ->count(30)
                    ->has(Chirp::factory()->count(200)),
                'follows'
            )
            ->has(
                User::factory()
                    ->count(30)
                    ->has(Chirp::factory()->count(200)),
                'followers'
            )
            ->createQuietly(['email' => 'test@test.com']);
    }
}

We are defining our users email address manually so we can easily login. To run the seeder you can use the command php artisan db:seed or you can run it when refreshing your database by using the command php artisan migrate:fresh --seed

If you run one of these commands, and visit the chirp index page, you should find your application start to slow down as it loads the chirps into memory as the page is requested.

Our solution to this problem will be pagination. Pagination allows us to separate the data into different pages.

Laravel provides several methods of pagination.

As we only need the url for the next page and previous page we can use the simple pagination.

A new Pagination component

Create a new file in the resources/js/Components called Pagination.vue that will contain links to the next and previous pages.

The component will accept two props, the URL for the next page of results and the URL for the previous page of results.

<script setup>

import { Link } from '@inertiajs/vue3';

defineProps(['nextUrl', 'prevUrl'])

</script>
<template>
   <nav v-if="prevUrl || nextUrl" class="flex place-content-around bg-white px-4 py-3 sm:px-6 mt-6 rounded-lg" aria-label="Pagination">        <Link v-if="prevUrl" :href="prevUrl" class="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0">Previous</Link>
        <Link v-if="nextUrl" :href="nextUrl" class="relative ml-3 inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0">Next</Link>
    </nav>
</template>

The design of this component is based on one from Tailwind UI.

Updating Controllers

Laravel makes using pagination simple by providing eloquent methods.

To use pagination within the Chirp index page, we need to update the ChirpControllers index method. Replace the get() method with the SimplePagination() method.

 /**
 * Display a listing of the resource.
 */
 public function index(Request $request): Response
 {
     return Inertia::render('Chirps/Index', [
         'chirps' => Chirp::with('user:id,name')
            ->when($request->input('filter') === 'true', fn($q) =>
             $q->whereIn(
                 'user_id',
                 Auth()->user()->follows->pluck('id')
                 ->merge(Auth()->id())
             )
         )
         ->latest()
-         ->get(),
+         ->simplePaginate(25)
        ]);
    }

We are now using pagination, but if you return to the Chirp Index page, it will no longer work.

When using pagination, not only is the collection of models returned but other information too, for example, the next page URL. The collection of models is wrapped around a data property, so we need to update our Chirps/Index.vue page to use this new data property. We can also use the pagination component we created earlier.

 <script setup>
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
 import Chirp from '@/Components/Chirp.vue';
 import InputError from '@/Components/InputError.vue';
 import PrimaryButton from '@/Components/PrimaryButton.vue';
 import Tabs from '@/Components/Tabs.vue';
 import { useForm, Head } from '@inertiajs/vue3';
+ import Pagination from '@/Components/Pagination.vue';

defineProps(['chirps']);

const tabs = [
    {href:route('chirps.index', { filter: 'false'}), active:route().current('chirps.index', { filter: 'false'}), only:['chirps'], text:'All'},
    {href:route('chirps.index', { filter: 'true'}), active:route().current('chirps.index', { filter: 'true'}), only:['chirps'],  text:'Following'},
]

const form = useForm({
    message: '',
});
</script>

<template>
    <Head title="Chirps" />

    <AuthenticatedLayout>
        <div class="max-w-2xl mx-auto p-4 sm:p-6 lg:p-8">
            <form @submit.prevent="form.post(route('chirps.store'), { onSuccess: () => form.reset() })">
                <textarea
                    v-model="form.message"
                    placeholder="What's on your mind?"
                    class="block w-full border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm"
                ></textarea>
                <InputError :message="form.errors.message" class="mt-2" />
                <PrimaryButton class="mt-4">Chirp</PrimaryButton>
            </form>

            <Tabs :tabs="tabs"/>

            <div class="mt-6 bg-white shadow-sm rounded-lg divide-y">
                <Chirp
-                    v-for="chirp in chirps"
+                    v-for="chirp in chirps.data"
                    :key="chirp.id"
                    :chirp="chirp"
                />
            </div>
+            <Pagination :nextUrl="chirps.next_page_url" :prevUrl="chirps.prev_page_url"/>
        </div>
    </AuthenticatedLayout>
 </template>

If you have more than 15 chirps in your app you should now see a next button at the bottom of the page, after clicking it you will see ?page=2 at the end of the URL and a new list of chirps.

There are a couple of improvements we can make to our pagination experience. As you navigate between the pages of chirps, you will notice that the filter query parameter is not carried from the first page. It can be included in the pagination links by adding ->withQueryString() after the simplePagination() method.

If you visit the second page of chirps and then update or delete a Chirp, you will be redirected to the first page of results with no filter query string. To resolve this update the update() and destroy() methods of the chirpController to not return to a specific route but to return to the request route.

     /**
     * Update the specified resource in storage.
     */
    public function update(Request $request, Chirp $chirp): RedirectResponse
    {
        $this->authorize('update', $chirp);

        $validated = $request->validate([
            'message' => 'required|string|max:255'
        ]);

         $chirp->update($validated);
-        return redirect(route('chirps.index'));
+        return back();
    }

    /**
     * Remove the specified resource from storage.
     */
    public function destroy(Chirp $chirp): RedirectResponse
    {
         $this->authorize('delete', $chirp);

         $chirp->delete();
-        return redirect(route('chirps.index'));
+        return back();
    }

If you try again, you will stay on the same page, but you will be at the top of the page. Use the preserveScroll property of the inertia form help and link component inside the Chirp component to stop this.

 <script setup>
import Dropdown from '@/Components/Dropdown.vue';
import DropdownLink from '@/Components/DropdownLink.vue';
import InputError from '@/Components/InputError.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import { Link, useForm } from '@inertiajs/vue3';
import { ref } from 'vue';

dayjs.extend(relativeTime);

const props = defineProps(['chirp']);

const form = useForm({
    message: props.chirp.message,
});

const editing = ref(false);
</script>

<template>
    <div class="p-6 flex space-x-2">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 -scale-x-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
        </svg>
        <div class="flex-1">
            <div class="flex justify-between items-center">
                <div>
                    <Link :href="route('profile.show', chirp.user.id)" class="text-gray-800 hover:text-gray-500 hover:underline focus:text-gray-500 active:text-gray-900 capitalize">{{ chirp.user.name }}</Link>
                    <small class="ml-2 text-sm text-gray-600">{{ dayjs(chirp.created_at).fromNow() }}</small>
                    <small v-if="chirp.created_at !== chirp.updated_at" class="text-sm text-gray-600"> &middot; edited</small>
                </div>
                <Dropdown v-if="chirp.user.id === $page.props.auth.user.id">
                   <template #trigger>
                        <button>
                           <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                               <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" />
                           </svg>
                       </button>
                   </template>
                   <template #content>
                        <button class="block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:bg-gray-100 transition duration-150 ease-in-out" @click="editing = true">
                            Edit
                        </button>
-                        <DropdownLink as="button" :href="route('chirps.destroy', chirp.id)" method="delete">
+                        <DropdownLink as="button" :href="route('chirps.destroy', chirp.id)" method="delete" :only="['chirps', 'errors']" preserveScroll>
                            Delete
                        </DropdownLink>
                    </template>
                </Dropdown>
            </div>
-            <form v-if="editing" @submit.prevent="form.put(route('chirps.update', chirp.id), { onSuccess: () => editing = false })">
+            <form v-if="editing" @submit.prevent="form.put(route('chirps.update', chirp.id), { onSuccess: () => editing = false, only:['chirps', 'errors'], preserveScroll:true})">
                <textarea v-model="form.message" class="mt-4 w-full text-gray-900 border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm"></textarea>
                <InputError :message="form.errors.message" class="mt-2" />
                <div class="space-x-2">
                    <PrimaryButton class="mt-4">Save</PrimaryButton>
                    <button class="mt-4" @click="editing = false; form.reset(); form.clearErrors()">Cancel</button>
                </div>
            </form>
            <p v-else class="mt-4 text-lg text-gray-900">{{ chirp.message }}</p>
        </div>
    </div>
 </template>

Profile Controller

To use pagination within the show() method of our profileController, we must separate retrieving the Chirps and setting their user relationship, we can use a temporary variable to accomplish this.

we can then use the new $chirps variable in the Inertia::render() method.

 public function show(User $user): Response
 {
+        $chirps =  $user->chirps()->latest()->simplePaginate(25);
+        $chirps->map(fn (Chirp $chirp) => $chirp->setRelation('user',$user));

        return Inertia::render('Profile/Show',[
            'user' => fn() => $user->loadCount(['followers', 'follows'])->only(['id', 'name', 'created_at', 'followers_count', 'follows_count']),
-            'chirps' => $user->chirps()->latest()->get()->map(fn (Chirp $chirp) => $chirp->setRelation('user',$user)),
+            'chirps' => $chirps,
            'following' => fn () => Auth()->user()->follows()->where('user_id', $user->id)->exists(),
        ]);
 }

Update the Profile/Show.vue page to use the now paginated Chirps.

 <script setup>
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
 import Heading from '@/Components/Heading.vue';
 import Chirp from '@/Components/Chirp.vue';
+import Pagination from '@/Components/Pagination.vue';
 import { Head } from '@inertiajs/vue3';

 defineProps(['user','chirps', 'following']);
 </script>

 <template>
     <Head :title="user.name" />

     <AuthenticatedLayout>
         <Heading :user="user" :following="following"/>
         <div class="max-w-2xl mx-auto p-4 sm:p-6 lg:p-8">
             <div class="mt-6 bg-white shadow-sm rounded-lg divide-y">
                 <Chirp
-                    v-for="chirp in chirps"
+                    v-for="chirp in chirps.data"
                     :key="chirp.id"
                     :chirp="chirp"
                 />
             </div>
+            <Pagination :nextUrl="chirps.next_page_url" :prevUrl="chirps.prev_page_url"/>
         </div>
     </AuthenticatedLayout>
 </template>

Follow Controller and ListFollowers

We did need to separate the fetching of the data and hiding the pivot data in the followController and ListFollowersController index methods.

followController

 public function index(User $user): Response
 {
        $following = $user
                ->follows()
                ->orderByPivot('created_at','desc')
                ->select('user_id as id', 'name')
                ->addSelect(['following' => function ($query) {
                $query->select('id as following')
                    ->from('follower_user')
                    ->whereColumn('follower_id', Auth()->id())
                    ->whereColumn('user_id', 'users.id');
                }])
-                ->get()->makeHidden('pivot');
+                ->simplePaginate(25, []);
+        $following->map(fn ($user) => $user->makeHidden('pivot'));

        return Inertia::render('Follow/Index', [
            'user' => $user->only(['id', 'name']),
            'users' => fn() => $following,
        ]);

 }

listFollowersController

namespace App\Http\Controllers;

use App\Models\User;
use Inertia\Response;
use Inertia\Inertia;

class ListFollowers extends Controller
{
    /**
     * Handle the incoming request.
     */
    public function __invoke(User $user): Response
    {
        $followers = $user
            ->followers()
            ->orderByPivot('created_at','desc')
            ->select('follower_id as id', 'name')
            ->addSelect(['following' => function ($query) {
                $query->select('id as following')
                    ->from('follower_user')
                    ->whereColumn('follower_id', Auth()->id())
                    ->whereColumn('user_id', 'users.id');
            }])
-            ->get()->makeHidden('pivot');
+            ->simplePaginate(25, []);
+            $followers->map(fn ($user) => $user->makeHidden('pivot'));

        return Inertia::render('Follow/Index', [
            'user' => $user->only(['id', 'name']),
            'users' => fn() => $followers,
        ]);
    }
}

Update the Follow/index.vue page to use the now paginated data.

 <script setup>
+import Pagination from '@/Components/Pagination.vue';
 import Tabs from '@/Components/Tabs.vue';
 import UserCard from '@/Components/UserCard.vue';
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
 import { Link, Head } from '@inertiajs/vue3';

 const props = defineProps(['user', 'users']);

 const tabs = [
     {href:route('followers', props.user.id), active:route().current('followers', props.user.id), text:'Followers'},
     {href:route('follow.index', props.user.id), active:route().current('follow.index', props.user.id), text:'Following'},
 ]

 </script>
 <template>
      <Head>
         <title v-if="route().current('followers')">{{ user.name }} Followers</title>
         <title v-else>{{ user.name }} Follows</title>
      </Head>

     <AuthenticatedLayout>

         <h1 class="bg-white p-6 lg:p-8">
             <Link :href="route('profile.show',user.id)" class="text-2xl font-bold text-gray-900 capitalize hover:text-gray-500 hover:underline focus:text-gray-500 active:text-gray-950">{{ user.name }} </Link>
         </h1>

         <div class="max-w-2xl mx-auto p-4 sm:p-6 lg:p-8">
             <Tabs :tabs="tabs"/>
             <div class="divide-y bg-white mt-6 rounded-lg">
                 <UserCard
-                    v-for="user in users"
+                    v-for="user in users.data"
                     :user="user"
                 />
             </div>
+            <Pagination :nextUrl="users.next_page_url" :prevUrl="users.prev_page_url"/>
         </div>
     </AuthenticatedLayout>
 </template>

Testing

if you run the test command php artisan test Several tests fail, these tests need updating to take into account the model data is inside the pagination object.

ChirpControllerTest

    public function test_index_has_chirps()
    {
        $user = User::factory()->create();

        $chirp = Chirp::factory(1)->create();

        $this->actingAs($user);

        $this->get(route('chirps.index'))
            ->assertInertia(fn (Assert $page) => $page
                ->component('Chirps/Index')
-                ->has('chirps', 1, fn (Assert $page) => $page
-                    ->where('message', $chirp->first()->message)
-                    ->etc()
-                    ->has('user', fn (Assert $page) => $page
-                        ->where('id', $chirp->first()->user_id)
-                        ->where('name', $chirp->first()->user->name)
-                        ->missing('password')
+                ->has('chirps', fn (Assert $page) => $page
+                    ->has('data', 1, fn (Assert $page) => $page
+                        ->where('message', $chirp->first()->message)
+                        ->etc()
+                        ->has('user', fn (Assert $page) => $page
+                            ->where('id', $chirp->first()->user_id)
+                            ->where('name', $chirp->first()->user->name)
+                            ->missing('password')
+                        )
                    )
+                    ->has('next_page_url')
+                    ->has('prev_page_url')
+                    ->etc()
                )
            );
    }

    public function test_only_chirps_by_people_the_user_follows_are_returned_if_filter_is_true()
    {
        $following = User::factory()
            ->has(Chirp::factory())
            ->create();

        $user = User::factory()
            ->hasAttached($following,[],'follows')
            ->create();

        $nonFollowedChirps = Chirp::factory(10)->create();

        $this->actingAs($user)
            ->get(route('chirps.index', ['filter' => 'true']))
            ->assertInertia(fn (Assert $page) => $page
                ->component('Chirps/Index')
-                ->has('chirps', 1, fn (Assert $page) => $page
-                    ->where('message', $following->chirps->first()->message)
-                    ->etc()
-                    ->has('user', fn (Assert $page) => $page
-                        ->where('id', $following->id)
-                        ->where('name', $following->name)
-                        ->missing('password')
-                        ->missing('email')
+                ->has('chirps', fn (Assert $page) => $page
+                    ->has('data', 1, fn (Assert $page) => $page
+                        ->where('message', $following->chirps->first()->message)
+                        ->etc()
+                        ->has('user', fn (Assert $page) => $page
+                            ->where('id', $following->id)
+                            ->where('name', $following->name)
+                            ->missing('password')
+                            ->missing('email')
+                        )
                    )
+                    ->has('next_page_url')
+                    ->has('prev_page_url')
+                    ->etc()
                )
        );
    }

We also need to update the test_chirp_can_be_updated test and the test_chirp_can_be_deleted test as we are now using the back() method to redirect the user, this can be fixed by visiting the Chirp Index page in the test before making the update or delete action.

 public function test_chirp_can_be_updated()
 {
     $chirp = Chirp::factory()->create();

     $this->actingAs($chirp->user);
+    $this->get(route('chirps.index'));

     $response = $this->patch(route('chirps.update', $chirp),['message' => 'test new message']);

     $this->assertDatabaseHas('chirps', [
         'message' => 'test new message',
     ]);

     $response->assertRedirect(route('chirps.index'));
 }

 public function test_chirp_can_be_deleted()
 {
     $chirp = Chirp::factory()->create();

     $this->assertDatabaseCount('Chirps',1);

     $this->actingAs($chirp->user);
+    $this->get(route('chirps.index'));

     $response = $this->delete(route('chirps.destroy',$chirp));

     $response->assertRedirect(route('chirps.index'));

     $this->assertDatabaseEmpty('chirps');
 }

ProfileTest

public function test_chirps_belonging_to_profile_owner_are_included(): void
    {
        $user = User::factory()
                    ->create();

        $profileUser = User::factory()
                    ->has(User::factory()->count(2),'followers')
                    ->has(User::factory()->count(3),'follows')
                    ->has(Chirp::Factory()->count(5))
                    ->create();

        $this->actingAs($user)
            ->get(route('profile.show',$profileUser->id))
            ->assertInertia(fn (Assert $page) => $page
                ->component('Profile/Show')
                ->has('user', fn (Assert $page) => $page
                    ->where('id', $profileUser->id)
                    ->where('name', $profileUser->name)
                    ->where('followers_count', $profileUser->followers()->count())
                    ->where('follows_count', $profileUser->follows()->count())
                    ->missing('email')
                    ->missing('password')
                    ->etc()
                )
-                ->has('chirps', 5, fn (Assert $page) => $page
-                    ->where('id', $profileUser->chirps()->first()->id)
-                    ->where('message', $profileUser->chirps()->first()->message)
-                    ->etc()
-                    ->has('user', fn (Assert $page) => $page
-                        ->where('id', $profileUser->id)
+                ->has('chirps', fn (Assert $page) => $page
+                    ->has('data', 5, fn(Assert $page) => $page
+                        ->where('id', $profileUser->chirps()->first()->id)
+                        ->where('message', $profileUser->chirps()->first()->message)
                        ->etc()
+                        ->has('user', fn (Assert $page) => $page
+                            ->where('id', $profileUser->id)
+                            ->etc()
+                        )
                    )
+                    ->has('next_page_url')
+                    ->has('prev_page_url')
+                    ->etc()
                )
                ->has('following')
        );
    }

    public function test_chirps_belonging_to_other_uses_are_not_included(): void
    {
        $user = User::factory()
                ->has(User::factory()->count(2),'followers')
                ->has(User::factory()->count(3),'follows')
                ->create();

        $otherUser = User::factory()
                    ->has(Chirp::Factory()->count(5))
                    ->create();

        $this->actingAs($user)
            ->get(route('profile.show',$user->id))
            ->assertInertia(fn (Assert $page) => $page
                ->component('Profile/Show')
                ->has('user', fn (Assert $page) => $page
                    ->where('id', $user->id)
                    ->where('name', $user->name)
                    ->where('followers_count', $user->followers()->count())
                    ->where('follows_count', $user->follows()->count())
                    ->missing('email')
                    ->missing('password')
                    ->etc()
                )
-                ->has('chirps',0)
+                ->has('chirps.data',0)
                 ->has('following')
            );
    }

FollowControllerTest

 public function test_users_can_see_who_each_other_are_following()
    {
        $user = User::factory()
            ->has(User::factory(3),'follows')
            ->create();

        $otherUser = User::factory()
            ->create();

        $this->actingAs($otherUser)
            ->get(route('follow.index', $user->id))
            ->assertInertia(fn (Assert $page) => $page
                ->component('Follow/Index')
                ->has('user', fn (Assert $page) => $page
                    ->where('id', $user->id)
                    ->where('name', $user->name)
                    ->missing('password')
                    ->missing('email')
                )
-                ->has('users', 3, fn (Assert $page) => $page
-                    ->where('id', $user->follows()->first()->id)
-                    ->where('name', $user->follows()->first()->name)
-                    ->where('following', null)
+                ->has('users', fn (Assert $page) => $page
+                    ->has('data', 3, fn (Assert $page) => $page
+                        ->where('id', $user->follows()->first()->id)
+                        ->where('name', $user->follows()->first()->name)
+                        ->where('following', null)
                    )
+                    ->has('next_page_url')
+                    ->has('prev_page_url')
+                    ->etc()
+                )
            );
    }

    public function test_follow_property_depends_on_auth_user()
    {
        $following = User::factory();

        $user = User::factory()
            ->has($following,'follows')
            ->create();

        $otherUser = User::factory()->create();

        $this->actingAs($otherUser)
            ->get(route('follow.index', $user->id))
            ->assertInertia(fn (Assert $page) => $page
                ->component('Follow/Index')
-                ->has('users', 1, fn (Assert $page) => $page
-                    ->where('id', $user->follows()->first()->id)
-                    ->where('name', $user->follows()->first()->name)
-                    ->where('following', null)
+                ->has('users', fn (Assert $page) => $page
+                    ->has('data', 1, fn (Assert $page) => $page
+                        ->where('id', $user->follows()->first()->id)
+                        ->where('name', $user->follows()->first()->name)
+                        ->where('following', null)
                    )
+                    ->has('next_page_url')
+                    ->has('prev_page_url')
+                    ->etc()
+                )
            );

        $this->actingAs($user)
            ->get(route('follow.index', $user->id))
            ->assertInertia(fn (Assert $page) => $page
                ->component('Follow/Index')
-                ->has('users', 1, fn (Assert $page) => $page
-                    ->where('id', $user->follows()->first()->id)
-                    ->where('name', $user->follows()->first()->name)
-                    ->whereNot('following', null)
+                ->has('users', fn (Assert $page) => $page
+                    ->has('data', 1, fn (Assert $page) => $page
+                        ->where('id', $user->follows()->first()->id)
+                        ->where('name', $user->follows()->first()->name)
+                        ->whereNot('following', null)
                    )
+                    ->has('next_page_url')
+                    ->has('prev_page_url')
+                    ->etc()
+                )
            );

    }

ListFollowersTest

public function test_users_can_see_who_is_following_a_particular_user()
    {
        $user = User::factory()
            ->has(User::factory(3),'followers')
            ->create();

        $otherUser = User::factory()
            ->create();

        $this->actingAs($otherUser)
            ->get(route('followers', $user->id))
            ->assertInertia(fn (Assert $page) => $page
                ->component('Follow/Index')
                ->has('user', fn (Assert $page) => $page
                    ->where('id', $user->id)
                    ->where('name', $user->name)
                    ->missing('password')
                    ->missing('email')
                )
-                ->has('users', 3, fn (Assert $page) => $page
-                    ->where('id', $user->followers()->first()->id)
-                    ->where('name', $user->followers()->first()->name)
-                    ->where('following', null)
+                ->has('users', fn (Assert $page) => $page
+                    ->has('data', 3, fn (Assert $page) => $page
+                        ->where('id', $user->followers()->first()->id)
+                        ->where('name', $user->followers()->first()->name)
+                        ->where('following', null)
                    )
+                    ->has('next_page_url')
+                    ->has('prev_page_url')
+                    ->etc()
+                )
            );
    }

    public function test_follow_property_depends_on_auth_user()
    {
        $follower = User::factory()->create();

        $user = User::factory()->create();

        $user->follows()->attach($follower);
        $user->followers()->attach($follower);

        $otherUser = User::factory()->create();

        $this->actingAs($otherUser)
            ->get(route('followers', $user->id))
            ->assertInertia(fn (Assert $page) => $page
                ->component('Follow/Index')
-                ->has('users', 1, fn (Assert $page) => $page
-                    ->where('id', $user->followers()->first()->id)
-                    ->where('name', $user->followers()->first()->name)
-                    ->where('following', NULL)
+                ->has('users', fn (Assert $page) => $page
+                    ->has('data', 1, fn (Assert $page) => $page
+                        ->where('id', $user->followers()->first()->id)
+                        ->where('name', $user->followers()->first()->name)
+                        ->where('following', NULL)
                    )
+                    ->has('next_page_url')
+                    ->has('prev_page_url')
+                    ->etc()
+                )
            );

        $this->actingAs($user)
            ->get(route('followers', $user->id))
            ->assertInertia(fn (Assert $page) => $page
                ->component('Follow/Index')
-                ->has('users', 1, fn (Assert $page) => $page
-                    ->where('id', $follower->id)
-                    ->where('name', $follower->name)
-                    ->whereNot('following', null)
+                ->has('users', fn (Assert $page) => $page
+                    ->has('data', 1, fn (Assert $page) => $page
+                        ->where('id', $follower->id)
+                        ->where('name', $follower->name)
+                        ->whereNot('following', null)
                    )
+                    ->has('next_page_url')
+                    ->has('prev_page_url')
+                    ->etc()
+                )
            );

    }

Chirp Beyond (Bootcamp) part 4 Who's Following Who

Silver343 — Wed, 27 Dec 2023 17:15:21 +0000

Previously we added the ability for users to follow each other, but there is no way for users to see who is following them and who they are following.

We can solve this with a couple of new pages where we list the followers or users who are user are following.

Before we add the new pages, there is an issue we overlooked.

Notifying users who aren’t verified

We set up the app so that users must verify their email addresses before they can follow each other, but the user they are following may have yet to verify their email address; this is an issue as we may now be sending email notifications to an unverified email.

We can solve this by checking if the user's email address is verified before notifying them in our SendNewFollowerNotifications.

<?php

namespace App\Listeners;

use App\Events\UserFollowed;
use App\Notifications\NewFollower;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Queue\InteractsWithQueue;

class SendNewFollowerNotifications implements ShouldQueue
{
    /**
     * Create the event listener.
     */
    public function __construct()
    {
        //
    }

    /**
     * Handle the event.
     */
    public function handle(UserFollowed $event): void
    {
+        if(! $event->user->hasVerifiedEmail()){
+            return;
+        }

        $event->user->notify(new NewFollower($event->follower));
    }
}

We check if the user has verified their email and if they haven’t we return early.

We will add a new test to the SendNewFollowerNotificationsTest file to check this works.

public function test_notification_is_not_sent_to_unverified_email()
    {
        Notification::fake();

        $user = User::factory()->unverified()->create();
        $follower = User::factory()->create();

        $event = new UserFollowed($user, $follower);
        $listener = New SendNewFollowerNotifications();

        $listener->handle($event);

        Notification::assertNothingSent();
    }

Who are you following

To create a new page to list the other users followed by a particular user, we will use the index method of the FollowController for this.

Let's create a new route that points to the index method.

Route::get('users/{user}/following', [FollowController::class, 'index'])->middleware('verified')->name('follow.index');

In the index method, we want to return a new page and include the user whose information we are looking at and a list of the users they are following.

public function index(User $user): Response
-   //
+    {
+        $following = $user
+                ->follows()
+                ->orderByPivot('created_at','desc')
+                ->select('user_id as id', 'name')
+                ->addSelect(['following' => +function ($query) {
+                $query->select('id as following')
+                    ->from('follower_user')
+                    ->whereColumn('follower_id', Auth()->id())
+                    ->whereColumn('user_id', 'users.id');
+                }])
+                ->get()->makeHidden('pivot');
+        return Inertia::render('Follow/Index', [
+            'user' => $user->only(['id', 'name']),
+            'following' => fn() => $following,
+        ]);

As well as querying the users followed by the authenticated user, we are also using a subquery to confirm if each of the users is being followed by the authenticated user.

Let’s create a new page to render our data. Create a new Vue file at resources/js/Pages/Follow/Index.vue

<script setup>

import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import { Link, Head } from '@inertiajs/vue3';

const props = defineProps(['user', 'following']);

</script>
<template>
     <Head>
        <title>{{ user.name }} Follows</title>
     </Head>

    <AuthenticatedLayout>

        <h1 class="bg-white p-6 lg:p-8">
            <Link :href="route('profile.show',user.id)" class="text-2xl font-bold text-gray-900 capitalize hover:text-gray-500 hover:underline focus:text-gray-500 active:text-gray-950">{{ user.name }} Follows</Link>
        </h1>

    </AuthenticatedLayout>
</template>

We will create a new component UserCard, to render the users details.

In UserCard we want to show the user's name and give them an option to follow or unfollow the user unless the user is the authenicated user.

<script setup>

import PrimaryButton from './PrimaryButton.vue';
import SecondaryButton from './SecondaryButton.vue';

import { useForm, Link } from '@inertiajs/vue3';

const props = defineProps(['user']);

const follow = useForm({
    id: props.user.id,
});

const unfollow = useForm({});

</script>

<template>
    <div class="flex items-center justify-between space-x-6 p-6">
        <div class="flex gap-x-4">
            <div class="min-w-0 flex-auto">
                <Link :href="route('profile.show', user.id)" class="text-md font-semibold leading-6 text-gray-800 capitalize hover:text-gray-500 hover:underline focus:text-gray-500 active:text-gray-900">{{ person.name }}</Link>
            </div>
        </div>
        <template v-if="user.id !== $page.props.auth.user.id">
            <form v-if="!user.following" @submit.prevent="follow.post(route('follow.store'), {
                preserveScroll: true,
                only:['following']
            })">
                <PrimaryButton>Follow</PrimaryButton>
            </form>
            <form v-if="user.following" @submit.prevent="unfollow.delete(route('follow.destroy', user.id), {
                preserveScroll: true,
                only:['following']
            })">
                <SecondaryButton type="submit">Unfollow</SecondaryButton>
            </form>
        </template>
    </div>
</template>

The styling for this component is adapted from this Tailwind UI component.

Add this component to the Index page.

 <script setup>

 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
 import { Link, Head } from '@inertiajs/vue3';

 const props = defineProps(['user', 'following']);

 </script>
 <template>
   <Head>
        <title>{{ user.name }} Follows</title>
   </Head>

   <AuthenticatedLayout>

     <h1 class="bg-white p-6 lg:p-8">
        <Link :href="route('profile.show',user.id)" class="text-2xl font-bold text-gray-900 capitalize hover:text-gray-500 hover:underline focus:text-gray-500 active:text-gray-950">{{ user.name }} Follows</Link>
     </h1>
+     <div class="max-w-2xl mx-auto p-4 sm:p-6 lg:p-8">
+       <div class="divide-y bg-white mt-6 rounded-lg">
+           <UserCard
+             v-for="user in following"
+         :key="user.id"
+         :user="user"
+        />
+         </div>
+      </div>

   </AuthenticatedLayout>
 </template>

Who follows me?

We have a page to show who a user follows. We now need a page to show all the users who follow a particular user.

First, create a new controller and route.

To create the controller, run the command php artisan make:controller ListFollowers --invokable. The invokable option creates a controller with only a __invoke() method.

Update the method to return the authenticated user and their followers.

<?php
namespace App\Http\Controllers;
use App\Models\User;
use Inertia\Response;
use Inertia\Inertia;
class ListFollowers extends Controller
{
  /**
  * Handle the incoming request.
  */
  public function __invoke(User $user): Response
  {
     $followers = $user
             ->followers()
             ->orderByPivot('created_at','desc')
             ->select('follower_id as id', 'name')
             ->addSelect(['following' => function ($query) {
                 $query->select('id as following')
                     ->from('follower_user')
                     ->whereColumn('follower_id', Auth()->id())
                     ->whereColumn('user_id', 'users.id');
             }])
             ->get()->makeHidden('pivot');

     return Inertia::render('Follow/Index', [
         'user' => $user->only(['id', 'name']),
         'followers' => fn() => $followers,
     ]);
  }
}

We’ll create a route for this new page.

Route::get('users/{user}/followers', ListFollowers::class)->middleware('verified')->name('followers');

The ListFollowers __invoke() method returns the authenticated user and the users who follow them; this is the same data structure the followingController Index method uses, the only difference being the key used for users. We can generalize the controllers' methods to use the same Follow/index component for both pages.

In the FollowController's index method, update the name of the following prop to users.

public function index(User $user): Response
{
     $following = $user
             ->follows()
             ->orderByPivot('created_at','desc')
             ->get(['user_id', 'name'])
             ->map(function ($item) {
                 return array_merge($item->makeHidden('pivot')->toArray(), [
                     'following' => Auth()->user()->follows()->where('user_id', $item->user_id)->exists()
                 ]);
             });

    return Inertia::render('Follow/Index', [
        'user' => $user->only(['id', 'name']),
-       'following' => fn() => $following,
+       'users' => fn() => $following,
      ]);
 }

Do the same in the newly created ListFollowersController.

{
  /**
  * Handle the incoming request.
  */
  public function __invoke(User $user): Response
  {
     $followers = $user
             ->followers()
             ->orderByPivot('created_at','desc')
             ->select('follower_id as id', 'name')
             ->addSelect(['following' => function ($query) {
                 $query->select('id as following')
                     ->from('follower_user')
                     ->whereColumn('follower_id', Auth()->id())
                     ->whereColumn('user_id', 'users.id');
             }])
             ->get()->makeHidden('pivot');

     return Inertia::render('Follow/Index', [
         'user' => $user->only(['id', 'name']),
-        'followers' => fn() => $followers,
+        'users' => fn() => $followers,
     ]);
  }
}

Update the Follow/Index page to accept the users prop and update the component to use users rather than following.

 <script setup>

 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
 import { Link, Head } from '@inertiajs/vue3';

-const props = defineProps(['user', 'following']);
+const props = defineProps(['user', 'users']);

 </script>
 <template>
   <Head>
        <title>{{ user.name }} Follows</title>
   </Head>

   <AuthenticatedLayout>

     <h1 class="bg-white p-6 lg:p-8">
        <Link :href="route('profile.show',user.id)" class="text-2xl font-bold text-gray-900 capitalize hover:text-gray-500 hover:underline focus:text-gray-500 active:text-gray-950">{{ user.name }} Follows</Link>
     </h1>
     <div class="max-w-2xl mx-auto p-4 sm:p-6 lg:p-8">
       <div class="divide-y bg-white mt-6 rounded-lg">
           <UserCard
-            v-for="user in following"
+            v-for="user in users"
            :key="user.id"
            :user="user"
         />
         </div>
      </div>

   </AuthenticatedLayout>
 </template>

We can use route().current() to determine the route that is using the page and set the title to reflect this.

 <script setup>

 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
 import { Link, Head } from '@inertiajs/vue3';

 const props = defineProps(['user', 'following']);
 const props = defineProps(['user', 'users']);

 </script>
 <template>
   <Head>
-      <title>{{ user.name }} Follows</title>
+      <title v-if="route().current('followers')">{{ user.name }} Followers</title>
+      <title v-else>{{ user.name }} Follows</title>
   </Head>

   <AuthenticatedLayout>

     <h1 class="bg-white p-6 lg:p-8">
        <Link :href="route('profile.show',user.id)" class="text-2xl font-bold text-gray-900 capitalize hover:text-gray-500 hover:underline focus:text-gray-500 active:text-gray-950">{{ user.name }} Follows</Link>
     </h1>
     <div class="max-w-2xl mx-auto p-4 sm:p-6 lg:p-8">
       <div class="divide-y bg-white mt-6 rounded-lg">
           <UserCard
               v-for="user in following"
               v-for="user in users"
           :key="user.id"
           :user="user"
         />
         </div>
      </div>

   </AuthenticatedLayout>
 </template>

Navigating to our user lists.

We will create two new links in our profile page to allow users to navigate to the newly created user list pages.

We will update the profileController's show method to load the relationship counts for the 'follows' and 'followers' relationships and display the count in the links.

 public function show(User $user): Response
 {
     return Inertia::render('Profile/Show',[
-        'user' => $user->only(['id', 'name', 'created_at']),
+        'user' => fn() => $user->loadCount(['followers', 'follows'])->only(['id', 'name', 'created_at', 'followers_count', 'follows_count']),
         'chirps' => $user->chirps()->latest()->get()->map(fn (Chirp $chirp) => $chirp->setRelation('user',$user)),
         'following' => fn () => Auth()->user()->follows()->where('user_id', $user->id)->exists(),
     ]);
 }

We can now use these counts in the Heading component.

We will also update the forms to follow and unfollow so the user prop is updated with the new relationship count when the page reloads.

<script setup>
import dayjs from 'dayjs';
import PrimaryButton from './PrimaryButton.vue';
import SecondaryButton from './SecondaryButton.vue';
 import { Link } from '@inertiajs/vue3'
 const props = defineProps(['user']);
 </script>
 <template>
     <div class="bg-white">
         <div class="max-w-7xl mx-auto pb-1 px-4 sm:px-6 lg:px-8 p-4 sm:py-6 lg:py-8 sm:flex sm:items-center sm:justify-between sm:space-x-5">
             <div class="flex items-start space-x-5">
                 <div class="pt-1.5">
                     <h1 class="text-2xl font-bold text-gray-900 capitalize">{{ user.name }}</h1>
                     <p class="text-sm font-medium text-gray-500">
                    Joined
                        <time :datetime="dayjs(user.created_at).format('YYYY-MM')">
                        {{ dayjs(user.created_at).format('MMMM YYYY') }}
                        </time>
                     </p>
+                    <div class="mt-3 sm:mt-3">
+                       <Link :href="route('follow.index', user.id)">
+                           <span>{{ user.follows_count }}</span>
+                           <span class="text-sm font-medium text-gray-500"> Following</span>
+                       </Link>
+                       <Link :href="route('followers', user.id)">
+                           <span class="ml-4">{{ user.followers_count }}</span>
+                           <span class="text-sm font-medium text-gray-500"> Followers</span>
+                       </Link>
+                   </div>                 
                </div>
            </div>
            <div v-if="user.id === $page.props.auth.user.id" class="my-3 flex flex-col-reverse justify-stretch sm:mt-0 sm:pr-3">
                <Link :href="route('profile.edit')" class="inline-flex items-center justify-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">Edit Profile</Link>
            </div>
           <div v-else class="my-3 flex flex-col-reverse justify-stretch space-y-4 space-y-reverse sm:justify-end sm:space-x-3 sm:space-y-0 sm:mt-0 sm:flex-row sm:pr-3">
          <form class="flex flex-col" @submit.prevent="follow.post(route('follow.store'), {
     preserveScroll: true,
-    only:['following']
+    only:['following', 'user']
  })">
             <PrimaryButton class="justify-center">Follow</PrimaryButton>
         </form>
         <form class="flex flex-col" @submit.prevent="unfollow.delete(route('follow.destroy', user.id), {
            preserveScroll: true,
-           only:['following']
+           only:['following', 'user']
    })">
           <SecondaryButton class="justify-center" type='submit'>Unfollow</SecondaryButton>
        </form>
        </div>
      </div>
    </div>
 </template>

Navigating between the pages

We will use the FilterTabs component to navigate between the Follow index and Following index pages created for the chirp filter. The FilterTabs component was built only for the Chirps index page; we will refactor it to allow us to reuse it.

Rename the FilterTabs component to Tabs.
In the newly renamed Tabs component, we shall pass the tabs down from the parent component,

 <script setup>
 import { Link } from '@inertiajs/vue3'
+defineprops(['tabs'])

 </script>

 <template>
     <nav class="isolate flex divide-x mt-6 divide-gray-200 rounded-lg shadow overflow-hidden" aria-label="Tabs">
         <Link
             :href="route('chirps.index', { filter: 'false'})"
             :only="['chirps']"
             :class="[route().current('chirps.index', { filter: 'false'}) ? 'text-gray-900' : 'text-gray-500 hover:text-gray-700','group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-center text-sm font-medium hover:bg-gray-50 focus:z-10']"
             :aria-current="route().current('chirps.index', { filter: 'false'}) ? 'page' : undefined">
             <span> All </span>
             <span aria-hidden="true" :class="[route().current('chirps.index', { filter: 'false'}) ? 'bg-indigo-500' : 'bg-transparent', 'absolute inset-x-0 bottom-0 h-0.5']" />
         </Link>
         <Link
             :href="route('chirps.index', { filter: 'true'})"
             :only="['chirps']"
             :class="[route().current('chirps.index', { filter: 'true'}) ? 'text-gray-900' : 'text-gray-500 hover:text-gray-700', 'group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-center text-sm font-medium hover:bg-gray-50 focus:z-10']"
             :aria-current="route().current('chirps.index', { filter: 'true'}) ? 'page' : undefined">
             <span>Following </span>
             <span aria-hidden="true" :class="[route().current('chirps.index', { filter: 'true'}) ? 'bg-indigo-500' : 'bg-transparent', 'absolute inset-x-0 bottom-0 h-0.5']" />
         </Link>
     </nav>
 </template>

Separate the actual links to a new component called TabLink. The new tabLink component requires the data for the tab, its position within the tabs component, and the total number of tabs.

 <script setup>
-import { Link } from '@inertiajs/vue3'
+import Tablink from './Tablink.vue';
 defineprops(['tabs'])

 </script>

 <template>
     <nav class="isolate flex divide-x mt-6 divide-gray-200 rounded-lg shadow overflow-hidden" aria-label="Tabs">
-         <Link
-             :href="route('chirps.index', { filter: 'false'})"
-             :only="['chirps']"
-             :class="[route().current('chirps.index', { filter: 'false'}) ? 'text-gray-900' : 'text-gray-500 hover:text-gray-700','group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-center text-sm font-medium hover:bg-gray-50 focus:z-10']"
-            :aria-current="route().current('chirps.index', { filter: 'false'}) ? 'page' : undefined">
-            <span> All </span>
-            <span aria-hidden="true" :class="[route().current('chirps.index', { filter: 'false'}) ? 'bg-indigo-500' : 'bg-transparent', 'absolute inset-x-0 bottom-0 h-0.5']" />
-       </Link>
-       <Link
-           :href="route('chirps.index', { filter: 'true'})"
-           :only="['chirps']"
-           :class="[route().current('chirps.index', { filter: 'true'}) ? 'text-gray-900' : 'text-gray-500 hover:text-gray-700', 'group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-center text-sm font-medium hover:bg-gray-50 focus:z-10']"
-           :aria-current="route().current('chirps.index', { filter: 'true'}) ? 'page' : undefined">
-           <span>Following </span>
-           <span aria-hidden="true" :class="[route().current('chirps.index', { filter: 'true'}) ? 'bg-indigo-500' : 'bg-transparent', 'absolute inset-x-0 bottom-0 h-0.5']" />
-       </Link>
+       <template v-for="(tab, index) in tabs">
+      <TabLink :tab="tab" :tabIdx="index" :tabLength="tabs.length">
+           <span> {{ tab.text }}</span>
+      </TabLink>
+       </template>
    </nav>

 </template>

We will use the total number of tabs and the tabLinks position to apply selective tailwind classes.

resources/js/Components/Tablink.vue

<script setup>

import { Link } from '@inertiajs/vue3'

defineProps(['tab', 'tabIdx', 'tabLength'])
</script>

<template>
    <Link
        :href=tab.href
        :only=tab.only
        :class="[
            tab.active ? 'text-gray-900' : 'text-gray-500 hover:text-gray-700',
            tabIdx === 0 ? 'rounded-l-lg' : '',
            tabIdx === tabLength - 1 ? 'rounded-r-lg' : '',
            'group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-center text-sm font-medium hover:bg-gray-50 focus:z-10'
        ]"
        :aria-current="tab.active ? 'page' : undefined">
        <slot/>
        <span aria-hidden="true" :class="[tab.active ? 'bg-indigo-500' : 'bg-transparent', 'absolute inset-x-0 bottom-0 h-0.5']" />
    </Link>
</template>

Now that the Tabs component can be used in multiple pages, we can update the Chirp/Index page and the New Follow/Index page.

resources/js/Pages/Chirps/Index.vue

 <script setup>
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
 import Chirp from '@/Components/Chirp.vue';
 import InputError from '@/Components/InputError.vue';
 import PrimaryButton from '@/Components/PrimaryButton.vue';
-import FilterTabs from '@/Components/FilterTabs.vue';
+import Tabs from '@/Components/Tabs.vue';
 import { useForm, Head } from '@inertiajs/vue3';

 defineProps(['chirps']);
+const tabs = [
+    {href:route('chirps.index', { filter: 'false'}), active:route().current('chirps.index', { filter: 'false'}), only:['chirps'], text:'All'},
+    {href:route('chirps.index', { filter: 'true'}), active:route().current('chirps.index', { filter: 'true'}), only:['chirps'],  text:'Following'},
]

 const form = useForm({
     message: '',
 });
 </script>

 <template>
     <Head title="Chirps" />

     <AuthenticatedLayout>
         <div class="max-w-2xl mx-auto p-4 sm:p-6 lg:p-8">
             <form @submit.prevent="form.post(route('chirps.store'), { onSuccess: () => form.reset() })">
                 <textarea
                     v-model="form.message"
                     placeholder="What's on your mind?"
                     class="block w-full border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm"
                 ></textarea>
                 <InputError :message="form.errors.message" class="mt-2" />
                 <PrimaryButton class="mt-4">Chirp</PrimaryButton>
             </form>
-            <FilterTabs/>
+            <Tabs :tabs="tabs"/>

             <div class="mt-6 bg-white shadow-sm rounded-lg divide-y">
                 <Chirp
                     v-for="chirp in chirps"
                     :key="chirp.id"
                     :chirp="chirp"
                 />
             </div>
         </div>
     </AuthenticatedLayout>
 </template>

resources/js/Pages/Follow/Index.vue

 <script setup>
+import Tabs from '@/Components/Tabs.vue';
 import UserCard from '@/Components/UserCard.vue';
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
 import { Link, Head } from '@inertiajs/vue3';

 const props = defineProps(['user', 'users']);

+const tabs = [
+    {href:route('followers', props.user.id), active:route().current('followers', props.user.id), text:'Followers'},
+    {href:route('follow.index', props.user.id), active:route().current('follow.index', props.user.id), text:'Following'},
 ]

 </script>
 <template>
      <Head>
         <title v-if="route().current('followers')">{{ user.name }} Followers</title>
         <title v-else>{{ user.name }} Follows</title>
      </Head>

     <AuthenticatedLayout>

         <h1 class="bg-white p-6 lg:p-8">
             <Link :href="route('profile.show',user.id)" class="text-2xl font-bold text-gray-900 capitalize hover:text-gray-500 hover:underline focus:text-gray-500 active:text-gray-950">{{ user.name }} </Link>
         </h1>

         <div class="max-w-2xl mx-auto p-4 sm:p-6 lg:p-8">
+            <Tabs :tabs="tabs"/>
              <div class="divide-y bg-white mt-6 rounded-lg">
                 <UserCard
                     v-for="user in users"
                     :id="user.user_id ?? user.follower_id"
                     :name="user.name"
                     :following="user.following"
                 />
             </div>
         </div>
     </AuthenticatedLayout>
 </template>

Testing

Alongside adding new functionality, we have updated the existing pages, so we need to update our existing tests.
We are now including the follower and follows count in the ProfileController's show method, to test that this data is included update the tests inside the ProfileTest file.

<?php

namespace Tests\Feature\Controllers;

use App\Models\User;
use App\Models\Chirp;
use Database\Factories\ChirpFactory;
use Illuminate\Foundation\Testing\RefreshDatabase;
use SebastianBergmann\Type\VoidType;
use Tests\TestCase;
use Inertia\Testing\AssertableInertia as Assert;

class ProfileTest extends TestCase
{
    use RefreshDatabase;

    public function test_profile_page_is_displayed(): void
    {
        $user = User::factory()->create();

        $response = $this
            ->actingAs($user)
            ->get('/profile');

        $response->assertOk();
    }

    public function test_profile_information_can_be_updated(): void
    {
        $user = User::factory()->create();

        $response = $this
            ->actingAs($user)
            ->patch('/profile', [
                'name' => 'Test User',
                'email' => 'test@example.com',
            ]);

        $response
            ->assertSessionHasNoErrors()
            ->assertRedirect('/profile');

        $user->refresh();

        $this->assertSame('Test User', $user->name);
        $this->assertSame('test@example.com', $user->email);
        $this->assertNull($user->email_verified_at);
    }

    public function test_email_verification_status_is_unchanged_when_the_email_address_is_unchanged(): void
    {
        $user = User::factory()->create();

        $response = $this
            ->actingAs($user)
            ->patch('/profile', [
                'name' => 'Test User',
                'email' => $user->email,
            ]);

        $response
            ->assertSessionHasNoErrors()
            ->assertRedirect('/profile');

        $this->assertNotNull($user->refresh()->email_verified_at);
    }

    public function test_user_can_delete_their_account(): void
    {
        $user = User::factory()->create();

        $response = $this
            ->actingAs($user)
            ->delete('/profile', [
                'password' => 'password',
            ]);

        $response
            ->assertSessionHasNoErrors()
            ->assertRedirect('/');

        $this->assertGuest();
        $this->assertNull($user->fresh());
    }

    public function test_correct_password_must_be_provided_to_delete_account(): void
    {
        $user = User::factory()->create();

        $response = $this
            ->actingAs($user)
            ->from('/profile')
            ->delete('/profile', [
                'password' => 'wrong-password',
            ]);

        $response
            ->assertSessionHasErrors('password')
            ->assertRedirect('/profile');

        $this->assertNotNull($user->fresh());
    }

    public function test_public_profile_is_displayed(): void
    {
        $user = User::factory()->create();

        $response = $this
            ->actingAs($user)
            ->get(route('profile.show',$user->id));

        $response->assertOk();
    }

    public function test_chirps_belonging_to_profile_owner_are_included(): void
    {
        $user = User::factory()
                    ->create();

        $profileUser = User::factory()
+                    ->has(User::factory()->count(2),'followers')
+                    ->has(User::factory()->count(3),'follows')
                    ->has(Chirp::Factory()->count(5))
                    ->create();

        $this->actingAs($user)
            ->get(route('profile.show',$profileUser->id))
            ->assertInertia(fn (Assert $page) => $page
                ->component('Profile/Show')
                ->has('user', fn (Assert $page) => $page
                    ->where('id', $profileUser->id)
                    ->where('name', $profileUser->name)
+                    ->where('followers_count', $profileUser->followers()->count())
+                    ->where('follows_count', $profileUser->follows()->count())
                    ->missing('email')
                    ->missing('password')
                    ->etc()
                )
                ->has('chirps', 5, fn (Assert $page) => $page
                    ->where('id', $profileUser->chirps()->first()->id)
                    ->where('message', $profileUser->chirps()->first()->message)
                    ->etc()
                    ->has('user', fn (Assert $page) => $page
                        ->where('id', $profileUser->id)
                        ->etc()
                    )
                )
                ->has('following')
        );
    }

    public function test_chirps_belonging_to_other_uses_are_not_included(): void
    {
        $user = User::factory()
+                ->has(User::factory()->count(2),'followers')
+                ->has(User::factory()->count(3),'follows')
                ->create();

        $otherUser = User::factory()
                    ->has(Chirp::Factory()->count(5))
                    ->create();

        $this->actingAs($user)
            ->get(route('profile.show',$user->id))
            ->assertInertia(fn (Assert $page) => $page
                ->component('Profile/Show')
                ->has('user', fn (Assert $page) => $page
                    ->where('id', $user->id)
                    ->where('name', $user->name)
+                    ->where('followers_count', $user->followers()->count())
+                    ->where('follows_count', $user->follows()->count())
                    ->missing('email')
                    ->missing('password')
                    ->etc()
                )
                ->has('chirps',0)
                ->has('following')
            );
    }
}

We can add additional tests for the new index method of the FollowController in the FollowControllerTest.

We want to test that the data passed to the page is as expected and that only verified logged-in users can access the page.

<?php

namespace Tests\Feature\Controllers;

use App\Events\UserFollowed;
use App\Models\User;
+use Database\Factories\UserFactory;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Illuminate\Foundation\Testing\WithFaker;
use Illuminate\Support\Facades\Event;
+use Inertia\Testing\AssertableInertia as Assert;
use Tests\TestCase;

class FollowControllerTest extends TestCase
{
    public function test_users_can_follow_each_other()
    {
        $user = User::factory()->create();

        $following = User::factory()->create();

        $response = $this
            ->actingAs($user)
            ->post(route('follow.store'),['id' => $following->id]);

        $response->assertRedirect();

        $this->assertContains($following->id, $user->follows->pluck('id'));
    }

    public function test_user_followed_event_is_dispatched()
    {
        Event::fake();

        $user = User::factory()->create();

        $following = User::factory()->create();

        $this
            ->actingAs($user)
            ->post(route('follow.store'),['id' => $following->id]);

        Event::assertDispatched(function (UserFollowed $event) use ($user) {
            return $event->follower->id === $user->id;
        });
    }

    public function test_user_must_be_logged_in_before_following()
    {
        $following = User::factory()->create();

        $response = $this->post(route('follow.store'),['id' => $following->id]);

        $response->assertRedirect(route('login'));
    }

    public function test_user_must_be_verified_before_following()
    {
        $user = User::factory()
            ->unverified()
            ->create();

        $following = User::factory()->create();

        $response = $this
            ->actingAs($user)
            ->post(route('follow.store'),['id' => $following->id]);

        $response->assertRedirect(route('verification.notice'));
    }

    public function test_id_required()
    {
        $response = $this
            ->actingAs(User::factory()->make())
            ->post(route('follow.store'));

        $response->assertSessionHasErrors([
            'id' => 'The id field is required.'
        ]);
    }

    public function test_id_must_be_a_number()
    {
        $response = $this
            ->actingAs(User::factory()->make())
            ->post(route('follow.store'),['id' => 'a']);

        $response->assertSessionHasErrors([
            'id' => 'The id field must be an integer.',
            'id' => 'The id field must be a number.'
        ]);
    }

    public function test_id_must_not_be_request_user()
    {
        $user = User::factory()->create();

        $response = $this
            ->actingAs($user)
            ->post(route('follow.store'),['id' => $user->id]);

        $response->assertSessionHasErrors([
            'id' => 'The selected id is invalid.',
        ]);
    }

    public function test_id_must_belong_to_existing_user()
    {
        $user = User::factory()->create();

        $response = $this
            ->actingAs($user)
            ->post(route('follow.store'),['id' => 999]);

        $response->assertSessionHasErrors([
            'id' => 'The selected id is invalid.',
        ]);
    }

    public function test_users_can_unfollow_each_other()
    {
        $user = User::factory()->create();

        $following = User::factory()->create();

        $response = $this
            ->actingAs($user)
            ->delete(route('follow.destroy',$following->id));

        $response->assertRedirect();

        $this->assertNotContains($following->id, $user->follows->pluck('id'));
    }

    public function test_user_must_be_logged_in_to_unfollow()
    {
        $following = User::factory()->create();

        $response = $this->delete(route('follow.destroy', 2));

        $response->assertRedirect(route('login'));
    }

    public function test_user_must_be_verified_to_unfollow()
    {
        $user = User::factory()
            ->unverified()
            ->create();

        $response = $this
            ->actingAs($user)
            ->delete(route('follow.destroy', 2));

        $response->assertRedirect(route('verification.notice'));
    }

+    public function test_users_can_see_who_each_other_are_following()
+    {
+        $user = User::factory()
+            ->has(User::factory(3),'follows')
+            ->create();

+        $otherUser = User::factory()
+            ->create();

+        $this->actingAs($otherUser)
+            ->get(route('follow.index', $user->id))
+            ->assertInertia(fn (Assert $page) => $page
+                ->component('Follow/Index')
+                ->has('user', fn (Assert $page) => $page
+                    ->where('id', $user->id)
+                    ->where('name', $user->name)
+                    ->missing('password')
+                    ->missing('email')
+                )
+                ->has('users', 3, fn (Assert $page) => $page
+                    ->where('user_id', $user->follows()->first()->id)
+                    ->where('name', $user->follows()->first()->name)
+                    ->where('following', false)
+                    )
+            );
+    }

+    public function test_follow_property_depends_on_auth_user()
+    {
+        $following = User::factory();

+        $user = User::factory()
+            ->has($following,'follows')
+            ->create();

+        $otherUser = User::factory()->create();

+        $this->actingAs($otherUser)
+            ->get(route('follow.index', $user->id))
+            ->assertInertia(fn (Assert $page) => $page
+                ->component('Follow/Index')
+                ->has('users', 1, fn (Assert $page) => $page
+                    ->where('user_id', $user->follows()->first()->id)
+                    ->where('name', $user->follows()->first()->name)
+                    ->where('following', false)
+                    )
+            );

+        $this->actingAs($user)
+            ->get(route('follow.index', $user->id))
+            ->assertInertia(fn (Assert $page) => $page
+                ->component('Follow/Index')
+                ->has('users', 1, fn (Assert $page) => $page
+                    ->where('user_id', $user->follows()->first()->id)
+                    ->where('name', $user->follows()->first()->name)
+                    ->where('following', true)
+                    )
+            );

+    }

+    public function test_must_be_logged_in_to_view_following_index()
+    {
+        $response = $this->get(route('follow.index',1));

+        $response->assertRedirectToRoute('login');
+    }

+    public function test_must_be_verifired_to_view_following_index()
+    {
+        $user = User::factory()
+            ->unverified()
+            ->create();

+        $response = $this->actingAs($user)
+            ->get(route('follow.index', 1));

+        $response->assertRedirect(route('verification.notice'));
+    }
+}

Create a new test file for the ListFollowers Controller with the command php artisan make:test Controllers/ListFollowersTest

We want to test that the correct data is passed to the page, including the list of users who follow the profile user and if the authenticated user is following them. We must test that only verified logged-in users can reach the page.

<?php

namespace Tests\Feature\Controllers;

use Illuminate\Foundation\Testing\RefreshDatabase;
use Inertia\Testing\AssertableInertia as Assert;
use Illuminate\Foundation\Testing\WithFaker;
use App\Models\User;
use Tests\TestCase;

class ListFollowersTest extends TestCase
{
    public function test_users_can_see_who_is_following_a_particular_user()
    {
        $user = User::factory()
            ->has(User::factory(3),'followers')
            ->create();

        $otherUser = User::factory()
            ->create();

        $this->actingAs($otherUser)
            ->get(route('followers', $user->id))
            ->assertInertia(fn (Assert $page) => $page
                ->component('Follow/Index')
                ->has('user', fn (Assert $page) => $page
                    ->where('id', $user->id)
                    ->where('name', $user->name)
                    ->missing('password')
                    ->missing('email')
                )
                ->has('users', 3, fn (Assert $page) => $page
                    ->where('id', $user->followers()->first()->id)
                    ->where('name', $user->followers()->first()->name)
                    ->where('following', null)
                    )
            );
    }

    public function test_follow_property_depends_on_auth_user()
    {
        $follower = User::factory()->create();

        $user = User::factory()->create();

        $user->follows()->attach($follower);
        $user->followers()->attach($follower);

        $otherUser = User::factory()->create();

        $this->actingAs($otherUser)
            ->get(route('followers', $user->id))
            ->assertInertia(fn (Assert $page) => $page
                ->component('Follow/Index')
                ->has('users', 1, fn (Assert $page) => $page
                    ->where('id', $user->followers()->first()->id)
                    ->where('name', $user->followers()->first()->name)
                    ->where('following', null)
                    )
            );

        $this->actingAs($user)
            ->get(route('followers', $user->id))
            ->assertInertia(fn (Assert $page) => $page
                ->component('Follow/Index')
                ->has('users', 1, fn (Assert $page) => $page
                    ->where('id', $user->followers()->first()->id)
                    ->where('name', $user->followers()->first()->name)
                    ->whereNot('following', null)
                    )
            );

    }

    public function test_must_be_logged_in_to_view_following_index()
    {
        $response = $this->get(route('follow.index',1));

        $response->assertRedirectToRoute('login');
    }

    public function test_must_be_verifired_to_view_following_index()
    {
        $user = User::factory()
            ->unverified()
            ->create();

        $response = $this->actingAs($user)
            ->get(route('follow.index', 1));

        $response->assertRedirect(route('verification.notice'));
    }
}

Chirp Beyond (Bootcamp) part 3 Follow me

Silver343 — Fri, 03 Nov 2023 11:44:43 +0000

As Chirper exists at the moment, all users can see and are notified of each other's chirps, but we are now going to allow users to follow each other and filter chirps, so we only want to notify them of chirps created by the people they follow.

Followers and Follows

We will create a new database table and relationship in our application. We will create a many-to-many relationship between users and other users. Create a new migration file with the command php artisan make:migration create_follower_user_table

The new migration can be found at database/migrations/_create_follower_user_table.php

Update the 'up()' method with two new fields a 'user_id' and 'follower_id' both of which reference the users table.

/**
* Run the migrations.
*/
public function up(): void
{
    Schema::create('follower_user', function (Blueprint $table) {
        $table->id();
        $table->foreignId('follower_id')->references('id')->on('users')->cascadeOnDelete();
        $table->foreignId('user_id')->constrained()->cascadeOnDelete();
        $table->timestamps();
    });
}

We now need to define the relationships inside our user model. Add the following two methods.

public function followers(): BelongsToMany
{
    return $this->belongsToMany(User::class, 'follower_user', 'user_id', 'follower_id')->withTimestamps();
}

public function follows(): BelongsToMany
{
    return $this->belongsToMany(User::class, 'follower_user', 'follower_id', 'user_id')->withTimestamps();
}

You can find more about defining relationships in the Laravel docs.

New Controller

We’ll create a new controller to handle the logic. Use the following command php artisan make:controller FollowController --resource to create a resource controller.

This will create a new controller under the controller directory with all the resource methods defined.

New Route

Create two new routes. One will accept a post request to create a new follower-user relationship; the other will accept a delete request to destroy the relationship.

Add the routes to web.php

+use App\Http\Controllers\FollowController;


+Route::post('/follow', [FollowController::class, 'store'])->middleware('verified')->name('follow.store');
+Route::delete('/unfollow/{user}', [FollowController::class, 'destroy'])->middleware('verified')->name('follow.destroy');

In our new routes, we are using the verified middleware. This middleware checks to see if the user has verified their email address. If they have, the request will proceed; otherwise they will be redirect to a page notifying them to verify their email address.

namespace App\Models;
-// use Illuminate\Contracts\Auth\MustVerifyEmail;
+use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Relations\HasMany;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Relations\BelongsToMany;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Sanctum\HasApiTokens;
-class User extends Authenticatable
+class User extends Authenticatable implements MustVerifyEmail

Follow and unfollow

Update the two methods in the Follow Controller that correspond with the new routes.

Update the store method

+use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request;
+use Illuminate\Validation\Rule;


 public function store(Request $request):  RedirectResponse
 {
- //
+     $validated = $request->validate([
+            'id' => [
+            'required',
+            'integer',
+            'numeric',
+            Rule::notIn([Auth()->id()]),
+            'exists:users,id'
+        ]
+    ]);
+    Auth()->user()->follows()->attach($validated['id']);
+    return back();
}

We validate the id passed from the request to ensure it is a number, it doesn't match the user making the request, and that it exists in the database. Do not trust data returned from the front end.

Once the id is validated we create the many-to-many relationship using the attach() method.

Next we’ll update the destroy method.

 public function destroy(String $id): RedirectResponse
 {
- //
+    Auth()->user()->follows()->detach($id);
+    return back();
 }

In this method, we destroy the many-to-many relationship using the detach() method.

Update the Front end

We’ve created the new routes and controller we now need to add the forms to our front end to send data to them.

Our forms will live in the new heading component we made for our public profile page.

Add the following to bottom of the Heading component

 <script setup>
 import dayjs from 'dayjs';
+import PrimaryButton from './PrimaryButton.vue';
+import SecondaryButton from './SecondaryButton.vue';
 import { Link } from '@inertiajs/vue3'
 const props = defineProps(['user']);
 </script>
 <template>
     <div class="bg-white">
         <div class="max-w-7xl mx-auto pb-1 px-4 sm:px-6 lg:px-8 p-4 sm:py-6 lg:py-8 sm:flex sm:items-center sm:justify-between sm:space-x-5">
             <div class="flex items-start space-x-5">
                 <div class="pt-1.5">
                     <h1 class="text-2xl font-bold text-gray-900 capitalize">{{ user.name }}</h1>
                     <p class="text-sm font-medium text-gray-500">
                    Joined
                        <time :datetime="dayjs(user.created_at).format('YYYY-MM')">
                        {{ dayjs(user.created_at).format('MMMM YYYY') }}
                        </time>
                     </p>
                  </div>
            </div>
            <div v-if="user.id === $page.props.auth.user.id" class="my-3 flex flex-col-reverse justify-stretch sm:mt-0 sm:pr-3">
                <Link :href="route('profile.edit')" class="inline-flex items-center justify-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">Edit Profile</Link>
            </div>
+           <div v-else class="my-3 flex flex-col-reverse justify-stretch space-y-4 space-y-reverse sm:justify-end sm:space-x-3 sm:space-y-0 sm:mt-0 sm:flex-row sm:pr-3">
+          <form class="flex flex-col" @submit.prevent="follow.post(route('follow.store'), {
+     preserveScroll: true,
+  })">
+             <PrimaryButton class="justify-center">Follow</Primarybutton>
+         </form>
+         <form class="flex flex-col" @submit.prevent="unfollow.delete(route('follow.destroy', user.id), {
+            preserveScroll: true,
+    })">
+           <SecondaryButton class="justify-center" type='submit'>Unfollow</Secondarybutton>
+        </form>
+        </div>
      </div>
    </div>
 </template>

We are using the v-else directive to conditionally render the forms, as we only want to show them if the profile doesn't belong to the Authenticated user.

Add new methods the top of the file for the new forms.


<script setup>
 import dayjs from 'dayjs';
 import PrimaryButton from './PrimaryButton.vue';
 import SecondaryButton from './SecondaryButton.vue';
 import { Link } from '@inertiajs/vue3'
 const props = defineProps(['user']);
+const follow = useForm({
+    id: props.user.id,
+});
+const unfollow = useForm({});
 </script>

Both of these methods use inertia’s form helper to simplify our code

We are currently rendering both buttons as we have no way of knowing if the authenticated user is following the owner of the profile, we can fix this by checking if the relationship exisits and passing that to the front end.

Update the profile controller's show method to include a ‘following’ property.

 public function show(User $user): Response
 {
     return Inertia::render('Profile/Show',[
         'user' => $user->only(['id', 'name', 'created_at']),
         'chirps' => $user->chirps()->latest()->get()->map(fn (Chirp $chirp) => $chirp->setRelation('user',$user)),
+       'following' => fn() => Auth()->user()->follows()->where('user_id', $user->id)->exists(),
     ]);
 }

We are querying the many-to-many relationship to see if one exists between the authenticated user and profile owner.

To pass this data to our heading component, we must first pass it to our Profile/show page, and then pass it down to the Heading component.

 <script setup>
 import AuthenticatedLayout from  '@/Layouts/AuthenticatedLayout.vue';
 import Heading from '@/Components/Heading.vue';
 import Chirp from '@/Components/Chirp.vue';
 import { Head } from '@inertiajs/vue3';
-defineProps(['user','chirps']);
+defineProps(['user','chirps', 'following']);
 </script>
 <template>
     <Head :title="user.name" />
     <AuthenticatedLayout>
-        <Heading :user="user"/>
+        <Heading :user="user" :following="following"/>
         <div class="max-w-2xl mx-auto p-4 sm:p-6 lg:p-8">
             <div class="mt-6 bg-white shadow-sm rounded-lg divide-y">

We can now add the property to our heading table and conditionally render the forms.

 <script setup>
 import dayjs from 'dayjs';
 import PrimaryButton from './PrimaryButton.vue';
 import SecondaryButton from './SecondaryButton.vue';
 import { Link } from '@inertiajs/vue3'
-const props = defineProps(['user']);
+const props = defineProps(['user', 'following']);
 </script>
 <template>
     <div class="bg-white">
         <div class="max-w-7xl mx-auto pb-1 px-4 sm:px-6 lg:px-8 p-4 sm:py-6 lg:py-8 sm:flex sm:items-center sm:justify-between sm:space-x-5">
             <div class="flex items-start space-x-5">
                 <div class="pt-1.5">
                     <h1 class="text-2xl font-bold text-gray-900 capitalize">{{ user.name }}</h1>
                     <p class="text-sm font-medium text-gray-500">
                    Joined
                        <time :datetime="dayjs(user.created_at).format('YYYY-MM')">
                        {{ dayjs(user.created_at).format('MMMM YYYY') }}
                        </time>
                     </p>
                  </div>
            </div>
            <div v-if="user.id === $page.props.auth.user.id" class="my-3 flex flex-col-reverse justify-stretch sm:mt-0 sm:pr-3">
                <Link :href="route('profile.edit')" class="inline-flex items-center justify-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">Edit Profile</Link>
            </div>
+          <form v-if="!following" class="flex flex-col" @submit.prevent="follow.post(route('follow.store'), {
-          <form class="flex flex-col" @submit.prevent="follow.post(route('follow.store'), {
          preserveScroll: true,
          only:['following']
           })">
               <PrimaryButton class="justify-center">Follow</Primarybutton>
          </form>
+         <form v-else class="flex flex-col" @submit.prevent="unfollow.delete(route('follow.destroy', user.id), {
-         <form class="flex flex-col" @submit.prevent="unfollow.delete(route('follow.destroy', user.id), {
             preserveScroll: true,
             only:['following']
     })">
               <SecondaryButton class="justify-center" type='submit'>Unfollow</Secondarybutton>
             </form>
          </div>
        </div>
    </div>
 </template>

Now we have the 'following' property; this is all we need to update after the forms are submitted, this is set but adding only:[’following’] to the forms.

The profile page now looks like this if the authenticated user follows the profile user.

The profile page now looks like this if the authenticated user does not follow the profile user.

Filtering Chirps

Our users can now follow each other but it provides no benefit. The first benefit we will add is to allow users to filter chirps so they only see chirps from people they follow.

To define if the chirps returned by our index method should be filtered, we will add a new 'filter' parameter to our query string.

So the URL we look like; http://chirper.test/chirps?filter=false

This parameter will be a boolean, we’ll update existing links to set ‘filter’ to false in our navigation in Authenticated layout.

35<NavLink :href="route('chirps.index', { filter: 'false'})" :active="route().current('chirps.index')">

122<ResponsiveNavLink :href="route('chirps.index', { filter: 'false'})" :active="route().current('chirps.index')">

To allow users to set the filter, we will create a new Tabs component.
Each tab will be a link to the same route but one will have the filter parameter set to false, and the other will have it set to true.

Create a new file at resources/js/components called FilterTabs.vue and add the following code. The design of this component comes from Tailwind UI.

<script setup>
import { Link } from '@inertiajs/vue3'

</script>

<template>
    <nav class="isolate flex divide-x mt-6 divide-gray-200 rounded-lg shadow overflow-hidden" aria-label="Tabs">
        <Link
            :href="route('chirps.index', { filter: 'false'})"
            :only="['chirps']"
            :class="[route().current('chirps.index', { filter: 'false'}) ? 'text-gray-900' : 'text-gray-500 hover:text-gray-700','group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-center text-sm font-medium hover:bg-gray-50 focus:z-10']"
            :aria-current="route().current('chirps.index', { filter: 'false'}) ? 'page' : undefined">
            <span> All </span>
            <span aria-hidden="true" :class="[route().current('chirps.index', { filter: 'false'}) ? 'bg-indigo-500' : 'bg-transparent', 'absolute inset-x-0 bottom-0 h-0.5']" />
        </Link>
        <Link
            :href="route('chirps.index', { filter: 'true'})"
            :only="['chirps']"
            :class="[route().current('chirps.index', { filter: 'true'}) ? 'text-gray-900' : 'text-gray-500 hover:text-gray-700', 'group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-center text-sm font-medium hover:bg-gray-50 focus:z-10']"
            :aria-current="route().current('chirps.index', { filter: 'true'}) ? 'page' : undefined">
            <span>Following </span>
            <span aria-hidden="true" :class="[route().current('chirps.index', { filter: 'true'}) ? 'bg-indigo-500' : 'bg-transparent', 'absolute inset-x-0 bottom-0 h-0.5']" />
        </Link>
    </nav>
</template>

We are using only on our links so only the Chirps are refreshed.

Add our new component above out chirps to the Chirps/index page.

 <script setup>
 import AuthenticatedLayout from  '@/Layouts/AuthenticatedLayout.vue';
 import Chirp from '@/Components/Chirp.vue';
 import InputError from '@/Components/InputError.vue';
 import PrimaryButton from '@/Components/PrimaryButton.vue';
+import FilterTabs from '@/Components/FilterTabs.vue';
import { useForm, Head } from '@inertiajs/vue3';
defineProps(['chirps']);
const form = useForm({
    message: '',
});
 </script>
 <template>
     <Head title="Chirps" />
     <AuthenticatedLayout>
         <div class="max-w-2xl mx-auto p-4 sm:p-6 lg:p-8">
             <form @submit.prevent="form.post(route('chirps.store'), { onSuccess: () => form.reset() })">
                 <textarea
                     v-model="form.message"
                     placeholder="What's on your mind?"
                     class="block w-full border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm"
                 ></textarea>
                 <InputError :message="form.errors.message" class="mt-2" />
                 <PrimaryButton class="mt-4">Chirp</PrimaryButton>
             </form>
+            <FilterTabs/>

We now have a link with the filter parameters set to true. In the ChirpController, we will conditionally filter the chirps when the filter is true. Update the index method.

-public function index(): Response
+public function index(Request $request): Response
 {
     return Inertia::render('Chirps/Index', [
-       'chirps' => Chirp::with('user:id,name')->latest()->get(),
+       'chirps' => Chirp::with('user:id,name')
+       ->when($request->input('filter') === 'true', fn($q) =>
+           $q->whereIn(
+               'user_id',
+                Auth()->user()->follows->pluck('id')
+                ->merge(Auth()->id())
+           )
+       )
+       ->latest()
+       ->get(),
    ]);
}

When the filter is true, we use a subquery so we only fetch the chirps where the user_id matches one of those in the follows() relationship, we then merge the request users id to so their chirps are also fetched.

Events and listeners

During the bootcamp you created an event and corresponding listener to send a notification when a chirp was created. The listener sent a notification to all users, as advised in the bootcamp we will now update the listener to only send the notification to those who follow the chirps author.

Update the send chirp listener.

public function handle(ChirpCreated $event): void
{
-   foreach (User::whereNot('id', $event->chirp->user_id)->cursor() as $user) {
+   foreach (User::whereIn('id', $event->chirp->user->followers->pluck('id'))->cursor() as $user) {
        $user->notify(new NewChirp($event->chirp));
    }
}

Rather than filtering out the author of the chirp, we are filtering out users if they do not follow the chirp's author.

Users may also wish to be notified if they receive a new follower. We will create a new event, listener and notification.

Create a new event with the command php artisan make:event UserFollowed

Create a new Listener with the command php artisan make:listener SendNewFollowerNotifications

We will update the FollowController's store method to dispatch our new event.

+use App\Events\UserFollowed;

 public function store(Request $request): RedirectResponse
 {
 $validated = $request->validate([
     'id' => [
          'required',
          'integer',
          'numeric',
          Rule::notIn([Auth()->id()]),
          'exists:users,id'
      ]
 ]);

 Auth()->user()->follows()->attach($validated['id']);

 $following = User::findOrFail($validated['id']);
+UserFollowed::dispatch($following, Auth()->user());

 return back();
}

We also need to update the Event Service provider to register our new event and listener.

 namespace App\Providers;
 use App\Events\ChirpCreated;
+use App\Events\UserFollowed;
 use App\Listeners\SendChirpCreatedNotifications;
+use App\Listeners\SendNewFollowerNotifications;
 use Illuminate\Auth\Events\Registered;
 use Illuminate\Auth\Listeners\SendEmailVerificationNotification;
 use Illuminate\Foundation\Support\Providers\EventServiceProvider as ServiceProvider;
 use Illuminate\Support\Facades\Event;
 class EventServiceProvider extends ServiceProvider
 {
     /**
      * The event to listener mappings for the application.
      *
      * @var array<class-string, array<int, class-string>>
      */
     protected $listen = [
         ChirpCreated::class => [
             SendChirpCreatedNotifications::class,
         ],
+        UserFollowed::class => [
+            SendNewFollowerNotifications::class,
+        ],

         Registered::class => [
             SendEmailVerificationNotification::class,
         ],

The new userFollowed event accepts two variables, the user the authenticated user is now following, and the authenticated user.

Update the UserFollowed Event to accept the variables.

<?php

namespace App\Events;

use App\Models\User;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class UserFollowed
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    /**
     * Create a new event instance.
     */
    public function __construct(public User $user, public User $follower)
    {
        //
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return array<int, \Illuminate\Broadcasting\Channel>
     */
    public function broadcastOn(): array
    {
        return [
            new PrivateChannel('channel-name'),
        ];
    }
}

Update the SendNewFollowerNotifications.

<?php

namespace App\Listeners;

use App\Events\UserFollowed;
use App\Notifications\NewFollower;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Queue\InteractsWithQueue;

class SendNewFollowerNotifications implements ShouldQueue
{
    /**
     * Create the event listener.
     */
    public function __construct()
    {
        //
    }

    /**
     * Handle the event.
     */
    public function handle(UserFollowed $event): void
    {
        $event->user->notify(new NewFollower($event->follower));
    }
}

In the handle method, we are passing the new follower (the request user) to a new notification and sending it to the newly followed user, as with the event listener created in the Bootcamp this listener implements ShouldQueue.

Create a new notification with the command php artisan make:notification NewFollower

This command will create a new file in the App/Notifications directory.

Update the toMail() method.

public function toMail(object $notifiable): MailMessage
    {
        return (new MailMessage)
                    ->subject('You have a new follower')
                    ->greeting("{$this->follower->name} started following you")
                    ->action('View their profile', route('profile.show', $this->follower->id))
                    ->line('Thank you for using our application!');
    }

If you now follow an account, you should see an email in your test client. I am using Helo From BeyondCode.

Tests

If we run our full test suite with php artisan test you will find our test for the sending notifications to all users when a new chirp is created fails due to our code changes, so lets update this test.


-public function test_notification_is_sent_to_all_but_chirp_creator()
+public function test_notifications_are_only_sent_to_users_who_follow_author()
 {
    Notification::fake();
-   $users = User::factory(2)->create();
+   $user = User::factory()->create();
-   $chirp = Chirp::factory()->create();
+   $followers = User::factory(2)->create();
+   $nonFollower = User::factory()->create();
+   $user->followers()->attach($followers->pluck('id'));
+   Chirp::factory()
+        ->for($user)
+        ->create();

    Notification::assertSentTo(
-       [$users], NewChirp::class
+       [$followers], NewChirp::class
    );

    Notification::assertNotSentTo(
-       [$chirp->user], NewChirp::class
+       [$user, $nonFollower], NewChirp::class
    );
 }

We are now attaching followers to the chirp author, and then testing the notification is sent to them.

Although the rest of our tests didn’t break we should update and expand them to correspond with our code changes.

Update Chirp Controller Test

We updated our chirp controller to optionally filter the chirps, let's create a test for that.

Add this test to your chirpcontrollertest.php file.

public function test_only_chirps_by_people_the_user_follows_are_returned_if_filter_is_true()
{
    $following = User::factory()
        ->has(Chirp::factory())
        ->create();

  $user = User::factory()
        ->hasAttached($following,[],'follows')
        ->create();

    $nonFollowedChirps = Chirp::factory(10)->create();

    $this->actingAs($user)
        ->get(route('chirps.index', ['filter' => 'true']))
        ->assertInertia(fn (Assert $page) => $page
            ->component('Chirps/Index')
            ->has('chirps', 1, fn (Assert $page) => $page
                ->where('message', $following->chirps->first()->message)
                ->etc()
                ->has('user', fn (Assert $page) => $page
                    ->where('id', $following->id)
                    ->where('name', $following->name)
                    ->missing('password')
                    ->missing('email')
                )
            )
    );
}

We are testing that the only chirp returned to our page is the one that was created by an author our test user follows.

Update Profile Test

In our profile test file, we have two tests that assert against the properties that are included in our inertia response, both of these tests need updating so the new ‘following’ property is included.

public function test_chirps_belonging_to_profile_owner_are_included(): void
{
    $user = User::factory()
                ->create();

    $profileUser = User::factory()
                ->has(Chirp::Factory()->count(5))
                ->create();

    $this->actingAs($user)
        ->get(route('profile.show',$profileUser->id))
        ->assertInertia(fn (Assert $page) => $page
            ->component('Profile/Show')
            ->has('user', fn (Assert $page) => $page
                ->where('id', $profileUser->id)
                ->where('name', $profileUser->name)
                ->missing('email')
                ->missing('password')
                ->etc()
            )
            ->has('chirps', 5, fn (Assert $page) => $page
                ->where('id', $profileUser->chirps()->first()->id)
                ->where('message', $profileUser->chirps()->first()->message)
                ->etc()
                ->has('user', fn (Assert $page) => $page
                    ->where('id', $profileUser->id)
                    ->etc()
                )
            )
+           ->has('following')
    );
}

public function test_chirps_belonging_to_other_uses_are_not_included(): void
{
    $user = User::factory()
                ->create();

    $otherUser = User::factory()
                ->has(Chirp::Factory()->count(5))
                ->create();

    $this->actingAs($user)
        ->get(route('profile.show',$user->id))
        ->assertInertia(fn (Assert $page) => $page
            ->component('Profile/Show')
            ->has('user', fn (Assert $page) => $page
                ->where('id', $user->id)
                ->where('name', $user->name)
                ->missing('email')
                ->missing('password')
                ->etc()
            )
            ->has('chirps',0)
+           ->has('following')
        );
}

Create FollowController Tests

To create our test file run the command php artisan make:test Controllers/FollowControllerTest and update the file.

<?php

namespace Tests\Feature\Controllers;

use App\Events\UserFollowed;
use App\Models\User;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Illuminate\Foundation\Testing\WithFaker;
use Illuminate\Support\Facades\Event;
use Tests\TestCase;

class FollowControllerTest extends TestCase
{
    public function test_users_can_follow_each_other()
    {
        $user = User::factory()->create();

        $following = User::factory()->create();

        $response = $this
            ->actingAs($user)
            ->post(route('follow.store'),['id' => $following->id]);

        $response->assertRedirect();

        $this->assertContains($following->id, $user->follows->pluck('id'));
    }

    public function test_user_followed_event_is_dispatched()
    {
        Event::fake();

        $user = User::factory()->create();

        $following = User::factory()->create();

        $this
            ->actingAs($user)
            ->post(route('follow.store'),['id' => $following->id]);

        Event::assertDispatched(function (UserFollowed $event) use ($user) {
            return $event->follower->id === $user->id;
        });
    }

    public function test_user_must_be_logged_in_before_following()
    {
        $following = User::factory()->create();

        $response = $this->post(route('follow.store'),['id' => $following->id]);

        $response->assertRedirect(route('login'));
    }

    public function test_user_must_be_verified_before_following()
    {
        $user = User::factory()
            ->unverified()
            ->create();

        $following = User::factory()->create();

        $response = $this
            ->actingAs($user)
            ->post(route('follow.store'),['id' => $following->id]);

        $response->assertRedirect(route('verification.notice'));
    }

    public function test_id_required()
    {
        $response = $this
            ->actingAs(User::factory()->make())
            ->post(route('follow.store'));

        $response->assertSessionHasErrors([
            'id' => 'The id field is required.'
        ]);
    }

    public function test_id_must_be_a_number()
    {
        $response = $this
            ->actingAs(User::factory()->make())
            ->post(route('follow.store'),['id' => 'a']);

        $response->assertSessionHasErrors([
            'id' => 'The id field must be an integer.',
            'id' => 'The id field must be a number.'
        ]);
    }

    public function test_id_must_not_be_request_user()
    {
        $user = User::factory()->create();

        $response = $this
            ->actingAs($user)
            ->post(route('follow.store'),['id' => $user->id]);

        $response->assertSessionHasErrors([
            'id' => 'The selected id is invalid.',
        ]);
    }

    public function test_id_must_belong_to_existing_user()
    {
        $user = User::factory()->create();

        $response = $this
            ->actingAs($user)
            ->post(route('follow.store'),['id' => 999]);

        $response->assertSessionHasErrors([
            'id' => 'The selected id is invalid.',
        ]);
    }

    public function test_users_can_unfollow_each_other()
    {
        $user = User::factory()->create();

        $following = User::factory()->create();

        $response = $this
            ->actingAs($user)
            ->delete(route('follow.destroy',$following->id));

        $response->assertRedirect();

        $this->assertNotContains($following->id, $user->follows->pluck('id'));
    }

    public function test_user_must_be_logged_in_to_unfollow()
    {
        $following = User::factory()->create();

        $response = $this->delete(route('follow.destroy', 2));

        $response->assertRedirect(route('login'));
    }

    public function test_user_must_be_verified_to_unfollow()
    {
        $user = User::factory()
            ->unverified()
            ->create();

        $response = $this
            ->actingAs($user)
            ->delete(route('follow.destroy', 2));

        $response->assertRedirect(route('verification.notice'));
    }
}

Test our new listener

We have tested the new event is dispatched in the followControllerTest file, but now we need to test the new SendNewFollowerNotifications listener.

To create the test file use the command php artisan make:test Listeners/SendNewFollowerNotificationsTest. We will add two tests to our new file

<?php

namespace Tests\Feature\Listeners;

use App\Events\UserFollowed;
use App\Listeners\SendNewFollowerNotifications;
use App\Models\User;
use App\Notifications\NewFollower;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Illuminate\Foundation\Testing\WithFaker;
use Illuminate\Support\Facades\Event;
use Illuminate\Support\Facades\Notification;
use Tests\TestCase;

class SendNewFollowerNotificationsTest extends TestCase
{
    public function test_listener_is_attached_to_event(): void
    {
        Event::fake();

        Event::assertListening(
            UserFollowed::class,
            SendNewFollowerNotifications::class
        );
    }

    public function test_notification_is_sent()
    {
        Notification::fake();

        $user = User::factory()->create();
        $follower = User::factory()->create();

        $event = new UserFollowed($user, $follower);
        $listener = New SendNewFollowerNotifications();

        $listener->handle($event);

        Notification::assertSentTo($user, NewFollower::class);
        Notification::assertCount(1);
    }
}

We are first testing that we have connected the event and listener. We are then testing that our listener notifies the appropriate user.

Testing the notification

We are going to test the contents of the mail notification.

To create the test file use the command php artisan make:test Notifications/NewFollowerTest Add the following code.

<?php

namespace Tests\Feature\Notifications;

use App\Models\User;
use App\Notifications\NewFollower;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Illuminate\Foundation\Testing\WithFaker;
use Illuminate\Support\Facades\Mail;
use Illuminate\Support\Facades\Notification;
use Tests\TestCase;

class NewFollowerTest extends TestCase
{
    /**
     * A basic feature test example.
     */
    public function test_mail_contents(): void
    {
       Notification::fake();

       $user = User::factory()->create();
       $follower = User::factory()->create();

        $user->notify(new NewFollower($follower));

        Notification::assertSentTo($user, NewFollower::class, function ($notification) use ($user, $follower){
            $mailNotification = $notification->toMail($user);

            $this->assertEquals("{$follower->name} started following you", $mailNotification->greeting);
            $this->assertEquals('View their profile', $mailNotification->actionText);
            $this->assertEquals(route('profile.show', $follower->id),$mailNotification->actionUrl);

            return true;
        });
    }
}

In the test we are asserting the contents of the mail notification are as we expect, specifically the section that uses the followers data.

Chirp Beyond (Bootcamp) part 2 public profile

Silver343 — Fri, 06 Oct 2023 14:31:08 +0000

The first new feature we are going to tackle is a public profile page for users.

On this page, we should only be able to see Chirps the profile owner has created.

New Route

To start we will add a new route in the web.php file. There are already routes for updating and deleting the user profile so we can add our new route for showing it there.

Route::middleware('auth')->group(function () {
    Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
    Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
    Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
+   Route::get('/users/{user}', [ProfileController::class, 'show'])->middleware('verified')->name('profile.show');
});

Note we have added an extra middleware to our new route as we only want the public profiles to be accessible to users who have verified their email address.

We must also update our user model to implement MustVerifyEmail to use the middleware.

- //use Illuminate\Contracts\Auth\MustVerifyEmail;
+ use Illuminate\Contracts\Auth\MustVerifyEmail;
  use Illuminate\Database\Eloquent\Relations\HasMany;
  use Illuminate\Database\Eloquent\Factories\HasFactory;
  use Illuminate\Foundation\Auth\User as Authenticatable;
  use Illuminate\Notifications\Notifiable;
  use Laravel\Sanctum\HasApiTokens;

+class User extends Authenticatable implements MustVerifyEmail

You’ll notice the {user} in our new route, this is a route parameter, with this parameter we will inject the id of the user whose profile we wish to show, Laravel provides a convenient way to do this via route model binding.

New method in the Profile Controller

In the Profile controller, we will add a new show method. We want to pass the user model and their Chirps to a new Vue component.


    public function show(User $user): Response
    {
        return Inertia::render('Profile/Show',[
            'user' => $user->only(['id', 'name', 'created_at']),
            'chirps' => $user->chirps()->latest()->get()->map(fn (Chirp $chirp) => $chirp->setRelation('user',$user)),
        ]);
    }

We use the setRelation on each of the users chirps to manually set the chirps author, this allows us to avoid loading the user for each chirp avoiding a n+1 problem.

Create Profile show page

In our controller above, we are passing our user and chirps to a new Vue component, which we now need to create.

Create a Vue file at resources/js/Pages/Profile and name it Show.vue.

Add the following code.

<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import Heading from '@/Components/Heading.vue';
import Chirp from '@/Components/Chirp.vue';
import { Head } from '@inertiajs/vue3';

defineProps(['user','chirps']);
</script>

<template>
    <Head :title="user.name" />

    <AuthenticatedLayout>
        <Heading :user="user"/>
        <div class="max-w-2xl mx-auto p-4 sm:p-6 lg:p-8">
            <div class="mt-6 bg-white shadow-sm rounded-lg divide-y">
                <Chirp
                    v-for="chirp in chirps"
                    :key="chirp.id"
                    :chirp="chirp"
                />
            </div>
        </div>
    </AuthenticatedLayout>
</template>

We are using the Authenticated Layout included with breeze in addition to the Chirp component you created in the bootcamp.

There is a new Heading component above the chirps, which we will create now.

Create the new heading component

To create the new heading component, create a new Vue file at resources/js/components and save it as Heading.vue. Add the following code.

<script setup>
import dayjs from 'dayjs';
import { Link } from '@inertiajs/vue3'
const props = defineProps(['user']);
</script>
<template>
    <div class="bg-white">
        <div class="max-w-7xl mx-auto pb-1 px-4 sm:px-6 lg:px-8 p-4 sm:py-6 lg:py-8 sm:flex sm:items-center sm:justify-between sm:space-x-5">
            <div class="flex items-start space-x-5">
                <div class="pt-1.5">
                <h1 class="text-2xl font-bold text-gray-900 capitalize">{{ user.name }}</h1>
                <p class="text-sm font-medium text-gray-500">
                    Joined
                    <time :datetime="dayjs(user.created_at).format('YYYY-MM')">
                        {{ dayjs(user.created_at).format('MMMM YYYY') }}
                    </time>
                </p>
                </div>
            </div>
            <div v-if="user.id === $page.props.auth.user.id" class="my-3 flex flex-col-reverse justify-stretch sm:mt-0 sm:pr-3">
                <Link :href="route('profile.edit')" class="inline-flex items-center justify-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">Edit Profile</Link>
            </div>
        </div>
    </div>
  </template>

This heading is based on this on included with Tailwind UI
We have removed the avatar, and we only have one action.

We are using the day.js library to format the user's created_at field to show the month and year they created their account.

If a user is visiting their own profile the component renders a link to allow them to edit it, this uses the included profile.edit route included with breeze.

How do we visit profiles?

We have created our new profile page, but it is only reachable by manually updating the URL.

We will add two ways to navigate to the profile screen, one in the chirp component to view the profile of the chirps author and one in the settings dropdown to allow users to view their own profile.

Update your Chirp component like so.

 <script setup>
import Dropdown from '@/Components/Dropdown.vue';
import DropdownLink from '@/components/DropdownLink.vue';
import InputError from '@/Components/InputError.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
-import { useForm } from '@inertiajs/vue3';
+import { Link, useForm } from '@inertiajs/vue3';
import { ref } from 'vue';
dayjs.extend(relativeTime);
        <div class="flex-1">
            <div class="flex justify-between items-center">
                <div>
-                    <span class="text-gray-800">{{ chirp.user.name }}</span>
+                    <Link :href="route('profile.show', chirp.user.id)" class="text-gray-800 hover:text-gray-500 hover:underline focus:text-gray-500 active:text-gray-900 capitalize">{{ chirp.user.name }}</Link>
                    <small class="ml-2 text-sm text-gray-600">{{ dayjs(chirp.created_at).fromNow() }}</small>
                    <small v-if="chirp.created_at !== chirp.updated_at" class="text-sm text-gray-600"> &middot; edited</small>
                </div>

We have updated the HTML element containing the chirps author name from a <span> to an Inertia.js Link. This link navigates to the profile page and uses the chirps authors ID as a parameter.

To update the included settings dropdown, open the authenticated Layout component at resources/js/Layouts.

Update the primary navigation dropdown like so from line 70.

 <template #content>
-   <DropdownLink :href="route('profile.edit')"> Profile  </DropdownLink>
+   <DropdownLink :href="route('profile.show', $page.props.auth.user.id)"> View Profile </DropdownLink>
+   <DropdownLink :href="route('profile.edit')"> Edit Profile </DropdownLink>
    <DropdownLink :href="route('logout')" method="post" as="button">
    Log Out
    </DropdownLink>
 </template>

Don’t forget the mobile navigation at line 136, which you can update like so.

 <div class="mt-3 space-y-1">
-   <ResponsiveNavLink :href="route('profile.edit')"> Profile </ResponsiveNavLink>
+   <ResponsiveNavLink :href="route('profile.show', $page.props.auth.user.id)"> Show Profile </ResponsiveNavLink>
+   <ResponsiveNavLink :href="route('profile.edit')"> Edit Profile </ResponsiveNavLink>
    <ResponsiveNavLink :href="route('logout')" method="post" as="button">
    Log Out
    </ResponsiveNavLink>
 </div>

Testing our new feature

We need to test the public profile page renders and only include Chirps that belong to the owner of the profile page.

You'll find that there are already tests for the user profile at tests/Feature/ProfileTest.php. I have moved this file to match the Chirp Controller tests created in the previous part to tests/Feature/Controllers.

In your test file add the following test methods.

public function test_public_profile_is_displayed(): void
{
    $user = User::factory()->create();

    $response = $this
       ->actingAs($user)
       ->get(route('profile.show',$user->id));

    $response->assertOk();
}

public function test_users_must_be_verified_to_view_profiles(): void
{
    $user = User::factory()->unverified()->create();
    $profileUser = User::factory()->create();

    $response = $this
        ->actingAs($user)
        ->get(route('profile.show',$profileUser->id));

        $response->assertRedirect(route('verification.notice'));

}

public function test_chirps_belonging_to_profile_owner_are_included(): void
{
    $user = User::factory()->create();

    $profileUser = User::factory()
               ->has(Chirp::Factory()->count(5))
               ->create();

    $this->actingAs($user)
        ->get(route('profile.show',$profileUser->id))
        ->assertInertia(fn (Assert $page) => $page
            ->component('Profile/Show')
            ->has('user', fn (Assert $page) => $page
                ->where('id', $profileUser->id)
                ->where('name', $profileUser->name)
                ->missing('email')
                ->missing('password')
                ->etc()
            )
            ->has('chirps', 5, fn (Assert $page) => $page
               ->where('id', $profileUser->chirps()->first()->id)
                ->where('message', $profileUser->chirps()->first()->message)
                ->etc()
                ->has('user', fn (Assert $page) => $page
                    ->where('id', $profileUser->id)
                    ->etc()
                )
            )
    );
}

public function test_chirps_belonging_to_other_uses_are_not_included(): void
{
    $user = User::factory()->create();

    $otherUser = User::factory()
                ->has(Chirp::Factory()->count(5))
                ->create();

    $this->actingAs($user)
        ->get(route('profile.show',$user->id))
        ->assertInertia(fn (Assert $page) => $page
            ->component('Profile/Show')
            ->has('user', fn (Assert $page) => $page
                ->where('id', $user->id)
                ->where('name', $user->name)
                ->missing('email')
                ->missing('password')
                ->etc()
            )
            ->has('chirps',0)
        );
}

In the first test, we visit a public profile page and assert a 200 'ok' response is returned.

In the second test, we are asserting only a verified user can view a public profile.

In the third and fourth tests, we are testing that the only chirps on the page are those which belong to the profile owner, by asserting against the props available in the Vue component.

Find out more about testing with Inertia.js.

Chirp Beyond (Bootcamp) part 1 The missing tests

Silver343 — Tue, 12 Sep 2023 16:59:56 +0000

Welcome to Chirp Beyond (Bootcamp). This series of guides is just some of the ways you can extend and adapt Chirp the app created in the Laravel bootcamp.

These guides will follow on from the Inertia.js path in the Laravel bootcamp.

Tests

To test the code you created in the Laravel Bootcamp we will use PHPUnit a testing framework for PHP which Laravel provided built-in support, additionally, both Laravel and inertia.js provide testing helpers.

Running Tests

Use the command php artisan test in your terminal to run the existing test suite.

A total of 24 tests should run all passing.

You will notice that any users and chirps you created whilst developing Chirp are now gone, this is because when testing we are using the same database as the local version of the app. We can solve this by updating the phpunit.xml file.


  <env name="APP_ENV" value="testing"/>
  <env name="BCRYPT_ROUNDS" value="4"/>
  <env name="CACHE_DRIVER" value="array"/>
- <!-- <env name="DB_CONNECTION" value="sqlite"/> -->
- <!-- <env name="DB_DATABASE" value=":memory:"/> -->
+ <env name="DB_CONNECTION" value="sqlite"/>
+ <env name="DB_DATABASE" value="./database/test.sqlite"/>
+ <env name="DB_FOREIGN_KEYS" value="true"/>
  <env name="MAIL_MAILER" value="array"/>
  <env name="QUEUE_CONNECTION" value="sync"/>
  <env name="SESSION_DRIVER" value="array"/>

Factories

Before creating any new tests, we need to create model factories. Factories allow our application to create model resources using predefined data. This data is often fake data supplied via a package called fakerphp/faker.

To create a Chirp factory run the command php artisan make:factory ChirpFactory

The newly created Chirp factory can be found inside the database/factories directory.

Inside the factory, we need to update the definition() method.

public function definition(): array
{
    return [
-     //
+     'message' => fake()->paragraph(),
+     'user_id' => User::Factory()
    ];
}

As you can see factories can be used inside other factories, here we are using the user factory included by default.

Update Base Test Case

The tests we will be creating will extend the base test case found inside the tests directory.

We will update the test case to use LazilyRefreshDatabase, this will allow our database to be refreshed between tests if needed.

 <?php

 namespace Tests;

 use Illuminate\Foundation\Testing\TestCase as BaseTestCase;
+use Illuminate\Foundation\Testing\LazilyRefreshDatabase;

abstract class TestCase extends BaseTestCase
{

-    use CreatesApplication;
+    use CreatesApplication, LazilyRefreshDatabase;

}

Test Structure.

I tend to structure my test files in a similar way to my application files. This not only helps me determine where tests should reside, but can also make it easier to find tests in the future.

During the creation of Chirper, we created several files that require testing. These files are:

Events/ChirpCreated.php
Http/Controllers/ChirpController.php
Listeners/SendChirpNotifications.php
Policies/ChirpPolicy.php

Create Tests

We will begin by testing ChirpPolicy.php.

To create a test class, we can use the command php artisan make:test Policies/ChirpPolicyTest, the newly created test can be found in tests/Feature/Policies.

We need to test four aspects of the ChirpPolicy

The update method returns true if the user is the chirps author.
The update method returns false if the user is not the chirps author.
The delete method returns true if the user is the chirps author.
The delete method returns false if the user is not the chirps author.

<?php

namespace Tests\Feature\Policies;

use App\Models\Chirp;
use App\Models\User;
use Tests\TestCase;

class ChirpPolicyTest extends TestCase
{
    public function test_policy_returns_true_if_chirp_to_be_updated_belongs_to_user()
    {
        $chirp = Chirp::factory()->create();

        $this->assertTrue($chirp->user->can('update', $chirp));
    }

    public function test_policy_returns_false_if_chirp_to_be_updated_does_not_belongs_to_user()
    {
        $user = User::factory()->create();

        $chirp = Chirp::factory()->create();

        $this->assertFalse($user->can('update', $chirp));
    }

    public function test_policy_returns_true_if_chirp_to_be_deleted_belongs_to_user()
    {
        $chirp = Chirp::factory()->create();

        $this->assertTrue($chirp->user->can('delete', $chirp));
    }

    public function test_policy_returns_false_if_chirp_to_be_deleted_does_not_belongs_to_user()
    {
        $user = User::factory()->create();

        $chirp = Chirp::factory()->create();

        $this->assertFalse($user->can('update', $chirp));
    }
}

Chirp Controller Test

The next set of tests we will create will be for the Chirp Controller. To begin, we will create the test file using the command php artisan make:test Controllers/ChirpControllerTest

The test file will be created in tests/Feature/Controllers.

The ChirpController has four methods we need to test, not only do we need to test the expected (happy) path but also ensure the app handles errors and unexpected events correctly, therefore the majority of the tests are testing the validation rules used.

<?php

namespace Tests\Feature\Controllers;

use App\Models\Chirp;
use App\Models\User;
use Tests\TestCase;
use Inertia\Testing\AssertableInertia as Assert;

class ChirpControllerTest extends TestCase
{
    public function test_user_is_redirected_from_index_if_not_logged_in()
    {
        $response = $this->get(route('chirps.index'));

        $response->assertRedirect(route('login'));
    }

    public function test_index_returns_200()
    {
        $user = User::factory()->makeOne();

        $this->actingAs($user);

        $response = $this->get(route('chirps.index'));

        $response->assertOk();
    }

    public function test_index_has_chirps()
    {
        $user = User::factory()->create();

        $chirp = Chirp::factory(1)->create();

        $this->actingAs($user);

        $this->get(route('chirps.index'))
            ->assertInertia(fn (Assert $page) => $page
                ->component('Chirps/Index')
                ->has('chirps', 1, fn (Assert $page) => $page
                    ->where('message', $chirp->first()->message)
                    ->etc()
                    ->has('user', fn (Assert $page) => $page
                        ->where('id', $chirp->first()->user_id)
                        ->where('name', $chirp->first()->user->name)
                        ->missing('password')
                    )
                )
            );
    }

    public function test_new_chirp_can_be_created()
    {
        $this->assertDatabaseEmpty('chirps');

        $user = User::factory()->create();

        $this->actingAs($user);

        $response = $this->post(route('chirps.store'),['message' => 'test new message']);

        $this->assertDatabaseHas('chirps', [
            'message' => 'test new message',
        ]);

        $response->assertRedirect(route('chirps.index'));
    }

    public function test_new_chirp_must_have_message()
    {
        $user = User::factory()->create();

        $this->actingAs($user);

        $response = $this->post(route('chirps.store'),[]);

        $response->assertSessionHasErrors([
            'message' => 'The message field is required.'
        ]);
    }

    public function test_new_chirp_message_must_be_string()
    {
        $user = User::factory()->create();

        $this->actingAs($user);

        $response = $this->post(route('chirps.store'),['message' => 123]);

        $response->assertSessionHasErrors([
            'message' => 'The message field must be a string.'
        ]);
    }

    public function test_new_chirp_message_must_be_less_than_255_characters()
    {
        $user = User::factory()->create();

        $this->actingAs($user);

        $response = $this->post(route('chirps.store'),['message' => str_repeat('a',256)]);

        $response->assertSessionHasErrors([
            'message' => 'The message field must not be greater than 255 characters.'
        ]);
    }

    public function test_chirp_can_be_updated()
    {
        $chirp = Chirp::factory()->create();

        $this->actingAs($chirp->user);

        $response = $this->patch(route('chirps.update', $chirp),['message' => 'test new message']);

        $this->assertDatabaseHas('chirps', [
            'message' => 'test new message',
        ]);

        $response->assertRedirect(route('chirps.index'));
    }

    public function test_updated_chirp_must_have_message()
    {
        $chirp = Chirp::factory()->create();

        $this->actingAs($chirp->user);

        $response = $this->patch(route('chirps.update',$chirp->id),[]);

        $response->assertSessionHasErrors([
            'message' => 'The message field is required.'
        ]);
    }

    public function test_updated_chirp_message_must_be_string()
    {
        $chirp = Chirp::factory()->create();

        $this->actingAs($chirp->user);

        $response = $this->patch(route('chirps.update',$chirp->id),['message' => 123]);

        $response->assertSessionHasErrors([
            'message' => 'The message field must be a string.'
        ]);
    }

    public function test_updated_chirp_message_must_be_less_than_255_characters()
    {
        $chirp = Chirp::factory()->create();

        $this->actingAs($chirp->user);

        $response = $this->patch(route('chirps.update',$chirp->id),['message' => str_repeat('a',256)]);

        $response->assertSessionHasErrors([
            'message' => 'The message field must not be greater than 255 characters.'
        ]);
    }

    public function test_chirp_cannot_be_updated_by_non_owner()
    {
        $chirp = Chirp::factory()->create();

        $wrongUser = User::factory()->create();

        $this->actingAs($wrongUser);

        $response = $this->patch(route('chirps.update', $chirp),['message' => 'test new message']);

        $response->assertForbidden();
    }

    public function test_chirp_can_be_deleted()
    {
        $chirp = Chirp::factory()->create();

        $this->assertDatabaseCount('Chirps',1);

        $this->actingAs($chirp->user);

        $response = $this->delete(route('chirps.destroy',$chirp));

        $response->assertRedirect(route('chirps.index'));

        $this->assertDatabaseEmpty('chirps');
    }

    public function test_chirp_cannot_be_delete_by_non_owner()
    {
        $chirp = Chirp::factory()->create();

        $this->assertDatabaseCount('Chirps',1);

        $wrongUser = User::factory()->create();

        $this->actingAs($wrongUser);

        $response = $this->delete(route('chirps.destroy',$chirp));

        $response->assertForbidden();

        $this->assertDatabaseCount('Chirps',1);
    }
}

The tests cover a range of functionality, including checking that users are redirected if not logged in, that chirps can be created, updated, and deleted, and that validation rules are enforced for chirp messages. The tests also check that only the owner of a chirp can update or delete it.

To learn more about testing with Inertia.js, you can visit the official documentation.

Chirp Created Event Test

To create the tests for the ChirpCreated event use the command php artisan:make Events/ChirpCreatedTest

This will create our test file tests/Feature/Events/ChirpCreatedTest.php which we will update like so.

<?php

namespace Tests\Feature\Events;

use App\Events\ChirpCreated;
use App\Models\User;
use Illuminate\Support\Facades\Event;
use Tests\TestCase;

class ChirpCreatedtest extends TestCase
{
    /**
     * A basic feature test example.
     *
     * @return void
     */
    public function test_chirp_created_event_is_dispatched()
    {
        Event::fake();

        $user = User::factory()->create();

        $this->actingAs($user);

        $this->post(route('chirps.store'),['message' => 'test new message']);

        Event::assertDispatched(ChirpCreated::class);
    }
}

With this single test we are ensuring that the event is dispatched when a chirp is created, you will see we are using Event::fake();

This allows us to prevent any listeners from executing and assert against our events, you can find more about this at the Laravel docs.

Send Chirp Created Notifications Test

Create the test class for our listener using the command php artisan make:test Listeners/SendChirpCreatedNotificationsTest

We will update the new test class at tests/feature/Listeners.

namespace Tests\Feature\Listeners;

use App\Events\ChirpCreated;
use App\Listeners\SendChirpCreatedNotifications;
use App\Models\Chirp;
use App\Models\User;
use App\Notifications\NewChirp;
use Illuminate\Support\Facades\Event;
use Illuminate\Support\Facades\Notification;
use Tests\TestCase;

class SendChirpCreatedNotificationsTest extends TestCase
{
    /**
     * A basic feature test example.
     *
     * @return void
     */
    public function test_listining_for_chirp_created_event()
    {
        Event::fake();

        Event::assertListening(
            ChirpCreated::class,
            SendChirpCreatedNotifications::class
        );
    }

    public function test_notification_is_sent_to_all_but_chirp_creator()
    {
        Notification::fake();

        $users = User::factory(2)->create();

        $chirp = Chirp::factory()->create();

        Notification::assertSentTo(
            [$users], NewChirp::class
        );

        Notification::assertNotSentTo(
            [$chirp->user], NewChirp::class
        );
    }
}

We are again using Event::fake() to create assertions, this time we are asserting that our listener is attached to the ChirpCreated Event.

In the second test we are using Notification::fake(), this allows us to assert if and to who the notifications were sent. read more

We have now created all the tests for the Chirper application. These tests cover the Chirp Policy, Chirp Controller, and ChirpCreated event. We also tested the listener responsible for sending notifications when a new chirp is created. With these tests, we can be confident that our application is working as expected.