feat(app marketplace): add more and collapse

CHANGELOG.md

@@ -13,7 +13,9 @@
 
 - Admin Credential
   - Credential Request Management Board Improvements
-
+- App marketplace
+  - Add more and collapse button to category view
+
 ## 2.0.0
 
 ### Change

src/assets/locales/de/main.json

@@ -2057,6 +2057,7 @@
       "decline": "Decline",
       "confirm": "Bestätigen",
       "more": "Mehr",
+      "collapse": "Einklappen",
       "loadmore": "Mehr laden",
       "details": "Details",
       "close": "Schließen",

src/assets/locales/en/main.json

@@ -2026,6 +2026,7 @@
       "decline": "Decline",
       "confirm": "Confirm",
       "more": "More",
+      "collapse": "Collapse",
       "loadmore": "Load more",
       "details": "Details",
       "close": "Close",

src/components/pages/AppMarketplace/components/AppListGroup/index.tsx

@@ -31,27 +31,26 @@ export const AppListGroup = ({
   items: AppMarketplaceCard[]
 }) => {
   const { t } = useTranslation()
-  const [itemsShown, setItemsShown] = useState('4')
-
+  const [itemsShown, setItemsShown] = useState(4)
   const itemsToShow = items.slice(0, Number(itemsShown))
 
-  const increaseItemsShown = () => {
-    setItemsShown((prevState) => {
-      return (Number(prevState) + 4).toString()
-    })
-  }
-
   return (
     <>
       <CategoryDivider
-        buttonText={t('global.actions.more')}
+        buttonText={
+          items.length <= 4 || itemsToShow.length < items.length
+            ? t('global.actions.more')
+            : t('global.actions.collapse')
+        }
         categoryItemsLength={items.length}
         categoryName={t(
           'content.appstore.appOverviewSection.categories.' +
             category.replace(/\s+/g, '').toLowerCase()
         )}
-        disabled={itemsToShow.length >= items.length}
-        onButtonClick={increaseItemsShown}
+        disabled={items.length <= 4}
+        onButtonClick={() => {
+          setItemsShown(itemsToShow.length >= items.length ? 4 : items.length)
+        }}
       />
       <Cards
         buttonText={t('global.actions.details')}