Forem: Ridha Mezrigui

[Boost]

Ridha Mezrigui — Sun, 12 Apr 2026 21:01:54 +0000

Ridha Mezrigui for AWS Community Builders

Apr 12

Saga Pattern using Step Functions

#aws #stepfunctions #node #sagapattern

Comments

7 min read

Saga Pattern using Step Functions

Ridha Mezrigui — Sun, 12 Apr 2026 20:52:25 +0000

Introduction

When dealing with distributed architecture like microservices or event-driven systems, failures are inevitable. There's no way to avoid them, but we can build our systems to handle them gracefully. This is where the saga pattern shines. It solves the problem of managing transactions across multiple services. There are many ways to implement the saga pattern like the orchestration approach that we will implement using AWS Step Functions.

Order Processing System

To better understand the problem and the solution, let's walk through a real-world use case. Imagine we have a system that allows users to place orders and charge them for their purchase. If an error occurs the system should cancel all steps based on when the error occurred.

As we can see in the diagram above, our system has 3 services that call each other in order. This works fine when everything goes right, but it breaks when a service stops working or fails. If the stock reservation step fails, we need to cancel the order. If the payment fails, we need to cancel both the stock reservation and the order. With this setup, we cannot do these rollback steps.

Here is where the Saga Pattern comes into play. By orchestrating the 3 services using a State Machine created by AWS Step Functions, we can control the flow of transactions and handle failures gracefully.

The State Machine acts as a central orchestrator that manages the entire order processing workflow:

Sequential Execution: The State Machine invokes each service (Create Order → Reserve Stock → Process Payment) in sequence, waiting for each to complete before moving to the next step.
Error Handling: If any step fails, the State Machine detects the failure and triggers compensating transactions (rollback steps) in reverse order. For example, if payment fails, it will automatically trigger stock cancellation and order cancellation.
Isolation: Each service is independent and doesn't need to know about the others. The State Machine handles all inter-service communication and state management.
Durability: The State Machine maintains a complete audit trail of all steps taken, making it easy to track and debug transactions.
Atomicity at Scale: While individual steps are not atomic, the saga pattern ensures that either all steps complete successfully or all are compensated, maintaining data consistency across services.

Note: To set up this system, we need to create 3 extra services for rollback. The State Machine will call these if something goes wrong. These backup services undo what we did with the main services.

Implement the New Architecture

To implement this new architecture, I will use the AWS SAM framework since we need to create multiple AWS Lambda functions and managing them manually would be hard. AWS SAM allows us to define these resources using code and deploy them to AWS with a single command, and this is the folder structure that we will use in our SAM project:

saga-app/
│
├── template.yaml                 # Main nested stack template
├── samconfig.toml                # SAM configuration
│
├── stacks/
│   ├── compute.yaml              # Lambda functions stack (Order, Inventory, Payment services)
│   └── orchestration.yaml        # Step Functions state machine stack
│
├── statemachines/
│   └── order-saga.asl.json       # Order Saga state machine definition
│
├── src/
│   ├── order/
│   │   ├── create.ts             # Create order handler
│   │   └── cancel.ts             # Cancel order handler (compensation)
│   │
│   ├── inventory/
│   │   ├── reserve.ts            # Reserve inventory handler
│   │   └── release.ts            # Release inventory handler (compensation)
│   │
│   └── payment/
│       ├── charge.ts             # Charge payment handler
│       └── refund.ts             # Refund payment handler (compensation)

Note: Because the codebase is large, a single template.yaml file would be hard to read, I split the infrastructure into the compute stack and the state machine stack, and used template.yaml as the parent stack that references both.

Create the Lambda Functions

For these functions, I will just use simple code because in the end this is only for learning and there is no need to implement the real business logic.

// create order
import { Handler } from 'aws-lambda';

export const handler: Handler<OrderInput, OrderResult> = async (event) => {
  console.log('Creating order:', JSON.stringify(event));

  try {
    // Implement order creation logic

    const result: OrderResult = {
      orderId: event.orderId,
      status: 'PENDING',
      createdAt: new Date().toISOString(),
      customerId: event.customerId,
    };

    console.log('Order created successfully:', JSON.stringify(result));
    return result;
  } catch (error) {
    console.error('Error creating order:', error);
    throw error;
  }
};

// cancel order
export const handler: Handler<CancelOrderInput, CancelOrderResult> = async (event) => {
  console.log('Cancelling order:', JSON.stringify(event));

  try {
    // Implement order cancellation logic

    const result: CancelOrderResult = {
      orderId: event.orderId,
      status: 'CANCELLED',
      cancelledAt: new Date().toISOString(),
    };

    console.log('Order cancelled successfully:', JSON.stringify(result));
    return result;
  } catch (error) {
    console.error('Error cancelling order:', error);
    throw error;
  }
};

The same goes for the other 4 functions, they will have the same structure but with different logic inside. After creating all these functions, we can deploy them to AWS using the SAM CLI and then we can create the state machine that will orchestrate them. We will define the state machine in a JSON file using Amazon States Language (ASL) and then reference it in our orchestration stack. In the next section, I will explain how to create the state machine and how it works.

