MichaeL-JSON · MichaeL-JSON · Oct 3, 2023 · Oct 2, 2023
diff --git a/src/components/converter/slice/converter.api.js b/src/components/converter/slice/converter.api.js
@@ -8,20 +8,34 @@ const converterSlice = createSlice({
     updateValue: (state, action) => {
       const { key, value } = action.payload;
       state[key].value = value;
-      state[key === "from" ? "to" : "from"].value = (
-        (state[key].value * state[key].price) /
-        state[key === "from" ? "to" : "from"].price
-      ).toFixed(5);
+
+      const converterValue =
+        value === ""
+          ? ""
+          : parseFloat(
+              (
+                (state[key].value * state[key].price) /
+                state[key === "from" ? "to" : "from"].price
+              ).toFixed(10)
+            );
+
+      state[key === "from" ? "to" : "from"].value = converterValue;
     },
     updateCurrency: (state, action) => {
       state[action.payload.key].currency = action.payload.value;
     },
     updatePrice: (state, action) => {
       state[action.payload.key].price = action.payload.value;
+    },
+    reverseValue: state => {
+      const stateFrom = state.from;
+
+      state.from = state.to;
+      state.to = stateFrom;
     }
   }
 });
 
-export const { updateValue, updateCurrency, updatePrice } =
+export const { updateValue, updateCurrency, updatePrice, reverseValue } =
   converterSlice.actions;
 export const converterReducer = converterSlice.reducer;
