From 32f5880e495ff39b66d8ea45cdb165620ff0ff69 Mon Sep 17 00:00:00 2001
From: Anurat Eiamphoklarp <rhymerealm@gmail.com>
Date: Tue, 12 Mar 2024 03:38:34 +0700
Subject: [PATCH] #44 add chapter text in chapter filter menu

---
 src/components/SelectChapters/ChapterButton.jsx  | 4 ++--
 src/components/SelectChapters/SelectChapters.jsx | 8 +++++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/SelectChapters/ChapterButton.jsx b/src/components/SelectChapters/ChapterButton.jsx
index a8a5726..fce4287 100644
--- a/src/components/SelectChapters/ChapterButton.jsx
+++ b/src/components/SelectChapters/ChapterButton.jsx
@@ -2,7 +2,7 @@ import { Icon } from "@iconify/react";
 
 import chapterColorCode from "../../constants/chapterColorCode";
 
-function ChapterButton({ chapter, selected, onClick }) {
+function ChapterButton({ chapter, wording, selected, onClick }) {
   const activeStyle = "rounded-full text-black px-2";
   const inactiveStyle = "text-[#9f9f9f] px-4";
 
@@ -33,7 +33,7 @@ function ChapterButton({ chapter, selected, onClick }) {
           </div>
         )}
         <div className="text-ellipsis whitespace-nowrap overflow-hidden">
-          {chapter}
+          {wording}
         </div>
       </div>
     </button>
diff --git a/src/components/SelectChapters/SelectChapters.jsx b/src/components/SelectChapters/SelectChapters.jsx
index 4d66b34..773e2b7 100644
--- a/src/components/SelectChapters/SelectChapters.jsx
+++ b/src/components/SelectChapters/SelectChapters.jsx
@@ -1,5 +1,5 @@
 import ChapterButton from "./ChapterButton";
-import chapters from "../../constants/chapters";
+import chapters, { chapterNameToId } from "../../constants/chapters";
 
 function SelectChapters(props) {
   const { selectedChapters, onChange } = props;
@@ -9,6 +9,7 @@ function SelectChapters(props) {
       <ChapterButton
         key={"ทั้งหมด"}
         chapter={"ทั้งหมด"}
+        wording={"ทั้งหมด"}
         selected={selectedChapters.length === 0}
         onClick={() => {
           onChange([]);
@@ -18,6 +19,11 @@ function SelectChapters(props) {
         <ChapterButton
           key={chapter}
           chapter={chapter}
+          wording={
+            chapterNameToId[chapter].match(/^[0-9]+$/)
+              ? 'หมวด ' + chapterNameToId[chapter] + ' ' + chapter
+              : chapter
+          }
           selected={selectedChapters.includes(chapter)}
           onClick={() => {
             if (selectedChapters.includes(chapter)) {