DEV Community: alanst32

Newest article: https://dev.to/alanst32/broadcast-real-time-events-using-a-serverless-websocket-infrastructure-4mhp

alanst32 — Mon, 24 Mar 2025 08:54:15 +0000

Enhance your modernisation assessment: Strategies for success

alanst32 — Mon, 24 Mar 2025 03:23:09 +0000

This article was originally published as a blog post on Cevo website.

Does my application require modernisation? It is a question that often comes to mind, especially when we have a substantial number of legacy applications running within the organisation. If you have not had the pleasure to think about it so far, do not worry, one day you will.

To solve such problem is not easy, even for those with an extensive technical background. That’s because the answer goes beyond architectural aspects. Knowing when to modernise, which strategy to apply and especially understanding whether the investment is worth it are factors that must be considered.

In this blog, I will explore this issue more deeply by classifying and quantifying the factors to consider when determining whether your application needs refactoring. If so, which strategy is most appropriate? This post is not about recommending a specific framework, but rather focusing on the considerations for choosing the right strategies for a modernisation project. I will also reflect on decisions I made early in my career, and which ones I would change. After all, none of us are born knowing everything, and despite our best efforts, there are always things we wish we’d known earlier.

Look out for the signs

The first step is analysis and identification. There are some signs that can help you determine whether your application requires refactoring. Some are easy to identify, while others are more subtle.

End of support

The end of support (EoS) for software, frameworks, or tools is a key indicator that your application may need modernisation or refactoring.

For example, older database systems like SQL Server 2008 or Sybase may no longer be supported, creating risks for applications dependent on them. Similarly, frameworks like AngularJS require migration to newer versions to ensure long-term viability. Here’s how EoS can affect your application and why it’s important to act proactively:

Security Risks

Vulnerability: Vendors stop releasing updates, leaving the system exposed to known exploits.
Compliance violations: Failing to meet industry security standards can result in penalties.
Increased attack surface: Hackers often target outdated software, knowing that vulnerabilities won’t be patched.

Incompatibility with Modern Ecosystems

Dependency conflicts: Unsupported software may not work with newer operating systems, frameworks, or libraries.
Integration issues: The application may struggle to interact with modern APIs or cloud services.

Limited Vendor Support

No technical assistance: Vendors will no longer provide help with troubleshooting or migration.
No enhancements: Lack of updates means missing out on new features or improvements that competitors might have.
Additional cost for extended support: You may need to purchase extended support agreements at an extra cost.

Obsolete Stack

This is another clear sign to look for, as technology evolves, older stacks can become a bottleneck for performance, scalability, and security. Below are key aspects to watch for, along with some examples:

Legacy Frameworks

Core components (e.g., Sybase, old versions of Java) are no longer supported.
Outdated architecture: Monolithic designs limit agility, making scaling and updates more complex.
Incompatibility with modern tools: The system may fail to integrate smoothly with cloud services, CI/CD pipelines, or automation tools. For example, applications using outdated SOAP APIs instead of REST or GraphQL.

Developer Fatigue

Developers may find the stack outdated and difficult to work with due to the lack of modern tools. This can lead to decreased interest from developers and greater difficulty in finding replacement resources. For instance, consider a team maintaining an application written in COBOL or Perl—languages that are still in use but becoming increasingly rare. Finding skilled professionals to maintain these applications is now more challenging.

High Maintenance Costs

In some cases, keeping the stack running requires significant manual intervention, workarounds, or reliance on external consultants/vendors. For example, managing an on-premises database versus migrating to AWS RDS.

Bad User Experience (UX)

An outdated UI can be a key reason why your clients are migrating to the competition. Limited functionality or a lack of accessibility are factors that should always be reviewed. Here are some examples:

Outdated UI Design

Back-end developers may think this is trivial, but don’t underestimate it—an unattractive interface is a big issue. A poor first impression can reduce user engagement with your product. A common example is web applications using outdated CSS styles that aren’t responsive on mobile devices.

Poor Performance

Applications that load slowly or take too long to process actions frustrate users, impacting both their experience and potential return ($$$). Slow rendering times caused by heavy queries are a major factor and need to be regularly monitored.

Lack of Accessibility

This is a crucial factor for any web platform. Users with disabilities should be able to navigate the application just as easily as others. A system without accessibility features not only limits your market reach but also exposes you to potential legal compliance risks.

High Operational Costs

Your stack has grown substantially, leading to excessive costs for servers, compute, storage and personnel. Manual intervention is often required, or due to technical debt, you’re spending too much time and money managing outdated systems instead of investing in innovation. Here are some examples that illustrate this:

Limited Automation

Lack of CI/CD pipelines or automated testing/deployment processes.
No horizontal scalability: Unable to scale out dynamically to meet growing demand.

Difficulty in Data Handling

Rigid Data Structures: Struggling to adapt to changing data models or integrate with external APIs.
Inefficient Data Processing: Performance bottlenecks during ETL or analytics workflows.

High Data Transfer and Storage Costs

Excessive data transfer charges due to inefficient data flows or redundant operations between systems. For example, storing archived files in S3 Standard instead of S3 Glacier.

The fun part begins

Okay, now that you’ve come to your senses and realised your application needs modernisation, you’re eager to head back to the technical board and define the architecture. Well, sorry to tell you, but there’s much more to it. To assess and define your architectural strategy, you need to go beyond the technical scope, which is just as important as choosing the new stack. Below, I’ve listed some factors to consider and the best strategies to follow:

Requirements and deadline

It sounds obvious (and it is) to mention that the requirements are the first step in defining the architecture, but sometimes there are certain aspects that prevent us from choosing the most efficient strategy, and often, time is the biggest factor.

I bet that at least once in your life, you’ve worked on a project where you’ve thought, “How did the previous engineer create such bad code?” It’s easy to say that after years have passed, but we don’t know what circumstances made the code the way it is. But, if I had to guess, I’d say it was the deadline. A short deadline is a pain and throws all the best strategies out the window.

Strategy: For short deadlines, keep it simple. Then, negotiate a second delivery phase so you can refine the architecture for phase 2.

Another aspect I want to mention is the risk that the requirements are going to change. Sometimes you’re given promises which make you design the new architecture to capture most of its time/performance, and then suddenly all these promises are broken. I remember in the early stages of my career, when I had to design a complex architecture, the objective was to implement more than 40 web transactions. Based on that, I designed the architecture in the most reusable way, with lots of abstraction and reusable components. After some stages in the project and successfully delivering three web transactions, the company cancelled the project due to contract and political reasons. As a result, we ended up with an over-engineered solution for handling just three transactions.

Strategy: Analyse how well-defined your requirements are and take into consideration quick actions to re-adapt to changes.

Don’t believe the hype

Choosing frameworks for modernisation can be an exciting process, giving us the chance to explore new trends and patterns that might meet our specific needs. But be cautious—picking a trending framework is rarely the best choice.

For one, you may not get the same level of support as you would with stable frameworks already on the market. Plus, it’s hard to predict whether that framework will evolve positively with future versions.

Most importantly, even if you confirm the framework is solid, finding people with the right expertise can be challenging. Even if your project has a long deadline, giving you time to upskill your team, this challenge will arise again each time a team member leaves and you need to onboard a new one. So, consider the time and money you’ll invest in this process.

Strategy 1: Choose a stable framework, check for new version releases, and assess the strength of its community.

Strategy 2: If you still decide to go with a new framework, allocate some project time for developing POCs (Proof of Concepts).

Conclusion

Planning a refactoring can be tough—we definitely don’t want to repeat the same mistakes from the past. While modernisation is an exciting project, it also gives you the chance to sharpen your analytical and management skills. That brings me to my final piece of advice: after delivering the project, don’t forget to document the results, especially in comparison to the old project architecture.

How Cevo can help in your Modernisation

If you are not sure that your platforms require modernisation, or need help to assess your workloads, review licensing, identify potential modernisation pathways, and build a business case for modernisation, reach out to us, with years of experience in the market Cevo Australia will tailor a solution specifically for your requirements.

Alan Terriaga.
AWS Tech Specialist – Modernisation and Cloud Native
https://www.linkedin.com/in/alanterriaga/
https://cevo.com.au

Broadcast real-time events using a serverless WebSocket infrastructure

alanst32 — Mon, 24 Mar 2025 02:59:57 +0000

This article was originally published as a blog post on Cevo website.

In this article, I will explore AWS AppSync Events, a feature that enables easy adoption and maintenance of WebSocket APIs and most importantly using Serverless architecture. As you will see, with the help of Amplify Gen 2, we will be able to quickly deploy a serverless chat application to broadcast real-time event data to multiple subscribers.

Before we dive into, let’s review some concepts to refresh our memory:

Amplify Gen 2: Amplify Gen 2 transitions to a Typescript developer experience, allowing developers to build full-stack cloud applications using just Typescript, while the cloud infrastructure is automatically deployed based on the declared application code. With Gen 2, your back-end features are built with AWS Cloud Development Kit (AWS CDK). I recently wrote an article here that will serve as the foundation for our Chat example.
AppSync: AWS AppSync is a fully managed service that enables you to build GraphQL APIs easily. It allows applications to securely access, manipulate, and combine data from multiple sources like DynamoDB, RDS, Lambda, and Elasticsearch (OpenSearch Service). It also supports WebSocket for real-time subscriptions and offline sync for mobile/web apps.
WebSocket APIs: WebSocket APIs provide real-time, bi-directional communication between clients and servers. Unlike REST APIs, where clients must repeatedly poll for updates, WebSocket APIs maintain a persistent connection, reducing latency and improving efficiency.

Why AppSync Events instead of common WebSocket servers?

AppSync Events lets you create serverless WebSocket APIs, without you having to manage connections or resource scaling. You have automatic management on WebSocket connection and built-in support for broadcasting events to large numbers of subscribers. Find out more in the official documentation here.

A serverless live chat

To start, we need to create the project, for that, you can use Amplify Gen 2 quickstart. Once you have everything up and running, the first resource we need to configure is an AppSync API of type Event. The following code below is an example of how to attach on the backend:

import { defineBackend } from '@aws-amplify/backend';
import { auth } from './auth/resource';
import { AuthorizationType, CfnApi, CfnChannelNamespace } from 'aws-cdk-lib/aws-appsync';
import { Policy, PolicyStatement } from 'aws-cdk-lib/aws-iam';

const backend = defineBackend({
  auth
});

// create a new stack for our Event API resources:
const customStack = backend.createStack('custom-stack');

// add a new Event API to the stack:
const cfnEventAPI = new CfnApi(customStack, 'CfnEventAPI', {
  name: 'events',
  eventConfig: {
    authProviders: [
      {
        authType: AuthorizationType.USER_POOL,
        cognitoConfig: {
          awsRegion: customStack.region,
          // configure Event API to use the Cognito User Pool provisioned by Amplify:
          userPoolId: backend.auth.resources.userPool.userPoolId
        }
      }
    ],
    // configure the User Pool as the auth provider for Connect, Publish, and Subscribe operations:
    connectionAuthModes: [{ authType: AuthorizationType.USER_POOL }],
    defaultPublishAuthModes: [{ authType: AuthorizationType.USER_POOL }],
    defaultSubscribeAuthModes: [{ authType: AuthorizationType.USER_POOL }]
  }
});

// create a default namespace for our Event API:
const namespace = new CfnChannelNamespace(customStack, 'CfnEventAPINamespace', {
  apiId: cfnEventAPI.attrApiId,
  name: 'default'
});

// attach a policy to the authenticated user role in our User Pool to grant access to the Event API:
backend.auth.resources.authenticatedUserIamRole.attachInlinePolicy(
  new Policy(customStack, 'AppSyncEventPolicy', {
    statements: [
      new PolicyStatement({
        actions: ['appsync:EventConnect', 'appsync:EventSubscribe', 'appsync:EventPublish'],
        resources: [`${cfnEventAPI.attrApiArn}/*`, `${cfnEventAPI.attrApiArn}`]
      })
    ]
  })
);

backend.addOutput({
  custom: {
    events: {
      url: `https://${cfnEventAPI.getAtt('Dns.Http').toString()}/event`,
      aws_region: customStack.region,
      default_authorization_type: AuthorizationType.USER_POOL
    }
  }
});

On the code above, we have four main resources:

An AppSync API of type Event that is authenticated via Cognito User Pool. You can find here how to create/integrate Cognito to your application.
A default namespace for the Event API.
IAM Policy that permits the AppSync API to connect, subscribe and publish events to the API.
Custom API declaration for amplify backend authenticated via Cognito User Pool.

Once backend configuration is set, is time to deploy into sandbox config so we can use its resources on front-end. For that, run the following command:
npx ampx sandbox

If you would like to know more about how sandbox environments work, please check its official documentation here.

Designing the UI

Now that the backend is developed and deployed via sandbox , we can integrate to the UI components. And, to exemplify the connection between two channels, I designed the UI to have two chat component, simulating two distinct users interacting with each other.

Chat component

import { ChangeEvent, SyntheticEvent, useEffect, useRef, useState } from 'react';
import {
  ButtonDiv,
  ChatMessageDiv,
  FeedArea,
  FeedTextArea,
  InputAreaDiv,
  LeftMessageDiv,
  RightMessageDiv,
  StyledButton,
  StyledInput,
  TimeStampDiv,
  UserMessageDiv,
  Wrapper
} from './styled';
import { v4 as uuidv4 } from 'uuid';
import { events } from 'aws-amplify/data';
import type { EventsChannel } from 'aws-amplify/data';
import { getTimeFormat } from './utils';

interface ChatProps {
  username: string;
}

export interface Message {
  id: string;
  username: string;
  message: string;
  timestamp: string;
}

const Chat: React.FC<ChatProps> = ({ username }) => {
  const [chatUserId] = useState<string>(uuidv4());
  const inputRef = useRef<HTMLInputElement>(null);
  const [inputValue, setInputValue] = useState<string>('');
  const [chatAreaState, setChatAreaState] = useState<Array<JSX.Element>>([]);

  const serverRowComponent = (userMessage: Message): JSX.Element => {
    const newUuid = uuidv4();
    return (
      <LeftMessageDiv key={newUuid}>
        <ChatMessageDiv>
          <>
            {' '}
            <b>
              <i>{userMessage.username}: </i>
            </b>
            {userMessage.message}
          </>
          <TimeStampDiv>{userMessage.timestamp}</TimeStampDiv>
        </ChatMessageDiv>
      </LeftMessageDiv>
    );
  };

  const userRowComponent = (userMessage: Message): JSX.Element => {
    const newUuid = uuidv4();
    return (
      <RightMessageDiv key={newUuid}>
        <UserMessageDiv>
          <>
            {' '}
            <b>
              <i>{userMessage.username}: </i>
            </b>
            {userMessage.message}
          </>
          <TimeStampDiv>{userMessage.timestamp}</TimeStampDiv>
        </UserMessageDiv>
      </RightMessageDiv>
    );
  };

  function updateChatAreaState(element: JSX.Element) {
    const currentAreaState = chatAreaState;
    currentAreaState.push(element);
    setChatAreaState(currentAreaState);
  }

  function handleChange(event: ChangeEvent<HTMLInputElement>) {
    setInputValue(event.target.value);
  }

  async function handleSubmit(event: SyntheticEvent<HTMLFormElement | HTMLButtonElement>) {
    if (inputValue !== '') {
      const message: Message = {
        id: chatUserId,
        username: username,
        message: inputValue,
        timestamp: getTimeFormat()
      };
      await events.post('default/channel', { message: { ...message } });
      updateChatAreaState(userRowComponent(message));
      setInputValue('');
      event.preventDefault();
    }
  }

  async function connectAndSubscribe() {
    let channel: EventsChannel;

    channel = await events.connect('default/channel');
    channel.subscribe({
      next: (data: any) => {
        const incoming = data?.event?.message;
        if (incoming.id && incoming.id !== chatUserId) {
          const displayMessage: Message = {
            id: incoming.id,
            username: incoming.username,
            message: incoming.message,
            timestamp: getTimeFormat()
          };

          updateChatAreaState(serverRowComponent(displayMessage));
        }
      },
      error: (err: any) => {
        console.error('Subscription error:', {
          message: err.message,
          stack: err.stack,
          details: err
        });
      }
    });
    return () => channel && channel.close();
  }

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }

    connectAndSubscribe();
  }, []);

  return (
    <Wrapper>
      <FeedArea id='chatbot-chat'>
        <FeedTextArea id='chatbot-messages'>{chatAreaState}</FeedTextArea>
      </FeedArea>

      <InputAreaDiv>
        <StyledInput
          ref={inputRef}
          id='input-form'
          placeholder='Send your message.'
          value={inputValue}
          onChange={handleChange}></StyledInput>
        <ButtonDiv>
          <StyledButton onClick={event => handleSubmit(event)}>Submit</StyledButton>
        </ButtonDiv>
      </InputAreaDiv>
    </Wrapper>
  );
};

export default Chat;

Landing component

import Chat from '../../custom/chat';
import { Container, SplitDiv, UserDiv } from './styled';

const Landing: React.FC = () => {
  const westUser = 'John Doe';
  const eastUser = 'Jane Smith';
  return (
    <Container>
      <SplitDiv>
        <UserDiv>
          <>Workspace: {westUser}</>
          <Chat username={westUser}></Chat>
        </UserDiv>
        <UserDiv>
          <>Workspace: {eastUser}</>
          <Chat username={eastUser}></Chat>
        </UserDiv>
      </SplitDiv>
    </Container>
  );
};

export default Landing;

With the front-end finished let’s see the result:

And, as simple as that, we have a Chat application using Serverless WebSocket resources, easy to deploy, auto scalable and the most important cost effective.

Monitoring logs & metrics

Enable logs

You can enable the logging of CloudWatch metrics in AWS Amplify Gen 2, and you can utilise the Amplify Logger to send logs from your application to Amazon CloudWatch.

In your Amplify backend configuration, you can enable logging and specify settings, such as log level and retention period. This setup ensures that your application’s interactions with AWS services are logged appropriately. Here’s how to set it up in your backend application:

export const data = defineData({
  // ... other configurations ...
  logging: {
    excludeVerboseContent: false,
    fieldLogLevel: 'all',
    retention: '1 month',
  },
});

When excludeVerboseContent is set to false, logs will include full queries and user parameters, which can contain sensitive data. So, be careful with your environment configuration and ensure that access to these logs is restricted to non-prod and necessary personnel.

Subscribe to real-time metrics

AWS AppSync provides real-time metrics that focus on WebSocket connections and subscription activities. They include metrics for connection requests, subscription registrations, message publishing, active connections and many other attributes.

You can access CloudWatch metrics in the AWS Management Console, but if you also want to keep track of the WebSocket connections, you can create custom AWS CloudWatch alarms and subscribe to these events. You can easily configure the subscription on AWS Management Console or add into your application via AWS CDK, which would be integrated with Amplify Gen 2.

Here is an AWS guide on how to create AWS CloudWatch alarms using CDK. The list of all metrics for real-time events can be found here.

AWS AppSync Events pricing

The pricing for AppSync Events is based by the number of inbound and outbound messages, total event request handlers, client connection requests and subscriptions, and the total minutes of clients connected. By doing a simple comparison in price, and according to the AWS AppSync pricing page, an application with real-time events that publishes 10,000 messages on channel and has 1,000,000 clients connected will average $13.01 per month in its costs. You can check more in detail on the official page here.

Conclusion

AWS AppSync events unlock a new level of flexibility and efficiency, thanks to their serverless architecture. By eliminating the need for manual infrastructure management, developers can focus on building real-time, scalable applications without worrying about backend complexity.

Here’s why AppSync events are a game-changer:

Scalability: Handles thousands of concurrent connections effortlessly without provisioning servers.
Cost-Efficiency: Pay only for the resources used – no need for always-on instances.
Seamless Integration: Works natively with AWS services like Lambda, DynamoDB, and EventBridge for event-driven workflows.
Real-Time Updates: WebSocket enable instant data synchronisation across devices with minimal effort.

How Cevo can help in your Modernisation

If you are not sure that your platforms require modernisation, or need help to assess your workloads, review licensing, identify potential modernisation pathways, and build a business case for modernisation, reach out to us. With years of experience in the market, Cevo Australia will tailor a solution specifically for your requirements.

Alan Terriaga.
AWS Tech Specialist – Modernisation and Cloud Native
https://www.linkedin.com/in/alanterriaga/
https://cevo.com.au

How to consume Rest APIs from a GraphQL client using RestLink.

alanst32 — Wed, 20 Oct 2021 06:20:45 +0000

Hello there!

Imagine you are working in a new application which is set to use GraphQL on client side. Most likely you will also work with GraphQL on server side. However, sometimes you need to call an old API or a third party provider API that is built is REST. That's fine, you can reach the goal by using RestLink API from Apollo Client.

In this article I will describe how to consume REST APIs from a Typescript client project using React hooks and RestLink.

REST Server APIS.

These are the REST APIS my GraphQL client will consume, just basic CRUD operations.

POST: /student/list
- Returns a list of Students according filter
- Params: (Body) Student Request interface (name:string, skills:string[])
- Returns: StudentModel array
POST: /student
- Insert a new student on database
- Params: (Body) StudentModel interface
- Returns: No Response
POST: /student/inactive
- Mark one or more students as inactive
- Params: Student ids in a String array
- Returns: No Resposne
PUT: /student
- Update Student data
- Params: (Body) StudentModel interface
- Returns: No Response

Client Side - Querying APIS with GQL.

Now that server APIS requirements are set, we will consume them via GraphQL by GQL query.
src/graphql/studentGraph.ts

import { gql, useMutation, useQuery } from '@apollo/client';
import StudentModel, { StudentRequest } from '@models/studentModel';

export interface IGetStudentsData {
    students: StudentModel[];
};

/*
    query getStudents: the name of the query - does not need to match backend name
    students: name of variable of the response = data.students.[]
    type: "StudentList" - GraphQL type this service will return.
    attributes: then you need to specify the attributes of the response. (in this case students attributes)
*/
export const GET_STUDENTS_QUERY = gql`
    query getStudents($studentRequest: StudentRequest) {
        students(body: $studentRequest) 
        @rest(
            type: "StudentModel", 
            path: "/student/list",
            method: "POST",
            bodyKey: "body"
        ) {
            _id,
            firstName,
            lastName,
            dateOfBirth,
            country,
            skills
        }
    },
`;

export const INSERT_STUDENT_GQL = gql`
    mutation InsertStudent($input: StudentRequest!) {
        createStudent(input: $input) 
        @rest(
            type: "StudentModel", 
            path: "/student",
            method: "POST",
            bodyKey: "input"
        ) {
            NoResponse
        }
    },
`;

export const DELETE_STUDENT_GQL = gql`
    mutation DeleteStudent($ids: [String!]!) {
        deleteStudent(input: {
            ids: $ids
        }) 
        @rest(
            type: "StudentModel",
            path: "/student/inactive",
            method: "POST",
            bodyKey: "input"
        ) {
            NoResponse
        }
    },
`;

export const UPDATE_STUDENT_GQL = gql`
    mutation UpdateStudent($input: StudentRequest!) {
        updateStudent(input: $input)
        @rest(
            type: "StudentModel",
            path: "/student",
            method: "PUT",
            bodyKey: "input"
        ) {
            NoResponse
        }
    }
`;

Understanding the code.

Let's take the first query and break into parts:

query getStudents: If you are familiar with GraphQL, here is set a query operation called getStudents. This is the name of the query and does not need to match backend api's name.
I am also setting that we are receiving a object of StudentRequest as input param.
students(body: $studentRequest): The point here to pay attention is that "students" will be response attribute's name: For instance we will receive: data.students.[]
@rest: Is trough Rest directive form RestLink that we are able to consume REST APIS.
- type: GraphQL type this service will return.
- path: Path of the API
- method: Rest method
- bodyKey: Since I am sending request body params, that's is the way to attach the method input params to the service.
Attributes Response: In the end I am specifying which attributes of back end service I want to consume.

For our Mutation queries, is follow basically the same format, only difference is that the services do not have a return object.

Hooking application with Apollo and RestLink.

The same way we need to hook a Redux store to an application, we need to hook up Apollo and RestLink.

/apollo.ts

import { ApolloClient, InMemoryCache } from '@apollo/client';
import { RestLink } from 'apollo-link-rest';

const restLink = new RestLink({
    uri: 'http://localhost:3000', //process.env.BASE_URL,
    headers: { 
        'Content-Type': 'application/json',
        mode: 'cors',
        credentials: 'include'
    },
});

export const apolloClient = new ApolloClient({
    cache: new InMemoryCache(),
    link: restLink,
});

Above I am creating a RestLink object with back end server information, base URI and headers configuration. After that, I am able to create an ApolloClient object setting to use objects in cache memory.

src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { ApolloProvider } from '@apollo/client';
import { apolloClient } from '../apollo';

ReactDOM.render(
  <ApolloProvider client={apolloClient}>
    <App />  
  </ApolloProvider>,
  document.getElementById('root')
);

reportWebVitals();

With the ApolloClient provider set I can hook up into the client-side application.

Consuming APIS with Hooks.

Now is time to execute the call of the apis and manage the return.

In the component below, I have two calls, through useQuery and useMutation. I have shortened the query to make it clear but you can still see the whole code on its Git Repository.

src/components/studentForm/studentForm.ts

import React, { useEffect, useState } from "react";
import StudentModel from "@models/studentModel";
import { useMutation, useQuery } from "@apollo/client";
import { IGetStudentsData, GET_STUDENTS_QUERY, INSERT_STUDENT_GQL } from "@graphql/studentGraph";
import { get } from 'lodash';


export default function StudentForm(props) {
    const { loading, error, data } = useQuery<IGetStudentsData>(
        GET_STUDENTS_QUERY,
        {
            variables: { studentRequest: {} }
        }
    );

    const [ insertStudentMutation ] = useMutation<StudentModel>(
        INSERT_STUDENT_GQL,
        {
            refetchQueries: [GET_STUDENTS_QUERY, 'getStudents'],
        }
    );

    useEffect(() => {
        if (data) {
            const students: StudentModel[] = get(data, 'students', []);
            setTotalStudents(students.length);
        }
    }, [data]);

    const insertStudentAsync = () => {
        const request: StudentModel = {
            firstName,
            lastName,
            country,
            dateOfBirth,
            skills: [] 
        };
        insertStudentMutation({
            variables: {
                input: request,
            },
        });
    }

    return (
        <Component>{...}
    );
}

Understanding the code.

As soon the component is rendered, GET api is called through ApolloAPI Hooks useQuery which will make the REST api call.

Obs: If we use useQuery on the same query in a different object, that does no mean there will be another REST API call. But this second component will retrieve Students data from cache. Data that was saved by the first call of the API. That's because I have mentioned above, I am setting my ApolloClient with inMemoryCache

useQuery returns three variables (loading, error, data) which is pretty straightforward and you can use accordingly your requirement.

Mutation: Mutation hook process is a bit different. First we create useMutation function variable, then in the moment we need, we execute it by passing the request input variables. In my example, the mutation is executed in the method insertStudentAsync called by a click of the button.

The interesting part here is the config "refetchQueries". If you know that your app usually needs to refetch certain queries after a particular mutation, you can include a refetchQueries array in that mutation's options:
The parameters expected are the GraphQL variable, plus the name of the query specified. With that, the result will update the cached stored.

Instead of refetchQueries, you can also update the particular attribute of the cached object by the use of "update" from ApolloClient API.

src/components/studentTable/studentTable.ts

import React, { useEffect, useState } from "react";
import StudentModel from "@models/studentModel";
import { useMutation, useQuery } from "@apollo/client";
import { DELETE_STUDENT_GQL, GET_STUDENTS_QUERY, UPDATE_STUDENT_GQL } from "@graphql/studentGraph";

const Row = (
    props: {
        student: StudentModel,
        handleCheck
    }
) => {
    const classes = useStyles();
    const {student, handleCheck} = props;
    const [open, setOpen] = useState(false);
    const [openDialog, setOpenDialog] = useState(false);
    const [updateStudentMutation] = useMutation<StudentModel>(UPDATE_STUDENT_GQL);


    async function saveSkillsAsync(newSkill: string) {
        const skills = student.skills;
        skills.push(newSkill);

        const request: StudentModel = {
            _id: student._id,
            firstName: student.firstName,
            lastName: student.lastName,
            country: student.country,
            dateOfBirth: student.dateOfBirth,
            skills: skills 
        };
        updateStudentMutation({
            variables: {input: request},
        });
        closeSkillsDialog();
    }

    return (
        <React.Fragment>
            {...}
        </React.Fragment>    
    );
}

export default function StudentTable(props: {}) {
    const [selectedAll, setSelectedAll] = useState(false);
    const [studentList, setStudentList] = useState<StudentModel[]>([]);
    const { loading, error, data } = useQuery<StudentModel[]>(
        GET_STUDENTS_QUERY,
        {
            variables: { studentRequest: {} }
        }
    );
    const [ deleteStudentMutation ] = useMutation<StudentModel>(
        DELETE_STUDENT_GQL, 
        {
            refetchQueries: [GET_STUDENTS_QUERY, 'getStudents'],
        }
    );

    useEffect(() => {
        console.log(`loading: ${loading}`);
        if (!loading && !error) {
            const students = get(data, 'students', []);
            if (!isEmpty(students)) {
                students.forEach(stu => stu.dateOfBirth = formatDate(stu.dateOfBirth));
                setStudentList(students);
            }
        }
    }, [data]);

    async function deleteStudentsAsync() {
        const filter: string[] = studentList
            .filter(s => s.checked === true)
            .map(x => x._id || '');
        if (!isEmpty(filter)) {
            deleteStudentMutation({
                variables: {
                    ids: filter
                }
            });
        }
    };

    return (
        <TableContainer component={Paper}>{...}</TableContainer>
    );
}

Above we follow the same logic and have more examples of useQuery and useMutation to attend our CRUD functionalities.

To summarise it, is pretty quick and simple to work between GraphQL and RestAPI with RestLink as tool. The examples used above are simple, you can call an API and then refetch the data after a mutation. But ApolloClient is not only that, it covers way more scenario than this, cache control is one of them. I suggest you also check its official website: ApolloClient.

I hope you have enjoyed this article, let me know your thoughts and don't forget to check the whole code on its git repository: react-graphql-client

See ya.

Clean React-Redux, Redux-Saga client-side solution.

alanst32 — Wed, 13 Oct 2021 07:31:33 +0000

Hello there!

On my previous post MERN client-side I have talked about a MERN client application with React, Typescript and the use of RxJs as an observables solution to collect and subscribe api response data.
Then I got on my mind, "How about Redux? Is it still worth?"

As we know Redux is a state manager container for JavaScript apps. It is a robust framework that allows you to have state control and information in all components/containers of your application. It works like a flow with a single store, it can be used in any environment like react, angular 1/2, vanilla etc.

And to support the use of Redux in React we also have React-Redux. A library that allow us to keep Redux solution up to date with React modern approaches. Through React Hooks from React-Redux we can access and control the store. Is without saying that without React-Redux I would not recommend the use of Redux in applications today.

On that thought I have decided to create a different MERN client-side solution with React and Typescript but not this this time with Redux and React-Redux.

And to make the application even more robust I am using Redux-Saga, which is basically a Redux side effect manager. Saga enables approaches to take parallel executions, task concurrency, task cancellation and more. You can also control threads with normal Redux actions. Comparing with React-Thunk, Saga it may seems complex at first but is a powerful solution. (But that's a talk for another post right ;) )

EDIT: As you may know, there are modern approaches to implement Redux on your application today. I have decided to write/keep this post in the "old" way in order o not cover multiple topics in the same article, with that on mind we could easily discuss new Saga/Redux approach in another article since the base is covered.

Now, without stretching too far, let's code!

1 - Client Project.

As this application is a similar solution from my previous post, I won't focus on the Node, Typescript and Webpack configuration. But exclusively on the Redux state flow between the CRUD operations.

Project structure

2 - Redux Flow.

As we know for our Redux flow we need to set:

Redux Actions
Redux Reducer
Redux Selector
Redux Store

And to work with the asynchronous calls to back end I am going to use a middleware layer.

Redux Saga layer

Actions

src/redux/actions/studentActions.ts

import StudentModel, { StudentRequest } from "@models/studentModel";

// TYPES
export enum STUDENT_ACTIONS {
    GET_STUDENTS_REQUEST = 'GET_STUDENTS_REQUEST',
    GET_STUDENTS_SUCCESS = 'GET_STUDENTS_SUCCESS',
    GET_STUDENTS_ERROR = 'GET_STUDENTS_ERROR',
    INSERT_STUDENT_REQUEST = 'INSERT_STUDENT_REQUEST',
    INSERT_STUDENT_SUCCESS = 'INSERT_STUDENT_SUCCESS',
    INSERT_STUDENT_ERROR = 'INSERT_STUDENT_ERROR',
    UPDATE_STUDENT_REQUEST = 'UPDATE_STUDENT_REQUEST',
    UPDATE_STUDENT_SUCCESS = 'UPDATE_STUDENT_SUCCESS',
    UPDATE_STUDENT_ERROR = 'UPDATE_STUDENT_ERROR',
    DELETE_STUDENT_REQUEST = 'DELETE_STUDENT_REQUEST',
    DELETE_STUDENT_SUCCESS = 'DELETE_STUDENT_SUCCESS',
    DELETE_STUDENT_ERROR = 'DELETE_STUDENT_ERROR',
    ADD_SKILLS_REQUEST = 'ADD_SKILLS_REQUEST',
    ADD_SKILLS_SUCCESS = 'ADD_SKILLS_SUCCESS',
    ADD_SKILLS_ERROR = 'ADD_SKILLS_ERROR',
};

interface LoadingState {
  isLoading: boolean,
}

interface CommonErrorPayload {
  error?: {
      message: string,
      type: string,
  },
}

// ACTION RETURN TYPES
export interface GetStudentsRequest {
  type: typeof STUDENT_ACTIONS.GET_STUDENTS_REQUEST;
  args: StudentRequest,
};

export interface GetStudentsSuccess {
  type: typeof STUDENT_ACTIONS.GET_STUDENTS_SUCCESS;
  payload: StudentModel[],
};

export interface GetStudentsError {
  type: typeof STUDENT_ACTIONS.GET_STUDENTS_ERROR;
  payload: CommonErrorPayload,
};

export interface InsertStudentRequest {
  type: typeof STUDENT_ACTIONS.INSERT_STUDENT_REQUEST;
  args: StudentModel,
}

export interface InsertStudentSuccess {
  type: typeof STUDENT_ACTIONS.INSERT_STUDENT_SUCCESS,
};

export interface InsertStudentError {
  type: typeof STUDENT_ACTIONS.INSERT_STUDENT_ERROR;
  payload: CommonErrorPayload,
};

export interface UpdateStudentRequest {
  type: typeof STUDENT_ACTIONS.UPDATE_STUDENT_REQUEST;
  args: StudentModel,
};

export interface UpdateStudentSuccess {
  type: typeof STUDENT_ACTIONS.UPDATE_STUDENT_SUCCESS,
};

export interface UpdateStudentError {
  type: typeof STUDENT_ACTIONS.UPDATE_STUDENT_ERROR;
  payload: CommonErrorPayload,
};

export interface DeleteStudentRequest {
  type: typeof STUDENT_ACTIONS.DELETE_STUDENT_REQUEST;
  args: string[],
};

export interface DeleteStudentSuccess {
  type: typeof STUDENT_ACTIONS.DELETE_STUDENT_SUCCESS,
};

export interface DeleteStudentError {
  type: typeof STUDENT_ACTIONS.DELETE_STUDENT_ERROR;
  payload: CommonErrorPayload,
};

// ACTIONS
export const getStudentsRequest = (args: StudentRequest): GetStudentsRequest  => ({
  type: STUDENT_ACTIONS.GET_STUDENTS_REQUEST,
  args,
}); 

export const getStudentsSuccess = (payload: StudentModel[]): GetStudentsSuccess => ({
  type: STUDENT_ACTIONS.GET_STUDENTS_SUCCESS,
  payload,
});

export const getStudentsError = (payload: CommonErrorPayload): GetStudentsError => ({
  type: STUDENT_ACTIONS.GET_STUDENTS_ERROR,
  payload,
});

export const insertStudentRequest = (args: StudentModel): InsertStudentRequest => ({
  type: STUDENT_ACTIONS.INSERT_STUDENT_REQUEST,
  args,
});

export const insertStudentSuccess = (): InsertStudentSuccess => ({
  type: STUDENT_ACTIONS.INSERT_STUDENT_SUCCESS,
});

export const insertStudentError = (payload: CommonErrorPayload): InsertStudentError => ({
  type: STUDENT_ACTIONS.INSERT_STUDENT_ERROR,
  payload,
});

export const updateStudentRequest = (args: StudentModel): UpdateStudentRequest => ({
  type: STUDENT_ACTIONS.UPDATE_STUDENT_REQUEST,
  args,
});

export const updateStudentSuccess = (): UpdateStudentSuccess => ({
  type: STUDENT_ACTIONS.UPDATE_STUDENT_SUCCESS,
});

export const updateStudentError = (payload: CommonErrorPayload): UpdateStudentError => ({
  type: STUDENT_ACTIONS.UPDATE_STUDENT_ERROR,
  payload,
});

export const deleteStudentRequest = (args: string[]): DeleteStudentRequest => ({
  type: STUDENT_ACTIONS.DELETE_STUDENT_REQUEST,
  args,
});

export const deleteStudentSuccess = (): DeleteStudentSuccess => ({
  type: STUDENT_ACTIONS.DELETE_STUDENT_SUCCESS,
});

export const deleteStudentError = (payload: CommonErrorPayload): DeleteStudentError => ({
  type: STUDENT_ACTIONS.DELETE_STUDENT_ERROR,
  payload,
});

Understanding the code.

No mystery here. On a redux flow we need to set which actions will be part of the state control, and for each CRUD operation I have set a state of REQUEST, SUCCESS and ERROR result. Which you will understand the reason why following below.
One interesting point here is since I am coding in Typescript I can benefit of Enum and Types usage to make our code clearer and more organised.

Reducer

src/redux/reducer/studentReducer.ts

import { STUDENT_ACTIONS } from "redux/actions/studentActions";

const initialState = {
    isGetStudentsLoading: false,
    data: [],
    getStudentsError: null,
    isInsertStudentLoading: false,
    insertStudentError: null,
    isUdpateStudentLoading: false,
    updateStudentError: null,
    isDeleteStudentLoading: false,
    deleteStudentError: null,
};

export default (state = initialState, action) => {
    switch(action.type) {
        case STUDENT_ACTIONS.GET_STUDENTS_REQUEST:
            return {
                ...state,
                isGetStudentsLoading: true,
                getStudentsError: null,
            };
        case STUDENT_ACTIONS.GET_STUDENTS_SUCCESS:
            return {
                ...state,
                isGetStudentsLoading: false,
                data: action.payload,
                getStudentsError: null,
            }; 
        case STUDENT_ACTIONS.GET_STUDENTS_ERROR:
            return {
                ...state,
                isGetStudentsLoading: false,
                data: [],
                getStudentsError: action.payload.error,
            };
        // INSERT
        case STUDENT_ACTIONS.INSERT_STUDENT_REQUEST:
            return {
                ...state,
                isInsertStudentLoading: true,
                insertStudentError: null,
            };
        case STUDENT_ACTIONS.INSERT_STUDENT_ERROR:
            return {
                ...state,
                isInsertStudentLoading: false,
                insertStudentError: action.payload.error,
            };
        // UPDATE
        case STUDENT_ACTIONS.UPDATE_STUDENT_REQUEST:
            return {
                ...state,
                isUdpateStudentLoading: true,
                updateStudentError: null,
            };
        case STUDENT_ACTIONS.UPDATE_STUDENT_ERROR:
            return {
                ...state,
                isUdpateStudentLoading: false,
                updateStudentError: action.payload.error,
            };
        // DELETE
        case STUDENT_ACTIONS.DELETE_STUDENT_REQUEST:
            return {
                ...state,
                isDeleteStudentLoading: true,
                deleteStudentError: null,
            }; 
        case STUDENT_ACTIONS.DELETE_STUDENT_ERROR:
            return {
                ...state,
                isDeleteStudentLoading: false,
                deleteStudentError: action.payload.error,
            };
        default: 
            return {
                ...initialState,
            }
    }
}

src/redux/reducer/rootReducer.ts

import { combineReducers } from "redux";
import studentReducer from "./studentReducer";

const rootReducer = combineReducers({
    entities: combineReducers({
        student: studentReducer,
    }),
});

export type AppState = ReturnType<typeof rootReducer>;

export default rootReducer;

Understanding the code.

Reducers are functions that takes the current state and an action as argument, and return a new state result. In other words, (state, action) => newState.

And in the code above I am setting how the Student state model is going to be according to each action received. As you can see the whole state is not being overwritten, but just the necessary attributes according to the action.

This application only has one reducer, but in most of the cases you will break down your reducers in different classes. To wrap them together we have the rootReducer class. Which basically combines all the reducers in the state.

Selector

In simple words, a "selector" is a function that accepts the state as an argument and returns a piece of data that you desire from the store.
But of course it has more finesse than that, it is an efficient way to keep the store at minimal and is not computed unless one of its arguments changes.

src/redux/selector/studentSelector.ts

import { get } from 'lodash';
import { createSelector } from 'reselect';
import { AppState } from '@redux/reducer/rootReducer';

const entity = 'entities.student';

const getStudentsLoadingState = (state: AppState) => get(state, `${entity}.isGetStudentsLoading`, false);
const getStudentsState = (state:  AppState) => get(state, `${entity}.data`, []);
const getStudentsErrorState = (state: AppState) => get(state, `${entity}.getStudentsError`);
export const isGetStudentsLoading = createSelector(getStudentsLoadingState, (isLoading) => isLoading);
export const getStudents = createSelector(getStudentsState, (students) => students);
export const getStudentsError = createSelector(getStudentsErrorState, (error) => error);

const insertStudentLoadingState = (state: AppState) => get(state, `${entity}.isInsertStudentLoading`, false);
const insertStudentErrorState = (state: AppState) => get(state, `${entity}.insertStudentError`);
export const isInsertStudentLoading = createSelector(insertStudentLoadingState, (isLoading) => isLoading);
export const insertStudentError = createSelector(insertStudentErrorState, (error) => error);

const updateStudentLoadingState = (state: AppState) => get(state, `${entity}.isUdpateStudentLoading`, false);
const updateStudentErrorState = (state: AppState) => get(state, `${entity}.updateStudentError`);
export const isUpdateStudentLoading = createSelector(updateStudentLoadingState, (isLoading) => isLoading);
export const updateStudentError = createSelector(updateStudentErrorState, (error) => error);

const deleteStudentLoadingState = (state: AppState) => get(state, `${entity}.isDeleteStudentLoading`, false);
const deleteStudentErrorState = (state: AppState) => get(state, `${entity}.deleteStudentError`);
export const isDeleteStudentLoading = createSelector(deleteStudentLoadingState, (isLoading) => isLoading);
export const deleteStudentError = createSelector(deleteStudentErrorState, (error) => error);

const isAddSkillsLoadingState = (state: AppState) => get(state, `${entity}.isAddSkillsLoading`, false);
const addSkillErrorState = (state: AppState) => get(state, `${entity}.addSkillsError`);
export const isAddSkillsLoading = createSelector(isAddSkillsLoadingState, (isLoading) => isLoading);
export const addSkillsError = createSelector(addSkillErrorState, (error) => error);

Understanding the code.

With the selector concept on mind, we can take from the code above is that we are returning the desire part of the store we need according to the function created.
For instance in getStudentsLoadingState I don't need to return the whole store to the caller, but only the flag that indicates whether the students are being loaded instead.

Store

The Redux store brings together the state, actions and reducers to the application. Is an immutable object tree that holds the current application state. Is through the store we will access the state info and dispatch actions to update its state information. Redux can have only a single store in your application.
src/redux/store/store.ts

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from '@redux-saga/core';
import { composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from '../reducer/rootReducer';
import logger from 'redux-logger';
import { rootSaga } from '@redux/saga/rootSaga';

const initialState = {};
const sagaMiddleware = createSagaMiddleware();

const store = createStore(rootReducer, initialState, composeWithDevTools(applyMiddleware(sagaMiddleware, logger)));

sagaMiddleware.run(rootSaga)

export default store;

Understanding the code.

For Store creation, it is required to set the Reducer or the Reducers combined and the initial state of the application.

And if you are using a middleware like I am, the middleware is also required to be set into the store. In this case is the class rootSaga which I am describing below.

Saga

According to Saga website:

In redux-saga, Sagas are implemented using Generator functions. To express the Saga logic, we yield plain JavaScript Objects from the Generator. We call those Objects Effects. ...You can view Effects like instructions to the middleware to perform some operation (e.g., invoke some asynchronous function, dispatch an action to the store, etc.).

With Saga we can instruct the middleware to fetch or dispatch data according to an action for example. But of course is more complex than that, but don't worry I will break down and explain the code below into pieces.

With Saga I can set the application to dispatch or fetch APIS according to the action received.
src/redux/saga/studentSaga.ts

import { all, call, put, takeLatest, takeLeading } from "redux-saga/effects";
import StudentModel, { StudentRequest } from '@models/studentModel';
import { formatDate } from '@utils/dateUtils';
import { get } from 'lodash';
import axios from 'axios';
import { isEmpty } from 'lodash';
import { deleteStudentError, getStudentsError, getStudentsRequest, getStudentsSuccess, insertStudentError, STUDENT_ACTIONS, updateStudentError } from "@redux/actions/studentActions";

// AXIOS
const baseUrl = 'http://localhost:3000';
const headers = { 
    'Content-Type': 'application/json',
    mode: 'cors',
    credentials: 'include'
};

const axiosClient = axios;
axiosClient.defaults.baseURL = baseUrl;
axiosClient.defaults.headers = headers;

const getStudentsAsync = (body: StudentRequest) => {
    return axiosClient.post<StudentModel[]>(
        '/student/list', 
        body
    );
}

function* getStudentsSaga(action) {
    try {
        const args = get(action, 'args', {})
        const response = yield call(getStudentsAsync, args);
        yield put(getStudentsSuccess(response.data));
    } catch(ex: any) {
        const error = {
            type: ex.message, // something else can be configured here
            message: ex.message,
        };
        yield put(getStudentsError({error}));
    }
}

const insertStudentsAsync = async (body: StudentModel) => {
    return axiosClient.post(
        '/student',
        body
    )
}

function* insertStudentSaga(action) {
    try {
        const studentModel = get(action, 'args');
        if (studentModel == null) {
            throw new Error('Request is null');
        }
        yield call(insertStudentsAsync, studentModel);

        const getAction = {
            type: STUDENT_ACTIONS.GET_STUDENTS_REQUEST,
            args: {},
        };
        yield call(getStudentsSaga, getAction);
    } catch(ex: any) {
        const error = {
            type: ex.message, // something else can be configured here
            message: ex.message,
        };
        yield put(insertStudentError({error}));
    }
};

const updateStudentAsync = async (body: StudentModel) => {
    return axiosClient.put(
        '/student',
        body
    );
};

/**
 * 
 * @param action {type, payload: StudentModel}
 */
function* updateStudentSaga(action) {
    try {
        const studentModel = get(action, 'args');
        if (studentModel == null) {
            throw new Error('Request is null');
        };
        yield call(updateStudentAsync, studentModel);

        const getStudentRequestAction = getStudentsRequest({});
        yield call(getStudentsSaga, getStudentRequestAction);
    } catch(ex: any) {
        const error = {
            type: ex.message, // something else can be configured here
            message: ex.message,
        };
        yield put(updateStudentError({error}));
    }
};

const deleteStudentsAsync = async (ids: string[]) => {
    return axiosClient.post(
        '/student/inactive',
        {ids}
    );
};

/**
 * 
 * @param action {type, payload: string[]}
 */
 function* deleteStudentSaga(action) {
    try {
        const ids = get(action, 'args');
        if (isEmpty(ids)) {
            throw new Error('Request is null');
        };
        yield call(deleteStudentsAsync, ids);

        const getStudentRequestAction = getStudentsRequest({});
        yield call(getStudentsSaga, getStudentRequestAction);
    } catch(ex: any) {
        const error = {
            type: ex.message, // something else can be configured here
            message: ex.message,
        };
        yield put(deleteStudentError({error}));
    }
};

function* studentSaga() {
    yield all([
        takeLatest(STUDENT_ACTIONS.GET_STUDENTS_REQUEST, getStudentsSaga),
        takeLeading(STUDENT_ACTIONS.INSERT_STUDENT_REQUEST, insertStudentSaga),
        takeLeading(STUDENT_ACTIONS.UPDATE_STUDENT_REQUEST, updateStudentSaga),
        takeLeading(STUDENT_ACTIONS.DELETE_STUDENT_REQUEST, deleteStudentSaga),
    ]);
}

export default studentSaga;

Understanding the code.

Let's break into pieces here:

1 - Exported function studentSaga().

To put it simple, I am telling SAGA to wait for an action and then to perform or call a function. For instance when GET_STUDENTS_REQUEST is dispatched by Redux, I am telling SAGA to call getStudentsSaga method.
But in order to achieve that I have to use the SAGA API, in specific the methods:

takeLatest: Forks a saga on each action dispatched to the store that matches the pattern. And automatically cancels any previous saga task started previously if it's still running. In other words, if GET_STUDENTS_REQUEST is dispatched multiple times, SAGA will cancel the previous fetch and create a new one.
takeLeading: The difference here is that after spawning a task once, it blocks until spawned saga completes and then starts to listen for a pattern again.
yieldAll: Creates an Effect that instructs Saga to run multiple Effects in parallel and wait for all of them to complete. Here we set our actions to the attached Saga fork method to run in parallel in the application.

2 - Updating the Store with SAGA_.

Now that the (action/methods) are attached to Saga effects, we can proceed to the creation of effects in order to call APIS or update the Redux Store.

3 - getStudentsSaga()_ method.

More SAGA API is used here:

yield call: Creates an Effect that calls the function attached with args as arguments. In this case, the function called is an Axios API POST that returns a Promise. And since is a Promise, Saga suspends the generator until the Promise is resolved with response value, if the Promise is rejected an error is thrown inside the Generator.
yield put: Here, I am setting the store with the new Student list data, by creating an Effect that instructs Saga to schedule an action to the store. This dispatch may not be immediate since other tasks might lie ahead in the saga task queue or still be in progress. You can, however expects that the store will be updated with the new state value.

The rest of the class is more of the same flow, I operate the CRUD methods accordingly to the logic and use the same Saga effects necessary to do it.

But Saga offers way more possibilities, don't forget to check it out its API reference for more options.

4 rootSaga.

By this time you might have been wondering, "Where is the rootSaga specified on the Store?".

Below we have the rootSaga class, which follows the same principle as rootReducer. Here we combines all Saga classes created on the application.

src/redux/saga/rootSaga.ts


import { all, fork } from "redux-saga/effects";
import studentSaga from "./studentSaga";

export function* rootSaga() {
    yield all([fork(studentSaga)]);
};

3 - Hook up Redux with React.

Now that all redux flow is set, is time to hoop up with React Components, to do that we just need to attach the Redux Store as a provider to the application.

src/index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import App from 'App';
import { Provider } from 'react-redux';
import store from "@redux/store/store";

ReactDOM.render(
    <Provider store={store}>
        <App/>
    </Provider>, 
    document.getElementById('root')
);

4 - Use of Redux on Components.

For last, we now are able to consume state and dispatch actions from/to Redux, at first we will dispatch an action to tell Redux and Saga to fetch students data.

Note: For the purpose of this article and to focus on Redux I have shortened the code in areas not related to Redux. However, if would be able to check the whole code, you can check tis Git Repository, the link is by the end of this post.

Fetching data.

src/components/home/index.tsx

import React, { useEffect, useState } from "react";
import _ from 'lodash';
import StudentModel, { StudentRequest } from "@models/studentModel";
import StudentForm from "@app/studentForm";
import StudentTable from "@app/studentTable";
import { useDispatch } from "react-redux";
import { createStyles, makeStyles } from '@mui/styles';
import { Theme } from '@mui/material';
import { getStudentsRequest } from "@redux/actions/studentActions";

const useStyles = makeStyles((theme: Theme) =>
    createStyles({...}),
);

export default function Home() {
    const classes = useStyles();
    const dispatch = useDispatch();
    const emptyStudentModel: StudentModel = {
        _id: '',
        firstName: '',
        lastName: '',
        country: '',
        dateOfBirth: '',
        skills: []
    };

    useEffect(() => {
        const args: StudentRequest = {
            name: '',
            skills: [],
        };
        dispatch(getStudentsRequest(args));
    }, []);

    return (
        <div className={classes.home}>
            <StudentForm></StudentForm>   
            <StudentTable></StudentTable>
        </div>
    );
}

Understanding the code.

With the new updates on React and React-Redux framework we can now use specific hooks on functional components to manage our state with Redux.
On the code above through the hook useEffect an action is dispatched to fetch Students data.

useDispatch: This hooks replicates the old mapDispatchToProps method, which is to set dispatch actions to the redux store. And since the code is in typescript, we can take the advantages of passing actions that are already mapped by interfaces. But underneath what is happening is the same as:

dispatch({
  type: 'GET_STUDENTS_REQUEST',
  args: {
    name: '',
    skills: []
  }
})

Saving and reloading state data.

Now that the data is loaded, we can proceed with the rest of CRUD operations.

src/components/studentForm/index.tsx

import { Button, TextField, Theme } from '@mui/material';
import { createStyles, makeStyles } from '@mui/styles';
import React, { useState } from "react";
import { Image, Jumbotron } from "react-bootstrap";
import logo from '@assets/svg/logo.svg';
import StudentModel from "@models/studentModel";
import { useSelector } from "react-redux";
import { isEmpty } from 'lodash';
import { getStudents } from "@redux/selector/studentSelector";
import { insertStudentRequest } from "@redux/actions/studentActions";
import { useDispatch } from "react-redux";

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        {...}
    }),
);

function JumbotronHeader(props) {
    const classes = useStyles();
    const { totalStudents } = props;
    return (
        <Jumbotron .../>
    );
}

export default function StudentForm(props) {
    const students = useSelector(getStudents);
    const dispatch = useDispatch();
    const classes = useStyles();
    const [firstName, setFirstName ] = useState('');
    const [lastName, setLastName] = useState('');
    const [country, setCountry] = useState('');
    const [dateOfBirth, setDateOfBirth] = useState('');
    const totalStudents = isEmpty(students) ? 0 : students.length;

    async function insertStudentAsync() {
        const request: StudentModel = {
            firstName,
            lastName,
            country,
            dateOfBirth,
            skills: [] 
        };
        dispatch(insertStudentRequest(request));
    }

    return (
        <div className={classes.header}>
            <JumbotronHeader totalStudents={students.length}/>
            <form>
                 // Form Components
                 {...}
                <Button 
                    id="insertBtn"
                    onClick={() => insertStudentAsync()}>
                    Insert
                </Button>
            </form>
        </div>
    );
}

Highlights

What is important to here is when the button is clicked a Redux Action is dispatched by useDispatch hook, to insert student data on database and also to refresh the student list afterwards.

src/components/studentTable/index.tsx

import React, { useEffect, useState } from "react";
import StudentModel from "@models/studentModel";
import { isEmpty } from 'lodash';
import { getStudents, isGetStudentsLoading } from "@redux/selector/studentSelector";
import { deleteStudentRequest, updateStudentRequest } from "@redux/actions/studentActions";
import { useDispatch, useSelector } from "react-redux";
import { shadows } from '@mui/system';
import { createStyles, makeStyles } from '@mui/styles';
import {...} from '@mui/material';
import { KeyboardArrowDown, KeyboardArrowUp } from '@mui/icons-material'

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        {...}
    }),
);

function getSkillsSummary(skills: string[]) {
    {...}
}

function SkillsDialog(props: {
    openDialog: boolean,
    handleSave,
    handleClose,
}) {
    const {
        openDialog,
        handleSave,
        handleClose
    } = props;
    const classes = useStyles();
    const [open, setOpen] = useState(false);
    const [inputText, setInputText] = useState('');

    useEffect(() => {
        setOpen(openDialog)
    }, [props]);

    return (
        <Dialog
            open={open}
            onClose={handleClose}>
         {...}
        </Dialog>
    )
}

function Row(
    props: {
        student: StudentModel,
        handleCheck
    }
) {
    const classes = useStyles();
    const dispatch = useDispatch();
    const { student, handleCheck } = props;
    const [open, setOpen] = useState(false);
    const [openDialog, setOpenDialog] = useState(false);

    const openSkillsDialog = () => {...};

    const closeSkillsDialog = () => {...};

    async function saveSkillsAsync(newSkill: string) {
        const skills = student.skills;
        skills.push(newSkill);

        const request: StudentModel = {
            _id: student._id,
            firstName: student.firstName,
            lastName: student.lastName,
            country: student.country,
            dateOfBirth: student.dateOfBirth,
            skills: skills 
        };

        dispatch(updateStudentRequest(request));
        closeSkillsDialog();
    }

    return (
        <React.Fragment>
            <TableRow ...>
                {...}
            </TableRow>
            <TableRow>
                <TableCell ...>
                    <Collapse ...>
                        <Box className={classes.innerBox}>
                            <Typography ...>
                            <Table ...>
                                <TableBody>
                                    <Button...>

                                    {student.skills.map((skill) => (
                                        <TableRow key={skill}>
                                            <TableCell ...>
                                        </TableRow>
                                    ))}
                                    <SkillsDialog
                                        openDialog={openDialog}
                                        handleClose={closeSkillsDialog}
                                        handleSave={saveSkillsAsync}
                                    />
                                </TableBody>
                            </Table>
                        </Box>
                    </Collapse>
                </TableCell>
            </TableRow>
        </React.Fragment>
    );
}

export default function StudentTable() {
    const dispatch = useDispatch();
    const students: StudentModel[] = useSelector(getStudents);
    const isLoading: boolean = useSelector(isGetStudentsLoading);
    const [selectedAll, setSelectedAll] = useState(false);
    const [studentList, setStudentList] = useState<StudentModel[]>([]);

    useEffect(() => {
        setStudentList(students);
    }, [students]);

    useEffect(() => {
        {...}
    }, [studentList]);

    const handleCheck = (event, id) => {
        {...}
    }

    const handleSelectAll = (event) => {
        {...}
    }

    async function deleteStudentsAsync() {
        const filter: string[] = studentList
            .filter(s => s.checked === true)
            .map(x => x._id || '');
        if (!isEmpty(filter)) {
            dispatch(deleteStudentRequest(filter));
        };
    }

    const LoadingCustom = () => {...}

    return (
        <TableContainer component={Paper}>
            {
                isLoading && (
                    <LoadingCustom />
                )
            }
            {!isLoading && (
                <Table aria-label="collapsible table">
                    <TableHead>
                        <TableRow>
                            <TableCell>
                                <Checkbox ... />
                            </TableCell>
                            <TableCell>
                                <Button
                                    variant="contained"
                                    color="primary"
                                    onClick={() => deleteStudentsAsync()}>
                                    Delete
                                </Button>
                            </TableCell>
                            <TableCell>{...}</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {studentList.map((row) => {
                            return (
                                <Row .../>
                            );
                        })}
                    </TableBody>
                </Table>
            )}
        </TableContainer>
    );
}

Highlights

useSelector: Similar to useDispatch this hook replicates mapStateToProps redux old method. Allows you to extract data from the Redux store state, using a selector function. In our example I am loading students list data from store.

As for the rest of CRUD operations I continue to use useDispatch to perform the actions necessary.

Final Considerations and GIT.

With the new behaviour of functional components creation in React. React-Redux hooks extends Redux lifetime. Otherwise I would not recommend using Redux instead of RxJS for example. Furthermore, using SAGA as middleware make the application even more robust, which allows us to control the effects of asynchronous calls through the system.

If you have stayed until the end, thank you very much. And please let me know your thoughts about the usage of Redux on current present.

You can check the whole code of the project on its git repository: MERN-CLIENT-REDUX.

See ya.

A MERN stack update for 2021. - Part B: Client side.

alanst32 — Thu, 23 Sep 2021 11:50:16 +0000

Hello there!
Since my last post my life have changed a lot, I've changed my job. Now I am a lead developer for Westpac Australia, and recently became a father. So it has been difficult to find times to come back here to finish my MERN 2021 article. But at last here we are.

To recap, the purpose of the article is to discuss a modern approach to a MERN stack, having a integration with Cloud solution (Azure) and use modern frameworks on the development like React, Typescript, RxJs and others.

On the first part I have described the server side solution of the MERN stack for our CRUD application. You can review it here: MERN Server-side

Now I will discuss the approach on the client side aspects like:

Webpack & Typescript ES6 configuration.
Client side NodeJS server
Observables with RxJS implementation
React modern implementation
Test cases
Requirments for this article:
React, NodeJS and Typescript basic knowledge.

MERN CLIENT-SIDE.

1 - Client Project.

The project consists on the UI development of the CRUD via configuration, UI and services implementation. Most of the project was developed by Typescript ES6 instead of standard Javascript. So for the bundle translation, it is used Webpack and Babel.

The CRUD app consists in a simple Students database, the user would be able to insert, delete a student, or to add new Skills.

Frameworks

React
Webpack 5
Babel
ExpressJS
Typescript
RxJS
Ts-node

Project structure

Node Server

On /server.ts is configured the NodeJs server of the project.

import express from 'express';
import path from 'path';
import bodyParser from 'body-parser';
import { dirname } from 'path';
import { fileURLToPath } from 'url';
import {Router} from 'express';
//==================================================================================

const app = express();
app.use(express.static(path.join('./')));
app.use(express.static('./src/components'));
app.use(express.static('./src/assets'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

const router = Router();
router.get('/', (req, res) => {
    console.log('got in the client router');
    res.render('index');
});
app.use('/', router);

// set engine for rendering
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, './src'));

const PORT = process.env.PORT || 4200;
//Express js listen method to run project on http://localhost:4200
app.listen(PORT, () => console.log(`App is running in ${process.env.NODE_ENV} mode on port ${PORT}`))

/nodemon.json Here we configure nodemon, which is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected..

{
    "watch": ["src", "dist"],
    "ext": "ts,js,tsx,jsx,ejs,scss,css",
    "exec":  "ts-node ./server.ts"
}

Understanding the code.

One piece of MERN stack is [ExpressJS], (https://expressjs.com), a flexible Node.js web application framework that provides quick and easy APIs creation. It is through ExpressJs that the client project will access its Api's services. But before that, we need to configure Express in our server. On configuration above we set the static files directory and configure Express to expects requests that have "application/json" Content-Type headers and transform the text-based JSON input into JS-accessible variables under req.body.

Also I set Express to route path "/" to our home page. Then configure the server port to 4200.

As mentioned, I am using Typescript to set the server and rest of the components. Thus, we need to set the transformation of ES6 to CommonJs in the bundle file.

webpack.config.cjs

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpackNodeExternals = require('webpack-node-externals');
const isProduction = typeof NODE_ENV !== 'undefined' && NODE_ENV === 'production';
const devtool = isProduction ? false : 'inline-source-map';
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

const clientConfig = {
    entry: './src/index.tsx',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    // plugins: [new HtmlWebpackPlugin()], 
    resolve: {
        extensions: ['.js', '.jsx', '.json', '.ts', '.tsx', '.ejs'],
        plugins: [new TsconfigPathsPlugin()],
    },
    devtool: 'inline-source-map', // Enable to debug typescript code
    module: {
        rules: [
            {
                test: /\.(jsx|js)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-react', '@babel/preset-env'],
                        }
                    }
                ]
            },
            {
                test: /\.(tsx|ts)$/,
                use: 'ts-loader',
                exclude: /node_modules/
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // Creates `style` nodes from JS strings
                    'style-loader',
                    // Translates CSS into CommonJS
                    'css-loader',
                    // Compiles Sass to CSS
                    'sass-loader',
                ],
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'src/images/',
                            name: '[name][hash].[ext]',
                        },
                    },
                ],
            }
        ]
    }
};

module.exports = [clientConfig];

/babel.config.json

{
    "presets": [
        ["@babel/env"],
        ["@babel/preset-react"]
    ],
    "plugins": ["react-hot-loader/babel"]
}

As the last part of ES6 configuration, I set on ts.config file the bundle file location, the module to be used on the parsing and the most important Module resolution, which in our case is Node.
/tsconfig.json

{
    "compilerOptions": {
        "baseUrl": "./src",
        "outDir": "./dist/",
        "noImplicitAny": false,
        "module": "CommonJs",
        "target": "ESNext",
        "moduleResolution": "node",
        "jsx": "react",
        "allowJs": true,
        "strict": true,
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "esModuleInterop" : true,
        "typeRoots": [
            "./node_modules/@types"
        ],
        "lib": [
            "ESNext",
            "DOM"
        ], 
        "paths": {
            "@assets/*": ["assets/*"],
            "@app/*": ["components/*"],
            "@services/*": ["services/*"],
            "@models/*": ["models/*"]
        }
    },
    "include": [
        "./",
        "./src/assets/index.d.ts"
    ]
}

App Init Configuration.

Now with server and ES6 parse configuration set we can finally move one with the development of our CRUD UI.

src/index.ejs

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="Alan Terriaga - MERN stack 2021 updated">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
    <title>MERN 2021</title>
    </head>
    <body>
        <div id="root"></div>
    </body>
    <script src="../dist/bundle.js"></script>
</html>

src/index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import App from 'App';

ReactDOM.render(<App/>, document.getElementById('root'));

src/App.tsx

import * as React from "react";
import Home from '@app/home';

export default function App() {
    return (
        <Home></Home>
    );
}

Understanding the code.

No secrets so far, on index.ejs we import the common stylesheet libraries and the directory of the javascript bundle file generated by Webpack. Then, we link it to App and Home components as main entry to our CRUD application.

It is now that the app becomes interesting, but before describing our components I would like to show first the service class and how RxJS is used to publish API responses to new events.

Students Service Class.

src/services/student-service.ts

import { RestoreTwoTone } from "@material-ui/icons";
import StudentModel from "@models/student-model";
import axios, { AxiosResponse } from "axios";
import { Subject } from "rxjs";

export interface StudentRequest {
    name: string,
    skills: string[]
}

// AXIOS
const baseUrl = 'http://localhost:3000';
const headers = { 
    'Content-Type': 'application/json',
    mode: 'cors',
    credentials: 'include'
};

const axiosClient = axios;
axiosClient.defaults.baseURL = baseUrl;
axiosClient.defaults.headers = headers;

// GET Clients
const getStudentsSubject = new Subject<StudentModel[]>();
const getStudentsObservable = () => getStudentsSubject.asObservable();

const getStudents = async (body: StudentRequest) => {
    axiosClient.post<StudentModel[]>(
        '/student/list', 
        body
    )
    .then((res) => {
        console.log(`res.data: ${JSON.stringify(res.data)}`);
        res.data.forEach((res) => res.dateOfBirth = formatDate(res.dateOfBirth));
        getStudentsSubject.next(res.data);
    })
    .catch(ex => console.error(ex));
}

function formatDate(dob: string): string {
    const obj = new Date(dob);
    const aux = (obj.getMonth()+1);
    const month =  (aux < 10) ? `0${aux}` : aux;
    return `${obj.getDate()}/${month}/${obj.getFullYear()}`;
}

// INSERT STUDENT
const insertStudents = async (body: StudentModel) => {
    axiosClient.post(
        '/student',
        body
    )
    .catch(ex => console.error(ex));
}

const updateStudent = async (body: StudentModel) => {
    axiosClient.put(
        '/student',
        body
    )
    .catch(ex => console.error(ex));
}

const deleteStudents = async (ids: string[]) => {
    axiosClient.post(
        '/student/inactive',
        {ids}
    )
    .then((res) => {
        return;
    })
    .catch(ex => console.error(ex));
}

export {
    getStudents,
    getStudentsObservable,
    insertStudents,
    updateStudent,
    deleteStudents
}

Understanding the code.

To request the APIS I have decided to use AXIOS as HTTP client, is a framework that has been around for a while and works really well, so I've seen no reason to change it on this matter. If you are not familiar with AXIOS please check its official website Axios-http.

Publishing events on RxJS.

According to the official website RxJS:

"RxJS is a library for composing asynchronous and event-based programs by using observable sequences. It provides one core type, the Observable, satellite types (Observer, Schedulers, Subjects) and operators inspired by Array#extras (map, filter, reduce, every, etc) to allow handling asynchronous events as collections."

In other words, is a framework that allows event asynchronously and any class that subscribe this event will listen the events when triggered. You might are familiar with event based frameworks, we have another examples like Kafka, Redux. I've seen the use of RxJS much more common on Angular application nowadays, although is works really fine in React apps as well.

To understand better how it works, let's get our attention to the GET post. First of all you would need to create a Subject class (Subject is similar to a EventEmitter class) is the only way to multicast messages/objects across the listeners.

With the help of Typescript and ES6 we can use Generics in our favour and map the Subject object as type of StudentModel interface.
Moving forward, you can see that after getting the response of Clients API I am publishing the response object into the Subject class. This will trigger a multicast for the active classes that are listening this event.

In order to reach that goal, you would notice also the Observable object created from the Subject. An Observable represents the idea of an invokable collection of future values or events, is through the Observable we will be able to lister the EventEmitter. Which is out next step.

Components and listening RxJS.

There is a lot to cover here, but to summarise the code we have our Home Component which is divided into StudentForm with the input fields and Insert Function. And StudentTable with the results of GET APIS.

src/components/home/index.tsx

import React, { useEffect, useState } from "react";
import StudentForm from '@app/home/student-form';
import UserTable from '@app/home/student-table';
import {getStudents, getStudentsObservable} from '@services/student-service';
import _ from 'lodash';
import StudentModel from "@models/student-model";
import StudentTable from "@app/home/student-table";
import { makeStyles, Theme, createStyles } from "@material-ui/core";

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        home: {
            width: '98%',
            justifyContent: 'center',
            textAlign: 'center',
            margin: 'auto'
        }
    }),
);

export default function Home() {
    const classes = useStyles();
    const[totalStudents, setTotalStudents] = useState(0);
    const[name, setName] = useState('');
    const[skills, setSkills] = useState<string[]>([]);
    const[students, setStudents] = useState<StudentModel[]>([]);
    const emptyStudentModel: StudentModel = {
        _id: '',
        firstName: '',
        lastName: '',
        country: '',
        dateOfBirth: '',
        skills: []
    };

    useEffect(() => {
        const request = {
            name,
            skills
        }
        getStudents(request);
    }, []);

    useEffect(() => {
        const subscription = getStudentsObservable().subscribe((list: StudentModel[]) => {
            if (!_.isEmpty(list)) {
                const size: number = list.length;
                const aux: StudentModel[] = list;
                setTotalStudents(users => size);
                list.forEach(x => x.checked = false);
                setStudents(list);
            }
            else {
                setTotalStudents(students => 0);
                setStudents(students => []);
            } 
        });

        return subscription.unsubscribe;
    },[]);

    return (
        <div className={classes.home}>
            <StudentForm totalStudents={totalStudents}></StudentForm>   
            <StudentTable students={students}></StudentTable>
        </div>
    );
}

Understanding the code.

Two major factors to pay attention here. First, since I am using functional components instead of React.Component classes, I am using the new (not so new) approach of React Hooks to control props and states changes. Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. React-Hooks.

I am using the hook UseState to create the state variables and the Hook UseEffect to call Get Students API.
When you use UseEffect hook you tell React that your component needs to do something after render, if you specify a prop in the array you tell React to execute UseEffect only after that prop is changed. However, since I am not specifying a prop, I am telling React to execute UseEffect at first time the component is rendered. One cool feature to highlight here is since we are using Typescript we can set Generic types to our UseState hooks

The second factor here is the use of UseState to listen RxJS event GetStudents from the Observable object. As explained above when the EventEmitter is triggered the Observable class will listen and receive the object specified, in our case the list of Students. Which after that we only need to update our state variables for the next components.

src/components/home/student-form/index.tsx

import { Button, TextField, createStyles, makeStyles, Theme } from "@material-ui/core";
import React, { useState } from "react";
import { Image, Jumbotron } from "react-bootstrap";
import ReactImage from '@assets/svg/react.svg';
import { insertStudents, getStudents } from '@services/student-service';
import StudentModel from "@models/student-model";

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        header: {
            display: 'inline-block',
            width: '100%',
            marginBottom: '20px',
        },
        jumbotron: {
            height: '300px',
            width: '100%',
            display: 'grid',
            justifyContent: 'center',
            margin: 'auto',
            backgroundColor: 'lightblue',
            marginBottom: '10px',
        },
        form: {
            display: 'flex',
            justifyContent: 'center'
        },
        infoBox: {
            display: 'flex',
            justifyContent: 'center',
            verticalAlign: 'center'
        },
        labelStyle: {
            fontSize: '32px',
            fontWeight: 'bold',
            verticalAlign: 'center'
        },
        insertBtn: {
            marginLeft: '20px'
        }
    }),
);

function JumbotronHeader(props) {
    const classes = useStyles();
    const { totalStudents } = props;
    return (
        <Jumbotron className={classes.jumbotron}>
            <Image src={ReactImage}/>
            <h1>Students skills list: {totalStudents}</h1>
        </Jumbotron>
    );
}

