@material-ui/icons#QuestionAnswerOutlined JavaScript Examples

MessageBody = ({ messages, messageRecipient, avatar }) => {
  const {
    paper,
    messagesBody,
    modalContainer,
    textInput,
    centeredMessage,
  } = useStyles();
  const {
    user,
    authors,
    isLoading,
    errorMessage,
    setErrorMessage,
    setIsLoading,
    setThreads,
    postMessageSend,
  } = useContext(MessagingContext);
  const [messageContent, setMessageContent] = useState('');
  const [recipientId, setRecipientId] = useState('');
  const [showCharts, setShowCharts] = useState(false);
  const [errors, setErrors] = useState(false);
  const [open, setOpen] = useState(false);
  const handleModalOpen = () => setOpen(true);
  const handleModalClose = () => setOpen(false);

  const messagesEndRef = useRef(null);

  useEffect(() => {
    const res = authors.find((author) => author.handle === messageRecipient);
    if (res?.id) {
      setRecipientId(res.id);
    }
  }, [authors, messageRecipient]);

  useEffect(() => {
    if (errorMessage !== '') {
      handleModalOpen();
      setIsLoading(false);
    }
  }, [errorMessage]);

  const scrollToBottom = () => {
    // without animation
    messagesEndRef.current.scrollIntoView();
    // with animation
    // messagesEndRef.current.scrollIntoView({ behavior: 'smooth', block: 'end' });
  };

  useEffect(scrollToBottom);

  const validateMessage = (payload) => {
    const errors = {};

    console.log('body', /\w/g.test(payload.body.trim()));
    if (payload.body.length === 0 || !/\w/g.test(payload.body.trim())) {
      errors.body = 'Please enter a message';
    }

    if (!payload.recipient_handle) {
      errors.recipient = 'Please select a recipient';
    }
    return errors;
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    const messagePayload = {
      parent_message_id: null,
      author_handle: user.userName,
      recipient_handle: messageRecipient,
      type: 'message',
      body: messageContent,
    };

    const errs = validateMessage(messagePayload);

    const errorsFound = Object.keys(errs).length > 0;
    if (errorsFound) {
      setErrors(true);
      console.log('errors', errs);
    }

    if (messageContent !== '') {
      if (user.userName && messageRecipient) {
        const res = await postMessageSend(messagePayload);
        if (res.error) {
          setErrorMessage(res.message);
        } else {
          const newMessage = {
            parent_message_id: null,
            body: messageContent,
            composed_at: new Date().toISOString(),
            from: user.userName,
            id: uuid(),
            recipient_organization_id: null,
            recipient_region_id: null,
            survey: null,
            to: messageRecipient,
            type: 'message',
            video_link: null,
          };

          log.debug('...update threads after postMessageSend');
          // update the full set of threads
          setThreads((prev) =>
            prev
              .reduce((threads, thread) => {
                if (thread.userName === messageRecipient) {
                  thread.messages.push(newMessage);
                }
                threads.push(thread);
                return threads;
              }, [])
              .sort(
                (a, b) =>
                  new Date(b?.messages?.at(-1).composed_at) -
                  new Date(a?.messages?.at(-1).composed_at)
              )
          );
        }
      }
    }
    setMessageContent('');
  };

  return (
    <>
      <Paper className={paper}>
        {messageRecipient || messages ? (
          <SenderInformation
            message={messages[0]}
            messageRecipient={messageRecipient}
            responseCount={messages.length - 1}
            type={messages[0].type}
            id={recipientId || ''}
            avatar_url={avatar}
            showCharts={showCharts}
            setShowCharts={setShowCharts}
          />
        ) : null}
        <div id="style-1" className={messagesBody}>
          {isLoading ? (
            <Grid item xs className={centeredMessage}>
              <CircularProgress style={{ margin: '30px' }} />
              <Typography variant="h5">
                <QuestionAnswerOutlined
                  color="primary"
                  style={{ padding: '10px 10px 0 0', fontSize: '1.5rem' }}
                />
                Loading...
              </Typography>
            </Grid>
          ) : !isLoading && messages ? (
            messages.map((message, i) => {
              if (message.type === 'message') {
                return message.from === user.userName ? (
                  <SentMessage
                    key={message.id ? message.id : i}
                    message={message}
                  />
                ) : message.body.length > 1 ? (
                  <RecievedMessage
                    key={message.id ? message.id : i}
                    message={message}
                  />
                ) : (
                  <div key={i}></div>
                );
              } else if (
                message.type === 'survey' ||
                message.type === 'survey_response'
              ) {
                return (
                  <SurveyMessage
                    key={message.id ? `${message.id}${i}` : i}
                    message={message}
                    user={user}
                    type={message.type}
                  />
                );
              } else if (message.type === 'announce') {
                return (
                  <AnnounceMessage
                    key={message.id ? message.id : i}
                    message={message}
                  />
                );
              }
            })
          ) : (
            <Grid item xs className={centeredMessage}>
              <QuestionAnswerOutlined
                color="primary"
                style={{ padding: '2px', fontSize: '5rem' }}
              />

              {errorMessage !== '' ? (
                <Typography variant="h5">ERROR: {errorMessage}</Typography>
              ) : (
                <Typography variant="h5">You have no messages</Typography>
              )}
            </Grid>
          )}
          <div
            ref={messagesEndRef}
            style={{ height: '10px', width: '100%' }}
          ></div>
        </div>
        {errors && (
          <Typography
            style={{
              color: 'red',
              fontWeight: 'bold',
              margin: '20px 10px 0px',
            }}
          >
            Please enter a message before sending
          </Typography>
        )}
        {messages && messages[0]?.type === 'message' && (
          <TextInput
            messageRecipient={messageRecipient}
            handleSubmit={handleSubmit}
            messageContent={messageContent}
            setMessageContent={setMessageContent}
            className={textInput}
            setErrors={setErrors}
          />
        )}
      </Paper>
      {showCharts && getSurveyId(messages) && (
        <SurveyCharts
          surveyId={getSurveyId(messages)}
          setShowCharts={setShowCharts}
        />
      )}
      <Modal
        open={open}
        onClose={handleModalClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Box className={modalContainer}>
          <Typography id="modal-modal-title" variant="h6" component="h2">
            {errorMessage}
          </Typography>
        </Box>
      </Modal>
    </>
  );
}