DEV Community: Janelle Phalon

Enhancing CX: Building a DataMotion-Powered Message Center Widget for React (Part 1)

Janelle Phalon — Fri, 01 Mar 2024 15:18:31 +0000

Introduction

For any business, efficient and secure communication isn't just beneficial — it's essential. In this guide, we're focusing on creating a widget that centralizes your message management, offering a clear view of your inbox within your dashboard. While today we're honing in on efficiently accessing messages, this foundation sets the stage for a more comprehensive message center. Future expansions could leverage DataMotion's APIs to include sending messages, managing forms, initiating chats, and beyond — paving the way for a fully integrated communication hub.

This tutorial stands out for its versatility and adaptability across various frontend frameworks. Whether you're a fan of Bootstrap, Tailwind, Materialize, or any other, you'll find the concepts and code examples here not just useful but practical and easy to implement. Our goal? To enhance your user interface by centralizing message management, cutting down on the need to juggle between portals for updates, and making the most of what DataMotion's API offers. Let's dive in to make your portal — or any application — more efficient and communicatively robust, one widget at a time.

Prerequisites

To get the most out of this guide, have the following ready:

React and Node.js Knowledge: Ensure you have a basic understanding of React and Node.js — having a handle on the fundamentals will help you follow along more easily.
A React Project: You'll need an existing React project or dashboard to work with. I'll be using the CoreUI Free React Admin Template for this tutorial.
DataMotion Account: Make sure you have a DataMotion account to access the APIs. We'll be focusing on the Secure Message Center API to enhance our project with secure messaging capabilities.

Setting up the Project

Setting up your project environment is the first step. Skip this part if you're integrating into an existing dashboard.

Cloning the Dashboard Template:

If starting new, clone the CoreUI template:

# Navigate to your desired project directory
cd [Your_Project_Directory]

# Clone the CoreUI Free React Admin Template from GitHub
git clone https://github.com/coreui/coreui-free-react-admin-template.git

# Change your current directory to the newly cloned project
cd coreui-free-react-admin-template

# Install project dependencies using npm
npm install

# Start the project
npm start

Environment Setup:

First up, let's prepare our environment. Open the project's terminal to create a dedicated directory for our server, install the necessary packages, and set up our .env file for secure API communication.

# Create a 'server' directory for our project
mkdir server

# Navigate to the 'server' directory
cd server

# Initialize a new npm project without the interactive prompt
npm init -y

# Install necessary dependencies:
# - Axios for making HTTP requests
# - Dotenv for managing environment variables
# - Express for setting up our server
# - Cors for enabling Cross-Origin Resource Sharing (CORS)
npm install axios dotenv express cors

# Create a '.env' file to securely store your DataMotion API credentials
touch .env

Now, add your DataMotion credentials to the newly created .env file. This is crucial for authenticating our application with DataMotion's Secure Message Center API:

CLIENT_ID=your_datamotion_client_id
CLIENT_SECRET=your_datamotion_client_secret

Building the Message Center Widget

Let's dive into the heart of our project: building the message center widget. We'll start by setting up our server and establishing a connection with DataMotion.

# Create a 'server.js' file where our server setup will live
touch server.js

Server Setup:

Below, we're setting up a basic server using Node.js and Express. This server will manage our requests to DataMotion's API.

// Import necessary modules: Express for the server, Axios for HTTP requests, CORS, and Dotenv to use environment variables
const express = require('express')
const axios = require('axios')
const cors = require('cors')
require('dotenv').config() // Load our environment variables from the '.env' file

const app = express() // Create an instance of the express application
const PORT = process.env.PORT || 5000 // Define the port our server will run on

app.use(cors())

// Add your API routes and handlers here

// Start the server and listen on the defined PORT
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`)
})

Testing the Server:

To ensure that your server is up and running, simply execute the following command:

node server.js

If your server is set up correctly, you should see a message in your terminal indicating that the server is running on the specified port: Server running on port 5000.

Note: Throughout the tutorial, whenever you make changes to the server code, remember to restart it using the node server.js command to apply those changes.

Authentication with DataMotion:

To securely access DataMotion's API, we need to authenticate our application. Here's how we obtain an access token using client credentials:

// Define a route to get an access token from DataMotion
app.get('/token', async (req, res) => {
  try {
    // Make a POST request to DataMotion's token endpoint with our client credentials
    const response = await axios.post('https://api.datamotion.com/SMC/Messaging/v3/token', {
      grant_type: 'client_credentials',
      client_id: process.env.CLIENT_ID, // Use the client ID from our .env file
      client_secret: process.env.CLIENT_SECRET, // Use the client secret from our .env file
    })
    res.json(response.data)
  } catch (error) {
    res.status(500).json({ message: 'Error fetching token', error: error.response.data })
  }
})

Fetching Messages from Different Folders

To tailor our secure message widget to show messages from various folders, we use the folderId parameter in the API request. This parameter helps us specify which folder we want to access. For example, setting folderId=1 lets us retrieve messages from the inbox. Here's how different folders are identified within DataMotion's system, using their respective folderId values:

Inbox: folderId = 1
Trash: folderId = 2
Track Sent: folderId = 3
Drafts: folderId = 4
Outbox Trash: folderId = 5
Archive: folderId = 6
Deleted Inbox Trash: folderId = 7
Deleted Outbox Trash: folderId = 8

Understanding these folder IDs allows you to customize which messages to display, enhancing the widget's functionality.

Here's how we fetch messages from the inbox as an example:

// Define a route to get messages from the inbox
app.get('/messages', async (req, res) => {
  try {
     // First, obtain an access token from DataMotion
    const tokenResponse = await axios.post('https://api.datamotion.com/SMC/Messaging/v3/token', {
      grant_type: 'client_credentials',
      client_id: process.env.CLIENT_ID,  // Your DataMotion client ID
      client_secret: process.env.CLIENT_SECRET,  // Your DataMotion client secret
    });

   // Then, use the token to fetch messages from the inbox
    const messagesResponse = await axios.get('https://api.datamotion.com/SMC/Messaging/v3/content/messages/?folderId=1&pageSize=10&pageNumber=1&sortDirection=DESC&metadata=true', {
      headers: {
        Authorization: `Bearer ${tokenResponse.data.access_token}`  // Authorization header with the access token
      }
    });

      res.json(messagesResponse.data)
  } catch (error) {
    res.status(500).json({ message: 'Error fetching messages', error: error.response.data })
  }
})

This approach ensures you can dynamically display messages from any folder, making your email widget both versatile and user-friendly.

Building and Integrating the Message Center Widget into the Dashboard

Our next step is to bring Secure Message Center API's power directly to our dashboard. We'll achieve this by creating a dedicated React component, MessageCenterWidget, which will serve as the core interface for displaying messages.

Creating the Component File

Before we start coding, we need to create the file where our MessageCenterWidget component will reside:

# Navigate to the src/components directory of your project
cd src/components

# Create the MessageCenterWidget.js file
touch MessageCenterWidget.js

With the file created, open MessageCenterWidget.js in your code editor to begin implementing the component.

Setting Up and Importing Dependencies

At the top of the MessageCenterWidget.js file, import the necessary dependencies for our component. This includes React for building the component, Axios for HTTP requests, and specific CoreUI components for styling our message display.

// Importing React, Axios, and selected CoreUI components
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import {
  CCard,
  CCardBody,
  CCardHeader,
  CTable,
  CTableBody,
  CTableDataCell,
  CTableHead,
  CTableHeaderCell,
  CTableRow,
} from '@coreui/react';

Initializing State Variables

Define the initial state within the MessageCenterWidget component to manage the fetched messages and the loading status.

// MessageCenterWidget component definition
const MessageCenterWidget = () => {
  const [messages, setMessages] = useState([]) // Array to hold our fetched messages
  const [isLoading, setIsLoading] = useState(true) // Boolean to track loading status

  // Additional logic will follow
}

Fetching and Displaying Emails

Utilize the useEffect hook for fetching messages as soon as the component mounts, ensuring our dashboard is immediately populated with data.

  // Additional logic will follow
  useEffect(() => {
    const fetchMessages = async () => {
      try {
        // Step 1: Securely obtain an authentication token
        const tokenResponse = await axios.get('http://localhost:5000/token')
        // Step 2: Fetch messages using the obtained token
        const messagesResponse = await axios.get('http://localhost:5000/messages', {
          headers: {
            Authorization: `Bearer ${tokenResponse.data.access_token}`, // Use the token in the request header
          },
        })
        // Sort the fetched messages by creation time before updating state
        const sortedMessages = messagesResponse.data.items.sort(
          (a, b) => new Date(b.createTime) - new Date(a.createTime),
        )
        setMessages(sortedMessages)
      } catch (error) {
        console.error('Error fetching messages:', error)
      } finally {
        setIsLoading(false) // Ensure to update the isLoading state
      }
    }

    fetchMessages()
  }, [])

Sorting Emails and Formatting Dates

Implement a helper function to format message dates for a better user experience, and prepare the component for rendering.

  // Function to format the date strings of messages
  const formatDate = (dateString) => {
    const date = new Date(dateString)
    const today = new Date()

    // Display format differs if the message is from today or an earlier date
    return date.toDateString() === today.toDateString()
      ? date.toLocaleTimeString()
      : date.toLocaleDateString()
  }

  // Render loading indicator or the message table based on the isLoading state
  if (isLoading) {
    return <div>Loading messages...</div>
  }

Ensure to export your MessageCenterWidget at the end of the file for it to be used elsewhere in your project.

// Make the MessageCenterWidget available for import
export default MessageCenterWidget

Rendering the Secure Message Center

Now that we've established the logic for fetching and displaying messages, let's focus on presenting this information through a user-friendly and visually appealing table. We'll enhance our table's appearance and functionality with some custom CSS styling.

Adding CSS for Table Styling

First, we add CSS to ensure our table looks organized and maintains a consistent layout. Place this CSS in an appropriate stylesheet or within your component using styled-components or a similar approach, depending on your project setup.

/* CSS styles for the message center table */
.message-center-table-container {
  max-height: 600px;

  table {
    width: 100%;
    table-layout: fixed;
  }

  thead th,
  tbody td {
    text-align: left;
    width: 33.33%;
  }
}

.title-style {
  font-size: 1rem;
  font-weight: 400;
  margin-top: auto;
  margin-bottom: auto;
}

JSX Structure for the Secure Message Center

Utilizing CoreUI's table components, we can neatly organize and display the sender, subject, and date of each message. Here's the JSX that incorporates our CSS styling:

  return (
    <CCard className="mb-4">
      <CCardHeader>Secure Message Center</CCardHeader>
      <CCardBody>
        <div className="message-table">
          <CTable align="middle" className="mb-4 border" hover responsive>
            <CTableHead>
              <CTableRow>
                <CTableHeaderCell scope="col" className="">
                  Sender
                </CTableHeaderCell>
                <CTableHeaderCell scope="col" className="">
                  Subject
                </CTableHeaderCell>
                <CTableHeaderCell scope="col" className="">
                  Date
                </CTableHeaderCell>
              </CTableRow>
            </CTableHead>
            <CTableBody className="table-body">
              {emails.length > 0 ? (
                emails.map((email, index) => (
                  <CTableRow key={index}>
                    <CTableDataCell>{email.senderAddress}</CTableDataCell>
                    <CTableDataCell>{email.subject}</CTableDataCell>
                    <CTableDataCell>{formatDate(email.createTime)}</CTableDataCell>
                  </CTableRow>
                ))
              ) : (
                <CTableRow>
                  <CTableDataCell colSpan={3}>No emails found</CTableDataCell>
                </CTableRow>
              )}
            </CTableBody>
          </CTable>
        </div>
      </CCardBody>
    </CCard>
  );
};

This structure leverages our CSS to create a clean, organized display for the messages, significantly enhancing the user experience of the dashboard.

Integrating the Widget into the Dashboard

Now that our MessageCenterWidget is ready and prepped with its functionality and styling, the final step is to weave it into the fabric of our dashboard. This phase is crucial for bringing the secure messaging capabilities directly to the users’ fingertips, enhancing the dashboard’s overall utility and user experience.

Placing the MessageCenterWidget in the Dashboard

Integration is straightforward. Assuming you have a Dashboard.js file or a similar setup for your main dashboard component, you’ll incorporate the MessageCenterWidget like so:

// Ensure the MessageCenterWidget is imported at the top of your Dashboard component file
import MessageCenterWidget from '../../components/MessageCenterWidget'

const Dashboard = () => {
  // Include other dashboard components and logic as needed

  return (
    <>
      <WidgetsDropdown className="mb-4" />
      {/* Position the MessageCenterWidget where it fits best in your dashboard layout */}
      <MessageCenterWidget className="mb-4" />
      {/* Continue with the rest of your dashboard components */}
      <CCard className="mb-4">
        {/* Remaining dashboard components... */}
      </CCard>
      {/* Other components... */}
    </>
  );
};

export default Dashboard

This step integrates the MessageCenterWidget into your dashboard. Depending on your design, you might adjust its placement, ensuring it complements the overall layout and flow of the dashboard. The widget’s self-contained nature makes it adaptable to various positions and configurations, affirming the modular and flexible design of React components.

Expanding the Widget's Functionality

After initially focusing on showcasing the inbox, it's time to broaden the capabilities of our widget. We'll introduce functionality that allows users to switch between viewing inbox and sent messages, similar to standard email clients.

Updating the Server to Fetch Sent Messages

To facilitate the display of both received and sent messages, let's extend our server's capabilities with an additional endpoint. This step involves navigating back to the server directory to modify the server.js file.

// New endpoint to fetch sent messages
app.get('/sent-messages', async (req, res) => {
  try {
    const tokenResponse = await axios.post('https://api.datamotion.com/SMC/Messaging/v3/token', {
      grant_type: 'client_credentials',
      client_id: process.env.CLIENT_ID,
      client_secret: process.env.CLIENT_SECRET,
    })

    const sentMessagesResponse = await axios.get(
      'https://api.datamotion.com/SMC/Messaging/v3/content/messages/?folderId=3&pageSize=10&pageNumber=1&sortDirection=DESC&metadata=true',
      {
        headers: {
          Authorization: `Bearer ${tokenResponse.data.access_token}`,
        },
      },
    )
    res.json(sentMessagesResponse.data)
  } catch (error) {
    res.status(500).json({ message: 'Error fetching sent messages', error: error.response.data })
  }
})

Note: Changing folderId to 3 targets sent messages, as mentioned earlier.

Integrating Sidebar and Updating MessageCenterWidget.js

With our backend ready to serve both inbox and sent messages, it's time to update the frontend in MessageCenterWidget.js. This involves implementing a sidebar for mailbox selection and adjusting our component to utilize the new /sent-messages endpoint.

Update MessageCenterWidget.js to manage the view selection state:

const MessageCenterWidget = () => {
  const [messages, setMessages] = useState([]) // Holds our fetched messages (unchanged)
  const [isLoading, setIsLoading] = useState(true) // Tracks loading status (unchanged)

  // New state to manage the current mailbox view ('inbox' or 'sent')
  const [currentView, setCurrentView] = useState('inbox')
}

Note: The addition of currentView and setCurrentView allows us to dynamically fetch and display messages based on the user's selection between different mailbox views, such as the inbox or sent messages.

Next, we adapt the useEffect hook to react to mailbox changes, fetching messages accordingly:

useEffect(() => {
  const fetchEmails = async () => {
    setIsLoading(true)
    let endpoint = ''

    if (currentView === 'inbox') {
      endpoint = '/messages'
    } else if (currentView === 'sent') {
      endpoint = '/sent-messages'
    } else if (currentView === 'drafts') {
      endpoint = '/drafts'
    } else if (currentView === 'trash') {
      endpoint = '/trash'
    }

    try {
      const tokenResponse = await axios.get('http://localhost:5000/token')
      const messagesResponse = await axios.get(`http://localhost:5000${endpoint}`, {
        headers: {
          Authorization: `Bearer ${tokenResponse.data.access_token}`,
        },
      })
      const sortedEmails = messagesResponse.data.items.sort(
        (a, b) => new Date(b.createTime) - new Date(a.createTime),
      )
      setMessages(sortedEmails)
    } catch (error) {
      console.error(`Error fetching ${currentView} emails:`, error)
    } finally {
      setIsLoading(false)
    }
  }

  fetchEmails()
}, [currentView])

