fix(filtering): node Types Rendering with Default Limit of 4 Rows

Shoaibdev7 · Nov 1, 2024 · 7fcf501 · 7fcf501
1 parent 8b322e7
commit 7fcf501
Showing 1 changed file with 6 additions and 2 deletions.
diff --git a/src/components/App/SideBar/FilterSearch/NodeTypes/index.tsx b/src/components/App/SideBar/FilterSearch/NodeTypes/index.tsx
@@ -15,7 +15,11 @@ type Props = {
 export const NodeTypes = ({ handleSchemaTypeClick, selectedTypes, schemaAll }: Props) => {
   const [showAllSchemas, setShowAllSchemas] = useState(false)
 
-  const uniqueSchemas = (showAllSchemas ? schemaAll : schemaAll.slice(0, 4)).filter(
+  const schemasPerRow = 3
+  const MAX_ROWS = 4
+  const maxVisibleSchemas = schemasPerRow * MAX_ROWS
+
+  const uniqueSchemas = (showAllSchemas ? schemaAll : schemaAll.slice(0, maxVisibleSchemas)).filter(
     (schema, index, self) => index === self.findIndex((s) => s.type === schema.type),
   )
 
@@ -40,7 +44,7 @@ export const NodeTypes = ({ handleSchemaTypeClick, selectedTypes, schemaAll }: P
             </SchemaType>
           ))}
         </SchemaTypeWrapper>
-        {!showAllSchemas && schemaAll.length > 4 && (
+        {!showAllSchemas && schemaAll.length > maxVisibleSchemas && (
           <ViewMoreButton onClick={() => setShowAllSchemas(true)}>
             <PlusIconWrapper>
               <PlusIcon /> View More