Complete rewire state to redux

src/App.jsx

@@ -1,64 +1,28 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
-import { useSelector, useDispatch } from 'react-redux';
+import { useSelector } from 'react-redux';
 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());
-const postRequest = async (url, { arg }) => await axios.post(url, { arg });
+// const postRequest = async (url, { arg }) => await axios.post(url, { arg });
 
 const App = () => {
-  // const [messages, setMessages] = useState([]);
   const messages = useSelector((state) => state.messages);
-  // const [convo, setConvo] = useState({ conversationId: null, parentMessageId: null });
   const { data, error, isLoading, mutate } = useSWR('http://localhost:3050/convos', fetcher);
 
-  const convo = useSelector((state) => state.convo);
-  const conversationId = useSelector((state) => state.convo.conversationId);
-  console.log('conversationId', conversationId);
-
-  // const conversation = useSWRMutation(
-  //   //{ trigger, isMutating }
-  //   `http://localhost:3050/messages/${conversationId}`,
-  //   fetcher,
-  //   {
-  //     onSuccess: function (res) {
-  //       console.log('success', res);
-  //       setMessages(res);
-  //     }
-  //   }
-  // );
-
-  // useDidMountEffect(() => conversation.trigger(), [conversationId]);
-
-  // const onConvoClick = (conversationId, parentMessageId) => {
-  //   console.log('convo was clicked');
-  //   setConvo({ conversationId, parentMessageId });
-  // };
-
   return (
     <div className="flex h-screen">
       {/* <div className="w-80 bg-slate-800"></div> */}
-      <Nav
+      <Nav conversations={data} />
-        conversations={data}
-        convo={convo}
-      />
       {/* <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"> */}
         <MobileNav />
         <Messages messages={messages} />
-        <TextChat
+        <TextChat messages={messages} reloadConvos={mutate} />
-          messages={messages}
-          // setMessages={setMessages}
-          reloadConvos={mutate}
-          convo={convo}
-        />
         {/* </main> */}
       </div>
     </div>

src/components/Conversation.jsx

@@ -10,21 +10,19 @@ const fetcher = (url) => fetch(url).then((res) => res.json());
 
 export default function Conversation({ id, parentMessageId, title = 'New conversation' }) {
   const dispatch = useDispatch();
+  const conversationId = useSelector((state) => state.convo.conversationId);
+
   const { trigger, isMutating } = useSWRMutation(
-    //{ trigger, isMutating }
     `http://localhost:3050/messages/${id}`,
     fetcher,
     {
       onSuccess: function (res) {
-        console.log('success', res);
         dispatch(setMessages(res));
-        // setMessages(res);
       }
     }
   );
 
   const onConvoClick = (id, parentMessageId) => {
-    console.log('convo was clicked');
     dispatch(setConversation({ conversationId: id, parentMessageId }));
     trigger();
   };
@@ -52,8 +50,8 @@ export default function Conversation({ id, parentMessageId, title = 'New convers
         {title}
       </div>
       <div className="visible absolute right-1 z-10 flex text-gray-300">
-        <RenameButton />
+        {id === conversationId && <RenameButton />}
-        <DeleteButton />
+        {id === conversationId && <DeleteButton />}
       </div>
     </a>
   );

src/components/Nav.jsx

@@ -3,14 +3,14 @@ import NewChat from './NewChat';
 import Conversations from './Conversations';
 import NavLinks from './NavLinks';
 
-export default function Nav({ conversations, convo, convoHandler }) {
+export default function Nav({ conversations }) {
   return (
     <div className="dark hidden bg-gray-900 md:fixed md:inset-y-0 md:flex md:w-[260px] md:flex-col">
       <div className="flex h-full min-h-0 flex-col ">
         <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 convoState={convo} conversations={conversations} convoHandler={convoHandler}/>
+            <Conversations conversations={conversations} />
             <NavLinks />
           </nav>
         </div>

src/components/TextChat.jsx

@@ -6,9 +6,10 @@ import { useSelector, useDispatch } from 'react-redux';
 import { setConversation } from '../../store/convoSlice';
 import { setMessages } from '../../store/messageSlice';
 
-export default function TextChat({ messages, reloadConvos, convo }) {
+export default function TextChat({ messages, reloadConvos }) {
   const [text, setText] = useState('');
   const dispatch = useDispatch();
+  const convo = useSelector((state) => state.convo);
 
   const submitMessage = () => {
     const payload = text.trim();
@@ -21,7 +22,6 @@ export default function TextChat({ messages, reloadConvos, convo }) {
     const convoHandler = (data) => {
       if (convo.conversationId === null && convo.parentMessageId === null) {
         const { conversationId, parentMessageId } = data;
-        // setConvo({ conversationId, parentMessageId: data.id });
         dispatch(setConversation({ conversationId, parentMessageId: data.id }));
       }
 

store/convoSlice.js

@@ -11,7 +11,6 @@ const currentSlice = createSlice({
   initialState,
   reducers: {
     setConversation: (state, action) => {
-      console.log('in setConversation reducer');
       const { conversationId, parentMessageId } = action.payload;
       state.conversationId = conversationId;
       state.parentMessageId = parentMessageId;

store/messageSlice.js

@@ -7,13 +7,11 @@ const currentSlice = createSlice({
   initialState,
   reducers: {
     setMessages: (state, action) => {
-      console.log('in setMessages reducer');
       const { payload } = action;
-      state = payload;
+      return [...payload];
     },
   }
 });
-//
 
 export const { setMessages } = currentSlice.actions;