Within the JSX, we introduce the sidebar for mailbox switching, enhancing the component's interactivity:

return (
  <CCard className="mb-4 email-table">
    <CCardHeader>Secure Message Center</CCardHeader>
    <div className="d-flex">
      <div className="email-sidebar">
        <ul>
          <li
            className={currentView === 'inbox' ? 'active' : ''}
            onClick={() => setCurrentView('inbox')}
          >
            Inbox
          </li>
          <li
            className={currentView === 'sent' ? 'active' : ''}
            onClick={() => setCurrentView('sent')}
          >
            Sent
          </li>
          {/* Add more folders if needed */}
        </ul>
      </div>
      <CCardBody>
        {/* Table rendering logic */}
      </CCardBody>
    </div>
  </CCard>
);

This update significantly enriches the widget by offering users a more dynamic tool that mirrors the functionality of full-featured email clients. By facilitating the navigation between inbox and sent messages, the widget evolves into a more versatile component of the dashboard.

Styling the Sidebar

To ensure our sidebar is not only functional but also aesthetically pleasing, let's add some CSS:

.email-sidebar {
  width: 150px;
  background-color: #f8f9fa;
  padding: .5rem;
}

.email-sidebar ul {
  list-style-type: none;
  padding: 0;
}

.email-sidebar ul li {
  padding: .25rem;
  cursor: pointer;
  font-weight: 500;
  color: #495057;
}

.email-sidebar ul li.active {
  background-color: #e9ecef;
}

.email-sidebar ul li:hover {
  background-color: #dee2e6;
}

.placeholder {
  background-color: #f0f0f0;
  height: 1em; 
  width: 100%;
  border-radius: 4px;
}

Apply these styles to make the sidebar both functional and stylish.

Conclusion of the Expanded Widget

Integrating DataMotion's Secure Message Center API into our dashboard has improved how we manage messages, showcasing the power and flexibility of DataMotion's tools. This tutorial highlighted the straightforward process of incorporating these APIs with the CoreUI framework, proving how they can enhance any user interface with secure and efficient communication.

This project is a clear example of DataMotion's ability to provide secure communication solutions that are both powerful and user-friendly. We've started to explore the potential of DataMotion's Secure Message Center APIs, demonstrating that secure communication can be seamlessly integrated into any digital environment, offering both customization and compliance.

DataMotion's APIs are designed to support secure, engaging, and efficient digital experiences, whether you're improving an existing system or creating something new.

As we wrap up, consider this guide a starting point for discovering all that DataMotion has to offer. Check back for a part two, where we will build upon this groundwork to further expand your expertise and success.

Quick Links:

Feedback Wanted: No-Code UI

Janelle Phalon — Tue, 14 Nov 2023 16:13:55 +0000

About Our Product:

DataMotion developed a no-code message center enabling secure, compliant bi-directional communication. It's designed for ease of use, robust security, and adherence to compliance standards.

Seeking Your Insights:

We're looking for feedback from the Dev.to community. Share your thoughts on what works, what doesn't, and how we can improve.

Suggested Feedback:

The overall user experience
Potential enhancements or missing features
UI improvements

We appreciate your honest and constructive feedback!

Higher Order Components: Cleaning Up Repetitive React Code

Janelle Phalon — Fri, 13 Oct 2023 16:19:16 +0000

Introduction to the problem: Repetitive React components

While working on building a secure message center, I ran into a problem: my React components were repeating themselves. I was copying and pasting a lot, leading to a bunch of similar components. Especially when fetching and rendering messages through DataMotion's Secure Message Center APIs, I noticed that I was doing the same thing over and over.

Looking for a better way, I chatted with my digital buddy, Chat GPT. The advice? Use Higher Order Components (HOCs).

What are HOCs and How do they Keep Your Code DRY?

Before we dive into the solution, let's talk about why it's essential to avoid repeating code. Code that doesn't repeat itself is easier to maintain, has fewer errors, and is more readable. If you're copying and pasting a lot, there's probably a more efficient way to do things. In React, Higher Order Components can help. They let you wrap and reuse component logic, making your codebase neater and more modular.

Introducing Higher Order Components (HOCs) as a Solution

By using HOCs, I managed to simplify my codebase significantly. I went from having a folder with 5 files down to just 1:

The before -

 └── message-lists / 
│            ├── DraftList.js
│            ├── InboxList.js
│            ├── SentList.js
│            ├── TrackSent.js
│            └── TrashList.js

The after -

  └── message-lists / 
│            └── MessageListHOC.js

A Step-By-Step guide to Refactoring my Secure Message Center

At first, I was creating the MessageList components by copying, pasting, and adjusting the endpoints I was requesting from my backend server. Here's a look at two of these repetitive files:

DraftList.js:

import React, { useEffect, useState } from 'react';
import { ListGroup } from 'react-bootstrap';

// Inbox Components
import InboxHeader from '../components/InboxHeader';
import OpenModal from '../components/OpenModal';

