better code
Massimo Melina committed
Sep 14, 2024 at 20:04 UTC
c185f868078e4059f194ab54747d72a5e2ccffee
1 file changed
+11
-8
frontend/src/BrowseFiles.ts
+11
-8
@@ -64,12 +64,15 @@ function FilesList() {
64
const total = theList.length
65
const nPages = Math.ceil(total / pageSize)
66
67
- useEffect(() => setPage(0), [theList[0]])
67
+ useEffect(() => setPage(0), [theList[0]]) // reset page if the list changes
68
+ // reset scrolling if the page changes
69
useEffect(() => {
70
document.scrollingElement?.scrollTo(0, 0)
71
setExtraPages(0)
72
setScrolledPages(0)
73
}, [page])
74
+
75
+ // infinite scrolling
76
const calcScrolledPages = useMemo(() =>
77
_.throttle(() => {
78
const i = _.findLastIndex(document.querySelectorAll('.' + PAGE_SEPARATOR_CLASS), el =>
@@ -94,7 +97,7 @@ function FilesList() {
97
setGoBottom(false)
98
window.scrollTo(0, document.body.scrollHeight)
99
}, [goBottom])
97
- const pageChange = useCallback((i: number, pleaseGoBottom?: boolean) => {
100
+ const changePage = useCallback((i: number, pleaseGoBottom?: boolean) => {
101
if (pleaseGoBottom)
102
setGoBottom(true)
103
if (i < page || i > page + extraPages)
@@ -127,7 +130,7 @@ function FilesList() {
130
current: page + scrolledPages,
131
atBottom,
132
pageSize,
130
- pageChange,
133
+ changePage,
134
})
135
)
136
}
@@ -137,9 +140,9 @@ interface PagingProps {
140
current: number
141
atBottom: boolean
142
pageSize: number
140
- pageChange:(newPage:number, goBottom?:boolean) => void
143
+ changePage: (newPage:number, goBottom?:boolean) => void
144
}
142
-const Paging = memo(({ nPages, current, pageSize, pageChange, atBottom }: PagingProps) => {
145
+const Paging = memo(({ nPages, current, pageSize, changePage, atBottom }: PagingProps) => {
146
useEffect(() => {
147
document.body.style.overflowY = 'scroll'
148
return () => { document.body.style.overflowY = '' }
@@ -153,7 +156,7 @@ const Paging = memo(({ nPages, current, pageSize, pageChange, atBottom }: Paging
156
h('button', {
157
title: t('go_first', "Go to first item"),
158
className: !current ? 'toggled' : undefined,
156
- onClick() { pageChange(0) },
159
+ onClick() { changePage(0) },
160
}, hIcon('to_start')),
161
h('div', { id: 'paging-middle' }, // using sticky first/last would prevent scrollIntoView from working
162
_.range(1, nPages).map(i =>
@@ -161,13 +164,13 @@ const Paging = memo(({ nPages, current, pageSize, pageChange, atBottom }: Paging
164
&& h('button', {
165
key: i,
166
...i === current && { className: 'toggled', ref },
164
- onClick: () => pageChange(i),
167
+ onClick: () => changePage(i),
168
}, shrink && !(i%10) ? (i/10) + 'K' : i * pageSize) )
169
),
170
h('button', {
171
title: t('go_last', "Go to last item"),
172
className: atBottom ? 'toggled' : undefined,
170
- onClick(){ pageChange(nPages-1, true) }
173
+ onClick(){ changePage(nPages-1, true) }
174
}, hIcon('to_end')),
175
)
176
})