refactor convos fetching to nav components, results in faster loading

This commit is contained in:
Danny Avila 2023-02-14 16:15:45 -05:00
parent e4d1ff2523
commit 742073fb89
8 changed files with 389 additions and 286 deletions

View file

@ -1,13 +1,8 @@
import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import Conversation from './Conversation';
// import { swr } from '~/utils/fetchers';
import useDidMountEffect from '~/hooks/useDidMountEffect';
export default function Conversations() {
const [isHovering, setIsHovering] = useState(false);
const { conversationId } = useSelector((state) => state.convo);
// useDidMountEffect(() => mutate(), [conversationId]);
export default function Conversations({ conversations, conversationId }) {
// const currentRef = useRef(null);
// const scrollToTop = () => {
@ -21,31 +16,24 @@ export default function Conversations() {
// }, [conversationId]);
return (
<div
className={`-mr-2 flex-1 flex-col overflow-y-auto ${
isHovering ? '' : 'scrollbar-transparent'
} border-b border-white/20`}
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
>
<div className="flex flex-col gap-2 text-sm text-gray-100">
{/* <div ref={currentRef} /> */}
{conversations &&
conversations.map((convo, i) => (
<Conversation
key={convo.conversationId}
id={convo.conversationId}
parentMessageId={convo.parentMessageId}
title={convo.title}
conversationId={conversationId}
/>
))}
{conversations && conversations.length >= 12 && (
<button className="btn btn-dark btn-small m-auto mb-2 flex justify-center gap-2">
Show more
</button>
)}
</div>
</div>
<>
{/* <div ref={currentRef} /> */}
{conversations &&
conversations.length > 0 &&
conversations.map((convo, i) => (
<Conversation
key={convo.conversationId}
id={convo.conversationId}
parentMessageId={convo.parentMessageId}
title={convo.title}
conversationId={conversationId}
/>
))}
{conversations && conversations.length >= 12 && (
<button className="btn btn-dark btn-small m-auto mb-2 flex justify-center gap-2">
Show more
</button>
)}
</>
);
}