diff --git a/src/components/converter/ui/CryptoListConverter.jsx b/src/components/converter/ui/CryptoListConverter.jsx
@@ -12,7 +12,7 @@ export const CryptoListConverter = ({ className }) => {
       <ul className="w-full">
         <li
           key={-1}
-          className="grid grid-cols-4 sm:grid-cols-9 w-full self-center font-semibold text-gray-500 text-[0.6em] sm:text-[0.75em] md:text-[0.9em]"
+          className="hidden sm:grid grid-cols-4 sm:grid-cols-9 w-full self-center font-semibold text-gray-500 text-[0.6em] sm:text-[0.75em] md:text-[0.9em]"
         >
           <p className="sm:col-span-3">Имя</p>
           <p className="sm:col-span-2">Последняя цена</p>
@@ -24,25 +24,25 @@ export const CryptoListConverter = ({ className }) => {
             data.map((cryptoItem, index) => (
               <li
                 key={index}
-                className="m-[1em_0em] grid grid-cols-4 sm:grid-cols-9 w-full self-center font-medium text-gray-600 text-[0.6em] sm:text-[0.85em] md:text-[1em]"
+                className="m-[2em_0em] sm:m-[1em_0em] grid grid-cols-3 sm:grid-cols-9 w-full self-center font-medium text-gray-600 text-[0.75em] sm:text-[0.85em] md:text-[1em]"
               >
-                <div className="sm:col-span-3 flex items-center font-semibold text-gray-700">
+                <div className="mb-[0.2em] sm:m-0 col-span-3 sm:col-span-3 flex items-center font-semibold text-gray-700">
                   <img
                     src={cryptoItem.image}
                     alt=""
-                    className="w-3 h-3 sm:w-4 sm:h-4 md:w-5 md:h-5"
+                    className="w-5 h-5 sm:w-4 sm:h-4 md:w-5 md:h-5"
                   />
                   <p className="ml-[0.5em] ">{cryptoItem.name.split(" ")[0]}</p>
-                  <p className="ml-[0.4em] text-gray-500 text-[0.5em] sm:text-[0.65em] md:text-[0.8em]">
+                  <p className="ml-[0.4em] text-gray-500 text-[0.7em] sm:text-[0.65em] md:text-[0.8em]">
                     {cryptoItem.symbol.toUpperCase()}
                   </p>
                 </div>
-                <p className="sm:col-span-2">
+                <p className="ml-[2em] sm:m-0 sm:col-span-2">
                   ${formatNumberWithSpaces(cryptoItem.current_price)}
                 </p>
                 <p
                   className={
-                    "sm:col-span-2 " +
+                    "sm:col-span-2 text-center " +
                     (String(cryptoItem.price_change_percentage_24h)[0] === "-"
                       ? "text-red-700"
                       : "text-green-600")

diff --git a/src/components/converter/ui/FormContainerConverter.jsx b/src/components/converter/ui/FormContainerConverter.jsx
@@ -1,13 +1,17 @@
 import React from "react";
 import { FormConverter } from "./FormConverter";
+import { reverseValue } from "../slice/converter.api";
+import { useDispatch } from "react-redux";
 
 export const FormContainerConverter = () => {
+  const dispatch = useDispatch();
+
   return (
     <div className="text-[0.6rem] sm:text-[0.8rem] md:text-[1rem] sm:flex w-full sm:h-[6.3rem] md:h-[7.3rem] justify-between sm:border-[0.13rem] sm:border-b-[0px] border-zinc-200 rounded-[1.3rem]">
       <FormConverter converterKey={"from"} />
       <div className="z-10 bg-white relative sm:w-[16%] sm:h-[60%] sm:m-[0px_-0.13rem]">
         <div className="sm:absolute flex items-center justify-center top-[40%] w-full h-full sm:border-[0.13rem] sm:border-b-[0px] border-zinc-200 rounded-[1.3rem] rounded-b-none m-[1rem_0rem] sm:m-0">
-          <button>
+          <button onClick={() => dispatch(reverseValue())}>
             <svg
               fill="#8c8c8c"
               className="cursor-pointer text-center active:scale-95 sm:mb-[-1em] h-[4em] sm:h-[3em] transition-all"

diff --git a/src/components/converter/ui/InputConverter.jsx b/src/components/converter/ui/InputConverter.jsx
@@ -15,6 +15,15 @@ export const InputConverter = ({ converterKey }) => {
       !isNaN(sanitizedValue) ||
       sanitizedValue === ""
     ) {
+      if (
+        sanitizedValue.length === 2 &&
+        sanitizedValue[0] === "0" &&
+        sanitizedValue[1] !== "."
+      ) {
+        dispatch(updateValue({ key: converterKey, value: sanitizedValue[1] }));
+        return;
+      }
+
       dispatch(updateValue({ key: converterKey, value: sanitizedValue }));
     }
   };
@@ -36,7 +45,7 @@ export const InputConverter = ({ converterKey }) => {
           placeholder="0.00"
           onChange={inputChangeHandle}
           onKeyUp={keyUpHandle}
-          value={converterState.value == 0 ? 0 : converterState.value}
+          value={converterState.value}
         />
       </div>
     </div>

diff --git a/src/components/converter/ui/SelectConverter.jsx b/src/components/converter/ui/SelectConverter.jsx
@@ -14,10 +14,6 @@ import {
 
 import "../styles/index.css";
 
-function classNames(...classes) {
-  return classes.filter(Boolean).join(" ");
-}
-
 export const SelectConverter = ({ converterKey }) => {
   const { data } = useGetCoinsDataQuery();
   const [getCoinChart, { data: coinData }] = useLazyGetCoinChartQuery();
@@ -97,7 +93,7 @@ export const SelectConverter = ({ converterKey }) => {
                         }
                         value={dataItem.id}
                       >
-                        {({ selected, active }) => (
+                        {() => (
                           <div
                             onClick={() => clickHandle(dataItem)}
                             className={"flex items-center"}
@@ -108,13 +104,12 @@ export const SelectConverter = ({ converterKey }) => {
                               className="w-6 h-6 sm:w-4 sm:h-4 md:h-5 md:w-5 flex-shrink-0 rounded-full"
                             />
                             <span
-                              className={classNames(
-                                selected
-                                  ? "font-semibold text-indigo-600"
-                                  : "font-normal",
-                                active ? " text-yellow-600" : "",
-                                "ml-3 sm:ml-1 md:ml-3 block transition-all"
-                              )}
+                              className={
+                                "font-semibold hover:text-indigo-600 ml-3 sm:ml-1 md:ml-3 block transition-all " +
+                                (dataItem.symbol === currency
+                                  ? "hover:text-yellow-600 text-yellow-600"
+                                  : "")
+                              }
                             >
                               {dataItem.symbol.toUpperCase()}
                             </span>

diff --git a/src/pages/Converter.jsx b/src/pages/Converter.jsx
@@ -1,50 +1,15 @@
 import React from "react";
-// import { useGetCoinChartQuery } from "../redux";
 import LayoutBorderRadius from "../layouts/LayoutBorderRadius";
 import {
   CryptoListConverter,
   FormContainerConverter
 } from "../components/converter";
 
 const Converter = () => {
-  // для теста вытащим data здесь
-  // const { data } = useGetCoinChartQuery({
-  //   id: "bitcoin",
-  //   currency: "usd",
-  //   days: 14
-  // });
-
   return (
     <div>
       <LayoutBorderRadius>
-        <div className="flex justify-space-between items-center gap-4">
-          <div className="relative w-full rounded-md shadow-md">
-            <input
-              type="text"
-              name="price"
-              id="price"
-              className="block w-full rounded-md border-0 py-2.5 pl-3 pr-20 text-gray-900 font-medium ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-0 sm:text-sm sm:leading-6"
-              placeholder="vol"
-            />
-            <div className="absolute inset-y-0 right-5 flex items-center">
-              <select
-                id="currency"
-                name="currency"
-                className="h-full rounded-md border-0 bg-transparent py-0 pl-2 pr-2 text-right text-gray-500 focus:outline-0 sm:text-sm"
-              >
-                <option>by head</option>
-                <option>by content</option>
-                <option>by content content</option>
-              </select>
-            </div>
-          </div>
-          <div className="inline-flex items-center w-20 h-10 px-2 text-[#f866a3] text-md bg-[#ffffff] rounded-md shadow-md cursor-pointer">
-            show all
-          </div>
-        </div>
-        <div className="mt-6 h-full">
-          <FormContainerConverter />
-        </div>
+        <FormContainerConverter />
         <CryptoListConverter className={"mt-4"} />
       </LayoutBorderRadius>
     </div>