Skip to content

Commit

Permalink
f
Browse files Browse the repository at this point in the history
  • Loading branch information
@mattsrobot
mattsrobot committed Jan 12, 2024
1 parent 15a5e82 commit 168b7d9
Show file tree
Hide file tree
Showing 4 changed files with 71 additions and 68 deletions.
128 changes: 66 additions & 62 deletions app/components/channel-feed.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ export default function ChannelFeed(props) {

useEffect(() => {
if (!!channelId) {
sendJsonMessage({"type": "subscribe", "topic" : channelId});
sendJsonMessage({ "type": "subscribe", "topic": channelId });
}
}, [channelId]);

Expand Down Expand Up @@ -210,7 +210,7 @@ export default function ChannelFeed(props) {
setMessages((prev) => {
let i = 0;
const update = [...prev];
while(i < update.length) {
while (i < update.length) {
const msg = update[i];
if (msg.optimisticUuid == optimisticUuid) {
msg.optimistic = false;
Expand All @@ -220,7 +220,7 @@ export default function ChannelFeed(props) {
i++;
}
return update;
}, () => {});
}, () => { });
}

}, [channelFetcher]);
Expand All @@ -244,74 +244,77 @@ export default function ChannelFeed(props) {
}, [page]);

return (
<section ref={feedRef} onContextMenu={(e) => { e.preventDefault() }} className='wk-channel-feed' onScroll={_ => {
<>
<section ref={feedRef} onContextMenu={(e) => { e.preventDefault() }} className='wk-channel-feed' onScroll={_ => {

const feed = feedRef.current;
const feed = feedRef.current;

if (feed.scrollHeight <= feed.clientHeight) {
// Not scrollable.
return;
}
if (feed.scrollHeight <= feed.clientHeight) {
// Not scrollable.
return;
}

if (!moreRemaining) {
// There's no more messages
return;
}
if (!moreRemaining) {
// There's no more messages
return;
}

const threshold = skeletonMessageHeight * shownSekeletons;
const scrollPosition = feed.scrollTop;
const threshold = skeletonMessageHeight * shownSekeletons;
const scrollPosition = feed.scrollTop;

if (!prevScrollTop) {
setPrevScrollTop(scrollPosition);
return;
}
if (!prevScrollTop) {
setPrevScrollTop(scrollPosition);
return;
}

if (prevScrollTop < scrollPosition) {
return;
}
if (prevScrollTop < scrollPosition) {
return;
}

if (scrollPosition <= threshold && !fetchingMore) {
setFetchingMore(true);
setPage((v) => v + 1);
}
}}>
{remainingMessages > 0 && Array.apply(null, { length: shownSekeletons }).map((_, i) => {
let rng = new Prando(i);
rng.skip(i);
let num = rng.nextInt(40, 100);
return (
<span key={`skeleteton-${i}`}>
<ChannelMessageSkeleton size={`${num}%`} />
</span>
);
})}
{messages.map((e, i) => {
if (i % 50 == 0) {
return (
<span ref={(ref) => pageTops.current[i / 50] = ref} key={`cm-${e.id}-${i}`}>
<ChannelMessage
channel={channel}
community={community}
setReplyingTo={setReplyingTo}
me={me}
message={e} />
</span>
);
} else {
if (scrollPosition <= threshold && !fetchingMore) {
setFetchingMore(true);
setPage((v) => v + 1);
}
}}>
{remainingMessages > 0 && Array.apply(null, { length: shownSekeletons }).map((_, i) => {
let rng = new Prando(i);
rng.skip(i);
let num = rng.nextInt(40, 100);
return (
<span key={`cm-${e.id}-${i}`}>
<ChannelMessage
channel={channel}
community={community}
setReplyingTo={setReplyingTo}
me={me}
message={e} />
<span key={`skeleteton-${i}`}>
<ChannelMessageSkeleton size={`${num}%`} />
</span>
);
}
})}
<div style={{ flexGrow: 1 }} ref={gap} />
<span style={{ height: 300 }} ref={end} />
})}
{messages.map((e, i) => {
const isEnd = i == (messages.length - 1);
if (i % 50 == 0) {
return (
<span ref={(ref) => pageTops.current[i / 50] = ref} key={`cm-${e.id}-${i}`}>
<ChannelMessage
channel={channel}
community={community}
setReplyingTo={setReplyingTo}
me={me}
message={e} />
</span>
);
} else {
return (
<span key={`cm-${e.id}-${i}`} style={{paddingBottom: isEnd ? 20 : 0 }}>
<ChannelMessage
channel={channel}
community={community}
setReplyingTo={setReplyingTo}
me={me}
message={e} />
</span>
);
}
})}
<div style={{ flexGrow: 1 }} ref={gap} />
<span style={{ height: 1 }} ref={end} />
</section>
<div className="wk-blur-box">
<ChannelReplybox
addMessageOptimistically={addMessageOptimistically}
Expand All @@ -324,6 +327,7 @@ export default function ChannelFeed(props) {
setFiles={setFiles}
/>
</div>
</section>
</>

);
}
3 changes: 1 addition & 2 deletions app/components/styles.channel-feed.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
flex-direction: column;
gap: 0;
overflow-y: auto;
height: calc(100% - 57px);
height: calc(100% - 107px);
box-sizing: border-box;
scrollbar-width: thin;
transition: all 250ms ease;
Expand All @@ -16,7 +16,6 @@
}

.wk-blur-box {
margin-top: var(--space-5);
position: sticky;
bottom: 0px;
left: 0px;
Expand Down
2 changes: 1 addition & 1 deletion app/components/styles.channel-replybox.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
background-color: var(--gray-a7);
position: absolute;
left: 10px;
bottom: 25.5px;
top: calc(50% - 15px);
z-index: 1;
}

Expand Down
6 changes: 3 additions & 3 deletions app/components/useAutosizeTextArea.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import { useEffect } from "react";
const useAutosizeTextArea = (textAreaRef, value) => {
useEffect(() => {
if (!!textAreaRef) {
// textAreaRef.style.height = "0px";
// const scrollHeight = textAreaRef.scrollHeight;
// textAreaRef.style.height = scrollHeight + "px";
textAreaRef.style.height = "0px";
const scrollHeight = textAreaRef.scrollHeight;
textAreaRef.style.height = scrollHeight + 2 + "px";
}
}, [textAreaRef, value]);
};
Expand Down

0 comments on commit 168b7d9

Please sign in to comment.