const DraftList = () => {
    const [emails, setEmails] = useState([]);
    const [selectedEmail, setSelectedEmail] = useState(null);
    const [showModal, setShowModal] = useState(false);

    useEffect(() => {
      // Call our server to get emails
      fetch('http://localhost:5000/api/messages/draft')
          .then(response => {
              if (!response.ok) {
                  throw new Error('Network response was not ok');
              }
              return response.json();
          })
          .then(data => {
              // Sort emails by createTime from newest to oldest
              const sortedEmails = data.items.sort((a, b) => new Date(b.createTime) - new Date(a.createTime));
              setEmails(sortedEmails);
          })
          .catch(error => {
              console.error('Error fetching messages:', error);
          });
  }, []);

    // Format date to display in the list
    const formatDate = (dateString) => {
      const date = new Date(dateString);
      const today = new Date();
      if (date.toDateString() === today.toDateString()) {
          return date.toLocaleTimeString();
      }
      return date.toLocaleDateString();
    };

    // Sets the selectedEmails state
    const openMessage = (messageId) => {
        const email = emails.find(e => e.messageId === messageId);
        setSelectedEmail(email);
        setShowModal(true);
    };

    const deleteMessage = (messageId) => {
        setEmails(emails.filter(e => e.messageId !== messageId));
    };

    return (
      <>
      <div className='pt-3 pl-5'>
        {/* Inbox Headers */}
        <InboxHeader />
      </div>

        <ListGroup className='inbox-style'>
            {emails.map(email => (
                <div key={email.messageId}
                  className="d-flex text-secondary py-1 border-bottom border-gray email-tem"
                  onClick={() => openMessage(email.messageId)}
                >
                  <div className="col-4 email-item sender-email">{email.senderAddress}</div>
                  <div className="col-4 email-item email-subject">{email.subject}</div>
                  <div className="col-3 email-item date-received">{formatDate(email.createTime)}</div>
                  <div className="col-1 text-right pr-2 email-item">
                    {/* Delete Button */}
                    <button
                      type="button"
                      className="btn btn-outline-secondary btn-sm"
                      onClick={(e) => {
                        e.stopPropagation();
                        deleteMessage(email.messageId);
                      }}
                    >
                    </button>
                  </div>
                </div>
            ))}
        </ListGroup>

      {/* Email Modal */}
      <OpenModal email={selectedEmail} show={showModal} onClose={() => setShowModal(false)} />
      </>
    );
};

export default DraftList;

InboxList.js:

import React, { useEffect, useState } from 'react';
import { ListGroup } from 'react-bootstrap';

// Inbox Components
import InboxHeader from '../components/InboxHeader';
import OpenModal from '../components/OpenModal';

const InboxList = () => {
    const [emails, setEmails] = useState([]);
    const [selectedEmail, setSelectedEmail] = useState(null);
    const [showModal, setShowModal] = useState(false);

    useEffect(() => {
      // Call our server to get emails
      fetch('http://localhost:5000/api/messages/inbox')
          .then(response => {
              if (!response.ok) {
                  throw new Error('Network response was not ok');
              }
              return response.json();
          })
          .then(data => {
              // Sort emails by createTime from newest to oldest
              const sortedEmails = data.items.sort((a, b) => new Date(b.createTime) - new Date(a.createTime));
              setEmails(sortedEmails);
          })
          .catch(error => {
              console.error('Error fetching messages:', error);
          });
  }, []);

    // Format date to display in the list
    const formatDate = (dateString) => {
      const date = new Date(dateString);
      const today = new Date();
      if (date.toDateString() === today.toDateString()) {
          return date.toLocaleTimeString();
      }
      return date.toLocaleDateString();
    };

    // Sets the selectedEmails state
    const openMessage = (messageId) => {
        const email = emails.find(e => e.messageId === messageId);
        setSelectedEmail(email);
        setShowModal(true);
    };

    const deleteMessage = (messageId) => {
        setEmails(emails.filter(e => e.messageId !== messageId));
    };

    return (
      <>
      <div className='pt-3 pl-5'>
        {/* Inbox Headers */}
        <InboxHeader />
      </div>

        <ListGroup className='inbox-style'>
            {emails.map(email => (
                <div key={email.messageId}
                  className="d-flex text-secondary py-1 border-bottom border-gray email-tem"
                  onClick={() => openMessage(email.messageId)}
                >
                  <div className="col-4 email-item sender-email">{email.senderAddress}</div>
                  <div className="col-4 email-item email-subject">{email.subject}</div>
                  <div className="col-3 email-item date-received">{formatDate(email.createTime)}</div>
                  <div className="col-1 text-right pr-2 email-item">
                    {/* Delete Button */}
                    <button
                      type="button"
                      className="btn btn-outline-secondary btn-sm"
                      onClick={(e) => {
                        e.stopPropagation();
                        deleteMessage(email.messageId);
                      }}
                    >
                    </button>
                  </div>
                </div>
            ))}
        </ListGroup>

      {/* Email Modal */}
      <OpenModal email={selectedEmail} show={showModal} onClose={() => setShowModal(false)} />
      </>
    );
};

export default InboxList;

It's clear they're almost the same.

But with HOCs, I was able to put most of the repetitive code into one HOC file and then request data from my server backend through App.js.

MessageListHOC.js:

import React, { useEffect, useState } from 'react';
import { ListGroup } from 'react-bootstrap';
import InboxHeader from '../components/InboxHeader';
import OpenModal from '../components/OpenModal';

const MessageListHOC = ({ apiEndpoint }) => {
    const [emails, setEmails] = useState([]);
    const [selectedEmail, setSelectedEmail] = useState(null);
    const [showModal, setShowModal] = useState(false);

    useEffect(() => {
      fetch(apiEndpoint)
          .then(response => {
              if (!response.ok) {
                  throw new Error('Network response was not ok');
              }
              return response.json();
          })
          .then(data => {
              const sortedEmails = data.items.sort((a, b) => new Date(b.createTime) - new Date(a.createTime));
              setEmails(sortedEmails);
          })
          .catch(error => {
              console.error('Error fetching messages:', error);
          });
    }, [apiEndpoint]);


    // Format date to display in the list
    const formatDate = (dateString) => {
      const date = new Date(dateString);
      const today = new Date();
      if (date.toDateString() === today.toDateString()) {
          return date.toLocaleTimeString();
      }
      return date.toLocaleDateString();
    };

    // Sets the selectedEmails state
    const openMessage = (messageId) => {
        const email = emails.find(e => e.messageId === messageId);
        setSelectedEmail(email);
        setShowModal(true);
    };

    const deleteMessage = (messageId) => {
        setEmails(emails.filter(e => e.messageId !== messageId));
    };

    return (
      <>
      <div className='pt-3 pl-5'>
        {/* Inbox Headers */}
        <InboxHeader />
      </div>

        <ListGroup className='inbox-style'>
            {emails.map(email => (
                <div key={email.messageId}
                  className="d-flex text-secondary py-1 border-bottom border-gray email-tem"
                  onClick={() => openMessage(email.messageId)}
                >
                  <div className="col-4 email-item sender-email">{email.senderAddress}</div>
                  <div className="col-4 email-item email-subject">{email.subject}</div>
                  <div className="col-3 email-item date-received">{formatDate(email.createTime)}</div>
                  <div className="col-1 text-right pr-2 email-item">
                    {/* Delete Button */}
                    <button
                      type="button"
                      className="btn btn-outline-secondary btn-sm"
                      onClick={(e) => {
                        e.stopPropagation();
                        deleteMessage(email.messageId);
                      }}
                    >
                    </button>
                  </div>
                </div>
            ))}
        </ListGroup>

      {/* Email Modal */}
      <OpenModal email={selectedEmail} show={showModal} onClose={() => setShowModal(false)} />
      </>
    );
};

export default MessageListHOC;

App.js:

  return (
    <div>
      <Navbar />
      <Container fluid>
        <Row className="container-box">
          <Col md={3} className="sidebar-scroll">
            <Sidebar setActiveTab={setActiveTab} />
          </Col>
          <Col md={9} className="inbox-scroll">
            {activeTab === 'inbox' && <MessageListHOC apiEndpoint="http://localhost:5000/api/messages/inbox"  />}
            {activeTab === 'drafts' && <MessageListHOC apiEndpoint="http://localhost:5000/api/messages/draft"  />}
            {activeTab === 'track-sent' && <MessageListHOC apiEndpoint="http://localhost:5000/api/messages/sent"  />}
            {activeTab === 'trash' && <MessageListHOC apiEndpoint="http://localhost:5000/api/messages/trash"  />}
          </Col>
        </Row>
      </Container>
    </div>
  );
}

How This Improved From the Original

