fix: update client to send message, announcement, surveys

gwynndp · Mar 1, 2022 · dc945da · dc945da
1 parent b12dfd0
commit dc945da
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 40 deletions.
diff --git a/src/api/messaging.js b/src/api/messaging.js
@@ -59,21 +59,6 @@ export default {
 
     return fetch(query).then(handleResponse).catch(handleError);
   },
-  // async getMessages(author_handle) {
-  //   const authorQuery = `${process.env.REACT_APP_MESSAGING_ROOT}/author?handle=${author_handle}`;
-  //   const messageQuery = `${process.env.REACT_APP_MESSAGING_ROOT}/message`;
-
-  //   const author = await fetch(authorQuery)
-  //     .then(handleResponse)
-  //     .catch(handleError);
-  //   const messages = await fetch(messageQuery)
-  //     .then(handleResponse)
-  //     .catch(handleError);
-
-  //   console.log('getMessages', author, messages);
-
-  //   return messages;
-  // },
   postMessage(payload) {
     const query = `${process.env.REACT_APP_MESSAGING_ROOT}/message`;
 
@@ -89,7 +74,21 @@ export default {
       .catch(handleError);
   },
   postMessageSend(payload) {
-    const query = `${process.env.REACT_APP_MESSAGING_ROOT}/message/send`;
+    const query = `${process.env.REACT_APP_MESSAGING_ROOT}/message`;
+
+    return fetch(query, {
+      method: 'POST',
+      headers: {
+        'content-type': 'application/json',
+        Authorization: session.token,
+      },
+      body: JSON.stringify(payload),
+    })
+      .then(handleResponse)
+      .catch(handleError);
+  },
+  postBulkMessageSend(payload) {
+    const query = `${process.env.REACT_APP_MESSAGING_ROOT}/bulk_message`;
 
     return fetch(query, {
       method: 'POST',

diff --git a/src/components/Messaging/AnnounceMessage.js b/src/components/Messaging/AnnounceMessage.js
@@ -56,7 +56,7 @@ const useStyles = makeStyles((theme) => ({
 const AnnounceMessageForm = ({ setToggleAnnounceMessage }) => {
   const history = useHistory();
   const { orgList } = useContext(AppContext);
-  const { user, regions, postMessageSend } = useContext(MessagingContext);
+  const { user, regions, postBulkMessageSend } = useContext(MessagingContext);
   const { form, sendButton } = useStyles();
   const [organization, setOrganization] = useState({});
   const [inputValueOrg, setInputValueOrg] = useState('');
@@ -82,8 +82,8 @@ const AnnounceMessageForm = ({ setToggleAnnounceMessage }) => {
     e.preventDefault();
     const payload = {
       author_handle: user.userName,
-      subject: 'Announce Message',
-      title: values.title,
+      subject: values.title,
+      type: 'announce',
       body: values.message,
     };
 
@@ -109,7 +109,7 @@ const AnnounceMessageForm = ({ setToggleAnnounceMessage }) => {
         (payload.body && payload.organization_id) ||
         (payload.body && payload.region_id)
       ) {
-        await postMessageSend(payload);
+        await postBulkMessageSend(payload);
         history.go(0);
       }
     } catch (err) {

diff --git a/src/components/Messaging/Inbox.js b/src/components/Messaging/Inbox.js
@@ -9,6 +9,7 @@ import {
   Typography,
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
+import { Announcement, Ballot } from '@material-ui/icons';
 import SearchInbox from './SearchInbox';
 import { MessagingContext } from 'context/MessagingContext';
 import { timeAgoFormatDate } from 'common/locale';
@@ -48,6 +49,7 @@ const useStyles = makeStyles((theme) => ({
     },
   },
   avatar: {
+    marginTop: '0',
     [theme.breakpoints.down('xs')]: {
       display: 'none',
     },
@@ -65,7 +67,6 @@ const Inbox = ({ threads, selectedIndex, handleListItemClick }) => {
       thread.messages[0].to !== user.userName
         ? thread.messages[0].to
         : thread.messages[0].type;
-    console.log('-----> onClickHelper', user.userName, i, thread);
     handleListItemClick(e, i, recipient);
   };
 
@@ -90,15 +91,23 @@ const Inbox = ({ threads, selectedIndex, handleListItemClick }) => {
               selected={selectedIndex === i}
               onClick={(e) => onClickHelper(e, i, thread)}
             >
-              <ListItemAvatar className={avatar}>
-                <Avatar alt={''} src={''} />
+              <ListItemAvatar>
+                {thread.messages[0].type === 'message' ? (
+                  <Avatar src="" className={avatar}></Avatar>
+                ) : thread.messages[0].type === 'announce' ? (
+                  <Announcement color="inherit" />
+                ) : (
+                  <>
+                    <Ballot color="inherit" />
+                  </>
+                )}
               </ListItemAvatar>
-              {thread.messages[0].subject === 'Survey' ? (
+              {thread.messages[0].type === 'survey' ? (
                 <ListItemText
                   primary={thread.messages[0].subject}
                   secondary={
                     thread.messages[0].subject
-                      ? thread.messages[0].survey.title
+                      ? thread.messages[0].composed_at.slice(0, 10)
                       : thread.userName
                   }
                   className={listText}

diff --git a/src/components/Messaging/MessageBody.js b/src/components/Messaging/MessageBody.js
@@ -1,7 +1,7 @@
 import React, { useState, useContext, useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
-import { Announcement } from '@material-ui/icons';
+import { Announcement, Ballot } from '@material-ui/icons';
 import { Avatar, Grid, Typography, Paper, Button } from '@material-ui/core';
 import { TextInput } from './TextInput.js';
 import dateFormat from 'dateformat';
@@ -170,8 +170,11 @@ export const AnnounceMessage = ({ message }) => {
     <div className={messageRow}>
       <div className={announceMessage}>
         <div className={messageHeader}>
-          <Announcement color="inherit" style={{ padding: '2px' }} />
-          <Typography className={messageTitle}>{message.title}</Typography>
+          <Announcement
+            color="inherit"
+            style={{ padding: '2px 8px 2px 0px' }}
+          />
+          <Typography className={messageTitle}>{message.subject}</Typography>
         </div>
         <Typography className={messageContent}>{message.body}</Typography>
         {message.video_link && (
@@ -312,12 +315,23 @@ export const SentMessage = ({ message }) => {
 
 const SenderInformation = ({ message, messageRecipient, type, id }) => {
   const { senderInfo, senderItem, avatar, button, dataContainer } = useStyles();
-  console.log('SenderInformation', messageRecipient);
 
   return (
     <Grid container className={senderInfo}>
       <Grid item className={senderItem}>
-        <Avatar src="" className={avatar}></Avatar>
+        {type === 'message' ? (
+          <Avatar src="" className={avatar}></Avatar>
+        ) : type === 'announce' ? (
+          <Announcement
+            color="inherit"
+            style={{ padding: '2px', fontSize: '2rem' }}
+          />
+        ) : (
+          <Ballot
+            color="inherit"
+            style={{ padding: '2px', fontSize: '2rem' }}
+          />
+        )}
       </Grid>
       <Grid item className={senderItem}>
         <Typography variant="h5">
@@ -353,8 +367,6 @@ const MessageBody = ({ messages, messageRecipient }) => {
   const [subject, setSubject] = useState(messages ? messages[0].subject : '');
   const [recipientId, setRecipientId] = useState('');
 
-  console.log('MessageBody', messageRecipient, subject);
-
   useEffect(() => {
     if (messages) {
       // messages are either Surveys or Messages/Announce Messages
@@ -381,7 +393,7 @@ const MessageBody = ({ messages, messageRecipient }) => {
       parent_message_id: lastMessage.id ? lastMessage.id : null,
       author_handle: user.userName,
       recipient_handle: messageRecipient,
-      subject: '',
+      subject: 'Message', //temporarily hard-coded until we know what we want
       type: 'message',
       body: messageContent,
     };

diff --git a/src/components/Messaging/Survey.js b/src/components/Messaging/Survey.js
@@ -65,7 +65,7 @@ const useStyles = makeStyles((theme) => ({
 
 const SurveyForm = ({ setToggleSurvey }) => {
   const { form, submitButton, input } = useStyles();
-  const { user, regions, postMessageSend } = useContext(MessagingContext);
+  const { user, regions, postBulkMessageSend } = useContext(MessagingContext);
   const { orgList } = useContext(AppContext);
   const [title, setTitle] = useState('');
   const [questionOne, setQuestionOne] = useState({
@@ -121,7 +121,7 @@ const SurveyForm = ({ setToggleSurvey }) => {
     const allQuestions = { questionOne, questionTwo, questionThree };
     const payload = {
       author_handle: user.userName,
-      subject: 'Survey',
+      subject: title,
       body: 'Survey',
       survey: {
         title: title,
@@ -157,7 +157,7 @@ const SurveyForm = ({ setToggleSurvey }) => {
         payload.survey.title.length > 1 &&
         (payload['region_id'] || payload['organization_id'])
       ) {
-        await postMessageSend(payload);
+        await postBulkMessageSend(payload);
         history.go(0);
       }
     } catch (err) {

diff --git a/src/context/MessagingContext.js b/src/context/MessagingContext.js
@@ -30,12 +30,12 @@ export const MessagingProvider = (props) => {
   // }, []);
 
   const groupMessageByHandle = (rawMessages) => {
-    console.log('groupMessageByHandle: rawMessages', rawMessages);
     // make key of recipients name and group messages together
+    console.log('rawMessages', rawMessages);
     let newMessages = rawMessages
       .sort((a, b) => (a.composed_at < b.composed_at ? -1 : 1))
       .reduce((grouped, message) => {
-        if (message.type === 'message' || message.type === 'announce') {
+        if (message.type === 'message') {
           let key = message.to !== user.userName ? message.to : message.from;
           if (key) {
             if (!grouped[key] && !messages[key]) {
@@ -49,6 +49,16 @@ export const MessagingProvider = (props) => {
             grouped[key] = [];
           }
           grouped[key].push(message);
+        } else if (message.type === 'announce') {
+          // assume it's an announcement
+          let key = message.subject;
+          if (grouped[key]) {
+            const date = Date.now();
+            console.log('date', date);
+            grouped[`${key}-${Date.now()}`] = [message];
+          } else {
+            grouped[key] = [message];
+          }
         }
         return grouped;
       }, {});
@@ -62,7 +72,6 @@ export const MessagingProvider = (props) => {
         }
       }),
     ];
-    console.log('groupMessageByHandle: filteredMessages', filteredMessages);
     setMessages(filteredMessages);
   };
 
@@ -90,13 +99,23 @@ export const MessagingProvider = (props) => {
   };
 
   const postMessageSend = (payload) => {
+    console.log('postMessageSend payload', payload);
     if (payload) {
       return api.postMessageSend(payload);
     } else {
       return 'Were sorry something went wrong. Please try again.';
     }
   };
 
+  const postBulkMessageSend = (payload) => {
+    console.log('postBulkMessageSend payload', payload);
+    if (payload) {
+      return api.postBulkMessageSend(payload);
+    } else {
+      return 'Were sorry something went wrong. Please try again.';
+    }
+  };
+
   const sendMessageFromGrower = (grower) => {
     const payload = {
       body: '',
@@ -113,7 +132,6 @@ export const MessagingProvider = (props) => {
   const loadMessages = async () => {
     console.log('loadMessages');
     const res = await api.getMessages(user.userName);
-    console.log(res.messages, growerMessage);
     if (res && growerMessage) {
       groupMessageByHandle([growerMessage, ...res.messages]);
     } else {
@@ -142,6 +160,7 @@ export const MessagingProvider = (props) => {
     getRegionById,
     postMessage,
     postMessageSend,
+    postBulkMessageSend,
   };
 
   return (