Merge pull request #21 from MmmarRTha/feature/likes_with_livewire

feature/likes_with_livewire
MmmarRTha · May 1, 2024 · 2ab56b4 · 2ab56b4
2 parents 89c064d + 4629a56
commit 2ab56b4
Show file tree

Hide file tree

Showing 9 changed files with 143 additions and 70 deletions.
diff --git a/app/Http/Controllers/LikeController.php b/app/Http/Controllers/LikeController.php
diff --git a/app/Livewire/LikePost.php b/app/Livewire/LikePost.php
@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+
+class LikePost extends Component
+{
+    public $post;
+    public $isLiked;
+    public $likesCount;
+
+    public function mount($post)
+    {
+        $this->isLiked = $post->checkLike(auth()->user());
+        $this->likesCount = $post->likes->count();
+    }
+
+    public function like()
+    {
+        if ($this->post->checkLike(auth()->user()))
+        {
+            $this->post->likes()->where('post_id', $this->post->id)->delete();
+            $this->isLiked = false;
+            $this->likesCount--;
+        } else
+        {
+            $this->post->likes()->create([
+                'user_id' => auth()->user()->id,
+            ]);
+            $this->isLiked = true;
+            $this->likesCount++;
+        }
+    }
+
+    public function render()
+    {
+        return view('livewire.like-post');
+    }
+}
diff --git a/composer.json b/composer.json
@@ -8,7 +8,8 @@
         "php": "^8.2",
         "intervention/image": "^2",
         "laravel/framework": "^11.0",
-        "laravel/tinker": "^2.9"
+        "laravel/tinker": "^2.9",
+        "livewire/livewire": "^3.4"
     },
     "require-dev": {
         "fakerphp/faker": "^1.23",

diff --git a/composer.lock b/composer.lock
diff --git a/public/uploads/056cef18-12a4-4dcd-ad99-140883d5c170.jpg b/public/uploads/056cef18-12a4-4dcd-ad99-140883d5c170.jpg
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
@@ -7,6 +7,7 @@
         @stack('styles')
         <title>LaraGram App - @yield('title_name')</title>
         @vite('resources/css/app.css')
+        @livewireStyles
     </head>
     <body class="bg-slate-100">
         <header class="p-5 bg-white border-b shadow">
@@ -53,5 +54,6 @@
                 <p>Developed by <a class="purple_gradient" href="https://github.com/mmmarrtha">Martha Nieto</a></p>
             </div>
         </footer>
+        @livewireScripts
     </body>
 </html>
diff --git a/resources/views/livewire/like-post.blade.php b/resources/views/livewire/like-post.blade.php
@@ -0,0 +1,12 @@
+<div>
+    <div class="flex items-center gap-2">
+        <button wire:click="like" >
+            <svg xmlns="http://www.w3.org/2000/svg" fill="{{ $isLiked ? 'red' : 'none' }}" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" />
+                </svg>
+        </button>
+        <p class="font-bold">{{ $likesCount }}
+            <span class="font-normal"> Likes</span>
+        </p>
+    </div>
+</div>
diff --git a/resources/views/posts/show.blade.php b/resources/views/posts/show.blade.php
@@ -11,34 +11,8 @@
 
         <div class="flex items-center gap-4 p-3">
             @auth
-                @if( $post->checkLike(auth()->user()) )
-                    <form method="POST" action="{{ route('posts.likes.destroy', $post) }}">
-                        @method('DELETE')
-                        @csrf
-                        <div class="my-4">
-                            <button type="submit">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="red" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" />
-                                    </svg>
-                            </button>
-                        </div>
-                    </form>
-                @else
-                    <form method="POST" action="{{ route('posts.likes.store', $post) }}">
-                        @csrf
-                        <div class="my-4">
-                            <button type="submit">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" />
-                                    </svg>
-                            </button>
-                        </div>
-                    </form>
-                @endif
+                <livewire:like-post :post="$post"/>
             @endauth
-            <p class="font-bold">{{ $post->likes->count() }}
-                <span class="font-normal"> Likes</span>
-            </p>
         </div>
 
         <div>

diff --git a/routes/web.php b/routes/web.php
@@ -6,7 +6,6 @@
 use Illuminate\Support\Facades\Route;
 use App\Http\Controllers\PostController;
 use App\Http\Controllers\ImageController;
-use App\Http\Controllers\LikeController;
 use App\Http\Controllers\LoginController;
 use App\Http\Controllers\LogoutController;
 use App\Http\Controllers\ProfileController;
@@ -21,23 +20,17 @@
 Route::post('/login', [LoginController::class, 'store']);
 Route::post('/logout', [LogoutController::class, 'store'])->name('logout');
 
-Route::get('/update-profile', [ProfileController::class, 'index'])->name('profile.index')->middleware('auth');
-Route::post('/update-profile', [ProfileController::class, 'store'])->name('profile.store');
-
-Route::get('/posts/create', [PostController::class, 'create'])->name('posts.create')->middleware('auth');
-Route::post('/posts', [PostController::class, 'store'])->name('posts.store')->middleware('auth');
-
-Route::delete('posts/{post}', [PostController::class, 'destroy'])->name('posts.destroy');
-
-Route::post('/{user:username}/posts/{post}', [CommentController::class, 'store'])->name('comments.store');
-
-Route::post('/resources/images', [ImageController::class, 'store'])->name('images.store');
-
-Route::post('/posts/{post}/likes', [LikeController::class, 'store'])->name('posts.likes.store');
-Route::delete('/posts/{post}/likes', [LikeController::class, 'destroy'])->name('posts.likes.destroy');
+Route::middleware('auth')->group(function () {
+    Route::get('/update-profile', [ProfileController::class, 'index'])->name('profile.index');
+    Route::post('/update-profile', [ProfileController::class, 'store'])->name('profile.store');
+    Route::get('/posts/create', [PostController::class, 'create'])->name('posts.create');
+    Route::post('/posts', [PostController::class, 'store'])->name('posts.store');
+    Route::delete('posts/{post}', [PostController::class, 'destroy'])->name('posts.destroy');
+    Route::post('/{user:username}/posts/{post}', [CommentController::class, 'store'])->name('comments.store');
+    Route::post('/resources/images', [ImageController::class, 'store'])->name('images.store');
+});
 
 Route::get('/{user:username}', [PostController::class, 'index'])->name('posts.index');
 Route::get('/{user:username}/posts/{post}', [PostController::class, 'show'])->name('posts.show');
-
 Route::post('/{user:username}/follow', [FollowerController::class, 'store'])->name('users.follow');
 Route::delete('/{user:username}/unfollow', [FollowerController::class, 'destroy'])->name('users.unfollow');