export default function StudentForm(props) {
    const classes = useStyles();
    const [firstName, setFirstName ] = useState('');
    const [lastName, setLastName] = useState('');
    const [country, setCountry] = useState('');
    const [dateOfBirth, setDateOfBirth] = useState('');

    async function insertStudentAsync() {
        const request: StudentModel = {
            firstName,
            lastName,
            country,
            dateOfBirth,
            skills: [] 
        };
        await insertStudents(request);
        await getStudents({
            name: '',
            skills: []
        });
    }

    const { totalStudents } = props;

    return (
        <div className={classes.header}>
            <JumbotronHeader totalStudents={totalStudents}/>
            <form 
                className={classes.form}
                noValidate 
                autoComplete="off">
                <TextField 
                    id="firstName" 
                    label="First Name" 
                    variant="outlined" 
                    onChange={e => setFirstName(e.target.value)}/>
                <TextField 
                    id="lastName" 
                    label="Last Name" 
                    variant="outlined"
                    onChange={e => setLastName(e.target.value)}/>
                <TextField 
                    id="country" 
                    label="Country" 
                    variant="outlined"
                    onChange={e => setCountry(e.target.value)}/>
                <TextField 
                    id="dateOfBirth" 
                    label="DOB"
                    type="date" 
                    variant="outlined"
                    InputLabelProps={{
                        shrink: true,
                    }}
                    onChange={e => setDateOfBirth(e.target.value)}/>
                <Button 
                    id="insertBtn"
                    className={classes.insertBtn}
                    variant="contained" 
                    color="primary"
                    onClick={() => insertStudentAsync()}>
                    Insert
                </Button>
            </form>
        </div>
    );
}

src/components/student-table/index.tsx

import { 
    Box, 
    Collapse, 
    IconButton, 
    Table, 
    TableCell, 
    TableHead, 
    TableBody, 
    TableRow, 
    Typography, 
    TableContainer,
    Checkbox,
    Button,
    createStyles,
    Dialog,
    DialogActions,
    DialogContent,
    DialogTitle,
    makeStyles,
    TextField,
    Theme
} from "@material-ui/core";
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
import Paper from '@material-ui/core/Paper';
import React, { useEffect, useState } from "react";
import StudentModel from "@models/student-model";
import { isEmpty } from 'lodash';
import { 
    getStudents, 
    updateStudent,
    deleteStudents
} from '@services/student-service';

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        userTable: {
            width: "100%",
            marginTop: "20px"
        },
        innerTable: {
            padding: "0px !important"
        },
        innerBox: {
            padding: "16px"
        },
        innerTableNoBottom: {
            padding: "0px !important",
            borderBottom: "0px !important"
        },
        skillsDialog: {
            width: "600%"
        },
        dialog: {
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
        },
        input: {
            width: "300px"
        },
        paper: {
            minWidth: "600px",
            backgroundColor: theme.palette.background.paper,
            border: '2px solid #000',
            boxShadow: theme.shadows[5],
            padding: theme.spacing(2, 4, 3),
        },
    }),
);

function getSkillsSummary(skills: string[]) {
    const summary: string = new Array(skills).join(",");
    return summary.length > 6 ? 
        `${summary.substring(0, 6)}...` :
        summary;
}

function SkillsDialog(props: {
    openDialog: boolean,
    handleSave,
    handleClose,
}) {
    const {
        openDialog,
        handleSave,
        handleClose
    } = props;
    const classes = useStyles();
    const [open, setOpen] = useState(false);
    const [inputText, setInputText] = useState('');

    useEffect(() => {
        setOpen(openDialog)
    }, [props]);

    return (
       <Dialog
            classes={{ paper: classes.paper}}
            open={open}
            onClose={handleClose}
            aria-labelledby="form-dialog-title">
                <DialogTitle id="form-dialog-title">Add a skill</DialogTitle>
                <TextField
                    autoFocus
                    className={classes.input}
                    margin="dense"
                    id="name"
                    onChange={e => setInputText(e.target.value)}
                />
                <DialogActions>
                    <Button 
                        color="primary"
                        onClick={() => handleClose()}>
                        Cancel
                    </Button>
                    <Button 
                        color="primary"
                        onClick={() => handleSave(inputText)}>
                        OK
                    </Button>
                </DialogActions>
        </Dialog>
    )
}

function Row(
    props: {
        student: StudentModel,
        handleCheck
    }
) {
    const classes = useStyles();
    const {student, handleCheck} = props;
    const [open, setOpen] = useState(false);
    const [openDialog, setOpenDialog] = useState(false);

    const openSkillsDialog = () => {
        setOpenDialog(true);
    }

    const closeSkillsDialog = () => {
        setOpenDialog(false);
    }

    async function saveSkillsAsync(newSkill: string) {
        const skills = student.skills;
        skills.push(newSkill);

        const request: StudentModel = {
            _id: student._id,
            firstName: student.firstName,
            lastName: student.lastName,
            country: student.country,
            dateOfBirth: student.dateOfBirth,
            skills: skills 
        };
        await updateStudent(request);
        await getStudents({
            name: '',
            skills: []
        });
        closeSkillsDialog();
    }

    return (
        <React.Fragment>
            <TableRow 
                className={classes.userTable}
                tabIndex={-1}
                key={student._id}
                role="checkbox">
                <TableCell padding="checkbox">
                    <Checkbox 
                        id={student._id}
                        onChange={(event) => handleCheck(event, student._id)}
                        checked={student.checked} 
                        inputProps={{'aria-labelledby': student._id}}/>
                </TableCell>
                <TableCell>
                    <IconButton 
                        aria-label="expand row"
                        size="small"
                        onClick={() => setOpen(!open)}>
                        {open ? <KeyboardArrowUpIcon/> : <KeyboardArrowDownIcon/>}
                    </IconButton>
                </TableCell>
                <TableCell scope="student">
                    {`${student.firstName} ${student.lastName}`} 
                </TableCell>
                <TableCell>
                    {student.dateOfBirth}
                </TableCell>
                <TableCell>
                    {student.country}
                </TableCell>
                <TableCell>
                    {getSkillsSummary(student.skills)}
                </TableCell>
            </TableRow>
            <TableRow>
                <TableCell 
                    className={open ? classes.innerTable: classes.innerTableNoBottom }
                    colSpan={6}>
                    <Collapse in={open}
                        timeout="auto"
                        unmountOnExit>
                        <Box className={classes.innerBox}>
                            <Typography 
                                variant="h5"
                                gutterBottom
                                component="div">
                                Skills
                            </Typography>
                            <Table size="small"
                                aria-label="skills">
                                <TableBody>
                                <Button 
                                    variant="contained" 
                                    color="primary"
                                    onClick={() => openSkillsDialog()}>
                                    Add Skill
                                </Button>
                                    {student.skills.map((skill) => (
                                         <TableRow key={skill}>
                                             <TableCell 
                                                component="th" 
                                                scope="skill">
                                                 {skill}
                                             </TableCell>
                                         </TableRow>
                                    ))}
                                    <SkillsDialog 
                                        openDialog={openDialog} 
                                        handleClose={closeSkillsDialog}
                                        handleSave={saveSkillsAsync}
                                    />
                                </TableBody>
                            </Table>
                        </Box>
                    </Collapse>
                </TableCell>
            </TableRow>
        </React.Fragment>    
    );
}

export default function StudentTable(props: {students: StudentModel[]}) {
    const [selectedAll, setSelectedAll] = useState(false);
    const [studentList, setStudentList] = useState<StudentModel[]>([]);

    useEffect(() => {
        setStudentList(props.students);
    }, [props]);

    const handleCheck = (event, id) => {
        const auxList = studentList;
        setStudentList((prevList) => {
            const aux = prevList.map(s => {
                const check = (s._id === id) ? event.target.checked : 
                    s.checked;
                return {
                    _id: s._id,
                    firstName: s.firstName,
                    lastName: s.lastName,
                    dateOfBirth: s.dateOfBirth,
                    country: s.country,
                    skills: s.skills,
                    checked: check
                }
            });
            return aux;
        });
    }

    const handleSelectAll = (event) => {
        const check = event.target.checked;
        setSelectedAll(check);
        setStudentList((prevList) => {
            const aux = prevList.map(s => {
                return {
                    _id: s._id,
                    firstName: s.firstName,
                    lastName: s.lastName,
                    dateOfBirth: s.dateOfBirth,
                    country: s.country,
                    skills: s.skills,
                    checked: check
                }
            });
            return aux;
        });
    }

    useEffect(()=> {
        if(!isEmpty(studentList)) {
            const filter = studentList.filter(s => !s.checked);
            setSelectedAll((prevChecked) => isEmpty(filter));
        }
    }, [studentList]);

    async function deleteStudentsAsync() {
        const filter: string[] = studentList
            .filter(s => s.checked === true)
            .map(x => x._id || '');
        if (!isEmpty(filter)) {
            await deleteStudents(filter);
            await getStudents({
                name: '',
                skills: []
            });
        }
    }

    return (
        <TableContainer component={Paper}>
            <Table aria-label="collapsible table">
                <TableHead>
                    <TableRow>
                        <TableCell>
                        <Checkbox
                            value={selectedAll}
                            checked={selectedAll}
                            onChange={(event) => handleSelectAll(event)}
                            inputProps={{ 'aria-label': 'Select all students' }} />
                        </TableCell>
                        <TableCell>
                        <Button 
                            variant="contained" 
                            color="primary"
                            onClick={() => deleteStudentsAsync()}>
                            Delete
                        </Button>
                        </TableCell>
                        <TableCell>Name</TableCell>
                        <TableCell>DOB</TableCell>
                        <TableCell>Country</TableCell>
                        <TableCell>Skills</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {studentList.map((row) => {
                        return (
                            <Row 
                                key={row._id} 
                                student={row} 
                                handleCheck={handleCheck} />
                        );
                    })}
                </TableBody>
            </Table>
        </TableContainer>
    );
}

Understanding the code.

For the rest of the components, there is nothing here to explain that we didn't covered on the Home component above. The only exception is when we insert a new Student, the Get method is called straight after which eventually will generate a new event and trigger GetStudents observable to update the list.

I hope I could be clear with this enormous post, and if you have stayed with me until this end, thank you very much.
Don't forget to check it out the project on Github: mern-azure-client
Please feel free to comments for suggestions or tips.
See ya.
Alan Terriaga.

A MERN stack update for 2021. - Part A: Server-side.

alanst32 — Fri, 09 Apr 2021 10:12:34 +0000

Hello there.

My name is Alan Terriaga, and I am a software engineer who likes to write about new tech, devops and most of all, share and learn new ideas.
This is my first post here on Dev. Before, I used to write on my own website. But with time, I have found that having a platform like Medium or Dev.to would serve my needs better. So far, I have chosen Dev.to, and for now, I am liking what I am seeing.

A while ago, I wrote how to create a MERN stack with the frameworks we are familiar with: Mongo, ExpressJS, ReactJS and NodeJS. Although creating a project from that post would work, the code would not serve today's necessities. And as we know, we need to adapt and evolve for the current frameworks to improve our skills and work.

Therefore, I have decided as my first article is how to create a MERN stack using current frameworks. And beyond that, how to adapt a MERN stack on a cloud database and cloud development. The solution is a simple Students CRUD application divided by two projects: the server side and the other the client.

For this first part of the article, we will cover the server-side of the project and aspects like:

The creation of Mongo database on Azure CosmosDB
The server-side NodeJS server
The creation of the API services.
Webpack & Typescript ES6 configuration.

As I continue to describe the project below, I will point new techniques we can use to improve and facilitate our work. Details that we didn't have some years or months ago.

Requirments for this article:
Mongo, NodeJS and Typescript basic knowledge.
Azure free subscription.

MERN SERVER-SIDE.

1 - MongoDB on Azure CosmosDB.

As we know, MongoDB is a document database, which means it stores data in JSON-like documents. And Azure CosmosDB is a fully managed NoSQL database service that guarantees 99.999-per cent availability and open source Apis for MongoDB and Cassandra. Companies like Coca-Cola and Symantec are using Cosmos DB solutions. You can learn more about Azure Cosmos DB at https://azure.microsoft.com/en-au/services/cosmos-db/#featured.
*If you are not interested in Azure CosmoDB or have a preference in AWS DynamoDB is ok. It won't impact the development of the APIs.

On Azure Portal goes to Azure Cosmos DB:

Add database
Select your Azure Subscription.
Select or Create a Resource Group.
API: Azure Cosmos DB for MongoDB API
Location: At your convenience.
Account Type: Non-Production (for Azure free subscription)
Availability Zones: Disabled.
Review and create: It will take some minutes.

2 - Server Project.

The project consists of one server configuration, two routes, one service and one model class. Most of the project was developed by Typescript ES6 instead of standard Javascript, even in the server configuration. So for the bundle translation, it is used Webpack and Babel.

Frameworks

NodeJs
Nodemon
Webpack 5
Babel
ExpressJS
Typescript
Mongoose
Ts-node

Project structure

Node Server

On src/index.ts is configured the NodeJs server of the project.

import express from 'express';
import bodyParser from 'body-parser';
import dotenv from 'dotenv';
import mongoose from 'mongoose';
import router from './routes/index.routes';

//==================================================================================
// Setting the application
dotenv.config();

// Connect to the Azure Cosmos DB
mongoose.Promise = global.Promise;
mongoose.connect(
        `${process.env.DATABASE_URI}`, 
        {useNewUrlParser: true}
    )
    .then(() => {
        return console.log(`DB Connected`);
    })
    .catch(error => {
        console.log("Error connecting to database: ", error);
        return process.exit(1);
    });

const db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', () => console.log('LOG: database connected'));

const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
// CORS config
app.use( (req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*"); // update to match the domain you will make the request from
    res.header("Access-Control-Allow-Credentials", "true");
    res.header("Access-Control-Allow-Headers", "*");
    res.header("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS");
    next();
});
app.use('/', router);

const PORT = process.env.PORT || 3000;
//Express js listen method to run project on http://localhost:3000
app.listen(PORT, () => console.log(`App is running in ${process.env.NODE_ENV} mode on port ${PORT}`));

Understanding the code.

First of all, the project loads the environment variables. For that is used dotenv. A npm library that allows you to create environment variables instead of specifying sensitive data inside the server file. After the installation, you need to create a .env file on your project's root, like the example below.

NODE_ENV=development
PORT=3000
DATABASE_URI=<mongoURI>

By the way, if you are using Azure like me, you can collect the database URI on Azure console > Your db > Settings > Connection String

Now, with our environment variables set, we can connect to Azure using Mongoose.
The other piece of MERN stack is [ExpressJS], (https://expressjs.com), a flexible Node.js web application framework that provides quick and easy APIs creation. It is through ExpressJs that the client project will access its Api's services. But before that, we need to configure Express in our server.

const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
// CORS config
app.use( (req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*"); // update to match the domain you will make the request from
    res.header("Access-Control-Allow-Credentials", "true");
    res.header("Access-Control-Allow-Headers", "*");
    res.header("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS");
    next();
});
app.use('/', router);

The code above set the project only to accept and parses JSON on the requests. It also sets the CORS configuration, if you want your project to use HTTPS protocol, you have to set Header and Methods allowed to be accessed. For last I set Express to route path "/" to router class, which is described further this post.

As you noticed, I am using typescript to set the server. To work, we need to set Webpack, Ts-loader and Babel to parse Typescript to CommonJs in the bundle file.
/webpack.config.cjs

const path = require('path');
const webpackNodeExternals = require('webpack-node-externals');
const isProduction = typeof NODE_ENV !== 'undefined' && NODE_ENV === 'production';
const devtool = isProduction ? false : 'inline-source-map';

const serverConfig = {
    target: 'node', 
    entry: './src/index.ts', // Server NodeJs file
    output: {
        path: path.join(__dirname, 'dist'), // Specify bundle location directory
        filename: 'bundle.js',
    },
    externals: [webpackNodeExternals()], // Does not include code from node_modules in the server-side bundle
    devtool: 'inline-source-map',
    resolve: {
        extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'], // Specify extensions used in the project
    },
    module: {
        rules: [
            {
                test: /\.(tsx|ts)$/,
                use: 'ts-loader', // With ts-loader tsx adn ts files are translated to bundle.
                exclude: /node_modules/
            }
        ]
    }
};

module.exports = [serverConfig];

/babel.config.json

{
    "presets": [
        ["@babel/env"]
    ]
}

As the last part of ES6 configuration, I set on ts.config file the bundle file location, the module to be used on the parsing and the most important Module resolution, which in our case is Node.
/ts.config.json

{
    "compilerOptions": {
        "baseUrl": "./src",
        "outDir": "./dist/",
        "noImplicitAny": false,
        "module": "CommonJs",
        "target": "ESNext",
        "moduleResolution": "node",
        "allowJs": true,
        "strict": true,
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "esModuleInterop" : true,
        "typeRoots": [
            "node_modules/@types"
        ],
        "lib": [
            "ESNext",
            "DOM"
        ]
    },
    "include": [
        "./src"
    ]
}

Now that we have set our server, connected to CosmosDB, configured the project to parse ES6 to CommonJS, we can now create our APIs.

Defining routes.

Through Express Router, I create a standard route to test the project and other to persist with CRUD operations.
src/routes/index.routes.ts

import {Router} from 'express';
import studentRouter from './student.routes';

const router = Router();

router.get('/', (req, res) => {
    res.status(200).send('MERN Azure running - Server');
});

router.use('/student', studentRouter);

export default router;

src/routes/student.routes.ts

import { Request, Response, Router } from 'express';
import { StudentInterface, StudentSearchRequestDto } from '../model/student.model';
import { 
    getStudents, 
    insertStudent, 
    updateStudent,
    deleteStudent
} from '../service/student.service';
import moment from 'moment';
const studentRouter = Router();

/**
 * POST: Get Students list
 */
studentRouter.post('/list', (req: Request<StudentSearchRequestDto>, res: Response) => {
    getStudents(req, res);
});

/**
 * POST: Insert Student
 */
studentRouter.post('/', (req: Request<StudentInterface>, res: Response) => {
    insertStudent(req, res);
});

/**
 * PUT: Update Student
 */
studentRouter.put('/', (req: Request<StudentInterface>, res: Response) => {
    if(req.body && req.body.dateOfBirth) {
        const dateMomentObject = moment(req.body.dateOfBirth, "DD/MM/YYYY"); 
        req.body.dateOfBirth = dateMomentObject.toISOString();
    }
    updateStudent(req, res);
});

/**
 * UPDATE: Inactive Student
 */
studentRouter.post('/inactive', (req: Request, res: Response) => {
    deleteStudent(req, res);
});

export default studentRouter;

Understanding the code.

Using Typescript in the project, we have the benefit to set Generics on the request classes. This makes the project stronger at compile check and also an easier code to read.
One detail to notice in the code is that I am using POST protocol instead of GET on the search of students API. That's because I am expecting multiple parameters for the filter.

Mapping Mongo collection and Model classes.

For the CRUD operations to work correctly, we need to map the Mongo
collections we will be going to work on, and the interfaces used as generic types on the API's request classes.
src/model/student.model.ts

import { ObjectId } from 'mongodb';
import mongoose, { Schema, Document, Collection } from 'mongoose';

export interface StudentSearchRequestDto {
    name: string,
    skills: string[];
}

export interface StudentInterface extends Document {
    _id: String,
    firstName: String,
    lastName: String,
    dateOfBirth: Date,
    country: String,
    skills: String[],
    inactive: Boolean
}

const StudentSchema: Schema = new Schema(
    {
        _id: { type: String, unique: true },
        firstName: { type: String, required: false },
        lastName: { type: String, required: false },
        dateOfBirth: { type: Date, required: false},
        country: { type: String, required: false },
        skills: { type: [String], required: false },
        inactive: { type: Boolean, default: false }
    },
    {
        collection: 'student' // Without this attribute the collection won't be retrieved
    }
);

// model name, schema, ?collection name
const Student = mongoose.model<StudentInterface>('student', StudentSchema);
export default Student;

Understanding the code.

Some details to point here, the attribute _id is set as String type, by default MongoDB create as ObjectID, which can cause parsing problems between the database and the application. I recommend you save _id as String but still generating in uuidv4 format. The second point is that we can set the response API interface we will use as generic type on the schema thanks to Typescript.

Setting services.

Now is time to set the services that perform the CRUD operations, and since the code of this class is long, I will break it into pieces.
Search operation

import Student, { StudentInterface, StudentSearchRequestDto } from '../model/student.model';
import { Request, Response } from 'express';
import { FilterQuery } from 'mongoose';
import mongoose from 'mongoose';
import _ from 'lodash';
import { v4 as uuidv4 } from 'uuid';

/**
 * Search Students by name or skills
 * 
 * @param req 
 * @param res 
 */
async function getStudents(req: Request<StudentSearchRequestDto>, res: Response<Array<StudentInterface>>) {
    const query = Student.find();
    const filterQueryArray: Array<FilterQuery<StudentInterface>> = new Array<FilterQuery<StudentInterface>>();
    filterQueryArray.push({inactive: {$ne: true}});

    if (req.body.name) {
        filterQueryArray.push({firstName: {$regex: req.body.name}});
        filterQueryArray.push({lastName: {$regex: req.body.name}});
    }

    if(!_.isEmpty(req.body.skills)) {
        filterQueryArray.push({skills: {$all: req.body.skills}});
    }

    if(!_.isEmpty(filterQueryArray)) {
        query.or(filterQueryArray);
    }

    await query
        .sort({firstName:1,lastName:1})
        .exec()
        .then(students => {
            console.log('**** SUCCESS');
            return res.send(students);
        })
        .catch(err => {
            console.log(err);
        });; 
}

Understanding the code.

Mongoose.Model "find()" method returns a Query object, so in case you need to perform a more robust query on your search, you can create the Query object and then attach an Array of FilterQuery with all conditions you want on it, just like I am doing on the code above.

For the query sorting function to work, you will need to create an index on your mongo collection. And for that we need go back to our Azure database and create the index. At the moment, a compound index is only able to be made via shell command. You can open a shell command window on AzureCosmosDB portal > Data Explorer > Open Mongo Shell
The code below creates a compound index based on the attributes I want to order my list.

db.student.createIndex({"firstName": 1, "lastName": 1})

Insert and Update operations

/**
 * Insert new Student
 * 
 * @param req 
 * @param res 
 */
async function insertStudent(req: Request<StudentInterface>, res: Response) {
    //req.body._id = new mongoose.Types.ObjectId();
    req.body._id = uuidv4();
    console.log(`_ID: ${req.body._id}`);
    await Student
        .create(
            {
                _id: req.body._id,
                firstName: req.body.firstName,
                lastName: req.body.lastName,
                dateOfBirth: req.body.dateOfBirth,
                country: req.body.country,
                skills: req.body.skills
            }
        )
        .then(student => {
            return res.status(200).send();
        })
        .catch(err => {
            console.log(err);
        });
}

/**
 * Update Student data
 * 
 * @param req 
 * @param res 
 */
async function updateStudent(req: Request<StudentInterface>, res: Response) {
    await Student
        .updateOne(
            {_id: { $in: req.body._id}},
            {
                firstName: req.body.firstName,
                lastName: req.body.lastName,
                dateOfBirth: req.body.dateOfBirth,
                country: req.body.country,
                skills: req.body.skills
            },
            {upsert: false}
        )
        .then(student => {
            return res.status(200).send();
        })
        .catch(err => console.log(err));
}

/**
 * Delete Student data
 * 
 * @param req 
 * @param res 
 */
async function deleteStudent(req: Request<any>, res: Response) {
    if (!req.body && !req.body.ids) {
        res.status(400).send();
        return;
    }

    await Student
        .updateMany(
            {_id: { $in: req.body.ids}},
            {
                inactive: true
            },
            {upsert: false}
        )
        .then(student => {
            return res.status(200).send();
        })
        .catch(err => console.log(err));
}

export {
    getStudents,
    insertStudent,
    updateStudent,
    deleteStudent
};

No mystery here, just to point that I am using the Mongo Model objects straight on the services for the rest of our operations.

Testing the server.

To summarize, we have created the Node server, configured the project to translate ES6 javascript to the bundle, mapped the mongo collections and created the services for our CRUD operations.
Now let's start the server in local environment and test the APIs.

As you can see, our APIs are now ready to be consumed for the Front-end. And with that, we finalize our first part of this 2021 MERN article. Stay tuned for the next posts, I still have many topics to cover like, Front-end project, Test cases and deployment on Azure Services.

If you have stayed with me until this end, thank you very much. And check it out the project on Github: mern-azure-server
Please feel free to comments for suggestions or tips.
See ya.
Alan Terriaga.