Refactor some components/callbacks
This commit is contained in:
Lim Chee Aun
parent
c022e2fd00
commit
6dd6e0e77c
2 changed files with 315 additions and 310 deletions
|
|
@ -347,151 +347,15 @@ function Timeline({
|
|||
{!!items.length ? (
|
||||
<>
|
||||
<ul class="timeline">
|
||||
{items.map((status) => {
|
||||
const { id: statusID, reblog, items, type, _pinned } = status;
|
||||
const actualStatusID = reblog?.id || statusID;
|
||||
const url = instance
|
||||
? `/${instance}/s/${actualStatusID}`
|
||||
: `/s/${actualStatusID}`;
|
||||
let title = '';
|
||||
if (type === 'boosts') {
|
||||
title = `${items.length} Boosts`;
|
||||
} else if (type === 'pinned') {
|
||||
title = 'Pinned posts';
|
||||
}
|
||||
const isCarousel = type === 'boosts' || type === 'pinned';
|
||||
if (items) {
|
||||
if (isCarousel) {
|
||||
// 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;
|
||||
});
|
||||
return (
|
||||
<li
|
||||
key={`timeline-${statusID}`}
|
||||
class="timeline-item-carousel"
|
||||
>
|
||||
<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"
|
||||
contentTextWeight
|
||||
allowFilters={allowFilters}
|
||||
/>
|
||||
) : (
|
||||
<Status
|
||||
status={item}
|
||||
instance={instance}
|
||||
size="s"
|
||||
contentTextWeight
|
||||
allowFilters={allowFilters}
|
||||
/>
|
||||
)}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</StatusCarousel>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
const manyItems = items.length > 3;
|
||||
return items.map((item, i) => {
|
||||
const { id: statusID, _differentAuthor } = item;
|
||||
const url = instance
|
||||
? `/${instance}/s/${statusID}`
|
||||
: `/s/${statusID}`;
|
||||
const isMiddle = i > 0 && i < items.length - 1;
|
||||
const isSpoiler = item.sensitive && !!item.spoilerText;
|
||||
const showCompact =
|
||||
(!_differentAuthor && isSpoiler && i > 0) ||
|
||||
(manyItems &&
|
||||
isMiddle &&
|
||||
(type === 'thread' ||
|
||||
(type === 'conversation' &&
|
||||
!_differentAuthor &&
|
||||
!items[i - 1]._differentAuthor &&
|
||||
!items[i + 1]._differentAuthor)));
|
||||
return (
|
||||
<li
|
||||
key={`timeline-${statusID}`}
|
||||
class={`timeline-item-container timeline-item-container-type-${type} timeline-item-container-${
|
||||
i === 0
|
||||
? 'start'
|
||||
: i === items.length - 1
|
||||
? 'end'
|
||||
: 'middle'
|
||||
} ${
|
||||
_differentAuthor ? 'timeline-item-diff-author' : ''
|
||||
}`}
|
||||
>
|
||||
<Link class="status-link timeline-item" to={url}>
|
||||
{showCompact ? (
|
||||
<TimelineStatusCompact
|
||||
status={item}
|
||||
instance={instance}
|
||||
/>
|
||||
) : useItemID ? (
|
||||
<Status
|
||||
statusID={statusID}
|
||||
instance={instance}
|
||||
allowFilters={allowFilters}
|
||||
/>
|
||||
) : (
|
||||
<Status
|
||||
status={item}
|
||||
instance={instance}
|
||||
allowFilters={allowFilters}
|
||||
/>
|
||||
)}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
});
|
||||
}
|
||||
return (
|
||||
<li key={`timeline-${statusID + _pinned}`}>
|
||||
<Link class="status-link timeline-item" to={url}>
|
||||
{useItemID ? (
|
||||
<Status
|
||||
statusID={statusID}
|
||||
instance={instance}
|
||||
allowFilters={allowFilters}
|
||||
/>
|
||||
) : (
|
||||
<Status
|
||||
{items.map((status) => (
|
||||
<TimelineItem
|
||||
status={status}
|
||||
instance={instance}
|
||||
useItemID={useItemID}
|
||||
allowFilters={allowFilters}
|
||||
key={status.id + status?._pinned}
|
||||
/>
|
||||
)}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
))}
|
||||
{showMore && uiState === 'loading' && (
|
||||
<>
|
||||
<li
|
||||
|
|
@ -562,6 +426,132 @@ function Timeline({
|
|||
);
|
||||
}
|
||||
|
||||
function TimelineItem({ status, instance, useItemID, allowFilters }) {
|
||||
const { id: statusID, reblog, items, type, _pinned } = status;
|
||||
const actualStatusID = reblog?.id || statusID;
|
||||
const url = instance
|
||||
? `/${instance}/s/${actualStatusID}`
|
||||
: `/s/${actualStatusID}`;
|
||||
let title = '';
|
||||
if (type === 'boosts') {
|
||||
title = `${items.length} Boosts`;
|
||||
} else if (type === 'pinned') {
|
||||
title = 'Pinned posts';
|
||||
}
|
||||
const isCarousel = type === 'boosts' || type === 'pinned';
|
||||
if (items) {
|
||||
if (isCarousel) {
|
||||
// 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;
|
||||
});
|
||||
return (
|
||||
<li key={`timeline-${statusID}`} class="timeline-item-carousel">
|
||||
<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"
|
||||
contentTextWeight
|
||||
allowFilters={allowFilters}
|
||||
/>
|
||||
) : (
|
||||
<Status
|
||||
status={item}
|
||||
instance={instance}
|
||||
size="s"
|
||||
contentTextWeight
|
||||
allowFilters={allowFilters}
|
||||
/>
|
||||
)}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</StatusCarousel>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
const manyItems = items.length > 3;
|
||||
return items.map((item, i) => {
|
||||
const { id: statusID, _differentAuthor } = item;
|
||||
const url = instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`;
|
||||
const isMiddle = i > 0 && i < items.length - 1;
|
||||
const isSpoiler = item.sensitive && !!item.spoilerText;
|
||||
const showCompact =
|
||||
(!_differentAuthor && isSpoiler && i > 0) ||
|
||||
(manyItems &&
|
||||
isMiddle &&
|
||||
(type === 'thread' ||
|
||||
(type === 'conversation' &&
|
||||
!_differentAuthor &&
|
||||
!items[i - 1]._differentAuthor &&
|
||||
!items[i + 1]._differentAuthor)));
|
||||
return (
|
||||
<li
|
||||
key={`timeline-${statusID}`}
|
||||
class={`timeline-item-container timeline-item-container-type-${type} timeline-item-container-${
|
||||
i === 0 ? 'start' : i === items.length - 1 ? 'end' : 'middle'
|
||||
} ${_differentAuthor ? 'timeline-item-diff-author' : ''}`}
|
||||
>
|
||||
<Link class="status-link timeline-item" to={url}>
|
||||
{showCompact ? (
|
||||
<TimelineStatusCompact status={item} instance={instance} />
|
||||
) : useItemID ? (
|
||||
<Status
|
||||
statusID={statusID}
|
||||
instance={instance}
|
||||
allowFilters={allowFilters}
|
||||
/>
|
||||
) : (
|
||||
<Status
|
||||
status={item}
|
||||
instance={instance}
|
||||
allowFilters={allowFilters}
|
||||
/>
|
||||
)}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
});
|
||||
}
|
||||
return (
|
||||
<li key={`timeline-${statusID + _pinned}`}>
|
||||
<Link class="status-link timeline-item" to={url}>
|
||||
{useItemID ? (
|
||||
<Status
|
||||
statusID={statusID}
|
||||
instance={instance}
|
||||
allowFilters={allowFilters}
|
||||
/>
|
||||
) : (
|
||||
<Status
|
||||
status={status}
|
||||
instance={instance}
|
||||
allowFilters={allowFilters}
|
||||
/>
|
||||
)}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
function StatusCarousel({ title, class: className, children }) {
|
||||
const carouselRef = useRef();
|
||||
const { reachStart, reachEnd, init } = useScroll({
|
||||
|
|
|
|||
|
|
@ -657,7 +657,8 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
|
|||
resetScrollPosition(status.id);
|
||||
}, []);
|
||||
|
||||
const renderStatus = (status) => {
|
||||
const renderStatus = useCallback(
|
||||
(status) => {
|
||||
const {
|
||||
id: statusID,
|
||||
ancestor,
|
||||
|
|
@ -715,8 +716,8 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
|
|||
{uiState !== 'loading' && !authenticated ? (
|
||||
<div class="post-status-banner">
|
||||
<p>
|
||||
You're not logged in. Interactions (reply, boost, etc) are not
|
||||
possible.
|
||||
You're not logged in. Interactions (reply, boost, etc) are
|
||||
not possible.
|
||||
</p>
|
||||
<Link to="/login" class="button">
|
||||
Log in
|
||||
|
|
@ -786,7 +787,9 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
|
|||
{ancestor && isThread && repliesCount > 1 && (
|
||||
<div class="replies-link">
|
||||
<Icon icon="comment" />{' '}
|
||||
<span title={repliesCount}>{shortenNumber(repliesCount)}</span>
|
||||
<span title={repliesCount}>
|
||||
{shortenNumber(repliesCount)}
|
||||
</span>
|
||||
</div>
|
||||
)}{' '}
|
||||
{/* {replies?.length > LIMIT && (
|
||||
|
|
@ -838,7 +841,19 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
|
|||
)}
|
||||
</li>
|
||||
);
|
||||
};
|
||||
},
|
||||
[
|
||||
id,
|
||||
instance,
|
||||
uiState,
|
||||
authenticated,
|
||||
sameInstance,
|
||||
translate,
|
||||
handleMediaClick,
|
||||
handleStatusLinkClick,
|
||||
hasDescendants,
|
||||
],
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue