Some improvements in screenshot view (#362)

Signed-off-by: Cintia Sanchez Garcia <[email protected]>
cncf · Nov 22, 2023 · d11ef00 · d11ef00
1 parent 0a53d9d
commit d11ef00
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 12 deletions.
diff --git a/web/src/layout/explore/grid/index.tsx b/web/src/layout/explore/grid/index.tsx
@@ -3,6 +3,7 @@ import { createEffect, createSignal, For, on, onMount, Show } from 'solid-js';
 
 import cutString from '../../../utils/cutString';
 import generateColorsArray from '../../../utils/generateColorsArray';
+import getCategoriesWithItems from '../../../utils/getCategoriesWithItems';
 import { SubcategoryDetails } from '../../../utils/gridCategoryLayout';
 import { CategoriesData, CategoryData } from '../../../utils/prepareData';
 import Grid from './Grid';
@@ -95,17 +96,7 @@ const GridCategory = (props: Props) => {
 
   createEffect(
     on(data, () => {
-      const dataTmp: string[] = [];
-      Object.keys(data()).forEach((cat: string) => {
-        let itemsNumber = 0;
-        Object.keys(data()[cat]).forEach((subcat: string) => {
-          itemsNumber += data()[cat][subcat].items.length;
-        });
-        if (itemsNumber > 0) {
-          dataTmp.push(cat);
-        }
-      });
-      setCatWithItems(dataTmp);
+      setCatWithItems(getCategoriesWithItems(data()));
     })
   );
 

diff --git a/web/src/layout/screenshots/index.tsx b/web/src/layout/screenshots/index.tsx
@@ -3,6 +3,7 @@ import { createSignal, For, onCleanup, onMount, Show } from 'solid-js';
 
 import { BaseData } from '../../types';
 import generateColorsArray from '../../utils/generateColorsArray';
+import getCategoriesWithItems from '../../utils/getCategoriesWithItems';
 import { SubcategoryDetails } from '../../utils/gridCategoryLayout';
 import prepareData, { GroupData } from '../../utils/prepareData';
 import MiniFooter from '../navigation/MiniFooter';
@@ -35,13 +36,14 @@ const Screenshots = (props: Props) => {
             {(group) => {
               const colorsList = () => generateColorsArray(group.categories.length);
               const groupData = groupsData()![group.name];
+              const categories = getCategoriesWithItems(groupData);
 
               return (
                 <div class={styles.group}>
                   <Show when={!isUndefined(props.initialData.groups)}>
                     <div class={`fw-bold text-uppercase ${styles.title}`}>{group.name}</div>
                   </Show>
-                  <For each={Object.keys(groupData)}>
+                  <For each={categories}>
                     {(cat, index) => {
                       const isOverriden =
                         !isUndefined(props.initialData.categories_overridden) &&

diff --git a/web/src/utils/getCategoriesWithItems.ts b/web/src/utils/getCategoriesWithItems.ts
@@ -0,0 +1,17 @@
+import { CategoriesData } from './prepareData';
+
+const getCategoriesWithItems = (data: CategoriesData): string[] => {
+  const categories: string[] = [];
+  Object.keys(data).forEach((cat: string) => {
+    let itemsNumber = 0;
+    Object.keys(data[cat]).forEach((subcat: string) => {
+      itemsNumber += data[cat][subcat].items.length;
+    });
+    if (itemsNumber > 0) {
+      categories.push(cat);
+    }
+  });
+  return categories;
+};
+
+export default getCategoriesWithItems;