adding redux in progress

index.js

@@ -1,10 +1,16 @@
 import React from 'react';
 // import reactDom from 'react-dom'; ---> deprecated
 import { createRoot } from 'react-dom/client';
+import { Provider } from 'react-redux';
+import { store } from './store';
 import App from './src/App';
 import './src/style.css';
 
 const container = document.getElementById('root');
 const root = createRoot(container); // createRoot(container!) if you use TypeScript
 // reactDom.render(<App />, document.getElementById('root'));
-root.render(<App />);
+root.render(
+  <Provider store={store}>
+    <App />
+  </Provider>
+);

src/App.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
 import Messages from './components/Messages';
 import TextChat from './components/TextChat';
 import Nav from './components/Nav';
@@ -12,27 +13,33 @@ const fetcher = (url) => fetch(url).then((res) => res.json());
 const postRequest = async (url, { arg }) => await axios.post(url, { arg });
 
 const App = () => {
-  const [messages, setMessages] = useState([]);
-  const [convo, setConvo] = useState({ conversationId: null, parentMessageId: null });
+  // 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 conversation = useSWRMutation( //{ trigger, isMutating }
-    `http://localhost:3050/messages/${convo.conversationId}`,
-    fetcher,
-    {
-      onSuccess: function (res) {
-        console.log('success', res);
-        setMessages(res);
-      }
-    }
-  );
+  const convo = useSelector((state) => state.convo);
+  const conversationId = useSelector((state) => state.convo.conversationId);
+  console.log('conversationId', conversationId);
 
-  useDidMountEffect(() => conversation.trigger(), [convo]);
+  // const conversation = useSWRMutation(
+  //   //{ trigger, isMutating }
+  //   `http://localhost:3050/messages/${conversationId}`,
+  //   fetcher,
+  //   {
+  //     onSuccess: function (res) {
+  //       console.log('success', res);
+  //       setMessages(res);
+  //     }
+  //   }
+  // );
 
