From 7804d6309fda3291ab9b35017579ebe366a74dfc Mon Sep 17 00:00:00 2001
From: Allen <allenjianggo@gmail.com>
Date: Tue, 12 Nov 2024 15:02:40 +0800
Subject: [PATCH] refactor: comment order dropdown

---
 app/Enums/CommentOrder.php                    | 11 +++-
 .../pages/users/show-user-page.blade.php      |  6 +--
 .../shared/comments/comments.blade.php        | 51 ++++++-------------
 .../livewire/shared/posts/posts.blade.php     |  1 +
 4 files changed, 29 insertions(+), 40 deletions(-)

diff --git a/app/Enums/CommentOrder.php b/app/Enums/CommentOrder.php
index 9bcbbcb3..d0652ebd 100644
--- a/app/Enums/CommentOrder.php
+++ b/app/Enums/CommentOrder.php
@@ -4,9 +4,18 @@
 
 enum CommentOrder: string
 {
+    case POPULAR = 'popular';
+
     case LATEST = 'latest';
 
     case OLDEST = 'oldest';
 
-    case POPULAR = 'popular';
+    public function label(): string
+    {
+        return match ($this) {
+            self::POPULAR => '熱門留言',
+            self::LATEST => '由新到舊',
+            self::OLDEST => '由舊到新',
+        };
+    }
 }
diff --git a/resources/views/livewire/pages/users/show-user-page.blade.php b/resources/views/livewire/pages/users/show-user-page.blade.php
index 1f61832f..2ce4767b 100644
--- a/resources/views/livewire/pages/users/show-user-page.blade.php
+++ b/resources/views/livewire/pages/users/show-user-page.blade.php
@@ -54,7 +54,7 @@ class="relative z-20 inline-flex h-8 w-full cursor-pointer items-center justify-
               x-on:click="tabButtonClicked($el)"
               {{-- update url query parameter in livewire --}}
               wire:click="changeTab('{{ $userInfoTab }}')"
-              wire:key="{{ $userInfoTab->value . '-tab-button' }}"
+              wire:key="{{ $userInfoTab->value }}-tab-button"
             >
               <x-dynamic-component
                 class="w-4"
@@ -79,12 +79,12 @@ class="absolute left-0 z-10 h-full w-1/2 duration-300 ease-out"
             x-cloak
             x-show="tabContentActive($el)"
             x-transition:enter.duration.300ms
-            wire:key="{{ $userInfoTab->value . '-content' }}"
+            wire:key="{{ $userInfoTab->value }}-content"
           >
             <livewire:dynamic-component
-              :key="$userInfoTab->value . '-content'"
               :is="$userInfoTab->livewireComponentName()"
               :user-id="$user->id"
+              :key="$userInfoTab->value . '-content'"
             />
           </div>
         @endforeach
diff --git a/resources/views/livewire/shared/comments/comments.blade.php b/resources/views/livewire/shared/comments/comments.blade.php
index 05c5b8c6..77a4bfd0 100644
--- a/resources/views/livewire/shared/comments/comments.blade.php
+++ b/resources/views/livewire/shared/comments/comments.blade.php
@@ -73,42 +73,21 @@ class="absolute right-0 z-10 mt-2 w-32 origin-top-right rounded-md bg-gray-50 sh
             x-on:click.outside="closeOrderDropdown"
           >
             <div class="w-full py-1">
-              <button
-                data-order="popular"
-                type="button"
-                @class([
-                    'flex w-full justify-start px-4 py-2',
-                    'bg-gray-200 text-gray-900 outline-none dark:bg-gray-600 dark:text-gray-50' =>
-                        $order === CommentOrder::POPULAR,
-                    'text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700' =>
-                        $order !== CommentOrder::POPULAR,
-                ])
-                x-on:click="changeOrder"
-              >熱門留言</button>
-              <button
-                data-order="latest"
-                type="button"
-                @class([
-                    'flex w-full justify-start px-4 py-2',
-                    'bg-gray-200 text-gray-900 outline-none dark:bg-gray-600 dark:text-gray-50' =>
-                        $order === CommentOrder::LATEST,
-                    'text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700' =>
-                        $order !== CommentOrder::LATEST,
-                ])
-                x-on:click="changeOrder"
-              >由新到舊</button>
-              <button
-                data-order="oldest"
-                type="button"
-                @class([
-                    'flex w-full justify-start px-4 py-2',
-                    'bg-gray-200 text-gray-900 outline-none dark:bg-gray-600 dark:text-gray-50' =>
-                        $order === CommentOrder::OLDEST,
-                    'text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700' =>
-                        $order !== CommentOrder::OLDEST,
-                ])
-                x-on:click="changeOrder"
-              >由舊到新</button>
+              @foreach (CommentOrder::cases() as $commentOrder)
+                <button
+                  data-order="{{ $commentOrder->value }}"
+                  type="button"
+                  @class([
+                      'flex w-full justify-start px-4 py-2',
+                      'bg-gray-200 text-gray-900 outline-none dark:bg-gray-600 dark:text-gray-50' =>
+                          $order === $commentOrder,
+                      'text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700' =>
+                          $order !== $commentOrder,
+                  ])
+                  x-on:click="changeOrder"
+                  wire:key="{{ $commentOrder->value }}-comment-order"
+                >{{ $commentOrder->label() }}</button>
+              @endforeach
             </div>
           </div>
         </div>
diff --git a/resources/views/livewire/shared/posts/posts.blade.php b/resources/views/livewire/shared/posts/posts.blade.php
index cd78cc3b..24995857 100644
--- a/resources/views/livewire/shared/posts/posts.blade.php
+++ b/resources/views/livewire/shared/posts/posts.blade.php
@@ -10,6 +10,7 @@
         <button
           type="button"
           wire:click.prevent="changeOrder('{{ $postOrder }}')"
+          wire:key="{{ $postOrder->value }}-post-order"
           @class([
               'flex w-1/3 md:w-auto items-center px-4 py-2 transition duration-300 rounded-lg ',
               'bg-gray-50 dark:bg-gray-800' => $order === $postOrder->value,