Remove unnecessary virtuoso "group item counts" mapping
This commit is contained in:
@@ -9,6 +9,10 @@
|
|||||||
import { useCallback, useMemo } from 'react';
|
import { useCallback, useMemo } from 'react';
|
||||||
|
|
||||||
export class VirtuosoUtil {
|
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.
|
* Returns the index converted to the index of the list of group or normal items.
|
||||||
*
|
*
|
||||||
|
|||||||
@@ -107,7 +107,7 @@ export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
|
|||||||
|
|
||||||
const computeItemKey = VirtuosoUtil.useCreateGroupedComputeItemKey(
|
const computeItemKey = VirtuosoUtil.useCreateGroupedComputeItemKey(
|
||||||
groupCounts,
|
groupCounts,
|
||||||
useCallback((index) => filteredGroupedExtensions[index][0], [filteredGroupedExtensions]),
|
useCallback((index) => filteredGroupedExtensions[index][LANGUAGE], [filteredGroupedExtensions]),
|
||||||
useCallback((index) => visibleExtensions[index].pkgName, [visibleExtensions]),
|
useCallback((index) => visibleExtensions[index].pkgName, [visibleExtensions]),
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
@@ -40,18 +40,17 @@ export const History: React.FC = () => {
|
|||||||
const endCursor = chapterHistoryData?.chapters.pageInfo.endCursor;
|
const endCursor = chapterHistoryData?.chapters.pageInfo.endCursor;
|
||||||
const readEntries = chapterHistoryData?.chapters.nodes ?? [];
|
const readEntries = chapterHistoryData?.chapters.nodes ?? [];
|
||||||
const groupedHistory = useMemo(
|
const groupedHistory = useMemo(
|
||||||
() =>
|
() => Object.entries(Chapters.groupByDate(readEntries, 'lastReadAt')),
|
||||||
Object.entries(Chapters.groupByDate(readEntries, 'lastReadAt')).map(([date, chapters]) => [
|
|
||||||
date,
|
|
||||||
chapters.length,
|
|
||||||
]) satisfies [date: string, itemCount: number][],
|
|
||||||
[readEntries],
|
[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(
|
const computeItemKey = VirtuosoUtil.useCreateGroupedComputeItemKey(
|
||||||
groupCounts,
|
groupCounts,
|
||||||
useCallback((index) => groupedHistory[index][0], [groupedHistory]),
|
useCallback((index) => groupedHistory[index][VirtuosoUtil.GROUP], [groupedHistory]),
|
||||||
useCallback((index) => readEntries[index].id, [readEntries]),
|
useCallback((index) => readEntries[index].id, [readEntries]),
|
||||||
);
|
);
|
||||||
|
|
||||||
@@ -100,7 +99,7 @@ export const History: React.FC = () => {
|
|||||||
groupContent={(index) => (
|
groupContent={(index) => (
|
||||||
<StyledGroupHeader isFirstItem={index === 0}>
|
<StyledGroupHeader isFirstItem={index === 0}>
|
||||||
<Typography variant="h5" component="h2">
|
<Typography variant="h5" component="h2">
|
||||||
{groupedHistory[index][0]}
|
{groupedHistory[index][VirtuosoUtil.GROUP]}
|
||||||
</Typography>
|
</Typography>
|
||||||
</StyledGroupHeader>
|
</StyledGroupHeader>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -42,18 +42,17 @@ export const Updates: React.FC = () => {
|
|||||||
const endCursor = chapterUpdateData?.chapters.pageInfo.endCursor;
|
const endCursor = chapterUpdateData?.chapters.pageInfo.endCursor;
|
||||||
const updateEntries = chapterUpdateData?.chapters.nodes ?? [];
|
const updateEntries = chapterUpdateData?.chapters.nodes ?? [];
|
||||||
const groupedUpdates = useMemo(
|
const groupedUpdates = useMemo(
|
||||||
() =>
|
() => Object.entries(Chapters.groupByDate(updateEntries, 'fetchedAt')),
|
||||||
Object.entries(Chapters.groupByDate(updateEntries, 'fetchedAt')).map(([date, chapters]) => [
|
|
||||||
date,
|
|
||||||
chapters.length,
|
|
||||||
]) satisfies [date: string, itemCount: number][],
|
|
||||||
[updateEntries],
|
[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(
|
const computeItemKey = VirtuosoUtil.useCreateGroupedComputeItemKey(
|
||||||
groupCounts,
|
groupCounts,
|
||||||
useCallback((index) => groupedUpdates[index][0], [groupedUpdates]),
|
useCallback((index) => groupedUpdates[index][VirtuosoUtil.GROUP], [groupedUpdates]),
|
||||||
useCallback((index) => updateEntries[index].id, [updateEntries]),
|
useCallback((index) => updateEntries[index].id, [updateEntries]),
|
||||||
);
|
);
|
||||||
|
|
||||||
@@ -131,7 +130,7 @@ export const Updates: React.FC = () => {
|
|||||||
groupContent={(index) => (
|
groupContent={(index) => (
|
||||||
<StyledGroupHeader isFirstItem={index === 0}>
|
<StyledGroupHeader isFirstItem={index === 0}>
|
||||||
<Typography variant="h5" component="h2">
|
<Typography variant="h5" component="h2">
|
||||||
{groupedUpdates[index][0]}
|
{groupedUpdates[index][VirtuosoUtil.GROUP]}
|
||||||
</Typography>
|
</Typography>
|
||||||
</StyledGroupHeader>
|
</StyledGroupHeader>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user