add limit to list items

Author: Chouikane

src/components/List/ListComponent.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react'
 import { Placeholder } from 'src/components/placeholders'
+import { MAX_ITEMS_PER_CARD } from 'src/config'
 import { CarbonAd } from 'src/features/carbonAds'
 import { BaseEntry } from 'src/types'
 
@@ -11,10 +12,19 @@ export type ListComponentPropsType<T extends BaseEntry> = {
   placeholder?: React.ReactNode
   refresh?: boolean
   error?: any
+  limit?: number
 }
 
 export function ListComponent<T extends BaseEntry>(props: ListComponentPropsType<T>) {
-  const { items, isLoading, error, renderItem, withAds, placeholder = <Placeholder /> } = props
+  const {
+    items,
+    isLoading,
+    error,
+    renderItem,
+    withAds,
+    placeholder = <Placeholder />,
+    limit = MAX_ITEMS_PER_CARD,
+  } = props
 
   if (error) {
     return <p className="errorMsg">{error?.message || error}</p>
@@ -25,7 +35,7 @@ export function ListComponent<T extends BaseEntry>(props: ListComponentPropsType
       return
     }
 
-    return items.map((item, index) => {
+    return items.slice(0, limit).map((item, index) => {
       let content: ReactNode[] = [renderItem(item, index)]
       if (withAds && index === 0) {
         content.unshift(<CarbonAd key={'carbonAd0'} />)

src/config/index.tsx

@@ -188,4 +188,4 @@ export const MY_LANGUAGES_TAG = {
   mediumValues: ['myLangs'],
   freecodecampValues: ['myLangs'],
 }
-export const MAX_MERGED_ITEMS_PER_LANGUAGE = 10
+export const MAX_ITEMS_PER_CARD = 50