feat: error messages for NewMessage

gwynndp · Mar 12, 2022 · 9942e79 · 9942e79
1 parent 5747048
commit 9942e79
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/src/components/Messaging/Inbox.js b/src/components/Messaging/Inbox.js
@@ -72,9 +72,9 @@ const Inbox = ({ threads, selected, handleListItemClick }) => {
               return thread;
             }
           })
-          .map((thread) => (
+          .map((thread, i) => (
             <ListItem
-              key={thread.userName}
+              key={`${thread.userName}-${i}`}
               alignItems="flex-start"
               className={listItem}
               selected={thread.userName === selected}

diff --git a/src/components/Messaging/NewMessage.js b/src/components/Messaging/NewMessage.js
@@ -72,6 +72,7 @@ const NewMessage = ({ openModal, handleClose }) => {
   const [messageContent, setMessageContent] = useState('');
   const [recipient, setRecipient] = useState('');
   const [inputValue, setInputValue] = useState('');
+  const [error, setError] = useState(false);
 
   useEffect(() => {
     if (openModal === false) {
@@ -81,6 +82,7 @@ const NewMessage = ({ openModal, handleClose }) => {
   }, [openModal]);
 
   const handleChange = (e) => {
+    setError(false);
     const { name, value } = e.target;
     name === 'body'
       ? setMessageContent(value)
@@ -97,6 +99,16 @@ const NewMessage = ({ openModal, handleClose }) => {
       body: messageContent,
     };
 
+    if (
+      !recipient ||
+      recipient === '' ||
+      !messageContent ||
+      messageContent === ''
+    ) {
+      setError(true);
+      return;
+    }
+
     if (
       messagePayload.body !== '' &&
       user.userName &&
@@ -159,6 +171,17 @@ const NewMessage = ({ openModal, handleClose }) => {
           <Box className={header} my={1}>
             <Typography variant="h3">Send New Message</Typography>
           </Box>
+          {error ? (
+            <Typography
+              style={{
+                color: 'red',
+                fontWeight: 'bold',
+                margin: '20px 10px 0px',
+              }}
+            >
+              Please select a recipient and enter a message!
+            </Typography>
+          ) : null}
           <FormControl>
             <GSInputLabel text="Choose the Message Recipient" />
             <Autocomplete