convo successfully changes on convo click

This commit is contained in:
Daniel Avila 2023-02-06 18:25:11 -05:00
parent d35ed31b20
commit c7c50dbbab
9 changed files with 76 additions and 25 deletions

View file

@ -1,10 +1,11 @@
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import Messages from './components/Messages';
import TextChat from './components/TextChat';
import Nav from './components/Nav';
import MobileNav from './components/MobileNav';
import useSWR from 'swr';
import useSWRMutation from 'swr/mutation';
import useDidMountEffect from './hooks/useDidMountEffect.js';
import axios from 'axios';
const fetcher = (url) => fetch(url).then((res) => res.json());
@ -13,23 +14,32 @@ const App = () => {
const [messages, setMessages] = useState([]);
const [convo, setConvo] = useState({ conversationId: null, parentMessageId: null });
const { data, error, isLoading, mutate } = useSWR('http://localhost:3050/convos', fetcher);
const { trigger, isMutating } = useSWRMutation('http://localhost:3050/messages', fetcher, {
onSuccess: function (res) {
console.log('success', res);
// setMessages(res);
const { trigger, isMutating } = useSWRMutation(
`http://localhost:3050/messages/${convo.conversationId}`,
fetcher,
{
onSuccess: function (res) {
console.log('success', res);
setMessages(res);
}
}
});
);
useDidMountEffect(() => trigger(), [convo]);
const onConvoClick = (conversationId, parentMessageId) => {
console.log('convo was clicked');
setConvo({ conversationId, parentMessageId });
trigger();
// console.log(e, e.target);
};
return (
<div className="flex h-screen">
{/* <div className="w-80 bg-slate-800"></div> */}
<Nav conversations={data} convoHandler={onConvoClick}/>
<Nav
conversations={data}
convoHandler={onConvoClick}
/>
{/* <div className="flex h-full flex-1 flex-col md:pl-[260px]"> */}
<div className="flex h-full w-full flex-1 flex-col bg-gray-50 md:pl-[260px]">
{/* <main className="relative h-full w-full transition-width flex flex-col overflow-hidden items-stretch flex-1"> */}