-  const onConvoClick = (conversationId, parentMessageId) => {
-    console.log('convo was clicked');
-    setConvo({ conversationId, parentMessageId });
-  };
+  // useDidMountEffect(() => conversation.trigger(), [conversationId]);
+
+  // const onConvoClick = (conversationId, parentMessageId) => {
+  //   console.log('convo was clicked');
+  //   setConvo({ conversationId, parentMessageId });
+  // };
 
   return (
     <div className="flex h-screen">
@@ -40,7 +47,6 @@ const App = () => {
       <Nav
         conversations={data}
         convo={convo}
-        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]">
@@ -49,10 +55,9 @@ const App = () => {
         <Messages messages={messages} />
         <TextChat
           messages={messages}
-          setMessages={setMessages}
+          // setMessages={setMessages}
           reloadConvos={mutate}
           convo={convo}
-          setConvo={setConvo}
         />
         {/* </main> */}
       </div>

src/components/Conversation.jsx

@@ -1,17 +1,37 @@
 import React from 'react';
 import RenameButton from './RenameButton';
 import DeleteButton from './DeleteButton';
+import { useSelector, useDispatch } from 'react-redux';
+import { setConversation } from '../../store/convoSlice';
+import { setMessages } from '../../store/messageSlice';
+import useSWRMutation from 'swr/mutation';
+
+const fetcher = (url) => fetch(url).then((res) => res.json());
+
+export default function Conversation({ id, parentMessageId, title = 'New conversation' }) {
+  const dispatch = useDispatch();
+  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();
+  };
 
-export default function Conversation({
-  id,
-  parentMessageId,
-  convo,
-  convoHandler,
-  title = 'New conversation'
-}) {
   return (
     <a
-      onClick={() => convoHandler(id, parentMessageId)}
+      onClick={() => onConvoClick(id, parentMessageId)}
       className="animate-flash group relative flex cursor-pointer items-center gap-3 break-all rounded-md bg-gray-800 py-3 px-3 pr-14 hover:bg-gray-800"
     >
       <svg

src/components/Conversations.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Conversation from './Conversation';
 
-export default function Conversations({ convoState, conversations, convoHandler }) {
+export default function Conversations({ conversations }) {
   return (
     <div className="-mr-2 flex-1 flex-col overflow-y-auto border-b border-white/20">
       <div className="flex flex-col gap-2 text-sm text-gray-100">
@@ -12,8 +12,6 @@ export default function Conversations({ convoState, conversations, convoHandler
               id={convo.conversationId}
               parentMessageId={convo.parentMessageId}
               title={convo.title}
-              convo={convoState}
-              convoHandler={convoHandler}
             />
           ))}
         {conversations && conversations.length >= 12 && (

src/components/TextChat.jsx

@@ -2,21 +2,27 @@ import React, { useState } from 'react';
 import SubmitButton from './SubmitButton';
 import TextareaAutosize from 'react-textarea-autosize';
 import handleSubmit from '../utils/handleSubmit';
+import { useSelector, useDispatch } from 'react-redux';
+import { setConversation } from '../../store/convoSlice';
+import { setMessages } from '../../store/messageSlice';
 
-export default function TextChat({ messages, setMessages, reloadConvos, convo, setConvo }) {
+export default function TextChat({ messages, reloadConvos, convo }) {
   const [text, setText] = useState('');
+  const dispatch = useDispatch();
+
   const submitMessage = () => {
     const payload = text.trim();
     const currentMsg = { sender: 'user', text: payload, current: true };
-    setMessages([...messages, currentMsg]);
+    dispatch(setMessages([...messages, currentMsg]));
     setText('');
     const messageHandler = (data) => {
-      setMessages([...messages, currentMsg, { sender: 'GPT', text: data }]);
+      dispatch(setMessages([...messages, currentMsg, { sender: 'GPT', text: data }]));
     };
     const convoHandler = (data) => {
       if (convo.conversationId === null && convo.parentMessageId === null) {
         const { conversationId, parentMessageId } = data;
-        setConvo({ conversationId, parentMessageId: data.id });
+        // setConvo({ conversationId, parentMessageId: data.id });
+        dispatch(setConversation({ conversationId, parentMessageId: data.id }));
       }
 
       reloadConvos();
@@ -60,28 +66,6 @@ export default function TextChat({ messages, setMessages, reloadConvos, convo, s
               className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-2 pr-7 leading-6 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-0"
             />
             <SubmitButton onClick={() => submitMessage()} />
-            {/* <button className="absolute bottom-1.5 right-1 rounded-md p-1 text-gray-500 hover:bg-gray-100 disabled:hover:bg-transparent dark:hover:bg-gray-900 dark:hover:text-gray-400 dark:disabled:hover:bg-transparent md:bottom-2.5 md:right-2">
-              <svg
-                stroke="currentColor"
-                fill="none"
-                strokeWidth="2"
-                viewBox="0 0 24 24"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                className="mr-1 h-4 w-4"
-                height="1em"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <line
-                  x1="22"
-                  y1="2"
-                  x2="11"
-                  y2="13"
-                />
-                <polygon points="22 2 15 22 11 13 2 9 22 2" />
-              </svg>
-            </button> */}
           </div>
         </div>
       </form>

store/convoSlice.js

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

store/index.js

@@ -1,11 +1,11 @@
 import { configureStore } from '@reduxjs/toolkit';
 
 import convoReducer from './convoSlice.js';
-// import uploadReducer from './uploadSlice.js'
+import messageReducer from './messageSlice.js'
 
 export const store = configureStore({
   reducer: {
     convo: convoReducer,
-    // upload: uploadReducer,
+    messages: messageReducer,
   },
 });

store/messageSlice.js

@@ -0,0 +1,20 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = [];
+
+const currentSlice = createSlice({
+  name: 'messages',
+  initialState,
+  reducers: {
+    setMessages: (state, action) => {
+      console.log('in setMessages reducer');
+      const { payload } = action;
+      state = payload;
+    },
+  }
+});
+//
+
+export const { setMessages } = currentSlice.actions;
+
+export default currentSlice.reducer;