this repo has no description
Bug fixes for boosts carousel + scrolling
+53
-41
+40
-30
src/pages/home.jsx
+40
-30
src/pages/home.jsx
···
48
48
};
49
49
});
50
50
51
-
{
52
-
// BOOSTS CAROUSEL
51
+
// BOOSTS CAROUSEL
52
+
if (snapStates.settings.boostsCarousel) {
53
53
let specialHome = [];
54
54
let boostStash = [];
55
55
for (let i = 0; i < homeValues.length; i++) {
···
90
90
specialHome,
91
91
});
92
92
if (firstLoad) {
93
-
states.specialHome = specialHome;
93
+
states.home = specialHome;
94
94
} else {
95
-
states.specialHome.push(...specialHome);
95
+
states.home.push(...specialHome);
96
+
}
97
+
} else {
98
+
if (firstLoad) {
99
+
states.home = homeValues;
100
+
} else {
101
+
states.home.push(...homeValues);
96
102
}
97
103
}
98
104
99
-
if (firstLoad) {
100
-
states.home = homeValues;
101
-
} else {
102
-
states.home.push(...homeValues);
103
-
}
104
105
states.homeLastFetchTime = Date.now();
105
-
return allStatuses;
106
+
return {
107
+
done: false,
108
+
};
106
109
}
107
110
108
111
const loadingStatuses = useRef(false);
···
212
215
}
213
216
});
214
217
215
-
const { scrollDirection, reachStart, nearReachStart, nearReachEnd } =
216
-
useScroll({
217
-
scrollableElement: scrollableRef.current,
218
-
distanceFromStart: 0.1,
219
-
distanceFromEnd: 0.15,
220
-
scrollThresholdStart: 44,
221
-
});
218
+
const {
219
+
scrollDirection,
220
+
reachStart,
221
+
nearReachStart,
222
+
nearReachEnd,
223
+
reachEnd,
224
+
} = useScroll({
225
+
scrollableElement: scrollableRef.current,
226
+
distanceFromStart: 1,
227
+
distanceFromEnd: 3,
228
+
scrollThresholdStart: 44,
229
+
});
222
230
223
231
useEffect(() => {
224
-
if (nearReachEnd && showMore) {
232
+
if (nearReachEnd || (reachEnd && showMore)) {
225
233
loadStatuses();
226
234
}
227
-
}, [nearReachEnd]);
235
+
}, [nearReachEnd, reachEnd]);
228
236
229
237
useEffect(() => {
230
238
if (reachStart) {
···
244
252
}
245
253
})();
246
254
}, []);
247
-
248
-
const snapHome = snapStates.settings.boostsCarousel
249
-
? snapStates.specialHome
250
-
: snapStates.home;
251
255
252
256
return (
253
257
<div
···
322
326
class="updates-button"
323
327
type="button"
324
328
onClick={() => {
325
-
const uniqueHomeNew = snapStates.homeNew.filter(
326
-
(status) => !states.home.some((s) => s.id === status.id),
327
-
);
328
-
states.home.unshift(...uniqueHomeNew);
329
+
if (!snapStates.settings.boostsCarousel) {
330
+
const uniqueHomeNew = snapStates.homeNew.filter(
331
+
(status) => !states.home.some((s) => s.id === status.id),
332
+
);
333
+
states.home.unshift(...uniqueHomeNew);
334
+
}
329
335
loadStatuses(true);
330
336
states.homeNew = [];
331
337
···
338
344
<Icon icon="arrow-up" /> New posts
339
345
</button>
340
346
)}
341
-
{snapHome.length ? (
347
+
{snapStates.home.length ? (
342
348
<>
343
349
<ul class="timeline">
344
-
{snapHome.map(({ id: statusID, reblog, boosts }) => {
350
+
{snapStates.home.map(({ id: statusID, reblog, boosts }) => {
345
351
const actualStatusID = reblog || statusID;
346
352
if (boosts) {
347
353
return (
···
429
435
430
436
function BoostsCarousel({ boosts }) {
431
437
const carouselRef = useRef();
432
-
const { reachStart, reachEnd } = useScroll({
438
+
const { reachStart, reachEnd, init } = useScroll({
433
439
scrollableElement: carouselRef.current,
434
440
direction: 'horizontal',
435
441
});
442
+
useEffect(() => {
443
+
init?.();
444
+
}, []);
445
+
436
446
return (
437
447
<div class="boost-carousel">
438
448
<header>
+1
-1
src/pages/status.jsx
+1
-1
src/pages/status.jsx
+1
-1
src/utils/states.js
+1
-1
src/utils/states.js
+11
-9
src/utils/useScroll.js
+11
-9
src/utils/useScroll.js
···
2
2
3
3
export default function useScroll({
4
4
scrollableElement,
5
-
distanceFromStart = 0,
6
-
distanceFromEnd = 0,
5
+
distanceFromStart = 1, // ratio of clientHeight/clientWidth
6
+
distanceFromEnd = 1, // ratio of clientHeight/clientWidth
7
7
scrollThresholdStart = 10,
8
8
scrollThresholdEnd = 10,
9
9
direction = 'vertical',
···
16
16
const isVertical = direction === 'vertical';
17
17
18
18
if (!scrollableElement) {
19
-
console.warn('Scrollable element is not defined');
20
-
scrollableElement = window;
19
+
// Better be explicit instead of auto-assign to window
20
+
return {};
21
21
}
22
22
23
23
useEffect(() => {
···
38
38
const scrollDimension = isVertical ? scrollHeight : scrollWidth;
39
39
const clientDimension = isVertical ? clientHeight : clientWidth;
40
40
const scrollDistance = Math.abs(scrollStart - previousScrollStart);
41
-
const distanceFromStartPx =
42
-
scrollDimension * Math.min(1, Math.max(0, distanceFromStart));
43
-
const distanceFromEndPx =
44
-
scrollDimension * Math.min(1, Math.max(0, distanceFromEnd));
41
+
const distanceFromStartPx = clientDimension * distanceFromStart;
42
+
const distanceFromEndPx = clientDimension * distanceFromEnd;
45
43
46
44
if (
47
45
scrollDistance >=
···
62
60
}
63
61
64
62
scrollableElement.addEventListener('scroll', onScroll, { passive: true });
65
-
scrollableElement.dispatchEvent(new Event('scroll'));
66
63
67
64
return () => scrollableElement.removeEventListener('scroll', onScroll);
68
65
}, [
···
79
76
reachEnd,
80
77
nearReachStart,
81
78
nearReachEnd,
79
+
init: () => {
80
+
if (scrollableElement) {
81
+
scrollableElement.dispatchEvent(new Event('scroll'));
82
+
}
83
+
},
82
84
};
83
85
}