diff --git a/src/lib/virtuoso/Virtuoso.util.tsx b/src/lib/virtuoso/Virtuoso.util.tsx
index bae9fcb4..9bfa0220 100644
--- a/src/lib/virtuoso/Virtuoso.util.tsx
+++ b/src/lib/virtuoso/Virtuoso.util.tsx
@@ -9,6 +9,10 @@
import { useCallback, useMemo } from 'react';
export class VirtuosoUtil {
+ static readonly GROUP = 0;
+
+ static readonly ITEMS = 1;
+
/**
* Returns the index converted to the index of the list of group or normal items.
*
diff --git a/src/modules/extension/screens/Extensions.tsx b/src/modules/extension/screens/Extensions.tsx
index d773ee75..73dddb83 100644
--- a/src/modules/extension/screens/Extensions.tsx
+++ b/src/modules/extension/screens/Extensions.tsx
@@ -107,7 +107,7 @@ export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
const computeItemKey = VirtuosoUtil.useCreateGroupedComputeItemKey(
groupCounts,
- useCallback((index) => filteredGroupedExtensions[index][0], [filteredGroupedExtensions]),
+ useCallback((index) => filteredGroupedExtensions[index][LANGUAGE], [filteredGroupedExtensions]),
useCallback((index) => visibleExtensions[index].pkgName, [visibleExtensions]),
);
diff --git a/src/modules/history/screens/History.tsx b/src/modules/history/screens/History.tsx
index 9fc1d577..bdae0e36 100644
--- a/src/modules/history/screens/History.tsx
+++ b/src/modules/history/screens/History.tsx
@@ -40,18 +40,17 @@ export const History: React.FC = () => {
const endCursor = chapterHistoryData?.chapters.pageInfo.endCursor;
const readEntries = chapterHistoryData?.chapters.nodes ?? [];
const groupedHistory = useMemo(
- () =>
- Object.entries(Chapters.groupByDate(readEntries, 'lastReadAt')).map(([date, chapters]) => [
- date,
- chapters.length,
- ]) satisfies [date: string, itemCount: number][],
+ () => Object.entries(Chapters.groupByDate(readEntries, 'lastReadAt')),
[readEntries],
);
- const groupCounts: number[] = useMemo(() => groupedHistory.map((group) => group[1]), [groupedHistory]);
+ const groupCounts: number[] = useMemo(
+ () => groupedHistory.map((group) => group[VirtuosoUtil.ITEMS].length),
+ [groupedHistory],
+ );
const computeItemKey = VirtuosoUtil.useCreateGroupedComputeItemKey(
groupCounts,
- useCallback((index) => groupedHistory[index][0], [groupedHistory]),
+ useCallback((index) => groupedHistory[index][VirtuosoUtil.GROUP], [groupedHistory]),
useCallback((index) => readEntries[index].id, [readEntries]),
);
@@ -100,7 +99,7 @@ export const History: React.FC = () => {
groupContent={(index) => (
- {groupedHistory[index][0]}
+ {groupedHistory[index][VirtuosoUtil.GROUP]}
)}
diff --git a/src/modules/updates/screens/Updates.tsx b/src/modules/updates/screens/Updates.tsx
index dabc6a9f..8f90634f 100644
--- a/src/modules/updates/screens/Updates.tsx
+++ b/src/modules/updates/screens/Updates.tsx
@@ -42,18 +42,17 @@ export const Updates: React.FC = () => {
const endCursor = chapterUpdateData?.chapters.pageInfo.endCursor;
const updateEntries = chapterUpdateData?.chapters.nodes ?? [];
const groupedUpdates = useMemo(
- () =>
- Object.entries(Chapters.groupByDate(updateEntries, 'fetchedAt')).map(([date, chapters]) => [
- date,
- chapters.length,
- ]) satisfies [date: string, itemCount: number][],
+ () => Object.entries(Chapters.groupByDate(updateEntries, 'fetchedAt')),
[updateEntries],
);
- const groupCounts: number[] = useMemo(() => groupedUpdates.map((group) => group[1]), [groupedUpdates]);
+ const groupCounts: number[] = useMemo(
+ () => groupedUpdates.map((group) => group[VirtuosoUtil.ITEMS].length),
+ [groupedUpdates],
+ );
const computeItemKey = VirtuosoUtil.useCreateGroupedComputeItemKey(
groupCounts,
- useCallback((index) => groupedUpdates[index][0], [groupedUpdates]),
+ useCallback((index) => groupedUpdates[index][VirtuosoUtil.GROUP], [groupedUpdates]),
useCallback((index) => updateEntries[index].id, [updateEntries]),
);
@@ -131,7 +130,7 @@ export const Updates: React.FC = () => {
groupContent={(index) => (
- {groupedUpdates[index][0]}
+ {groupedUpdates[index][VirtuosoUtil.GROUP]}
)}