Less Repetition: I went from multiple files with nearly identical code to a single HOC that handles the logic for all message lists.
Easier Updates: If I need to change how the message list works in the future, I only have to update one file.
Clearer Structure: With this new setup, it's much easier for anyone (including me in the future) to understand how the code works.

How to Know When You Should Implement HOCs

Sometimes, it's not immediately clear when to use HOCs. Here are some common signs that they might be helpful:

Repetitive Logic: If you're copying and pasting logic across multiple components, it's a sign that this logic can be abstracted into an HOC.
Shared State or Methods: When different components share state or methods, an HOC can help manage this shared functionality.
Enhancing Components: If you're frequently adding enhancements or additional props to components, an HOC can centralize these enhancements.
Context Sharing: When multiple components need to share context, like user authentication, an HOC can provide this context to all of them.

Conclusion: The Benefits of Modular and Efficient Code

This experience taught me a lot. Using HOCs didn't just make my codebase smaller; it made it smarter. By focusing on modular and efficient code, we can build software that's not just functional but also clean and easy to understand. Cleaner code means better software and a happier time coding.

Keep an eye out for more updates as I continue to develop my message center. Your feedback is always appreciated!

React Structure Missteps: Refining My Message Center

Janelle Phalon — Tue, 10 Oct 2023 19:48:46 +0000

Building a React email client initially seemed straightforward. I started with a basic structure, thinking it would be ideal for a tutorial. But as I integrated more features and aimed to incorporate DataMotion's APIs, the limitations of my initial setup surfaced. The project demanded a more organized structure to accommodate its expanding scope.

The Initial Structure

Here's where I started:

src/
│
│── assets/
│    └── Logo.png
│── components/
│    ├── Inbox.js
│    ├── Navbar.js
│    └── Sidebar.js
│── App.css
│── App.js  
│── index.css     
│── index.js 
│── reportWebVitals.js

While this structure served its purpose initially, its limitations became evident as I added more functionality.

Diving deeper into this structure for a tutorial would have shifted the focus from the primary objective: demonstrating the integration of the Secure Message Center APIs.

The Restructuring

To make the project more maintainable, I shifted to:

src/
│
│── assets/
│    └── Logo.png
│
│── inbox-features/
│    └── components / 
│            ├── ComposeModal.js
│            ├── InboxHeader.js
│            └── OpenModal.js
│    └── message-lists / 
│            ├── DraftList.js
│            ├── InboxList.js
│            ├── SentList.js
│            ├── TrackSent.js
│            └── TrashList.js
│── shared / 
│     ├── App.css
│     ├── Navbar.js
│     └── Sidebar.js     
│── App.js       
│── index.js 
│── reportWebVitals.js

This modular design made it easier to find components, reduced repetitive code, and improved the project's maintainability. Grouping related components and features provided a clear overview of the project's structure.

Takeaways:

Stay Modular: Grouping related components into specific folders enhances clarity.
Reuse Components: A shared directory for universal components minimizes redundancy.
Stay Adaptable: As projects evolve, so do their requirements. Flexibility in approach is paramount.

Conclusion

In development, sometimes the path you start on isn't the one you finish with. Being open to change and restructuring, especially when it leads to a more efficient project, is essential. For those interested in seeing the changes in action, check out the updated files on GitHub.

Have you faced similar challenges in your projects? How did you tackle them? Share your experiences and opinions in the comments below. Let's learn and grow together!

Structuring Your Backend for Growth: A Guide to Organizing API Calls

Janelle Phalon — Mon, 04 Sep 2023 17:47:40 +0000

Introduction

In my previous blog, we took a leap into setting up our very first API calls for our secure message center with DataMotion's APIs. But as we add more features and capabilities, things can quickly get tangled. Now that we've got our feet wet with our initial API calls, it's time to restructure the backend to ensure scalability using best practices.

DataMotion's APIs offer a secure and compliant method for messaging, ideal for applications needing reliable data exchange.

Note: This blog was updated based on valuable feedback from readers. Your input is always appreciated and helps ensure the quality and relevance of my content. Thank you for your continued support!

Why Organize by Feature?

Using a feature-based backend organization:

🧐 Focus: All related tasks for a feature in one spot.
🔄 Modularity: Encapsulated features ensure clean separation.
🚀 Easy Expansion: Introduce new features with new directories.
🐛 Quick Debugging: Issues? Know exactly where to look.

Let's get started!

Backend Directory Structure

Your project should follow a clean structure to ensure clarity. Here's a suggested setup:

server/
│
│── authentication/
│    ├── authController.js
│    ├── authRoutes.js
│    └── getToken.js
│
│── messages/
│    ├── messageController.js
│    └── messageRoutes.js
│
│── .env       
│── server.js   
│── package.json
└── package-lock.json

Let's dive into each section.

1. Authentication (authentication/)

Authentication is crucial for our app's security. This module ensures users are who they say they are and manages the tokens for DataMotion API interaction. Grouping all authentication tasks in one place streamlines any security enhancements or updates.

`authController.js`

const axios = require('axios');
const getTokenUtil = require('./getToken');

// Function to get a token from the DataMotion API
exports.getToken = async (req, res) => {
    try {
        const token = await getTokenUtil();
        res.json(token);
    } catch (error) {
        res.status(500).json({ message: "Error fetching token", error: error.response.data });
    }
};

`authRoutes.js`

const express = require('express');
const router = express.Router();

const { getToken } = require('./authController');

// Endpoint to get token
router.get('/token', getToken);

module.exports = router;

`getToken.js`

const axios = require('axios');

// Utility function to fetch the authentication token from the DataMotion API
const getTokenUtil = async () => {
    try {
        const response = await axios.post('https://api.datamotion.com/SMC/Messaging/v3/token', {
            grant_type: "client_credentials",
            client_id: process.env.CLIENT_ID,
            client_secret: process.env.CLIENT_SECRET
        });
        return response.data;
    } catch (error) {
        throw error;
    }
};

module.exports = getTokenUtil;

2. Messages (messages/)

Our app's core function is handling secure messages. By clustering all related tasks in the messages/ directory, we streamline the addition of new messaging features and keep the focus on message operations.

`messagesController.js`

const axios = require('axios');
const getTokenUtil = require('../authentication/getToken');

// Function to get message summaries from the DataMotion API
exports.getMessageSummaries = async (req, res) => {
    try {
        const token = await getTokenUtil();
        const messagesResponse = await axios.get('https://api.datamotion.com/SMC/Messaging/v3/content/messages/?folderId=1&pageSize=10&pageNumber=1&sortDirection=DESC&metadata=true', {
            headers: {
                Authorization: `Bearer ${token.access_token}`
            }
        });
        res.json(messagesResponse.data);
    } catch (error) {
        res.status(500).json({ message: "Error fetching messages", error: error.response.data });
    }
};

`messageRoutes.js`

const express = require('express');
const router = express.Router();

const { getMessageSummaries } = require('./messageController');

// Endpoint to get message summaries
router.get('/', getMessageSummaries);

module.exports = router;

The Heart of It All: `server.js`

With our organized backend, let's take a look at the updated server.js:

const express = require('express');
const cors = require('cors');
require('dotenv').config();

const authRoutes = require('./authentication/authRoutes');
const messageRoutes = require('./messages/messageRoutes');

const app = express();
const PORT = 5000;

// Middlewares
app.use(cors());
app.use(express.json()); 

// Route middlewares
app.use('/auth', authRoutes);
app.use('/messages', messageRoutes);

// Start the server
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

