Notifications

app/Actions/Fortify/CreateNewUser.php

@@ -5,6 +5,7 @@
 use App\Models\User;
 use Illuminate\Support\Facades\Hash;
 use Illuminate\Support\Facades\Validator;
+use Illuminate\Support\Str;
 use Illuminate\Validation\Rule;
 use Laravel\Fortify\Contracts\CreatesNewUsers;
 
@@ -35,6 +36,7 @@ public function create(array $input): User
                 'string',
                 'min:6',
                 'max:20',
+                'alpha_dash',
                 Rule::unique(User::class, 'username'),
             ],
             'password' => $this->passwordRules(),
@@ -43,9 +45,9 @@ public function create(array $input): User
         return User::create([
             'name' => $input['name'],
             'email' => $input['email'],
-            'username' => $input['username'],
-            'opt_in' => isset($input['opt_in']),
+            'username' => Str::lower($input['username']),
             'password' => Hash::make($input['password']),
+            'opt_in' => isset($input['opt_in']),
         ]);
     }
 }

app/Http/Controllers/ReplyAbleController.php

@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Reply;
+
+class ReplyAbleController extends Controller
+{
+    public function redirect($id, $type)
+    {
+        $reply = Reply::where('replyable_id', $id)->where('replyable_type', $type)->firstOrFail();
+
+        return redirect(route_to_reply_able($reply->replyAble));
+    }
+}

app/Http/Controllers/SubscriptionController.php

@@ -17,4 +17,11 @@ public function unsubscribe(Subscribe $subscription)
 
         return redirect()->route('forum.show', $thread->slug());
     }
+
+    public function redirect($id, $type)
+    {
+        $subscribe = Subscribe::where('subscribeable_id', $id)->where('subscribeable_type', $type)->firstOrFail();
+
+        return redirect(route_to_reply_able($subscribe->subscribeAble));
+    }
 }

app/Http/Livewire/NotificationCount.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Http\Livewire;
+
+use Illuminate\Support\Facades\Auth;
+use Livewire\Component;
+
+class NotificationCount extends Component
+{
+    public int $count = 0;
+
+    protected $listeners = [
+        'NotificationMarkedAsRead' => 'updateCount',
+    ];
+
+    public function updateCount(int $count): int
+    {
+        return $count;
+    }
+
+    public function render()
+    {
+        $this->count = Auth::user()->unreadNotifications()->count();
+
+        return view('livewire.notification-count', [
+            'count' => $this->count,
+        ]);
+    }
+}

app/Http/Livewire/NotificationIndicator.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Http\Livewire;
+
+use Illuminate\Support\Facades\Auth;
+use Livewire\Component;
+
+class NotificationIndicator extends Component
+{
+    public bool $hasNotification = false;
+
+    protected $listeners = [
+        'NotificationMarkedAsRead' => 'setHasNotification',
+    ];
+
+    public function setHasNotification(int $count): bool
+    {
+        return $count > 0;
+    }
+
+    public function render()
+    {
+        $this->hasNotification = $this->setHasNotification(
+            Auth::user()->unreadNotifications()->count(),
+        );
+
+        return view('livewire.notification-indicator', [
+            'hasNotification' => $this->hasNotification,
+        ]);
+    }
+}

app/Http/Livewire/Notifications.php

@@ -0,0 +1,54 @@
+<?php
+
+namespace App\Http\Livewire;
+
+use App\Policies\NotificationPolicy;
+use Carbon\Carbon;
+use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
+use Illuminate\Notifications\DatabaseNotification;
+use Illuminate\Support\Facades\Auth;
+use Livewire\Component;
+use WireUi\Traits\Actions;
+
+class Notifications extends Component
+{
+    use Actions, AuthorizesRequests;
+
+    public $notificationId;
+
+    public function mount(): void
+    {
+        abort_if(Auth::guest(), 403);
+    }
+
+    public function getNotificationProperty(): DatabaseNotification
+    {
+        return DatabaseNotification::findOrFail($this->notificationId);
+    }
+
+    public function markAsRead(string $notificationId): void
+    {
+        $this->notificationId = $notificationId;
+
+        $this->authorize(NotificationPolicy::MARK_AS_READ, $this->notification);
+
+        $this->notification->markAsRead();
+
+        $this->notification()->success('Notification', 'Cette notification a été marquée comme lue.');
+
+        $this->emit('NotificationMarkedAsRead', Auth::user()->unreadNotifications()->count());
+    }
+
+    public function render()
+    {
+        return view('livewire.notifications', [
+            'notifications' => Auth::user()
+                ->unreadNotifications()
+                ->take(10)
+                ->get()
+                ->groupBy(
+                    fn ($notification) => Carbon::parse($notification->created_at)->format('M, Y')
+                ),
+        ]);
+    }
+}