Note: This post is focusing only on the architecture and the implementation of the saga pattern using Step Functions.
The deployment and the infrastructure code is not included in the post, but you can find it in the GitHub repository linked at the end of this post.

Creating the State Machine

Now let's move to the interesting part where we will define the state machine using Amazon States Language (ASL) — a JSON-based language
that describes the workflow of our order processing system, including the sequence of steps and the error handling logic. The state machine will call the Lambda functions we created earlier and handle any errors that may occur during the execution.

Inside the statemachines folder we create the order-saga.asl.json file that will contain the definition of our state machine:

{
  "Comment": "Order Saga Pattern - Orchestrates order creation, inventory reservation, and payment processing with compensation logic",
  "StartAt": "CreateOrder",
  "States": {
    "CreateOrder": {},
    "ReserveInventory": {},
    "ChargePayment": {},
    "CompensateInventory": {},
    "CompensateOrder": {},
    "OrderSuccess": {},
    "OrderFailed": {}
  }
}

We start by defining the states of our state machine. Each state represents a step in our order processing workflow. The main states are CreateOrder, ReserveInventory, and ChargePayment. These states call the corresponding Lambda functions to perform their tasks. If any of these states fail, we have compensation states CompensateInventory and CompensateOrder that will be triggered to undo the previous steps.
Finally, we have OrderSuccess and OrderFailed states to handle the final outcome of the process.

Note: The state machine does not include the refund payment step because in our example the payment is the final step so no compensation is needed. In real-world scenarios, you might need to include a refund step since there will be other steps like shipping the order to the customer so if the shipping fails we need to refund the payment.

Our state machine starts at the CreateOrder state so let's define it:

"CreateOrder": {
  "Type": "Task",
  "Resource": "${CreateOrderFunctionArn}",
  "Next": "ReserveInventory",
  "Retry": [
    {
      "ErrorEquals": ["States.TaskFailed", "States.Timeout"],
      "IntervalSeconds": 2,
      "MaxAttempts": 3,
      "BackoffRate": 2.0
    }
  ],
  "Catch": [
    {
      "ErrorEquals": ["States.ALL"],
      "Next": "OrderFailed"
    }
  ]
}

The code above defines CreateOrder as a Task state that invokes the Lambda function to create an order. The Resource field contains the Lambda ARN passed during deployment, and Next moves execution to ReserveInventory after success. The Retry field configures up to 3 retry attempts with exponential backoff, while Catch routes any unhandled error to OrderFailed.

Before we move to the next state, remember that a Task state represents one unit of work, such as invoking a Lambda function, and can include retry and error-handling rules.

Now let's define the ReserveInventory state, which is similar to CreateOrder but if it fails it will trigger the compensation state CompensateOrder to cancel the order created in the previous step.

"ReserveInventory": {
  "Type": "Task",
  "Resource": "${ReserveInventoryFunctionArn}",
  "Next": "ChargePayment",
  "Retry": [
    {
      "ErrorEquals": ["States.TaskFailed", "States.Timeout"],
      "IntervalSeconds": 2,
      "MaxAttempts": 3,
      "BackoffRate": 2.0
    }
  ],
  "Catch": [
    {
      "ErrorEquals": ["States.ALL"],
      "Next": "CompensateOrder"
    }
  ]
}

The same way we define the ChargePayment state, but if it fails it will trigger both compensation states CompensateInventory and CompensateOrder to cancel the order and release the reserved stock.

"ChargePayment": {
  "Type": "Task",
  "Resource": "${ChargePaymentFunctionArn}",
  "Next": "OrderSuccess",
  "Retry": [
    {
      "ErrorEquals": ["States.TaskFailed", "States.Timeout"],
      "IntervalSeconds": 2,
      "MaxAttempts": 3,
      "BackoffRate": 2.0
    }
  ],
  "Catch": [
    {
      "ErrorEquals": ["States.ALL"],
      "Next": "CompensateInventory"
    }
  ]
}

As we see, in the case of failure ChargePayment only calls CompensateInventory and CompensateInventory itself will then call CompensateOrder.

The last step is to define the compensation states and the final states OrderSuccess and OrderFailed:

"CompensateInventory": {
  "Type": "Task",
  "Resource": "${ReleaseInventoryFunctionArn}",
  "Next": "CompensateOrder",
  "Retry": [
    {
      "ErrorEquals": ["States.TaskFailed", "States.Timeout"],
      "IntervalSeconds": 2,
      "MaxAttempts": 3,
      "BackoffRate": 2.0
    }
  ]
},
"CompensateOrder": {
  "Type": "Task",
  "Resource": "${CancelOrderFunctionArn}",
  "Next": "OrderFailed",
  "Retry": [
    {
      "ErrorEquals": ["States.TaskFailed", "States.Timeout"],
      "IntervalSeconds": 2,
      "MaxAttempts": 3,
      "BackoffRate": 2.0
    }
  ]
},
"OrderSuccess": {
  "Type": "Succeed"
},
"OrderFailed": {
  "Type": "Fail",
  "Error": "OrderSagaFailed",
  "Cause": "Order processing saga failed - order cancelled and compensation steps executed"
}

