add new functional to counter

frontend/src/components/main-page/Basket/Basket.js

@@ -15,7 +15,7 @@ export default function Basket() {
       ) : (
         <div className="basket-around">
           {basketItems.map((item) => (
-            <Context key={item.id}>
+            <Context key={item.id} free_beds={item.count_free_beds}>
               <Order
                 key={item.id}
                 id={item.id}

frontend/src/components/main-page/Basket/Order/Order.js

@@ -25,7 +25,7 @@ export default function Order({
   date,
 }) {
   const { count } = useContext(CounterContext);
-  const declension = getDeclension(quantity, "грядка", "грядок", "грядок");
+  const declension = getDeclension(count, "грядка", "грядки", "грядок");
   const [comment, setComment] = useState("");
   const [selectedPlant, setSelectedPlant] = useState(null); // Состояние для выбранного растения
 
@@ -67,10 +67,12 @@ export default function Order({
             value={comment}
             onChange={(e) => setComment(e.target.value)}
           ></textarea>
-          <Counter />
           <div className="order-submit-wrapper">
             <div>Дата заказа: {date}</div>
-            <div className="order-change-volume">Итог: ? {declension}</div>
+            <div className="order-change-volume">
+              Итог: <Counter />
+              {declension}
+            </div>
             <div className="order-selected-plant">
               {selectedPlant ? (
                 <div>Выбрано растение: {selectedPlant.name}</div>

frontend/src/components/main-page/ui/counter/Counter.js

@@ -1,14 +1,18 @@
 import React, { useContext } from "react";
 import { CounterContext } from "./CounterContext";
 
-//! Стилизовать
 export default function Counter() {
-  const { count, increment, decrement } = useContext(CounterContext);
+  const { count, increment, decrement, setCountValue } =
+    useContext(CounterContext);
 
   return (
     <div>
       <button onClick={increment}>+</button>
-      <span>{count}</span>
+      <input
+        type="text" // Меняем тип input на "text" для возможности ввода пустого значения
+        value={count}
+        onChange={setCountValue}
+      />
       <button onClick={decrement}>-</button>
     </div>
   );

frontend/src/components/main-page/ui/counter/CounterContext.js

@@ -1,25 +1,53 @@
 import React, { createContext } from "react";
 
 export const CounterContext = createContext();
+
 export const Context = (props) => {
-  const [count, setCount] = React.useState(0);
+  const [count, setCount] = React.useState("1");
+  const maxLength = 10; // Максимальная длина числа (например, 10 цифр)
+
+  function setCountValue(e) {
+    const value = e.target.value;
+
+    // Проверка, если введенное значение больше, чем количество доступных мест
+    if (parseInt(value) > props.free_beds) {
+      setCount(props.free_beds.toString()); // Обновляем значение до свободных мест
+      return;
+    }
+
+    // Если строка состоит только из нулей, устанавливаем значение как "0"
+    if (/^0+$/.test(value)) {
+      setCount("0");
+      return;
+    }
+
+    // Ограничиваем количество цифр
+    if (value === "" || /^[0-9]*$/.test(value)) {
+      if (value.length <= maxLength) {
+        setCount(value); // Обновляем состояние только если длина значения не превышает maxLength
+      }
+    }
+  }
 
   function increment() {
-    setCount(count + 1);
+    setCount((prevCount) => {
+      const newCount = Math.min(parseInt(prevCount) + 1, props.free_beds); // Ограничение максимальным числом
+      return newCount.toString();
+    });
   }
 
   function decrement() {
-    if (count === 0 || count < 0) {
-      setCount(0);
-    } else {
-      setCount(count - 1);
-    }
+    setCount((prevCount) => {
+      const newCount = Math.max(parseInt(prevCount) - 1, 0);
+      return newCount.toString();
+    });
   }
 
   const value = {
     count,
     increment,
     decrement,
+    setCountValue,
   };
 
   return (