With a feature-based backend, you're primed for smooth expansion and clear management. New features? Just slot in new modules.

By now, your message center's backend should be neatly structured and ready for growth. In our next posts, we'll add more features to our secure message center and watch our structured backend pay dividends. Stay tuned and happy coding!

Have you tackled restructuring the backend of your application recently? Share your experiences and tips in the comments below!

Building a Secure and Compliant Message Center with React & DataMotion

Janelle Phalon — Fri, 25 Aug 2023 20:04:33 +0000

Welcome to the first tutorial in our series on building a secure and compliant email client with DataMotion's secure message center v3 APIs. Today, we'll focus on setting up the server and making two essential API calls: obtaining an access token and securely fetching message summaries. By the end, you'll have laid a solid foundation, preparing you for more advanced topics in our subsequent tutorials.

Ready to get started? First, let's check the prerequisites.

Prerequisites

Familiarity with Node.js and React.
Node.js, git, and npm installed.
A text editor or IDE.
Access to DataMotion's v3 APIs.

🔗 Note: Before diving in, if you haven't tested the secure message center v3 APIs yet, check out our previous tutorial on testing DataMotion APIs with Insomnia. It provides a detailed guide on ensuring the APIs are functional.

Now that we've validated the APIs, let's put them into action!

Starter Files

Begin by cloning the starter files here.

git clone <url> 
cd DataMotion-SMC-starter-code
npm install

These files provide foundational React components: Navbar, Sidebar, and Inbox. The starter files also come with basic styling, ensuring the focus remains on integrating with DataMotion's secure message center APIs.

1. Setting Up the Backend with DataMotion APIs

Starting with the backend, let's first navigate to your server directory.

mkdir server
cd server

a. Initiate the server

Initiate the project with default configurations:

npm init -y

This creates a package.json file that keeps track of all the dependencies and scripts for your project.

b. Installing Essential Libraries

For our server setup, we'll need:

express: A framework to build our server.
axios: To make HTTP requests.
cors: To enable Cross-Origin Resource Sharing.
dotenv: To manage environment variables from a .env file.

Install these libraries with:

npm install express axios cors dotenv

c. Setting up the Basic Server

Create a server.js file (or whatever you've named your main server file).

touch server.js

Let's set up a basic Express server:

const express = require('express');
const axios = require('axios');
const cors = require('cors');

require('dotenv').config();

const app = express();
const PORT = 5000;

app.use(cors());  
app.use(express.json());

app.get('/', (req, res) => {
    res.send('Server is running!');
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

Now, start the server using:

node server.js

You should see a message indicating that the server is running on http://localhost:5000. Visiting this URL in your browser should display "Server is running!"

d. DataMotion API Integration in Server

With our server up and running, let's integrate DataMotion's APIs. For more details and in-depth information on the available API endpoints and their requirements, refer to DataMotion's developer center.

Before proceeding, create and populate your .env file with your DataMotion credentials.

Fetching an Access Token:

Add the following endpoint to your server:

app.get('/token', async (req, res) => {
    try {
        const response = await axios.post('https://api.datamotion.com/SMC/Messaging/v3/token', {
            grant_type: "client_credentials",
            client_id: process.env.CLIENT_ID, // assuming you have named it CLIENT_ID in .env
            client_secret: process.env.CLIENT_SECRET // assuming you have named it CLIENT_SECRET in .env
        });
        res.json(response.data);
    } catch (error) {
        res.status(500).json({ message: "Error fetching token", error: error.response.data });
    }
});

Fetching Emails:

Now, introduce the endpoint to fetch messages:

app.get('/messages', async (req, res) => {
    try {
        // First, get the token
        const tokenResponse = await axios.post('https://api.datamotion.com/SMC/Messaging/v3/token', {
            grant_type: "client_credentials",
            client_id: process.env.CLIENT_ID, // assuming you have named it CLIENT_ID in .env
            client_secret: process.env.CLIENT_SECRET // assuming you have named it CLIENT_SECRET in .env
        });

        // Use the token to get the message summaries
        const messagesResponse = await axios.get('https://api.datamotion.com/SMC/Messaging/v3/content/messages/?folderId=1&pageSize=10&pageNumber=1&sortDirection=DESC&metadata=true', {
            headers: {
                Authorization: `Bearer ${tokenResponse.data.access_token}`
            }
        });

        res.json(messagesResponse.data);
    } catch (error) {
        res.status(500).json({ message: "Error fetching messages", error: error.response.data });
    }
});

e. Verifying Backend Setup

Having integrated DataMotion's secure message center APIs into our server, it's vital to check if everything works as expected before proceeding to the frontend.

Restart your server and visit http://localhost:5000/messages in your browser. If the setup is correct, you'll see a list of your messages rendered in a JSON format, confirming that our backend is fetching data using the APIs and is ready to serve the frontend.

2. React Frontend: Fetching and Displaying Emails

To initiate the frontend, open a fresh terminal window and directly start the React project. Upon launching, the file should display with mock email data:

npm start

To integrate the server APIs with our frontend, we'll primarily utilize two hooks from React: useState and useEffect. Before going into the code, let's understand them:

useState: A hook that gives a component its own data storage. It returns the data's current value and a function to update it. When the data changes, the component re-renders.
useEffect: A hook that runs code after the component renders. We use it here to fetch emails once the component appears on screen.

a. API Call with useEffect

Inside Inbox.js, initiate the fetch with the useEffect hook:

import React, { useState, useEffect } from 'react';
import { ListGroup } from 'react-bootstrap';

const Inbox = () => {
    const [emails, setEmails] = useState([]);

    useEffect(() => {
        // Call our server to get emails
        fetch('http://localhost:5000/messages')
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                // Sort emails by createTime from newest to oldest
                const sortedEmails = data.items.sort((a, b) => new Date(b.createTime) - new Date(a.createTime));
                setEmails(sortedEmails);
            })
            .catch(error => {
                console.error('Error fetching messages:', error);
            });
    }, []);

   // Helper function to format the date or show the time if the email was received today
    const formatDate = (dateString) => {
      const date = new Date(dateString);
      const today = new Date();
      if (date.toDateString() === today.toDateString()) {
          return date.toLocaleTimeString();
      }
      return date.toLocaleDateString();
  };

    return (
        // Rendering logic here...
    );
};

export default Inbox;

b. Displaying Emails:

DataMotion's developer center outlines the response structure. Using this, we'll extract and showcase key details like the sender's email, subject, and creation time.

// ... rest of the Inbox component ...

  return (
    <div className="col-md-9 pt-3">
        <ListGroup className='inbox-style'>
          {emails.map(email => (
              <ListGroup.Item key={email.messageId} className='email-item'>
                  <div>
                      {/* Email Address of Sender */}
                      <p className="sender-email">{email.senderAddress}</p>
                      {/* Email Subject */}
                      <p className="email-subject">{email.subject}</p>
                  </div>
                  {/* Email Received Date/Time */}
                  <div className="date-received">{formatDate(email.createTime)}</div>
              </ListGroup.Item>
          ))}
      </ListGroup>
   </div>
  );
};

After implementing these steps, simply refresh the page, and you should see a list of your emails securely displayed!

Conclusion

By integrating DataMotion's APIs with React, we've set the foundation for a secure and compliant email client application. Understanding each phase empowers you, the developer, to further adapt and enhance this setup. Stay tuned for our next tutorial where we'll dive deeper into DataMotion's secure message center APIs, exploring functionalities like creating drafts and sending messages.

For a more detailed overview of secure messaging, check out DataMotion's secure message center. With this series, we're just starting our journey into the vast capabilities offered by DataMotion. Happy coding!

