Merge pull request stakwork#2427 from aliraza556/Search-Filtering

[Search Filtering]: `View More` for Node Types Rendering with Default Limit of `4 Rows`
aliraza556 · Nov 8, 2024 · 2f3d3f1 · 2f3d3f1
2 parents 4486153 + 7fcf501
commit 2f3d3f1
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