✨ mise en place du listing des discussions

Author: mckenziearts

app/Http/Controllers/DiscussionController.php

@@ -31,7 +31,7 @@ public function show(Discussion $discussion)
             ->twitterSite('laravelcm')
             ->withUrl();
 
-        return view('discussions.show', compact('discussion'));
+        return view('discussions.show', ['discussion' => $discussion->load('tags')]);
     }
 
     public function create()

app/Http/Livewire/Articles/Browse.php

@@ -5,35 +5,18 @@
 use App\Models\Article;
 use App\Models\Tag;
 use App\Traits\WithInfiniteScroll;
+use App\Traits\WithTags;
 use Livewire\Component;
 
 class Browse extends Component
 {
-    use WithInfiniteScroll;
-
-    public string $sortBy = 'recent';
-    public ?string $tag = null;
+    use WithInfiniteScroll, WithTags;
 
     protected $queryString = [
         'tag' => ['except' => ''],
         'sortBy' => ['except' => 'recent'],
     ];
 
-    public function toggleTag($tag): void
-    {
-        $this->tag = $this->tag !== $tag && $this->tagExists($tag) ? $tag : null;
-    }
-
-    public function sortBy($sort): void
-    {
-        $this->sortBy = $this->validSort($sort) ? $sort : 'recent';
-    }
-
-    public function tagExists($tag): bool
-    {
-        return Tag::where('slug', $tag)->exists();
-    }
-
     public function validSort($sort): bool
     {
         return in_array($sort, [

app/Http/Livewire/Discussions/Browse.php

@@ -2,12 +2,51 @@
 
 namespace App\Http\Livewire\Discussions;
 
+use App\Models\Discussion;
+use App\Models\Tag;
+use App\Traits\WithInfiniteScroll;
+use App\Traits\WithTags;
 use Livewire\Component;
 
 class Browse extends Component
 {
+    use WithInfiniteScroll, WithTags;
+
+    protected $queryString = [
+        'tag' => ['except' => ''],
+        'sortBy' => ['except' => 'recent'],
+    ];
+
+    public function validSort($sort): bool
+    {
+        return in_array($sort, [
+            'recent',
+            'popular',
+            'active',
+        ]);
+    }
+
     public function render()
     {
-        return view('livewire.discussions.browse');
+        $discussions = Discussion::with('tags')
+            ->withCount('replies')
+            ->notPinned();
+
+        $tags = Tag::whereJsonContains('concerns', ['discussion'])->orderBy('name')->get();
+
+        $selectedTag = Tag::where('name', $this->tag)->first();
+
+        if ($this->tag) {
+            $discussions->forTag($this->tag);
+        }
+
+        $discussions->{$this->sortBy}();
+
+        return view('livewire.discussions.browse', [
+            'discussions' => $discussions->paginate($this->perPage),
+            'tags' => $tags,
+            'selectedTag' => $selectedTag,
+            'selectedSortBy' => $this->sortBy,
+        ]);
     }
 }

app/Http/Livewire/Reactions.php

@@ -14,6 +14,8 @@ class Reactions extends Component
 
     public Model $model;
     public bool $withPlaceHolder = true;
+    public bool $withBackground = true;
+    public string $direction = 'right';
 
     public function userReacted(string $reaction)
     {

app/Models/Discussion.php

@@ -61,7 +61,6 @@ class Discussion extends Model implements ReactableInterface, ReplyInterface, Su
      * @var array
      */
     protected $with = [
-        'tags',
         'author',
     ];
 

app/Traits/WithTags.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Traits;
+
+use App\Models\Tag;
+
+trait WithTags {
+    public ?string $tag = null;
+    public string $sortBy = 'recent';
+
+    public function toggleTag($tag): void
+    {
+        $this->tag = $this->tag !== $tag && $this->tagExists($tag) ? $tag : null;
+    }
+
+    public function sortBy($sort): void
+    {
+        $this->sortBy = $this->validSort($sort) ? $sort : 'recent';
+    }
+
+    public function tagExists($tag): bool
+    {
+        return Tag::where('slug', $tag)->exists();
+    }
+}

public/css/app.css

@@ -4331,6 +4331,9 @@ select {
 .bottom-0 {
 	bottom: 0px;
 }
+.-right-1 {
+	right: -0.25rem;
+}
 .-top-3 {
 	top: -0.75rem;
 }
@@ -4346,9 +4349,6 @@ select {
 .-bottom-0\.5 {
 	bottom: -0.125rem;
 }
-.-right-1 {
-	right: -0.25rem;
-}
 .-bottom-0 {
 	bottom: 0px;
 }
@@ -4389,6 +4389,14 @@ select {
 	margin-left: auto;
 	margin-right: auto;
 }
+.mx-2 {
+	margin-left: 0.5rem;
+	margin-right: 0.5rem;
+}
+.mx-0 {
+	margin-left: 0px;
+	margin-right: 0px;
+}
 .mx-1\.5 {
 	margin-left: 0.375rem;
 	margin-right: 0.375rem;
@@ -4397,10 +4405,6 @@ select {
 	margin-left: 0.25rem;
 	margin-right: 0.25rem;
 }
-.mx-2 {
-	margin-left: 0.5rem;
-	margin-right: 0.5rem;
-}
 .my-8 {
 	margin-top: 2rem;
 	margin-bottom: 2rem;
@@ -4417,10 +4421,6 @@ select {
 	margin-top: 2.5rem;
 	margin-bottom: 2.5rem;
 }
-.mx-0 {
-	margin-left: 0px;
-	margin-right: 0px;
-}
 .-mx-4 {
 	margin-left: -1rem;
 	margin-right: -1rem;
@@ -4486,6 +4486,9 @@ select {
 .-ml-1 {
 	margin-left: -0.25rem;
 }
+.mr-1 {
+	margin-right: 0.25rem;
+}
 .ml-1\.5 {
 	margin-left: 0.375rem;
 }
@@ -4495,9 +4498,6 @@ select {
 .mr-1\.5 {
 	margin-right: 0.375rem;
 }
-.mr-1 {
-	margin-right: 0.25rem;
-}
 .mt-4 {
 	margin-top: 1rem;
 }
@@ -5117,16 +5117,16 @@ select {
 	margin-right: calc(2rem * var(--tw-space-x-reverse));
 	margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
 }
-.space-y-5 > :not([hidden]) ~ :not([hidden]) {
-	--tw-space-y-reverse: 0;
-	margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
-	margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
-}
 .space-y-16 > :not([hidden]) ~ :not([hidden]) {
 	--tw-space-y-reverse: 0;
 	margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse)));
 	margin-bottom: calc(4rem * var(--tw-space-y-reverse));
 }
+.space-y-5 > :not([hidden]) ~ :not([hidden]) {
+	--tw-space-y-reverse: 0;
+	margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
+	margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
+}
 .space-x-6 > :not([hidden]) ~ :not([hidden]) {
 	--tw-space-x-reverse: 0;
 	margin-right: calc(1.5rem * var(--tw-space-x-reverse));
@@ -5164,10 +5164,6 @@ select {
 	--tw-divide-opacity: 1;
 	border-color: rgba(228, 228, 231, var(--tw-divide-opacity));
 }
-.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
-	--tw-divide-opacity: 1;
-	border-color: rgba(229, 231, 235, var(--tw-divide-opacity));
-}
 .self-start {
 	align-self: flex-start;
 }
@@ -5267,15 +5263,15 @@ select {
 .rounded-tl-sm {
 	border-top-left-radius: 0.125rem;
 }
+.rounded-tl {
+	border-top-left-radius: 0.25rem;
+}
 .rounded-tr-lg {
 	border-top-right-radius: 0.5rem;
 }
 .rounded-br-lg {
 	border-bottom-right-radius: 0.5rem;
 }
-.rounded-tl {
-	border-top-left-radius: 0.25rem;
-}
 .border {
 	border-width: 1px;
 }
@@ -5701,6 +5697,14 @@ select {
 	padding-left: 0px;
 	padding-right: 0px;
 }
+.px-0\.5 {
+	padding-left: 0.125rem;
+	padding-right: 0.125rem;
+}
+.py-px {
+	padding-top: 1px;
+	padding-bottom: 1px;
+}
 .px-3\.5 {
 	padding-left: 0.875rem;
 	padding-right: 0.875rem;
@@ -5713,14 +5717,6 @@ select {
 	padding-top: 0.625rem;
 	padding-bottom: 0.625rem;
 }
-.px-0\.5 {
-	padding-left: 0.125rem;
-	padding-right: 0.125rem;
-}
-.py-px {
-	padding-top: 1px;
-	padding-bottom: 1px;
-}
 .pr-2 {
 	padding-right: 0.5rem;
 }
@@ -5832,6 +5828,9 @@ select {
 .pt-12 {
 	padding-top: 3rem;
 }
+.pb-6 {
+	padding-bottom: 1.5rem;
+}
 .text-left {
 	text-align: left;
 }
@@ -6176,10 +6175,6 @@ select {
 	--tw-text-opacity: 1;
 	color: rgba(127, 29, 29, var(--tw-text-opacity));
 }
-.text-gray-900 {
-	--tw-text-opacity: 1;
-	color: rgba(17, 24, 39, var(--tw-text-opacity));
-}
 .underline {
 	text-decoration: underline;
 }
@@ -6731,11 +6726,6 @@ html {
 	background-color: rgba(24, 24, 27, var(--tw-bg-opacity));
 }
 
-.hover\:bg-gray-50:hover {
-	--tw-bg-opacity: 1;
-	background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
-}
-
 .hover\:text-skin-inverted-muted:hover {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-text-inverted-muted), var(--tw-text-opacity));
@@ -9093,30 +9083,10 @@ html {
 		grid-column: span 10 / span 10;
 	}
 
-	.lg\:col-start-9 {
-		grid-column-start: 9;
-	}
-
-	.lg\:col-start-8 {
-		grid-column-start: 8;
-	}
-
 	.lg\:col-start-10 {
 		grid-column-start: 10;
 	}
 
-	.lg\:col-end-12 {
-		grid-column-end: 12;
-	}
-
-	.lg\:col-end-13 {
-		grid-column-end: 13;
-	}
-
-	.lg\:col-end-auto {
-		grid-column-end: auto;
-	}
-
 	.lg\:mx-0 {
 		margin-left: 0px;
 		margin-right: 0px;
@@ -9235,6 +9205,10 @@ html {
 		justify-content: flex-end;
 	}
 
+	.lg\:justify-between {
+		justify-content: space-between;
+	}
+
 	.lg\:gap-6 {
 		gap: 1.5rem;
 	}

resources/views/articles/show.blade.php

@@ -85,7 +85,7 @@
                     @if ($article->tags->isNotEmpty())
                         <div class="flex items-center space-x-2">
                             @foreach ($article->tags as $tag)
-                                <x-articles.tag :tag="$tag" />
+                                <x-tag :tag="$tag" />
                             @endforeach
                         </div>
                     @endif

resources/views/components/articles/filter.blade.php

@@ -13,7 +13,7 @@ class="{{ $selectedSortBy === 'recent' ? 'bg-skin-link text-skin-inverted': 'tex
                 <path clip-rule="evenodd" d="M3.61 12c0 6.937 2.098 9.25 8.391 9.25 6.294 0 8.391-2.313 8.391-9.25 0-6.937-2.097-9.25-8.391-9.25C5.708 2.75 3.61 5.063 3.61 12z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
             </svg>
             <span class="truncate">
-                Récents
+                Récent
             </span>
         </button>