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,10 +1,18 @@
import React from 'react';
import React, { useState } from 'react';
import NewChat from './NewChat';
import Spinner from '../svg/Spinner';
import Conversations from '../Conversations';
import NavLinks from './NavLinks';
import useDidMountEffect from '~/hooks/useDidMountEffect';
import { swr } from '~/utils/fetchers';
import { useSelector } from 'react-redux';
export default function Nav() {
const [isHovering, setIsHovering] = useState(false);
const { conversationId } = useSelector((state) => state.convo);
const { data, error, isLoading, mutate } = swr('http://localhost:3050/convos');
useDidMountEffect(() => mutate(), [conversationId]);
return (
<div className="dark hidden bg-gray-900 md:fixed md:inset-y-0 md:flex md:w-[260px] md:flex-col">
@ -12,7 +20,17 @@ export default function Nav() {
<div className="scrollbar-trigger flex h-full w-full flex-1 items-start border-white/20">
<nav className="flex h-full flex-1 flex-col space-y-1 p-2">
<NewChat />
<Conversations />
<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">
{!!isLoading ? <Spinner /> : <Conversations conversations={data} conversationId={conversationId}/>}
</div>
</div>
<NavLinks />
</nav>
</div>