fix display

src/components/Prices/PriceSection.tsx

-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react'
+import React, { useCallback, useContext, useEffect, useState } from 'react'
 import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
 import { FluidType } from '../../enum/fluidTypes'
 import { FrequencyInMonth } from '../../enum/frequency.enum'
@@ -30,6 +24,7 @@ const PriceSection: React.FC<PriceSectionProps> = ({
   const [isLoading, setIsLoading] = useState<boolean>(false)
   const [refreshData, setRefreshData] = useState(false)
   const [showHistory, setshowHistory] = useState<boolean>(false)
+  const [showFullList, setshowFullList] = useState<boolean>(false)
   const [priceToSave, setpriceToSave] = useState<IPrice>({
     fluidType: fluid,
     price: '',
@@ -37,7 +32,8 @@ const PriceSection: React.FC<PriceSectionProps> = ({
     endDate: null,
   })
   const { user }: Partial<UserContextProps> = useContext(UserContext)
-  const editableLimit = 3
+  const editableLimit: number = 3
+  const maxPerList: number = 8
   const handlePriceSelection = (val: string) => {
     if (val === '') val = '0'
     val = val.replace(/,/g, '.')
@@ -46,7 +42,12 @@ const PriceSection: React.FC<PriceSectionProps> = ({
   }
 
   const savePrice = async () => {
-    if (priceToSave && user) {
+    if (
+      priceToSave &&
+      user &&
+      priceToSave.price !== '0' &&
+      priceToSave.price !== ''
+    ) {
       const priceService = new PricesService()
       const formattedPrice = {
         ...priceToSave,
@@ -67,6 +68,10 @@ const PriceSection: React.FC<PriceSectionProps> = ({
     const year = date.toLocaleString('fr', { year: 'numeric' })
     return `${month} ${year}`
   }
+  const toggleFullList = useCallback(() => {
+    setshowFullList((prev) => !prev)
+  }, [])
+
   useEffect(() => {
     let subscribed = true
     setIsLoading(true)
@@ -98,8 +103,9 @@ const PriceSection: React.FC<PriceSectionProps> = ({
 
     return () => {
       subscribed = false
+      setIsLoading(false)
     }
-  }, [refreshData])
+  }, [refreshData, frequency, fluid])
 
   if (isLoading) return <Loader></Loader>
   return (
@@ -115,14 +121,16 @@ const PriceSection: React.FC<PriceSectionProps> = ({
           <div className="flex-bloc">
             <p>Nouveau prix : </p>
             <input
-              className="input-dark"
+              className="input-dark price-select"
               type="text"
               value={priceToSave.price.toString()}
               onChange={(e) => handlePriceSelection(e.target.value)}
               placeholder={
                 priceToSave.price === '' ? 'Saisir le nouveau prix' : ''
               }
-            ></input>
+            />
+            <span className="euro">€</span>
+
             <div className="flex-bloc startDate">
               <p>A partir de : </p>
               <p className="date">
@@ -132,7 +140,13 @@ const PriceSection: React.FC<PriceSectionProps> = ({
               </p>
             </div>
           </div>
-
+          <button
+            className="btnValid"
+            onClick={savePrice}
+            disabled={priceToSave.price === '0' || priceToSave.price === ''}
+          >
+            Sauvegarder
+          </button>
           <div className="history">
             <button
               onClick={toggleHistory}
@@ -142,6 +156,7 @@ const PriceSection: React.FC<PriceSectionProps> = ({
               <img
                 src={arrowDown}
                 className={showHistory ? 'icon-active' : ''}
+                alt="arrow-icon"
               />
             </button>
             {showHistory && (
@@ -167,6 +182,7 @@ const PriceSection: React.FC<PriceSectionProps> = ({
                       <img
                         src={editing}
                         onClick={() => setpriceToSave(nextPrice)}
+                        alt="edit-icon"
                       />
                     </li>
                     <hr></hr>
@@ -174,7 +190,12 @@ const PriceSection: React.FC<PriceSectionProps> = ({
                 )}
                 {prices.map((price, i) => {
                   return (
-                    <div key={i}>
+                    <div
+                      key={i}
+                      className={
+                        i > maxPerList && !showFullList ? 'price-hidden' : ''
+                      }
+                    >
                       <li
                         className={
                           priceToSave.startDate === price.startDate
@@ -184,30 +205,36 @@ const PriceSection: React.FC<PriceSectionProps> = ({
                       >
                         <div className="prix">{price.price} €</div>
                         <p>
-                          {' '}
                           à partir de :{' '}
                           <span className="capital">
                             {getDate(price.startDate)}
                           </span>
                         </p>
-                        {i < editableLimit && (
+                        {i < editableLimit - 1 && (
                           <img
                             src={editing}
                             onClick={() => setpriceToSave(prices[i])}
+                            alt="edit-icon"
                           />
                         )}
                       </li>
                       <hr></hr>
+                      {i === maxPerList && !showFullList && (
+                        <button onClick={toggleFullList} className="showButton">
+                          En voir plus
+                        </button>
+                      )}
                     </div>
                   )
                 })}
+                {showFullList && (
+                  <button onClick={toggleFullList} className="showButton">
+                    En voir moins
+                  </button>
+                )}
               </ul>
             )}
           </div>
-
-          <button className="btnValid" onClick={savePrice}>
-            Sauvegarder
-          </button>
         </>
       ) : (
         'Aucun prix trouvé'

src/components/Prices/prices.scss

@@ -23,6 +23,14 @@
   .flex-bloc {
     display: flex;
     align-items: center;
+    .price-select {
+      position: relative;
+    }
+    .euro {
+      display: block;
+      margin-left: 0.5rem;
+      font-weight: bold;
+    }
     .startDate {
       margin-left: 1rem;
       .date {
@@ -42,6 +50,10 @@
         border: solid 1px $gold;
         display: flex;
         align-items: center;
+        &:hover {
+          background: $dark-background;
+          opacity: 0.8;
+        }
         &.active {
           border-radius: 5px 5px 0 0;
         }
@@ -58,6 +70,9 @@
         background: $grey-dark;
         border: solid 1px $gold;
         padding: 1rem;
+        .price-hidden {
+          display: none;
+        }
         li {
           transition: all 300ms ease;
           margin: 0.5rem 0;
@@ -91,6 +106,10 @@
           margin: 0;
           background: white;
         }
+        .showButton {
+          text-align: center;
+          color: $gold;
+        }
       }
       .icon-active {
         transform: rotate(180deg);

src/styles/config/_typography.scss

@@ -46,6 +46,10 @@ $main-spacing: 4px;
   &:hover {
     background-color: #b89318;
   }
+  &:disabled {
+    opacity: 0.8;
+    cursor: not-allowed;
+  }
 }
 .btnValid {
   @include baseButton();