app/Http/Livewire/User/Settings/Notifications.php

@@ -0,0 +1,37 @@
+<?php
+
+namespace App\Http\Livewire\User\Settings;
+
+use App\Models\Subscribe;
+use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
+use Illuminate\Support\Facades\Auth;
+use Livewire\Component;
+use WireUi\Traits\Actions;
+
+class Notifications extends Component
+{
+    use Actions, AuthorizesRequests;
+
+    public $subscribeId;
+
+    public function unsubscribe(string $subscribeId)
+    {
+        $this->subscribeId = $subscribeId;
+
+        $this->subscribe->delete();
+
+        $this->notification()->success('Désabonnement', 'Vous êtes maintenant désabonné de cet fil.');
+    }
+
+    public function getSubscribeProperty(): Subscribe
+    {
+        return Subscribe::where('uuid', $this->subscribeId)->firstOrFail();
+    }
+
+    public function render()
+    {
+        return view('livewire.user.settings.notifications', [
+            'subscriptions' => Auth::user()->subscriptions,
+        ]);
+    }
+}

app/Models/User.php

@@ -187,6 +187,11 @@ public function discussions(): HasMany
         return $this->hasMany(Discussion::class);
     }
 
+    public function subscriptions(): HasMany
+    {
+        return $this->hasMany(Subscribe::class);
+    }
+
     public function deleteThreads()
     {
         // We need to explicitly iterate over the threads and delete them

app/Notifications/YouWereMentioned.php

@@ -39,6 +39,7 @@ public function toArray($notifiable): array
             'author_name' => $this->reply->author->name,
             'author_username' => $this->reply->author->username,
             'author_photo' => $this->reply->author->profile_photo_url,
+            'replyable_id' => $this->reply->replyable_id,
             'replyable_type' => $this->reply->replyable_type,
             'replyable_subject' => $this->reply->replyAble->replyAbleSubject(),
         ];

app/Policies/NotificationPolicy.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Policies;
+
+use App\Models\User;
+use Illuminate\Notifications\DatabaseNotification;
+
+class NotificationPolicy
+{
+    const MARK_AS_READ = 'markAsRead';
+
+    /**
+     * Determine if the given notification can be marked as read by the user.
+     */
+    public function markAsRead(User $user, DatabaseNotification $notification): bool
+    {
+        return $notification->notifiable->is($user);
+    }
+}

app/Providers/AuthServiceProvider.php

@@ -8,9 +8,11 @@
 use App\Models\Thread;
 use App\Policies\ArticlePolicy;
 use App\Policies\DiscussionPolicy;
+use App\Policies\NotificationPolicy;
 use App\Policies\ReplyPolicy;
 use App\Policies\ThreadPolicy;
 use Illuminate\Foundation\Support\Providers\AuthServiceProvider as ServiceProvider;
+use Illuminate\Notifications\DatabaseNotification as Notification;
 use Illuminate\Support\Facades\Gate;
 
 class AuthServiceProvider extends ServiceProvider
@@ -25,6 +27,7 @@ class AuthServiceProvider extends ServiceProvider
         Thread::class => ThreadPolicy::class,
         Reply::class => ReplyPolicy::class,
         Discussion::class => DiscussionPolicy::class,
+        Notification::class => NotificationPolicy::class,
     ];
 
     /**

app/helpers.php

@@ -79,3 +79,19 @@ function getFilter(string $key, array $filters = [], string $default = 'recent')
         return in_array($filter, $filters) ? $filter : $default;
     }
 }
+
+if (! function_exists('route_to_reply_able')) {
+    /**
+     * Returns the route for the replyAble.
+     */
+    function route_to_reply_able(mixed $replyAble)
+    {
+        if ($replyAble instanceof App\Models\Thread) {
+            return route('forum.show', $replyAble->slug());
+        }
+
+        if ($replyAble instanceof App\Models\Discussion) {
+            return route('discussions.show', $replyAble->slug());
+        }
+    }
+}

public/mix-manifest.json

@@ -1,4 +1,4 @@
 {
     "/js/app.js": "/js/app.js?id=9abd09e80a5426001802",
-    "/css/app.css": "/css/app.css?id=1b6e5ebdedf4aff61229"
+    "/css/app.css": "/css/app.css?id=f51b72c7337e6b57d1c3"
 }

resources/views/components/notifications/new_comment.blade.php

