handle textarea text state with redux and setText on example click

src/components/main/Landing.jsx

@@ -1,6 +1,16 @@
 import React from 'react';
+import { useDispatch } from 'react-redux';
+import { setText } from '~/store/textSlice';
 
 export default function Landing() {
+  const dispatch = useDispatch();
+
+  const clickHandler = (e) => {
+    e.preventDefault();
+    const { innerText } = e.target;
+    const quote = innerText.split('"')[1].trim();
+    dispatch(setText(quote));
+  };
   return (
     <div className="flex h-full flex-col items-center text-sm dark:bg-gray-800">
       <div className="w-full px-6 text-gray-800 dark:text-gray-100 md:flex md:max-w-2xl md:flex-col lg:max-w-3xl">
@@ -26,7 +36,7 @@ export default function Landing() {
                   cx="12"
                   cy="12"
                   r="5"
-                ></circle>
+                />
                 <line
                   x1="12"
                   y1="1"
@@ -79,13 +89,13 @@ export default function Landing() {
               Examples
             </h2>
             <ul className="m-auto flex w-full flex-col gap-3.5 sm:max-w-md">
-              <button className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-900">
+              <button onClick={clickHandler} className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-900">
                 "Explain quantum computing in simple terms" →
               </button>
-              <button className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-900">
+              <button onClick={clickHandler} className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-900">
-                "Got any creative ideas for a 10 year old’s birthday?" →
+                "Got any creative ideas for a 10 year old's birthday?" →
               </button>
-              <button className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-900">
+              <button onClick={clickHandler} className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-900">
                 "How do I make an HTTP request in Javascript?" →
               </button>
             </ul>

src/components/main/TextChat.jsx

@@ -6,12 +6,14 @@ import { useSelector, useDispatch } from 'react-redux';
 import { setConversation } from '~/store/convoSlice';
 import { setMessages } from '~/store/messageSlice';
 import { setSubmitState } from '~/store/submitSlice';
+import { setText } from '~/store/textSlice';
 
 export default function TextChat({ messages, reloadConvos }) {
-  const [text, setText] = useState('');
+  // const [text, setText] = useState('');
   const dispatch = useDispatch();
   const convo = useSelector((state) => state.convo);
   const { isSubmitting } = useSelector((state) => state.submit);
+  const { text } = useSelector((state) => state.text);
 
   const submitMessage = () => {
     if (!!isSubmitting || text.trim() === '') {
@@ -22,7 +24,7 @@ export default function TextChat({ messages, reloadConvos }) {
     const currentMsg = { sender: 'user', text: payload, current: true };
     const initialResponse = { sender: 'GPT', text: '' };
     dispatch(setMessages([...messages, currentMsg, initialResponse]));
-    setText('');
+    dispatch(setText(''));
     const messageHandler = (data) => {
       dispatch(setMessages([...messages, currentMsg, { sender: 'GPT', text: data }]));
     };
@@ -76,7 +78,7 @@ export default function TextChat({ messages, reloadConvos }) {
     if (isSubmitting && (value === '' || value === '\n')) {
       return;
     }
-    setText(value);
+    dispatch(setText(value));
   };
 
   return (

src/store/index.js

@@ -3,11 +3,13 @@ import { configureStore } from '@reduxjs/toolkit';
 import convoReducer from './convoSlice.js';
 import messageReducer from './messageSlice.js'
 import submitReducer from './submitSlice.js'
+import textReducer from './textSlice.js'
 
 export const store = configureStore({
   reducer: {
     convo: convoReducer,
     messages: messageReducer,
+    text: textReducer,
     submit: submitReducer,
   },
 });

src/store/textSlice.js

@@ -0,0 +1,19 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+  text: '',
+};
+
+const currentSlice = createSlice({
+  name: 'text',
+  initialState,
+  reducers: {
+    setText: (state, action) => {
+      state.text = action.payload;
+    },
+  }
+});
+
+export const { setText } = currentSlice.actions;
+
+export default currentSlice.reducer;