From 5cd50e7826c9f11c5c948c100294f7af3f06a050 Mon Sep 17 00:00:00 2001
From: Danny Avila <messagedaniel@protonmail.com>
Date: Wed, 8 Feb 2023 09:59:01 -0500
Subject: [PATCH] handle textarea text state with redux and setText on example
 click

---
 src/components/main/Landing.jsx  | 20 +++++++++++++++-----
 src/components/main/TextChat.jsx |  8 +++++---
 src/store/index.js               |  2 ++
 src/store/textSlice.js           | 19 +++++++++++++++++++
 4 files changed, 41 insertions(+), 8 deletions(-)
 create mode 100644 src/store/textSlice.js

diff --git a/src/components/main/Landing.jsx b/src/components/main/Landing.jsx
index 0cb82496c8..c0282d1023 100644
--- a/src/components/main/Landing.jsx
+++ b/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">
-                "Got any creative ideas for a 10 year old’s birthday?" →
+              <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?" →
               </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>
diff --git a/src/components/main/TextChat.jsx b/src/components/main/TextChat.jsx
index 57adaee530..968825c9d3 100644
--- a/src/components/main/TextChat.jsx
+++ b/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 (
diff --git a/src/store/index.js b/src/store/index.js
index c2e6afc858..c951d810e0 100644
--- a/src/store/index.js
+++ b/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,
   },
 });
\ No newline at end of file
diff --git a/src/store/textSlice.js b/src/store/textSlice.js
new file mode 100644
index 0000000000..7d25b16d26
--- /dev/null
+++ b/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;