The Unseen Parallels of Teaching and Developer Advocacy

Janelle Phalon — Tue, 20 Jun 2023 18:51:13 +0000

There's a common question I get asked as a Developer Advocate: "How did you go from being a middle school teacher to tech?" My answer, although surprising to some, is simple: "It’s not as different as you might think."

It's All About Relationships

My teaching days revolved around my students—understanding their needs, learning styles, and finding the keys to unlock their potential. In the world of tech, I found myself doing the same but with developers. Instead of parent-teacher meetings, there are now community discussions. It was a shift in context, but the underlying principles of relationship building, empathy, and understanding remained the same.

The Art of Engaging Content

A lesson on grammar rules or vocabulary might not always be the most enticing subject for a middle schooler. The challenge was to make it engaging, relatable, and fun. Similarly, in my current role, whether I'm crafting a blog post or designing a product demo, the content must resonate with developers. It must provide them with value while simultaneously engaging their interest—no small task, but one that's remarkably familiar.

The Power of Data

As a teacher, the evidence of my effectiveness came through test scores and feedback. Now, data comes in the form of user statistics, engagement rates, and community feedback. In both professions, data is an invaluable ally, guiding my decisions, validating my efforts, and illuminating the path forward.

Lifelong Learning

Teaching taught me that to inspire learning, one must be a learner themselves. This couldn't be more true in the tech industry. The landscape evolves so rapidly that being a perpetual student is part of the job description. From learning about new programming languages to keeping up with the latest in AI, every day is a school day.

Catering to Varied Learning Styles

One of the most exciting challenges in both roles is meeting the needs of diverse learning styles. In the classroom, lessons had to be dynamic to cater to the visual, auditory, and kinesthetic learners. In tech, I strive to make complex technical content accessible and engaging to all developers, whether that means creating a video tutorial, a hands-on coding challenge, or a detailed blog post.

Presentation Skills: A Key Ingredient

The front of a classroom and a conference stage might look different, but the feeling is remarkably similar. The skills I honed while teaching—public speaking, confidence, and the ability to deliver information in an understandable manner—have served me incredibly well in developer advocacy.

While on the surface teaching and developer advocacy seem worlds apart, they share the same heart. They both revolve around building relationships, creating engaging content, leveraging data, continuous learning, adapting to different learning styles, and public speaking. So if you're thinking of making a similar leap, take it from me: the chalkboard might be replaced by a keyboard, but the principles that drive success are universal.

Testing DataMotion APIs with Insomnia REST Client

Janelle Phalon — Mon, 19 Jun 2023 18:47:36 +0000

Video demonstration

Introduction

APIs, or Application Programming Interfaces, play a critical role in enabling seamless interaction and data exchange between software applications. As the backbone of many web-based services, APIs have become increasingly important, delivering efficiency and functionality across platforms.

Testing these APIs is a crucial step to ensure smooth operation and early detection of any potential issues. In this guide, we'll walk you through how to test and validate DataMotion's Secure Message Center API using the Insomnia REST Client, a user-friendly tool suitable for developers of all experience levels.

DataMotion aims to empower users to seamlessly integrate secure data exchange directly into their workflows. By leveraging DataMotion's robust APIs and no-code solutions, you can work within your enterprise applications while delivering a secure and streamlined experience to your end-users.

Prerequisites

Before we begin, ensure you have the following:

An active DataMotion account. You'll need this to access the Secure Message Center API.
The Insomnia REST Client installed on your system. If you haven't installed it yet, download it from the official website.

Acquiring the Access Token

The first step in API testing is authentication. To make API calls to DataMotion's v3 APIs, an Access Token is required. This token can be obtained by making a POST request to the Token endpoint.

Detailed information about the Token API endpoint, along with other Secure Message Center APIs, can be found in DataMotion's Developer Center. For the sake of this tutorial, here are the steps to obtain the Access Token:

In your Insomnia workspace, create a new POST request and name it Get Access Token.
The URL for the request is: https://api.datamotion.com/SMC/Messaging/v3/token for DataMotion customers, and https://api.datamotion.com/SMC-Sandbox/Messaging/v3/token for trial members.
In the Body section of the request, select JSON and input the following:

{
    "grant_type": "client_credentials",
    "client_id": "your-client-id",
    "client_secret": "your-client-secret"
}

Remember to replace "your-client-id" and "your-client-secret" with your actual credentials.

After confirming that your details are correct, send the request. A successful request will return a 200 status code and your Access Token in the response.

Here's what a successful token request looks like:

Testing the 'Get Message Summaries' API Call

With your Access Token in hand, you're now ready to start testing the various Secure Message Center API endpoints. We'll start with the 'Get Message Summaries' API call, which provides a summary of all your messages.

Following the same process as above, we can find details for the 'Get Message Summaries' API call in DataMotion's Developer Center. Here's how to set up the request in Insomnia:

Create a new GET request and name it Get Message Summaries.
The URL for this request is: https://api.datamotion.com/SMC/Messaging/v3/content/messages/?folderId=1&pageSize=10&pageNumber=1&sortDirection=DESC&metadata=true for DataMotion customers, and https://api.datamotion.com/SMC-Sandbox/Messaging/v3/content/messages/?folderId=1&pageSize=10&pageNumber=1&sortDirection=DESC&metadata=true for trial members.
In the Headers section, add your Access Token for authorization and set the "Content-Type" to "application/json".

{
    "Authorization": "Bearer your-access-token",
    "Content-Type": "application/json"
}

Ensure you replace "your-access-token" with the actual Access Token.

After confirming your details are correct, send the request. If successful, you'll receive a summary of your messages in the response.

Here's how a successful API call setup looks:

Handling API Errors

During testing, you may encounter errors, which typically appear as 400, 401, 403, or 500 response codes. These codes often signal issues with your request parameters or Access Token. In case of an error, carefully review your request setup and retry the request.

Here's an example of what an error response may look like:

{
    "error": "InvalidRequest",
    "errorMessage": "Invalid request.",
    "data": null
}

Remember, encountering errors is part of the learning process. Troubleshooting these issues will further hone your proficiency in API testing!

Conclusion

Congrats - you've successfully begun testing APIs using DataMotion's Secure Message Center APIs and the Insomnia REST Client. This is just the start—continue applying these principles to other APIs and advancing your skills.

For more examples, check out my previous blog post on Composing and Sending a Secure Message with DataMotion APIs. Further, DataMotion's Developer Center is a comprehensive resource on all their APIs.

Keep learning, keep testing, and happy coding!

Compose and Send a Secure Message in Minutes with DataMotion APIs

Janelle Phalon — Wed, 31 May 2023 20:39:17 +0000

"Keep it secret, keep it safe" – wise words from Gandalf that carry immense significance even in today's digital world. Confidentiality is key in communication, especially when sensitive information is involved. Thankfully, we have DataMotion to the rescue. In this blog, we'll create a form that sends data securely using DataMotion's Secure Message Center APIs.

So grab your staff and wizard hat, because in just a few steps, you'll be a DataMotion wizard!

Prerequisites:

Familiarity with HTML and JavaScript
Knowledge of Fetch API to make HTTP requests
A DataMotion account to get the magical keys (APIs)

Set up Your Parchment - HTML

Every wizard needs a parchment to write their spell, or in our case, a form for our users to input their messages. In your HTML file, create a simple form:

<!-- ... -->
<form id="secure-message-form">
  <div class="form-group">
    <label for="sender-email">Your Email:</label>
    <input type="email" class="form-control" id="sender-email" required>
  </div>
  <!-- ... remaining fields and the closing tags ... -->