The compensation states will be called in case of failure to undo the previous steps, and the final states will indicate whether the order processing was successful or failed. With this state machine defined, we can deploy it to AWS and it will orchestrate the entire order processing workflow, ensuring that all steps are executed in the correct order.

Deployment

Now that we have defined our Lambda functions and our state machine, we can deploy them to AWS using the SAM CLI. The SAM CLI will take care of packaging our code, creating the necessary AWS resources, and deploying everything to AWS by running the following commands in the root of our SAM project:

sam build
sam deploy --guided

Note: AWS SAM uses CloudFormation under the hood to deploy our resources, so it will create a CloudFormation stack for each of our nested stacks (compute and orchestration) and deploy the resources defined in them. The --guided flag will prompt us to enter some configuration values like the stack name and the AWS region.

After running the commands, all our infrastructure is deployed to AWS. If we go to the AWS console and check the Step Functions service we will find our state machine deployed and ready to use.

To test the failure path, I will edit the code of the ChargePayment function to throw an error:

export const handler: Handler<ChargePaymentInput, ChargePaymentResult> = async (event) => {
  try {
    // Simulate a payment failure
    throw new Error('Payment processing failed');
  } catch (error) {
    console.error('Error charging payment:', error);
    throw error;
  }
};

After editing the code and redeploying the function, we can see that the failure is handled gracefully and the compensation steps are executed as expected — the order is cancelled and the reserved stock is released.

Conclusion

The saga pattern is a powerful tool for managing transactions across distributed systems, and AWS Step Functions provides a robust platform for implementing this pattern. By orchestrating our services using a state machine, we can ensure that our system remains resilient in the face of failures, maintaining data consistency and providing a better user experience.

Github: https://github.com/ridhamz/saga-pattern-step-functions

React: the reconciliation algorithm

Ridha Mezrigui — Sun, 12 Feb 2023 15:39:48 +0000

One of the key features of React is its reconciliation algorithm, which determines how the library updates the DOM in response to changes in the component state.
In this blog post, we will explore the reconciliation algorithm in depth and see how it works with examples.

What is the reconciliation algorithm?

The reconciliation algorithm is the process React uses to update the DOM in response to changes in the component state. When a component’s state changes, React will re-render the component and its children. The reconciliation algorithm is responsible for determining what has changed in the component tree and updating the DOM accordingly.

React uses a virtual DOM (VDOM) to represent the structure of the components in memory.The virtual DOM is a lightweight in-memory representation of the DOM, and it's used by React to compare the new state of the component tree with the previous state.
If there are any differences, React will update the real DOM to match the new state.

How does the reconciliation algorithm work?

The reconciliation algorithm starts by comparing the virtual DOM of the previous state with the virtual DOM of the new state.
If there are no differences, React will not make any changes to the real DOM. If there are differences, React will update the real DOM to match the new state.

React uses a heuristic approach to determine the most efficient way to update the real DOM. The algorithm first checks if a component has changed its type, for example, from a simple text component to a complex component with multiple children. If the component type has changed, React will unmount the old component and mount the new component.

If the component type has not changed, React will compare the properties of the old and new components. If the properties have changed, React will update the properties of the real DOM element. If the children of the component have changed, React will recursively apply the reconciliation algorithm to the children components.

React also uses a technique called reusing existing DOM nodes to make the updates more efficient. If a component has not changed its type and its properties have not changed, React will reuse the existing DOM node for that component. This allows React to avoid unnecessary DOM updates and makes the updates faster.

Example

Let's take an example to understand the reconciliation algorithm in action:

import React, { useState } from 'react';

function Greeting() {
  const [name, setName] = useState('mz1');

  return (
    <>
      <h1>Hello, {name}</h1>
      <button onClick={() => setName('mz2')}>Change Name</button>
    </>
  );
}

export default Greeting;

In this example, when the button is clicked and the name state changes, React will run the reconciliation algorithm to update the real DOM to match the new state.

React will start by comparing the virtual DOM of the previous state with the virtual DOM of the new state.
Since the component type has not changed, React will reuse the existing DOM node for the Greeting component, then it will update the text content of the h1 element to match the new name mz2.

In this example, the reconciliation algorithm has made a single DOM update to change the text content of the h1 element.

Optimizing the performance using Keys

In React, the use of keys is important when rendering a list of elements. Keys are a special string attribute that you can provide to elements in a list to help React keep track of which items are added, deleted, or changed.

Consider the following example of a list of names:

import React from 'react';

function NamesList({ names }) {
  return (
    <ul>
      {names.map((name) => (
        <li key={name}>{name}</li>
      ))}
    </ul>
  );
}

export default NamesList;

In this example, we're using the map function to render a list of li elements, each with a name from the names array. If the names array changes, React will use the reconciliation algorithm to update the DOM to match the new virtual DOM.

