2023-01-28 13:52:18 +03:00
|
|
|
import { useEffect, useRef, useState } from 'preact/hooks';
|
2023-02-06 18:50:00 +03:00
|
|
|
import { useHotkeys } from 'react-hotkeys-hook';
|
2023-02-23 20:27:46 +03:00
|
|
|
import { InView } from 'react-intersection-observer';
|
2023-02-03 16:08:08 +03:00
|
|
|
import { useDebouncedCallback } from 'use-debounce';
|
2023-01-28 13:52:18 +03:00
|
|
|
|
2023-02-08 14:11:33 +03:00
|
|
|
import useInterval from '../utils/useInterval';
|
2023-02-07 19:31:46 +03:00
|
|
|
import usePageVisibility from '../utils/usePageVisibility';
|
2023-01-28 13:52:18 +03:00
|
|
|
import useScroll from '../utils/useScroll';
|
|
|
|
|
|
|
|
import Icon from './icon';
|
|
|
|
import Link from './link';
|
|
|
|
import Loader from './loader';
|
2023-02-10 17:10:13 +03:00
|
|
|
import Menu from './menu';
|
2023-01-28 13:52:18 +03:00
|
|
|
import Status from './status';
|
|
|
|
|
2023-01-30 17:00:14 +03:00
|
|
|
function Timeline({
|
|
|
|
title,
|
2023-01-31 14:08:10 +03:00
|
|
|
titleComponent,
|
2023-01-30 17:00:14 +03:00
|
|
|
id,
|
2023-02-05 19:17:19 +03:00
|
|
|
instance,
|
2023-01-30 17:00:14 +03:00
|
|
|
emptyText,
|
|
|
|
errorText,
|
2023-02-06 18:50:00 +03:00
|
|
|
useItemID, // use statusID instead of status object, assuming it's already in states
|
2023-02-03 16:08:08 +03:00
|
|
|
boostsCarousel,
|
2023-01-30 17:00:14 +03:00
|
|
|
fetchItems = () => {},
|
2023-02-07 19:31:46 +03:00
|
|
|
checkForUpdates = () => {},
|
2023-02-08 14:11:33 +03:00
|
|
|
checkForUpdatesInterval = 60_000, // 1 minute
|
2023-02-09 17:27:49 +03:00
|
|
|
headerStart,
|
|
|
|
headerEnd,
|
2023-03-11 09:05:56 +03:00
|
|
|
timelineStart,
|
2023-03-21 19:09:36 +03:00
|
|
|
allowFilters,
|
2023-01-30 17:00:14 +03:00
|
|
|
}) {
|
2023-01-28 13:52:18 +03:00
|
|
|
const [items, setItems] = useState([]);
|
|
|
|
const [uiState, setUIState] = useState('default');
|
|
|
|
const [showMore, setShowMore] = useState(false);
|
2023-02-07 19:31:46 +03:00
|
|
|
const [showNew, setShowNew] = useState(false);
|
2023-02-08 14:11:33 +03:00
|
|
|
const [visible, setVisible] = useState(true);
|
2023-02-06 18:50:00 +03:00
|
|
|
const scrollableRef = useRef();
|
2023-01-28 13:52:18 +03:00
|
|
|
|
2023-02-03 16:08:08 +03:00
|
|
|
const loadItems = useDebouncedCallback(
|
|
|
|
(firstLoad) => {
|
2023-02-07 19:31:46 +03:00
|
|
|
setShowNew(false);
|
2023-02-03 16:08:08 +03:00
|
|
|
if (uiState === 'loading') return;
|
|
|
|
setUIState('loading');
|
|
|
|
(async () => {
|
|
|
|
try {
|
|
|
|
let { done, value } = await fetchItems(firstLoad);
|
|
|
|
if (value?.length) {
|
|
|
|
if (boostsCarousel) {
|
|
|
|
value = groupBoosts(value);
|
|
|
|
}
|
|
|
|
console.log(value);
|
|
|
|
if (firstLoad) {
|
|
|
|
setItems(value);
|
|
|
|
} else {
|
2023-02-20 15:58:53 +03:00
|
|
|
setItems((items) => [...items, ...value]);
|
2023-02-03 16:08:08 +03:00
|
|
|
}
|
|
|
|
setShowMore(!done);
|
2023-01-28 13:52:18 +03:00
|
|
|
} else {
|
2023-02-03 16:08:08 +03:00
|
|
|
setShowMore(false);
|
2023-01-28 13:52:18 +03:00
|
|
|
}
|
2023-02-03 16:08:08 +03:00
|
|
|
setUIState('default');
|
|
|
|
} catch (e) {
|
|
|
|
console.error(e);
|
|
|
|
setUIState('error');
|
2023-02-23 20:28:15 +03:00
|
|
|
} finally {
|
|
|
|
loadItems.cancel();
|
2023-01-28 13:52:18 +03:00
|
|
|
}
|
2023-02-03 16:08:08 +03:00
|
|
|
})();
|
|
|
|
},
|
|
|
|
1500,
|
|
|
|
{
|
|
|
|
leading: true,
|
|
|
|
trailing: false,
|
|
|
|
},
|
|
|
|
);
|
2023-01-28 13:52:18 +03:00
|
|
|
|
2023-02-06 18:50:00 +03:00
|
|
|
const itemsSelector = '.timeline-item, .timeline-item-alt';
|
|
|
|
|
|
|
|
const jRef = useHotkeys('j, shift+j', (_, handler) => {
|
|
|
|
// focus on next status after active item
|
|
|
|
const activeItem = document.activeElement.closest(itemsSelector);
|
|
|
|
const activeItemRect = activeItem?.getBoundingClientRect();
|
|
|
|
const allItems = Array.from(
|
|
|
|
scrollableRef.current.querySelectorAll(itemsSelector),
|
|
|
|
);
|
|
|
|
if (
|
|
|
|
activeItem &&
|
|
|
|
activeItemRect.top < scrollableRef.current.clientHeight &&
|
|
|
|
activeItemRect.bottom > 0
|
|
|
|
) {
|
|
|
|
const activeItemIndex = allItems.indexOf(activeItem);
|
|
|
|
let nextItem = allItems[activeItemIndex + 1];
|
|
|
|
if (handler.shift) {
|
|
|
|
// get next status that's not .timeline-item-alt
|
|
|
|
nextItem = allItems.find(
|
|
|
|
(item, index) =>
|
|
|
|
index > activeItemIndex &&
|
|
|
|
!item.classList.contains('timeline-item-alt'),
|
|
|
|
);
|
|
|
|
}
|
|
|
|
if (nextItem) {
|
|
|
|
nextItem.focus();
|
|
|
|
nextItem.scrollIntoViewIfNeeded?.();
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
// If active status is not in viewport, get the topmost status-link in viewport
|
|
|
|
const topmostItem = allItems.find((item) => {
|
|
|
|
const itemRect = item.getBoundingClientRect();
|
|
|
|
return itemRect.top >= 44 && itemRect.left >= 0; // 44 is the magic number for header height, not real
|
|
|
|
});
|
|
|
|
if (topmostItem) {
|
|
|
|
topmostItem.focus();
|
|
|
|
topmostItem.scrollIntoViewIfNeeded?.();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
const kRef = useHotkeys('k, shift+k', (_, handler) => {
|
|
|
|
// focus on previous status after active item
|
|
|
|
const activeItem = document.activeElement.closest(itemsSelector);
|
|
|
|
const activeItemRect = activeItem?.getBoundingClientRect();
|
|
|
|
const allItems = Array.from(
|
|
|
|
scrollableRef.current.querySelectorAll(itemsSelector),
|
|
|
|
);
|
|
|
|
if (
|
|
|
|
activeItem &&
|
|
|
|
activeItemRect.top < scrollableRef.current.clientHeight &&
|
|
|
|
activeItemRect.bottom > 0
|
|
|
|
) {
|
|
|
|
const activeItemIndex = allItems.indexOf(activeItem);
|
|
|
|
let prevItem = allItems[activeItemIndex - 1];
|
|
|
|
if (handler.shift) {
|
|
|
|
// get prev status that's not .timeline-item-alt
|
|
|
|
prevItem = allItems.findLast(
|
|
|
|
(item, index) =>
|
|
|
|
index < activeItemIndex &&
|
|
|
|
!item.classList.contains('timeline-item-alt'),
|
|
|
|
);
|
|
|
|
}
|
|
|
|
if (prevItem) {
|
|
|
|
prevItem.focus();
|
|
|
|
prevItem.scrollIntoViewIfNeeded?.();
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
// If active status is not in viewport, get the topmost status-link in viewport
|
|
|
|
const topmostItem = allItems.find((item) => {
|
|
|
|
const itemRect = item.getBoundingClientRect();
|
|
|
|
return itemRect.top >= 44 && itemRect.left >= 0; // 44 is the magic number for header height, not real
|
|
|
|
});
|
|
|
|
if (topmostItem) {
|
|
|
|
topmostItem.focus();
|
|
|
|
topmostItem.scrollIntoViewIfNeeded?.();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
const oRef = useHotkeys(['enter', 'o'], () => {
|
|
|
|
// open active status
|
|
|
|
const activeItem = document.activeElement.closest(itemsSelector);
|
|
|
|
if (activeItem) {
|
|
|
|
activeItem.click();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2023-02-07 19:31:46 +03:00
|
|
|
const {
|
|
|
|
scrollDirection,
|
|
|
|
nearReachStart,
|
|
|
|
nearReachEnd,
|
|
|
|
reachStart,
|
|
|
|
reachEnd,
|
|
|
|
} = useScroll({
|
2023-02-28 16:56:41 +03:00
|
|
|
scrollableRef,
|
2023-02-07 19:31:46 +03:00
|
|
|
distanceFromEnd: 2,
|
|
|
|
scrollThresholdStart: 44,
|
2023-02-06 18:50:00 +03:00
|
|
|
});
|
|
|
|
|
2023-01-28 13:52:18 +03:00
|
|
|
useEffect(() => {
|
|
|
|
scrollableRef.current?.scrollTo({ top: 0 });
|
|
|
|
loadItems(true);
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (reachStart) {
|
|
|
|
loadItems(true);
|
|
|
|
}
|
|
|
|
}, [reachStart]);
|
|
|
|
|
|
|
|
useEffect(() => {
|
2023-02-03 16:08:08 +03:00
|
|
|
if (nearReachEnd || (reachEnd && showMore)) {
|
2023-01-28 13:52:18 +03:00
|
|
|
loadItems();
|
|
|
|
}
|
|
|
|
}, [nearReachEnd, showMore]);
|
|
|
|
|
2023-02-07 19:31:46 +03:00
|
|
|
const lastHiddenTime = useRef();
|
2023-03-23 20:04:47 +03:00
|
|
|
usePageVisibility(
|
|
|
|
(visible) => {
|
|
|
|
if (visible) {
|
|
|
|
const timeDiff = Date.now() - lastHiddenTime.current;
|
|
|
|
if (!lastHiddenTime.current || timeDiff > 1000 * 60) {
|
|
|
|
(async () => {
|
|
|
|
console.log('✨ Check updates');
|
|
|
|
const hasUpdate = await checkForUpdates();
|
|
|
|
if (hasUpdate) {
|
|
|
|
console.log('✨ Has new updates');
|
|
|
|
setShowNew(true);
|
|
|
|
}
|
|
|
|
})();
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
lastHiddenTime.current = Date.now();
|
2023-02-07 19:31:46 +03:00
|
|
|
}
|
2023-03-23 20:04:47 +03:00
|
|
|
setVisible(visible);
|
|
|
|
},
|
|
|
|
[checkForUpdates],
|
|
|
|
);
|
2023-02-07 19:31:46 +03:00
|
|
|
|
2023-02-08 14:11:33 +03:00
|
|
|
// checkForUpdates interval
|
|
|
|
useInterval(
|
|
|
|
() => {
|
|
|
|
(async () => {
|
|
|
|
console.log('✨ Check updates');
|
|
|
|
const hasUpdate = await checkForUpdates();
|
|
|
|
if (hasUpdate) {
|
|
|
|
console.log('✨ Has new updates');
|
|
|
|
setShowNew(true);
|
|
|
|
}
|
|
|
|
})();
|
|
|
|
},
|
|
|
|
visible && !showNew ? checkForUpdatesInterval : null,
|
|
|
|
);
|
|
|
|
|
2023-02-07 19:31:46 +03:00
|
|
|
const hiddenUI = scrollDirection === 'end' && !nearReachStart;
|
|
|
|
|
2023-01-28 13:52:18 +03:00
|
|
|
return (
|
|
|
|
<div
|
|
|
|
id={`${id}-page`}
|
|
|
|
class="deck-container"
|
2023-02-06 18:50:00 +03:00
|
|
|
ref={(node) => {
|
|
|
|
scrollableRef.current = node;
|
|
|
|
jRef.current = node;
|
|
|
|
kRef.current = node;
|
|
|
|
oRef.current = node;
|
|
|
|
}}
|
2023-01-28 13:52:18 +03:00
|
|
|
tabIndex="-1"
|
|
|
|
>
|
|
|
|
<div class="timeline-deck deck">
|
|
|
|
<header
|
2023-02-07 19:31:46 +03:00
|
|
|
hidden={hiddenUI}
|
2023-01-28 13:52:18 +03:00
|
|
|
onClick={(e) => {
|
2023-02-09 17:27:49 +03:00
|
|
|
if (!e.target.closest('a, button')) {
|
2023-01-28 13:52:18 +03:00
|
|
|
scrollableRef.current?.scrollTo({
|
|
|
|
top: 0,
|
|
|
|
behavior: 'smooth',
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}}
|
2023-02-09 17:27:49 +03:00
|
|
|
onDblClick={(e) => {
|
|
|
|
if (!e.target.closest('a, button')) {
|
|
|
|
loadItems(true);
|
|
|
|
}
|
|
|
|
}}
|
2023-01-28 13:52:18 +03:00
|
|
|
>
|
2023-02-08 14:11:33 +03:00
|
|
|
<div class="header-grid">
|
|
|
|
<div class="header-side">
|
2023-02-11 03:37:54 +03:00
|
|
|
<Menu />
|
2023-02-10 08:39:46 +03:00
|
|
|
{headerStart !== null && headerStart !== undefined ? (
|
|
|
|
headerStart
|
|
|
|
) : (
|
2023-02-27 18:59:41 +03:00
|
|
|
<Link to="/" class="button plain home-button">
|
2023-02-09 17:27:49 +03:00
|
|
|
<Icon icon="home" size="l" />
|
|
|
|
</Link>
|
|
|
|
)}
|
2023-02-08 14:11:33 +03:00
|
|
|
</div>
|
|
|
|
{title && (titleComponent ? titleComponent : <h1>{title}</h1>)}
|
|
|
|
<div class="header-side">
|
|
|
|
<Loader hidden={uiState !== 'loading'} />
|
2023-02-09 17:27:49 +03:00
|
|
|
{!!headerEnd && headerEnd}
|
2023-02-08 14:11:33 +03:00
|
|
|
</div>
|
2023-01-28 13:52:18 +03:00
|
|
|
</div>
|
2023-02-07 19:31:46 +03:00
|
|
|
{items.length > 0 &&
|
|
|
|
uiState !== 'loading' &&
|
|
|
|
!hiddenUI &&
|
|
|
|
showNew && (
|
|
|
|
<button
|
2023-02-23 10:56:58 +03:00
|
|
|
class="updates-button shiny-pill"
|
2023-02-07 19:31:46 +03:00
|
|
|
type="button"
|
|
|
|
onClick={() => {
|
|
|
|
loadItems(true);
|
|
|
|
scrollableRef.current?.scrollTo({
|
|
|
|
top: 0,
|
|
|
|
behavior: 'smooth',
|
|
|
|
});
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Icon icon="arrow-up" /> New posts
|
|
|
|
</button>
|
|
|
|
)}
|
2023-01-28 13:52:18 +03:00
|
|
|
</header>
|
2023-03-11 09:05:56 +03:00
|
|
|
{!!timelineStart && <div class="timeline-start">{timelineStart}</div>}
|
2023-01-28 13:52:18 +03:00
|
|
|
{!!items.length ? (
|
|
|
|
<>
|
|
|
|
<ul class="timeline">
|
2023-01-29 18:34:51 +03:00
|
|
|
{items.map((status) => {
|
2023-03-13 14:35:21 +03:00
|
|
|
const { id: statusID, reblog, items, type, _pinned } = status;
|
2023-01-29 18:34:51 +03:00
|
|
|
const actualStatusID = reblog?.id || statusID;
|
2023-02-05 19:17:19 +03:00
|
|
|
const url = instance
|
2023-02-06 14:54:18 +03:00
|
|
|
? `/${instance}/s/${actualStatusID}`
|
2023-02-05 19:17:19 +03:00
|
|
|
: `/s/${actualStatusID}`;
|
2023-02-17 05:55:16 +03:00
|
|
|
let title = '';
|
|
|
|
if (type === 'boosts') {
|
|
|
|
title = `${items.length} Boosts`;
|
|
|
|
} else if (type === 'pinned') {
|
|
|
|
title = 'Pinned posts';
|
|
|
|
}
|
|
|
|
if (items) {
|
2023-03-21 19:09:36 +03:00
|
|
|
// Here, we don't hide filtered posts, but we sort them last
|
|
|
|
items.sort((a, b) => {
|
|
|
|
if (a._filtered && !b._filtered) {
|
|
|
|
return 1;
|
|
|
|
}
|
|
|
|
if (!a._filtered && b._filtered) {
|
|
|
|
return -1;
|
|
|
|
}
|
|
|
|
return 0;
|
|
|
|
});
|
2023-02-03 16:08:08 +03:00
|
|
|
return (
|
|
|
|
<li key={`timeline-${statusID}`}>
|
2023-02-17 05:55:16 +03:00
|
|
|
<StatusCarousel title={title} class={`${type}-carousel`}>
|
|
|
|
{items.map((item) => {
|
|
|
|
const { id: statusID, reblog } = item;
|
|
|
|
const actualStatusID = reblog?.id || statusID;
|
|
|
|
const url = instance
|
|
|
|
? `/${instance}/s/${actualStatusID}`
|
|
|
|
: `/s/${actualStatusID}`;
|
|
|
|
return (
|
|
|
|
<li key={statusID}>
|
|
|
|
<Link
|
|
|
|
class="status-carousel-link timeline-item-alt"
|
|
|
|
to={url}
|
|
|
|
>
|
|
|
|
{useItemID ? (
|
|
|
|
<Status
|
|
|
|
statusID={statusID}
|
|
|
|
instance={instance}
|
|
|
|
size="s"
|
2023-02-18 20:10:06 +03:00
|
|
|
contentTextWeight
|
2023-02-17 05:55:16 +03:00
|
|
|
/>
|
|
|
|
) : (
|
|
|
|
<Status
|
|
|
|
status={item}
|
|
|
|
instance={instance}
|
|
|
|
size="s"
|
2023-02-18 20:10:06 +03:00
|
|
|
contentTextWeight
|
2023-02-17 05:55:16 +03:00
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</Link>
|
|
|
|
</li>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
</StatusCarousel>
|
2023-02-03 16:08:08 +03:00
|
|
|
</li>
|
|
|
|
);
|
|
|
|
}
|
2023-01-29 18:34:51 +03:00
|
|
|
return (
|
2023-03-13 14:35:21 +03:00
|
|
|
<li key={`timeline-${statusID + _pinned}`}>
|
2023-02-06 18:50:00 +03:00
|
|
|
<Link class="status-link timeline-item" to={url}>
|
|
|
|
{useItemID ? (
|
2023-03-21 19:09:36 +03:00
|
|
|
<Status
|
|
|
|
statusID={statusID}
|
|
|
|
instance={instance}
|
2023-03-23 04:50:42 +03:00
|
|
|
allowFilters={allowFilters}
|
2023-03-21 19:09:36 +03:00
|
|
|
/>
|
2023-02-06 18:50:00 +03:00
|
|
|
) : (
|
2023-03-21 19:09:36 +03:00
|
|
|
<Status
|
|
|
|
status={status}
|
|
|
|
instance={instance}
|
2023-03-23 04:50:42 +03:00
|
|
|
allowFilters={allowFilters}
|
2023-03-21 19:09:36 +03:00
|
|
|
/>
|
2023-02-06 18:50:00 +03:00
|
|
|
)}
|
2023-01-29 18:34:51 +03:00
|
|
|
</Link>
|
|
|
|
</li>
|
|
|
|
);
|
|
|
|
})}
|
2023-02-06 19:25:38 +03:00
|
|
|
{showMore && uiState === 'loading' && (
|
|
|
|
<>
|
|
|
|
<li
|
|
|
|
style={{
|
|
|
|
height: '20vh',
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Status skeleton />
|
|
|
|
</li>
|
|
|
|
<li
|
|
|
|
style={{
|
|
|
|
height: '25vh',
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Status skeleton />
|
|
|
|
</li>
|
|
|
|
</>
|
|
|
|
)}
|
2023-01-28 13:52:18 +03:00
|
|
|
</ul>
|
2023-02-03 16:08:08 +03:00
|
|
|
{uiState === 'default' &&
|
|
|
|
(showMore ? (
|
2023-02-23 20:27:46 +03:00
|
|
|
<InView
|
|
|
|
onChange={(inView) => {
|
|
|
|
if (inView) {
|
|
|
|
loadItems();
|
|
|
|
}
|
|
|
|
}}
|
2023-02-03 16:08:08 +03:00
|
|
|
>
|
2023-02-23 20:27:46 +03:00
|
|
|
<button
|
|
|
|
type="button"
|
|
|
|
class="plain block"
|
|
|
|
onClick={() => loadItems()}
|
|
|
|
style={{ marginBlockEnd: '6em' }}
|
|
|
|
>
|
|
|
|
Show more…
|
|
|
|
</button>
|
|
|
|
</InView>
|
2023-02-03 16:08:08 +03:00
|
|
|
) : (
|
|
|
|
<p class="ui-state insignificant">The end.</p>
|
|
|
|
))}
|
2023-01-28 13:52:18 +03:00
|
|
|
</>
|
|
|
|
) : uiState === 'loading' ? (
|
|
|
|
<ul class="timeline">
|
|
|
|
{Array.from({ length: 5 }).map((_, i) => (
|
|
|
|
<li key={i}>
|
|
|
|
<Status skeleton />
|
|
|
|
</li>
|
|
|
|
))}
|
|
|
|
</ul>
|
|
|
|
) : (
|
2023-02-03 16:08:08 +03:00
|
|
|
uiState !== 'error' && <p class="ui-state">{emptyText}</p>
|
2023-01-28 13:52:18 +03:00
|
|
|
)}
|
2023-02-03 16:08:08 +03:00
|
|
|
{uiState === 'error' && (
|
2023-01-28 13:52:18 +03:00
|
|
|
<p class="ui-state">
|
|
|
|
{errorText}
|
|
|
|
<br />
|
|
|
|
<br />
|
|
|
|
<button
|
|
|
|
class="button plain"
|
|
|
|
onClick={() => loadItems(!items.length)}
|
|
|
|
>
|
|
|
|
Try again
|
|
|
|
</button>
|
|
|
|
</p>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2023-02-03 16:08:08 +03:00
|
|
|
function groupBoosts(values) {
|
|
|
|
let newValues = [];
|
|
|
|
let boostStash = [];
|
|
|
|
let serialBoosts = 0;
|
|
|
|
for (let i = 0; i < values.length; i++) {
|
|
|
|
const item = values[i];
|
|
|
|
if (item.reblog) {
|
|
|
|
boostStash.push(item);
|
|
|
|
serialBoosts++;
|
|
|
|
} else {
|
|
|
|
newValues.push(item);
|
|
|
|
if (serialBoosts < 3) {
|
|
|
|
serialBoosts = 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// if boostStash is more than quarter of values
|
|
|
|
// or if there are 3 or more boosts in a row
|
|
|
|
if (boostStash.length > values.length / 4 || serialBoosts >= 3) {
|
|
|
|
// if boostStash is more than 3 quarter of values
|
|
|
|
const boostStashID = boostStash.map((status) => status.id);
|
|
|
|
if (boostStash.length > (values.length * 3) / 4) {
|
|
|
|
// insert boost array at the end of specialHome list
|
2023-02-17 05:55:16 +03:00
|
|
|
newValues = [
|
|
|
|
...newValues,
|
|
|
|
{ id: boostStashID, items: boostStash, type: 'boosts' },
|
|
|
|
];
|
2023-02-03 16:08:08 +03:00
|
|
|
} else {
|
|
|
|
// insert boosts array in the middle of specialHome list
|
|
|
|
const half = Math.floor(newValues.length / 2);
|
|
|
|
newValues = [
|
|
|
|
...newValues.slice(0, half),
|
|
|
|
{
|
|
|
|
id: boostStashID,
|
2023-02-17 05:55:16 +03:00
|
|
|
items: boostStash,
|
|
|
|
type: 'boosts',
|
2023-02-03 16:08:08 +03:00
|
|
|
},
|
|
|
|
...newValues.slice(half),
|
|
|
|
];
|
|
|
|
}
|
|
|
|
return newValues;
|
|
|
|
} else {
|
|
|
|
return values;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-02-17 05:55:16 +03:00
|
|
|
function StatusCarousel({ title, class: className, children }) {
|
2023-02-03 16:08:08 +03:00
|
|
|
const carouselRef = useRef();
|
|
|
|
const { reachStart, reachEnd, init } = useScroll({
|
2023-02-28 16:56:41 +03:00
|
|
|
scrollableRef: carouselRef,
|
2023-02-03 16:08:08 +03:00
|
|
|
direction: 'horizontal',
|
|
|
|
});
|
|
|
|
useEffect(() => {
|
|
|
|
init?.();
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
return (
|
2023-02-17 05:55:16 +03:00
|
|
|
<div class={`status-carousel ${className}`}>
|
2023-02-03 16:08:08 +03:00
|
|
|
<header>
|
2023-02-17 05:55:16 +03:00
|
|
|
<h3>{title}</h3>
|
2023-02-03 16:08:08 +03:00
|
|
|
<span>
|
|
|
|
<button
|
|
|
|
type="button"
|
|
|
|
class="small plain2"
|
|
|
|
disabled={reachStart}
|
|
|
|
onClick={() => {
|
|
|
|
carouselRef.current?.scrollBy({
|
|
|
|
left: -Math.min(320, carouselRef.current?.offsetWidth),
|
|
|
|
behavior: 'smooth',
|
|
|
|
});
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Icon icon="chevron-left" />
|
|
|
|
</button>{' '}
|
|
|
|
<button
|
|
|
|
type="button"
|
|
|
|
class="small plain2"
|
|
|
|
disabled={reachEnd}
|
|
|
|
onClick={() => {
|
|
|
|
carouselRef.current?.scrollBy({
|
|
|
|
left: Math.min(320, carouselRef.current?.offsetWidth),
|
|
|
|
behavior: 'smooth',
|
|
|
|
});
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Icon icon="chevron-right" />
|
|
|
|
</button>
|
|
|
|
</span>
|
|
|
|
</header>
|
2023-02-17 05:55:16 +03:00
|
|
|
<ul ref={carouselRef}>{children}</ul>
|
2023-02-03 16:08:08 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2023-01-28 13:52:18 +03:00
|
|
|
export default Timeline;
|