refactor(SW-194): PR comment fixes

components/Blocks/Accordion/index.tsx

@@ -11,38 +11,37 @@ import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
 import styles from "./accordion.module.css"
 
 import type { AccordionProps } from "@/types/components/blocks/Accordion"
+import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"
 
 export default function AccordionSection({ accordion, title }: AccordionProps) {
-  const initialPageSize = 5
-  const [pageSize, setPageSize] = useState(initialPageSize)
-  const showMoreVisible = accordion.length > initialPageSize
-  const showLessVisible = pageSize >= accordion.length
+  const showToggleButton = accordion.length > 5
+  const [allAccordionsVisible, setAllAccordionsVisible] =
+    useState(!showToggleButton)
 
-  function handleShowMore() {
-    setPageSize(showLessVisible ? initialPageSize : accordion.length)
+  function toggleAccordions() {
+    setAllAccordionsVisible((state) => !state)
   }
 
   function getClassName(idx: number): string {
-    if (showMoreVisible && idx > pageSize - 1) {
+    if (!allAccordionsVisible && idx > 4) {
       return styles.hiddenItem
-    } else if (showMoreVisible && idx == pageSize - 1) {
+    } else if (!allAccordionsVisible && idx === 4) {
       return styles.lastItem
     }
     return ""
   }
 
   return (
-    <SectionContainer id="faq">
+    <SectionContainer id={HotelHashValues.faq}>
       {title && <SectionHeader textTransform="uppercase" title={title} />}
-      <Accordion theme={"light"} variant={"card"}>
+      <Accordion theme="light" variant="card">
         {accordion.map((acc, idx: number) => (
           <AccordionItem
-            key={`${acc.question}-${idx}`}
+            key={acc.question}
             title={acc.question}
             className={getClassName(idx)}
           >
             <JsonToHtml
-              key={`${acc.question}-${idx}`}
               embeds={acc.answer.embedded_itemsConnection.edges}
               nodes={acc.answer.json?.children[0].children}
             />
@@ -50,10 +49,10 @@ export default function AccordionSection({ accordion, title }: AccordionProps) {
         ))}
       </Accordion>
 
-      {showMoreVisible ? (
+      {showToggleButton ? (
         <ShowMoreButton
-          loadMoreData={handleShowMore}
-          showLess={showLessVisible}
+          loadMoreData={toggleAccordions}
+          showLess={allAccordionsVisible}
           textShowMore="See all FAQ"
           textShowLess="See less FAQ"
         />

components/ContentType/HotelPage/Rooms/index.tsx

@@ -17,10 +17,9 @@ import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"
 
 export function Rooms({ rooms }: RoomsProps) {
   const intl = useIntl()
-  const initialPageSize = 5
-  const [pageSize, setPageSize] = useState(initialPageSize)
-  const showMoreVisible = rooms.length > initialPageSize
-  const showLessVisible = pageSize >= rooms.length
+  const showToggleButton = rooms.length > 5
+  const [allRoomsVisible, setAllRoomsVisible] = useState(!showToggleButton)
+
   const scrollRef = useRef<HTMLDivElement>(null)
 
   const mappedRooms = rooms
@@ -45,10 +44,10 @@ export function Rooms({ rooms }: RoomsProps) {
     .sort((a, b) => a.sortOrder - b.sortOrder)
 
   function handleShowMore() {
-    if (scrollRef.current && showMoreVisible) {
+    if (scrollRef.current && allRoomsVisible) {
       scrollRef.current.scrollIntoView({ behavior: "smooth" })
     }
-    setPageSize(showLessVisible ? initialPageSize : rooms.length)
+    setAllRoomsVisible((state) => !state)
   }
 
   return (
@@ -68,7 +67,7 @@ export function Rooms({ rooms }: RoomsProps) {
             <div
               key={id}
               className={
-                !showLessVisible && index > 2 ? styles.hiddenRoomCard : ""
+                !allRoomsVisible && index > 2 ? styles.hiddenRoomCard : ""
               }
             >
               <RoomCard
@@ -83,10 +82,10 @@ export function Rooms({ rooms }: RoomsProps) {
         )}
       </Grids.Stackable>
 
-      {showMoreVisible ? (
+      {showToggleButton ? (
         <ShowMoreButton
           loadMoreData={handleShowMore}
-          showLess={showLessVisible}
+          showLess={allRoomsVisible}
           textShowMore="Show more rooms"
           textShowLess="Show less rooms"
         />