However, without the use of keys, React has no way of knowing which items have been added, deleted, or changed. As a result, React may end up unnecessarily recreating all of the li elements, even if only a single name has changed. This can lead to decreased performance, especially for long lists.

By providing a unique key to each li element, React can track which items have changed and make the minimum number of DOM updates necessary. In the example above, we're using the name itself as the key, which is a unique identifier for each item in the list.

It's important to note that the value of the key should be unique among the siblings, but doesn't have to be globally unique. It's also not recommended to use indexes as keys, because they can lead to unexpected behavior when items are reordered or deleted.

Conclusion

The "diff algorithm" and the "reconciliation algorithm" are often used interchangeably to refer to the same thing in the context of React. However, there is a subtle difference between the two terms.

The diff algorithm refers to the process of comparing two trees of nodes, such as the virtual DOM trees in React, to determine the differences between them. The diff algorithm determines the minimum number of operations required to transform one tree into another.

The reconciliation algorithm refers to the overall process of updating the DOM in response to changes in the component state. The reconciliation algorithm includes the diff algorithm as one of its steps, but it also includes additional steps such as unmounting and mounting components, updating component properties, and handling error cases.

React.js: The one way and the opposite way data flow

Ridha Mezrigui — Sat, 15 Jan 2022 21:14:44 +0000

Introduction

The one way and the opposite way data flow are two important concepts you need to understand as a react developer, also they are two interview questions that often ask.

The one way data flow

As you know in react we use state to store data in a specific component and if this component has children we pass the state from the parent component to the child component as props.
The concept of passing props is called one way data flow or uni-directional data flow because the props or data can only flow from the top to the bottom, means from the parent to the child.

The opposite way data flow

The opposite way data flow is about passing props from child to parent.

When it comes to this concept, react doesn't provide us a shorthand syntax for handling opposite data flow.
That's because we can't pass props from a child component to a parent component, but we can implement it in our selves.

The opposite way data flow implementation

Let's start by creating a simple parent component contains :

A search state
A handle change function
A function to get the result of the search value from an API
A button to call the function

function Search() {
  const [search, setSearch] = useState('')

 //handle change
  const handleChange = e => setSearch(e.target.value)

 // get the result search from server
  const getTheSearchResult = () => {
    console.log(search)
  }

  return (
    <div className="App">
    <button onClick={getTheResultSearch}>Get the result</button>
    </div>
  );
}

The search input will exist in a separate component called SearchInput.

export function SearchInput() {
  const [search, setSearch] = useState('')

  //handle change
  const handleChange = e => setSearch(e.target.value)
  return (
    <input type='text' value={search} 
           onChange={handleChange} />
  )
}

Combine the two components :

Search : the parent
SearchInput : the child

 <div className="App">
      <SearchInput/> <br/>
     <button onClick={getTheResultSearch}>Get the result</button>
 </div>

With tis implementation we will get nothing in the console when we click the button.
That's because when we type in the search input the search state that exists in the SearchInput component will change not the one that exists in the Search component.

Now we are stack because there is no way to pass the state exists in the child to the parent.

To handle this situation, we need to remove the state and the handleChange from the SearchInput and pass them as props from the Serach component.

Refactor the SearchInput component

export function SearchInput({search, handleChange}) {

  return (
    <input type='text' value={search} 
           onChange={handleChange} />
  )
}

Refactor the Search component

<div className="App">
      <SearchInput search={search} onChange={handleChange}/>
     <button onClick={getTheResultSearch}>Get the result</button>
    </div>

Result

Now, when we type in the search input, the value pass as props to the Search component via the handleChange.
It means that the data flows in the opposite way.

Conclusion

This is all about the one way and the opposite way data flow, I hope you enjoyed ❤️.

React.js : debouncing and throttling

Ridha Mezrigui — Sat, 08 Jan 2022 23:04:44 +0000

Introduction

In order to build a professional web application, optimization and performance are two important things you need to care about.

There are many tips and techniques used to increase the performance of a web application, such as Debouncing and Throttling.

When it comes to debouncing and throttling, developers often confuse.

During this blog, I will go throw these two techniques in details using react.js, but it is the same principle for vanilla JavaScript or any other JavaScript framework.

Debouncing

Before dive deep into debouncing, let's see a simple and normal example that implement a search box that allows users to search something without clicking any button.

function App() {

  const handleChange = e => {
    console.log('api call...')
  }

  return (
    <div className="App">
      <header className="App-header">
        <p> Search  </p>
        <input type='text' onChange={handleChange} />
      </header>
    </div>
  );
}

The issue is that handleChange is very expensive, and this is bad to the server because it will receive many HTTP requests in the same time.

To solve the problem, we need to use a debounce function.

Definition and implementation of a debounce function

A debounce function is called after a specific amount of time passes since its last call.