</form>
<!-- ... -->

Thanks to Bootstrap, our form looks neat and professional!

Capture the Spell - Form Handling with JavaScript

We need to prevent the page from reloading when the form is submitted (the default action), ensuring our user's message doesn't vanish into thin air. This is where JavaScript comes in:

document.getElementById("secure-message-form").addEventListener("submit", function(event) {
  // The `event.preventDefault();` line stops the page from reloading
  event.preventDefault();

  // Get form values
  var senderEmail = document.getElementById("sender-email").value;
  var recipientEmail = document.getElementById("recipient-email").value;
  var message = document.getElementById("message").value;

  // ... the magic begins ...
});

With this, we're grabbing the form values and readying them for secure transmission.

Crafting the Message Scroll - Request Payload

In order to send the secure message, we need to put our message into a format that DataMotion's API can understand. This is what we call the payload of our request:

var payload = {
  attachments: [],
  bcc: [],
  cc: [],
  htmlBody: "",
  subject: "Secure Message",
  textBody: message,
  to: [recipientEmail],
  notificationTemplate: "",
  attributes: {
    crmCustomId: ""
  }
};

We have our payload ready, it's time to fetch our access token.

Unlocking the Gate - Fetching the Access Token

Like every magical realm, DataMotion API has a key - the access token. We need to fetch this key to send our secure message. This is how we do it:

fetch("https://api.datamotion.com/SMC/Messaging/v3/token", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    grant_type: "client_credentials",
    client_id: "your-client-id",
    client_secret: "your-client-secret"
  })
})
.then(function(response) {
  if (response.ok) {
    return response.json();
  } else {
    throw new Error("Failed to retrieve DataMotion access token");
  }
})
.then(function(data) {
  var accessToken = data.access_token;

  // ... let's send our secure message ...
});

With our access token in hand, we can proceed to send our message.

Dispatching the Message Scroll - Sending the Message

The final step is to send the message using DataMotion's API. Our request contains the access token and our payload:

fetch("https://api.datamotion.com/SMC/Messaging/v3/content/messages", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer " + accessToken
  },
  body: JSON.stringify(payload)
})
.then(function(response) {
  if (response.ok) {
    alert("Secure message sent successfully!");
    // Reset form after successful submission
    document.getElementById("secure-message-form").reset();
  } else {
    throw new Error("Failed to send secure message");
  }
})
.catch(function(error) {
  alert("Error: " + error.message);
});

And there you have it! Your message is now securely delivered, Gandalf-style! So go ahead, put on your wizard hat, wave your staff, and send secure messages with the power of DataMotion APIs.

GitHub Repository

A Rookie's Adventure at HIMSS 2023

Janelle Phalon — Thu, 25 May 2023 17:30:07 +0000

Imagine walking into a giant hall that's buzzing with energy. You're surrounded by rows of booths stretching as far as you can see, each one more colorful than the last. Flashing screens and demos of the latest tech fill the room. Nope, this isn't a dream or a scene from a sci-fi book - it's my very first time at HIMSS 2023.

The HIMSS Marathon: Networking, Advocacy, and Learning

Every single day at HIMSS was like running a marathon. It was a whirlwind of networking, learning, and standing up for solutions that could change the healthcare game. And just like a marathon, it took more stamina than I expected. After three days of talking to attendees for eight hours straight, my body felt like I'd been pumping out code non-stop. But the rush? Totally worth it.

These long days led to some really rewarding chats. Representing DataMotion, we dove into how secure solutions can transform healthcare. It was like a group debugging session, with all of us tossing out ideas and sharing our thoughts. And the best part? We were all working towards the same goal.

Fun, Friends, and New Knowledge

But it wasn't all work and no play at HIMSS 2023. Between the fast-paced discussions and the brainstorming sessions, there was also room for fun and making friends. From partying at the House of Blues to grabbing cool swag, I was never bored. And hey, those new friends? They became a part of my network, and our conversations turned into learning opportunities.

It was like jumping into a real-life forum on healthcare tech. I picked up new industry lingo, got the lowdown on current tech trends, and even caught a glimpse of what the future could hold.

Unity in Diversity

Amid all the hustle and bustle of HIMSS, there was a sense of unity that stood out. We came from different companies and backgrounds, but we all shared one goal - to make healthcare better through technology. Those shared smiles at the end of each exhausting day? Those were reminders of why we were there in the first place.

In a nutshell, my first time at HIMSS wasn't just about attending an event - it was an adventure into the future of healthcare tech. It was a sprint filled with networking, advocating, and learning. And it was proof that when you're passionate about something, you can jump over any hurdle. Here's to the journey, the experiences, and all of us working together to make a difference. Until next time, keep pushing boundaries and driving change.

DEV Community: Janelle Phalon

Enhancing CX: Building a DataMotion-Powered Message Center Widget for React (Part 1)

Introduction

Prerequisites

Setting up the Project

Cloning the Dashboard Template:

Environment Setup:

Building the Message Center Widget

Server Setup:

Testing the Server:

Authentication with DataMotion:

Fetching Messages from Different Folders

Building and Integrating the Message Center Widget into the Dashboard

Creating the Component File

Setting Up and Importing Dependencies

Initializing State Variables

Fetching and Displaying Emails

Sorting Emails and Formatting Dates

Rendering the Secure Message Center

Adding CSS for Table Styling

JSX Structure for the Secure Message Center

Integrating the Widget into the Dashboard

Placing the MessageCenterWidget in the Dashboard

Expanding the Widget's Functionality

Updating the Server to Fetch Sent Messages

Integrating Sidebar and Updating MessageCenterWidget.js

Styling the Sidebar

Conclusion of the Expanded Widget

Feedback Wanted: No-Code UI

About Our Product:

Seeking Your Insights:

Higher Order Components: Cleaning Up Repetitive React Code

Introduction to the problem: Repetitive React components

What are HOCs and How do they Keep Your Code DRY?

Introducing Higher Order Components (HOCs) as a Solution

A Step-By-Step guide to Refactoring my Secure Message Center

How This Improved From the Original

How to Know When You Should Implement HOCs

Conclusion: The Benefits of Modular and Efficient Code

React Structure Missteps: Refining My Message Center

The Initial Structure

The Restructuring

Takeaways:

Conclusion

Structuring Your Backend for Growth: A Guide to Organizing API Calls

Introduction

Why Organize by Feature?

Backend Directory Structure

1. Authentication (authentication/)

authController.js

authRoutes.js

getToken.js

2. Messages (messages/)

messagesController.js

messageRoutes.js

The Heart of It All: server.js

Building a Secure and Compliant Message Center with React & DataMotion

Prerequisites

Starter Files

1. Setting Up the Backend with DataMotion APIs

a. Initiate the server

b. Installing Essential Libraries

c. Setting up the Basic Server

d. DataMotion API Integration in Server

e. Verifying Backend Setup

2. React Frontend: Fetching and Displaying Emails

a. API Call with useEffect

b. Displaying Emails:

Conclusion

The Unseen Parallels of Teaching and Developer Advocacy

Testing DataMotion APIs with Insomnia REST Client

Introduction

Prerequisites

Acquiring the Access Token

Testing the 'Get Message Summaries' API Call

Handling API Errors

Conclusion

Compose and Send a Secure Message in Minutes with DataMotion APIs

Prerequisites:

Set up Your Parchment - HTML

`authController.js`

`authRoutes.js`

`getToken.js`

`messagesController.js`

`messageRoutes.js`

The Heart of It All: `server.js`