@@ -0,0 +1,30 @@
+@php($data = $notification->data)
+
+<li>
+    <div class="relative pb-8">
+        <span class="absolute top-5 left-5 -ml-px h-full w-0.5 bg-skin-footer" aria-hidden="true"></span>
+        <div class="relative flex items-start space-x-8">
+            <div class="whitespace-nowrap text-sm leading-5 text-skin-base">
+                <div class="flex items-center space-x-3">
+                    <span class="p-2 flex items-center justify-center rounded-full bg-skin-card-gray">
+                        <x-heroicon-s-chat-alt class="w-5 h-5 text-skin-base"/>
+                    </span>
+                    <div>
+                        <p class="font-normal text-base leading-6">Un commentaire a été ajoutée dans la conversation <a href="{{ route('replyable', [$data['replyable_id'], $data['replyable_type']]) }}" class="text-skin-primary hover:text-skin-primary-hover">"{{ $data['replyable_subject'] }}"</a>.</p>
+                        <p class="mt-1 text-sm leading-5 text-skin-muted font-sans">
+                            <time-ago time="{{ $notification->created_at->getTimestamp() }}" />
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="whitespace-nowrap text-sm leading-5 text-skin-base text-right">
+                <div class="flex justify-end -mt-3">
+                    <button wire:click="markAsRead('{{ $notification->id }}')" type="button" title="Marquer comme lue" class="inline-flex items-center justify-center p-2 bg-green-500 bg-opacity-10 text-green-600 text-sm leading-5 rounded-full focus:outline-none transform hover:scale-125 transition-all">
+                        <x-heroicon-s-check class="w-5 h-5" />
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</li>

resources/views/components/notifications/new_mention.blade.php

@@ -0,0 +1,33 @@
+@php($data = $notification->data)
+
+<li>
+    <div class="relative pb-8">
+        <span class="absolute top-5 left-5 -ml-px h-full w-0.5 bg-skin-footer" aria-hidden="true"></span>
+        <div class="relative flex items-start space-x-8">
+            <div class="whitespace-nowrap text-sm leading-5 text-skin-base">
+                <div class="flex items-center space-x-3">
+                    <span class="p-2 flex items-center justify-center rounded-full bg-skin-card-gray">
+                        <x-heroicon-s-at-symbol class="w-5 h-5 text-skin-base"/>
+                    </span>
+                    <div>
+                        <p class="font-normal text-base leading-6">
+                            <a href="{{ route('profile', $data['author_username']) }}" class="font-medium text-skin-primary">{{ $data['author_name'] }}</a>
+                            vous a mentionné dans <a href="{{ route('replyable', [$data['replyable_id'], $data['replyable_type']]) }}" class="text-skin-primary hover:text-skin-primary-hover">"{{ $data['replyable_subject'] }}"</a>.
+                        </p>
+                        <p class="mt-1 text-sm leading-5 text-skin-muted font-sans">
+                            <time-ago time="{{ $notification->created_at->getTimestamp() }}" />
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="whitespace-nowrap text-sm leading-5 text-skin-base text-right">
+                <div class="flex justify-end -mt-3">
+                    <button wire:click="markAsRead('{{ $notification->id }}')" type="button" title="Marquer comme lue" class="inline-flex items-center justify-center p-2 bg-green-500 bg-opacity-10 text-green-600 text-sm leading-5 rounded-full focus:outline-none transform hover:scale-125 transition-all">
+                        <x-heroicon-s-check class="w-5 h-5" />
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</li>

resources/views/components/notifications/new_reply.blade.php

@@ -0,0 +1,30 @@
+@php($data = $notification->data)
+
+<li>
+    <div class="relative pb-8">
+        <span class="absolute top-5 left-5 -ml-px h-full w-0.5 bg-skin-footer" aria-hidden="true"></span>
+        <div class="relative flex items-start space-x-8">
+            <div class="whitespace-nowrap text-sm leading-5 text-skin-base">
+                <div class="flex items-center space-x-3">
+                    <span class="p-2 flex items-center justify-center rounded-full bg-skin-card-gray">
+                        <x-heroicon-s-reply class="w-5 h-5 text-skin-base"/>
+                    </span>
+                    <div>
+                        <p class="font-normal text-base leading-6">Une nouvelle réponse a été ajoutée au sujet <a href="{{ route('replyable', [$data['replyable_id'], $data['replyable_type']]) }}" class="text-skin-primary hover:text-skin-primary-hover">"{{ $data['replyable_subject'] }}"</a>.</p>
+                        <p class="mt-1 text-sm leading-5 text-skin-muted font-sans">
+                            <time-ago time="{{ $notification->created_at->getTimestamp() }}" />
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="whitespace-nowrap text-sm leading-5 text-skin-base text-right">
+                <div class="flex justify-end -mt-3">
+                    <button wire:click="markAsRead('{{ $notification->id }}')" type="button" title="Marquer comme lue" class="inline-flex items-center justify-center p-2 bg-green-500 bg-opacity-10 text-green-600 text-sm leading-5 rounded-full focus:outline-none transform hover:scale-125 transition-all">
+                        <x-heroicon-s-check class="w-5 h-5" />
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</li>