function debounce(fn, delay) {
    let timer
    return function (...args) {
      clearTimeout(timer)
      timer = setTimeout(()=>fn(...args), delay)
    }

The idea is to define a high-order function called debounce takes as arguments a callback function and a delay in ms, then returns a new function that sets the timer to execute the callback after the timer done.
The secret here is that every call of the function returned from the debounce function will cancel the previous timer using cleartimeout(timer) and start a new timer.
With this approach, we can be sure that the callback function will be executed just once after the time that we passed as an argument in the last call.

Implement debounce function into our example

 <div className="App">
      <header className="App-header">
        <p> Search  </p>
        <input type='text' onChange={debounce(handleChange, 500)} />
      </header>
    </div>

Result

Throttling

Let's assume that we have an event listener in our app to track the movement of the user mouse, then send data to a backend server to do some operations based on the location of the mouse.

const handleMouseMove = e => {
      //everytime the mouse moved this function will be invoked
      console.log('api call to do some operations...')
  }
 //event listener to track the movement of the mouse
  window.addEventListener('mousemove',handleMouseMove)

If we stick with this solution, we will end up with a down backend server because it will receive a hundred of requests in short duration.

1600 API calls in few seconds is very very bad 📛📛📛.
To fix this issue, we need to limit the number of API calls, and this kind of problems can be solved using a throttle function.

Definition and implementation of a throttle function

A throttle function is a mechanism to limit the number of calls of another function in a specific interval, any additional calls within the specified time interval will be ignored.

function throttle(fn, delay) {
    let run = false
    return function (...args) {
      if (!run) {
        fn(...args)
        run = true
        setTimeout( () => run = false, delay)
      }
    }
  }

The throttle function accepts two arguments: fn, which is a function to throttle, and delay in ms of the throttling interval and returns a throttled function.

Implement throttle function into our example

const handleMouseMove = e => {
      //everytime the mouse moved this function will be invoked
      console.log('api call to do some operations...')
  }

  //event listener to track the movement of the mouse
  window.addEventListener('mousemove', throttle(handleMouseMove, 1000))
//1000ms => 1 second

Result

Conclusion

Debouncing and Throttling are two amazing techniques, they can increase the performance of your web application to another level.
Choosing one of them depends on the case.

GitHub repo: https://github.com/ridhamz/debouncing-throttling

Node.js : REST API part 2

Ridha Mezrigui — Mon, 19 Oct 2020 19:35:17 +0000

Hello community,

in this part we will finish our REST API, if you didn't see the first part you can check it from here.

Let's get started

entire this part we'll cover :

create new movie
get movie by ID
get all movies
update movie
delete movie
finally we will talk about middleware concept and how to build and implement it in our API

first we need to create a movie model, so in the models folder we create a file called movie-model.js :

//movie-model.js
const mongoose = require('mongoose');

const Schema = mongoose.Schema;

const userSchema = new Schema({
  title: { type: String, required: true },
  description: { type: String, required: true},
  creator: { type: String, required: true }
});

module.exports = mongoose.model('Movie', userSchema);

now is the time to create the movie controller in the controllers folder, we create a movie-controller.js file :

//movie-controller.js
const { validationResult } = require('express-validator');
const ObjectId = require('mongoose').Types.ObjectId;
const User = require('../models/user-model');
const Movie = require('../models/movie-model');

// CREATE MOVIE 
const createMovie = async (req, res) => {};

// GET MOVIE BY ID 
const getMovieById = async (req, res) => {};

// GET ALL MOVIES 
const getAllMovies = async (req, res) => {};

// UPDATE MOVIE 
const updateMovie = async (req, res) => {};

// DELETE MOVIE 
const deleteMovie = async (req, res) => {};

module.exports = {
    createMovie,
    getMovieById,
    getAllMovies,
    updateMovie,
    deleteMovie
};

don't worry we will take these functions one by one later now we need to set up movie routes we create movie-routes.js in routes folder :

//movie-routes.js
const { check } = require('express-validator');
const movieController = require('../controllers/movie-controller');
const express = require('express');
const router = express.Router();

const {
    createMovie,
    getMovieById,
    getAllMovies,
    updateMovie,
    deleteMovie } = movieController;

const validation = [ 
    check('title').not().isEmpty(),
     check('description').not().isEmpty(),
     check('creator').not().isEmpty()]

// CREATE MOVIE 
router.post('/',validation,createMovie);

// GET MOVIE BY ID 
router.get('/:id',getMovieById);

// GET ALL MOVIES
router.get('/',getAllMovies);

// UPDATE MOVIE 
router.patch('/:id',validation,updateMovie);

// DELETE MOVIE 
router.delete('/:id',deleteMovie);

module.exports = router;

the last thing we need to do before we dive into movie-controller.js functions is to add movie-routes in the index.js file :

//index.js
const movieRoutes = require('./routes/movie-routes'); 

app.use('/api/movie', movieRoutes);

now let's get started with the first function createMovie :

// CREATE MOVIE 
const createMovie = async (req, res) => {

      const errors = validationResult(req);
      if (!errors.isEmpty()) 
         return res.status(400).json({ errors: errors.array() });

      const { title, description, creator } = req.body;
      let  existingUser = await User.findOne({ _id: creator });
      if (!existingUser)
         return res.status(400).json({error : 'invalid user'});

      const movie = new Movie({
          title,
          description,
          creator
      });

      try {
          await movie.save();
          res.status(200).json({
          message: "movie created successfully",
          movie: movie
        })
      } catch (error) {
           res.status(500).json(error.message);
      }
};

Let me explain the logic first we check the data validation result if some validation failed we return an error otherwise we take the all data title, description and creator = user id if there is no user with this ID also we return an error finally we create the movie object and save it in the database then return a json object contains successfully message and the movie created.

getMovieById :

// GET MOVIE BY ID 
const getMovieById = async (req, res) => {

      const movieId = req.params.id;
      if(!ObjectId.isValid(movieId))
           return res.status(400).json({error : 'Invalid id'});

        try {
            const movie = await Movie.findById(movieId);
            if(!movie) 
               return res.status(404).json('there is no movie with this id.');
             res.status(200).json(movie)
        } catch (err) {
             res.status(500).json({error:err.message});
        } 
};

The logic is simple this function get the movie ID as a parameter and check if it is a valid ID then we search in the database else return a message that there is no movie with that ID.

getAllMovies :

// GET ALL MOVIES 
const getAllMovies = async (req, res) => {

    try {
        const movies = await Movie.find();
        return res.status(200).json(movies)
    } catch (err) {
        return res.status(500).json({message :'server error'})
    }

};

updateMovie:

// UPDATE MOVIE 
const updateMovie = async (req, res) => {

    const errors = validationResult(req);
     if(!errors.isEmpty()) 
        return res.status(400).json({ errors: errors.array() });

    const { title, description, creator } = req.body;
    const movieId = req.params.id;
    if(!ObjectId.isValid(movieId))
           return res.status(400).json({error : 'Invalid id'});

     try {
         const movie = await Movie.findById(movieId);
         if(!movie)
            return res.status(404).json({message: 'movie not found.'});
         await movie.updateOne({
             title,
             description,
             creator
         })
         return res.status(200).json(movie)
     } catch (err) {
         console.log(err.message);
         res.status(500).json({error : 'server error'});

     }
};

deleteMovie :

//DELETE MOVIE 
const deleteMovie = async (req, res) => {

    const movieId = req.params.id ; 
    if(!ObjectId.isValid(movieId))
           return res.status(400).json({error : 'Invalid id'});

    try {
        const movie = await Movie.findById(movieId);
        if(!movie) 
           return res.status(404).json({message : 'there is no movie with this id.'});

        await movie.remove();
        res.status(200).json({message : 'movie removed'});
    } catch (err) {
        console.log(err.message);
        res.status(500).json({error : 'server error'});
    }

};

Now we need to build an authentication middleware to protect some of our API routes because in our API anyone can add, update and delete movies without authentication and this is bad.

Middleware functions are functions that have access to the request object (req), the response object (res), and the next middleware function in the application’s request-response cycle. The next middleware function is commonly denoted by a variable named next.

In the middleware folder, create a file called auth.js :

const jwt = require('jsonwebtoken');

module.exports = function(req, res, next){

    const token = req.header('x-auth-token');
    if(!token) 
       return res.status(401).json({ message: 'No token, authorization dnied.'});
    try{
        const decoded = jwt.verify(token,'supersecretkey');
        req.user = decoded.user;
        next();
    }catch(err){
        res.status(401).json({ message: 'Token is not valid' });
    }
}

Let me explain :
when the user makes a login or register The API return a token this token indicates that the user is authenticated but to use it we need to add it in the header as 'x-auth-token' with that when the user wants to add a movie the auth middleware get this token from the header and test if it is a valid token then he can add a movie else the middleware return an error that the token not valid.

To protect our API, we just have to import the auth middleware in the movie-routes.js and add it as a second argument in every route we want to protect.

//movie-routes.js
// CREATE MOVIE 
router.post('/',[auth, validation],createMovie);

// UPDATE MOVIE 
router.patch('/:id',[auth, validation],updateMovie);

// DELETE MOVIE 
router.delete('/:id',auth, deleteMovie);

Don't forget to import 'auth.js'.

Let's test our REST API with postman :

first we need to authenticate
add a new movie without add the token in the header
add a new movie with the token in the header (just copy the token and go to header add new key 'x-auth-token' and put the token as a value)
get movie by ID
get all movies
update movie
delete movie

Now we can say that our API is done, we cover all the basics and rules that will you need when you build your own REST API.

Thank you.

React : Make your own pagination

Ridha Mezrigui — Sun, 13 Sep 2020 17:25:30 +0000

hello community,

today i'll show you how to make your own pagination without using any package.

let's get started

first thing we need to do is to create a react app

npx create-react-app make-pagination
cd make-pagination //navigate to our project
code . //open our react app with vscode

let's say that we want to fetch the data of our users and for that
i'll use Mockaroo to generate a dummy data.
in src folder we create a new file data.js this file will contain the users dummy data.

//data.js
export const Data = [
{"id":1,"name":"Anna-maria","email":"ajehaes0@vinaora.com"},
{"id":2,"name":"Kenyon","email":"kvarfalameev1@wikimedia.org"},
{"id":3,"name":"Twila","email":"tkelby2@amazon.com"},
{"id":4,"name":"Rudd","email":"rcatling3@about.me"},
{"id":5,"name":"Robby","email":"rbenini4@behance.net"},
{"id":6,"name":"Viviyan","email":"vcurlis5@addtoany.com"},
{"id":7,"name":"Gabriello","email":"gdaines6@purevolume.com"},
{"id":8,"name":"Carter","email":"ckoubek7@wikipedia.org"},
{"id":9,"name":"Berna","email":"bdimatteo8@umich.edu"},
{"id":10,"name":"Marlow","email":"mhedditch9@usda.gov"},
{"id":11,"name":"Corella","email":"cdiperausa@newsvine.com"},
{"id":12,"name":"Cherida","email":"cstarkieb@vk.com"},
{"id":13,"name":"Zackariah","email":"zbathoc@cam.ac.uk"},
{"id":14,"name":"Orelee","email":"ogabitsd@msu.edu"},
{"id":15,"name":"Alonzo","email":"aclaire@fc2.com"},
{"id":16,"name":"Vonnie","email":"vkillbyf@cornell.edu"},
{"id":17,"name":"Weidar","email":"wdeyesg@whitehouse.gov"},
{"id":18,"name":"Cyb","email":"cternouthh@surveymonkey.com"},
{"id":19,"name":"Melisent","email":"modayi@loc.gov"},
{"id":20,"name":"Darbee","email":"djanecekj@stumbleupon.com"}
]

now let's fetch these users without pagination
first we create a "user" folder then we create two files user.jsx component and user.css cuz we need some basic css style.

//user.jsx
import React from 'react';
import './user.css';

const User = ({name, email}) => {
    return ( 
        <div className='user'>
            Name : {name} <br/>
            Email : {email}
        </div>
     );
}

export default User;

/* user.css */
.user{
    padding: 10px;
    margin:10px auto;
    width:50%;
    border : 1px solid #eee;
}

in the "App.js" component we import user.jsx and Data.js and fetch our data.

//App.js
import React from 'react';
import './App.css';
import { Data } from './data';
import User from './user/user';

function App() {
  return (
    <div className="App">
    <h1>ALL USERS</h1>
      {
        Data.map(user => <User key={user.id}
                               name={user.name}
                               email={user.email} />
        )
      }
    </div>
  );
}

export default App;

the result

20 users in the same page is a little bit annoying in this case we need to use pagination.

Create the pagination component

1- create `pagination` folder contain two files `pagination.jsx` and `pagination.css`.

first we need to install a lodash package

npm i --save lodash

//pagination.jsx
import React from 'react';
import _ from 'lodash';
import './pagination.css';

const Pagination = (props) => {

    const { itemsCount, pageSize, currentPage, onPageChange } = props;
    const pageCount = Math.ceil(itemsCount / pageSize);
    if (pageCount === 1) return null;
    const pages = _.range(1, pageCount + 1);

    return (
        <div className="pagination">
            {pages.map(page => (
                <div href={null} key={page}
                    onClick={() => onPageChange(page)}
                    className={page === currentPage ? 'active' : 'page-item'}>
                    {page}
                </div>
            ))}
        </div>
    )
}

export default Pagination;
```


itemsCount, pageSize, currentPage and onPageChange are props we will pass them when we implement the pagination in the `App.js` component.


```css
/* pagination.css */
.pagination {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagination div {
  color: white;
  float: left;
  padding: 8px 16px;
  display: block;
  text-decoration: none;
  transition: background-color 0.3s;
  cursor: pointer;

}

/* Style the active/current link */
.pagination div.active {
  background-color: #05aff1;
}

/* Add a grey background color on mouse-over */
.pagination div:not(.active) {
  background-color: #444444;
}


```


### 2- Create a javascript logic that will slice our dummy data 
in the src folder we create a `paginate.js` file


```javascript
import _ from 'lodash';

export function paginate(items, pageNumber, pageSize){
   const startIndex = (pageNumber - 1) * pageSize;

   return _(items)
            .slice(startIndex)
            .take(pageSize)
            .value();
}
```


this function take all data (items), pageNumber (the number of page we want to go if we have 20 users and and we want 4 users in each page 20/4=5pages if we want to see the users in page 3 we start slice our data from index: (3-1)*4=8), the pageSize (number of users in each page) and return new table contain  a pageSize elements.

### 3- Implement the pagination 
in App.js component :
import `paginate` function from `paginate.js` and import `useState` hook then



```javascript
  const [currentPage, setCurrentPage] = useState(1);
  const pageSize = 4;

  const handlePageChange = page => {
    setCurrentPage(page);
  }

  const getPageData = () => {

    const paginationData = paginate(Data, currentPage, pageSize);
    return { totalCount: Data.length, data: paginationData }
  }

  const { totalCount, data } = getPageData();
```


now let's import `pagination` component and see the result


```javascript
const { totalCount, data } = getPageData();
  return (
    <div className="App">
      <h1>ALL USERS</h1>
      {
        data.map(user => <User key={user.id}
          name={user.name}
          email={user.email} />
        )
      }
      <Pagination
        itemsCount={totalCount}
        pageSize={pageSize}
        currentPage={currentPage}
        onPageChange={handlePageChange} />
        page {currentPage} of { totalCount / pageSize }
    </div>
```



the final result 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/87j5gbgxudhbjxpa6k32.PNG)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9ot31vwjy3brqf1oomfy.PNG)

I hope you enjoyed this blog.

Node.js : REST API part 1

Ridha Mezrigui — Mon, 07 Sep 2020 14:31:37 +0000

Liquid syntax error: Unknown tag 'endraw'

React Hooks : How to manage your form state dynamically using a custom hook

Ridha Mezrigui — Sat, 05 Sep 2020 16:23:26 +0000

Hello community,

In this post, I'm going to show you how to manage your form state dynamically using a custom hook in a few steps.

So first, what are hooks?

Hooks are a new addition in React 16.8 to let you use state and other React features without writing a class, and the funniest thing is that you can build your own custom Hook.
Custom Hooks allow us to abstract the business logic from the component and make it reusable cross other components.

1. Create a react-app :

npx create-react-app manage-form-state

2. Build our form:

// app.js
import React from 'react';

function App() {

  const formHandler = e => {
    e.preventDefault();
    console.log('form handler');
  }

  return (
    <div className="App">
      <form onSubmit={formHandler}>
        Name : <input type='text' /> <br />

        Email : <input type='email' /><br />

        Address : <input type='text' /><br />

        Phone : <input type='text' /><br />

        Password : <input type='password' /><br />

        <input type='submit' value='Submit' />
      </form>
    </div>
  );
}

export default App;

3. Create a formReducer function :

//form-reducer.js
const formReducer = (state, action) => {
    switch (action.type) {
        case 'INPUT_CHANGE':
            return {
                ...state,
                inputs: {
                    ...state.inputs,
                    [action.inputId]: action.value
                }
            }
        default:
            return state;
    }
}

export default formReducer;

4. Create our 'useForm' custom hook :

//form-hook.js
import { useReducer } from 'react';
import formReducer from  './form-reducer';

export const useForm = (initialInputs) => {
    const [formState, diaspatch] = useReducer(formReducer, {
        inputs: initialInputs
    });

    const inputHandler = (id, value) => {
        diaspatch({
            type: 'INPUT_CHANGE',
            value: value,
            inputId: id
        })
    }

    return [formState, inputHandler];
};

5. Implement the 'useForm' logic in our form :

first, we have to import our useForm hook and initialize the state

import React from 'react';
import './App.css';
import { useForm } from './form-hook';

function App() {
  const [formState, inputHandler] = useForm({
    name: '',
    email: '',
    address: '',
    phone: '',
    password: ''
  });

Now we need another function that will call the inputHandler when the input value change

const changeHandler = e  => {
     const {id,value} = e.currentTarget;
     inputHandler(id,value);
  }

finally, we are ready to update our form

 const { name,email,address,phone,password } = formState.inputs;
  return (
    <div className="App">
      <form onSubmit={formHandler}>
        Name : <input type='text' id='name' 
                     value={name} 
                     onChange={changeHandler} /> <br />

        Email : <input type='email' id='email' 
                       value={email} 
                       onChange={changeHandler} /><br />

        Address : <input type='text' id='address' 
                         value={address}
                          onChange={changeHandler} /><br />

        Phone : <input type='text' id='phone' 
                       value={phone} 
                       onChange={changeHandler} /><br />

        Password : <input type='password' id='password' 
                          value={password} 
                          onChange={changeHandler} /><br />

        <input type='submit' value='Submit' />
      </form>
    </div>

Forem: Ridha Mezrigui

[Boost]

Saga Pattern using Step Functions

Saga Pattern using Step Functions

Introduction

Order Processing System

Implement the New Architecture

Create the Lambda Functions

Creating the State Machine

Deployment

Conclusion

React: the reconciliation algorithm

What is the reconciliation algorithm?

How does the reconciliation algorithm work?

Example

Optimizing the performance using Keys

Conclusion

React.js: The one way and the opposite way data flow

Introduction

The one way data flow

The opposite way data flow

The opposite way data flow implementation

Refactor the SearchInput component

Refactor the Search component

Result

Conclusion

React.js : debouncing and throttling

Introduction

Debouncing

Definition and implementation of a debounce function

Implement debounce function into our example

Result

Throttling

Definition and implementation of a throttle function

Implement throttle function into our example

Result

Conclusion

Node.js : REST API part 2

Let's get started

React : Make your own pagination

let's get started

Create the pagination component

1- create pagination folder contain two files pagination.jsx and pagination.css.

Node.js : REST API part 1

React Hooks : How to manage your form state dynamically using a custom hook

So first, what are hooks?

1. Create a react-app :

2. Build our form:

3. Create a formReducer function :

4. Create our 'useForm' custom hook :

5. Implement the 'useForm' logic in our form :

1- create `pagination` folder contain two files `pagination.jsx` and `pagination.css`.