From d78b056b3a1ba54764dd89ae4f5f95c54478b424 Mon Sep 17 00:00:00 2001
From: Juan Miguel Sanchez Mola <jmsm412@gmail.com>
Date: Fri, 6 Sep 2024 13:10:00 -0400
Subject: [PATCH] Fix infinite loop

---
 .../NftList/NftData/NftCollectionPage.tsx     | 22 ++++++++-----------
 .../ClearMetadataBox/ClearMetadataItem.tsx    |  8 ++-----
 .../MetadataAttributesPropertyItem.tsx        |  4 ++--
 3 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/rair-front/src/components/MockUpPage/NftList/NftData/NftCollectionPage.tsx b/rair-front/src/components/MockUpPage/NftList/NftData/NftCollectionPage.tsx
index a67423fca..975717d56 100644
--- a/rair-front/src/components/MockUpPage/NftList/NftData/NftCollectionPage.tsx
+++ b/rair-front/src/components/MockUpPage/NftList/NftData/NftCollectionPage.tsx
@@ -680,21 +680,17 @@ const NftCollectionPageComponent: FC<INftCollectionPageComponent> = ({
               </div>
               <div
                 style={{
-                  width: '100%'
+                  width: '100%',
+                  textAlign: 'left'
                 }}>
-                <input
-                  value={titleSearchAttributes}
-                  onChange={(e) => setTitleSearchAttributes(e.target.value)}
-                  style={{
-                    border: '1px solid #666666',
-                    width: '100%',
-                    borderRadius: '12px',
-                    padding: '5px 10px',
-                    background: 'none',
-                    outline: 'none',
-                    color: 'white'
+                <InputField
+                  label="Search"
+                  getter={titleSearchAttributes}
+                  setter={setTitleSearchAttributes}
+                  customClass="rounded-rair form-control"
+                  customCSS={{
+                    backgroundColor: 'inherit'
                   }}
-                  placeholder="Search..."
                 />
               </div>
               <MetadataAttributesProperties
diff --git a/rair-front/src/components/MockUpPage/NftList/NftData/TitleCollection/FilterMetadataTokens/ClearMetadataBox/ClearMetadataItem.tsx b/rair-front/src/components/MockUpPage/NftList/NftData/TitleCollection/FilterMetadataTokens/ClearMetadataBox/ClearMetadataItem.tsx
index 66fb83716..7207c2595 100644
--- a/rair-front/src/components/MockUpPage/NftList/NftData/TitleCollection/FilterMetadataTokens/ClearMetadataBox/ClearMetadataItem.tsx
+++ b/rair-front/src/components/MockUpPage/NftList/NftData/TitleCollection/FilterMetadataTokens/ClearMetadataBox/ClearMetadataItem.tsx
@@ -1,18 +1,14 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { useAppSelector } from '../../../../../../../hooks/useReduxHooks';
 
-const ClearMetadataItem = ({ clickProperty, meta, val, getResetTokens }) => {
+const ClearMetadataItem = ({ clickProperty, meta, val }) => {
   const [, /*clearActive*/ setClearActive] = useState(false);
 
   const { primaryColor, textColor, primaryButtonColor } = useAppSelector(
     (store) => store.colors
   );
 
-  useEffect(() => {
-    getResetTokens();
-  }, [getResetTokens, val]);
-
   return (
     <button
       onClick={() => {
diff --git a/rair-front/src/components/MockUpPage/NftList/NftData/TitleCollection/FilterMetadataTokens/MetadataAttrPropertyItems/MetadataAttributesPropertyItem.tsx b/rair-front/src/components/MockUpPage/NftList/NftData/TitleCollection/FilterMetadataTokens/MetadataAttrPropertyItems/MetadataAttributesPropertyItem.tsx
index 46bd546d9..a51e2b9c0 100644
--- a/rair-front/src/components/MockUpPage/NftList/NftData/TitleCollection/FilterMetadataTokens/MetadataAttrPropertyItems/MetadataAttributesPropertyItem.tsx
+++ b/rair-front/src/components/MockUpPage/NftList/NftData/TitleCollection/FilterMetadataTokens/MetadataAttrPropertyItems/MetadataAttributesPropertyItem.tsx
@@ -46,11 +46,11 @@ const MetadataAttributesPropertyItem = ({
       {item.value.length > 7 && !isMobileDesign ? (
         <>
           <TooltipBox title={item.value}>
-            {`${item.value.slice(0, 4)}...(${quantity})`}
+            {`${item.value.slice(0, 4)}... (${quantity})`}
           </TooltipBox>
         </>
       ) : (
-        `${item.value}(${quantity})`
+        `${item.value} (${quantity})`
       )}
     </div>
   );