DEV Community: Diego Sevilla

Interface Inheritance, Types and Enums with TypeScript - Practical Example

Diego Sevilla — Mon, 14 Jul 2025 04:56:37 +0000

On our day to day as software engineers it’s important to take into consideration the fact that how we manage the incoming DTOs (Data Transfer Objects) to a system is very important in terms of code scalability, better structuring/organization and other aspects related to the long term maintenance of an application.

In this occasion, I will be sharing one story of interfaces management in TypeScript and how you can experiment and get the most out of them with a practical basic example 🍃

📌Introduction
📌Analysis

📍Improvements
📍Enums Usage
📍Creating a Report

📌Solution Code
📌Conclusions

Introduction

Not long ago, I worked for a company that managed a huge amount of transfers and had a fairly big history of data created over time. While working on a migration from a desktop app 💻 to a web app ☁️, the necessity of a page in charge of the management of reports came up and I got to work.

The creation of reports required the sending of information to an API via POST HTTP requests, which had data variations with each kind of report. Upon closer analysis I realized there were, indeed, specific fields shared between the creation of the report documents.

Here is a simplified example:

  const cashierReportData = {
    idAgent: 999,
    reportName: 'cashier-report',
    fileFormat: 'pdf',
    dateFrom: '2019-09-01',
    dateTo: '2019-12-01',
    idCashier: 44893,
    factor555: '0.236738938',
    reportCode: 123
  }

  const claimReportData = {
    idAgent: 777,
    reportName: 'claim-report',
    fileFormat: 'excel',
    language: 'EN-US',
    showRate: true,
    dateFrom: '2021-03-14',
    dateTo: '2022-11-07',
    reportCode: 456
  }

  const exchangeReportData = {
    idAgent: 555,
    reportName: 'exchange-report',
    fileFormat: 'word',
    imageQR: 'http://dom.io/img.jpg',
    quanatityRate: 0.44,
    dateFrom: '2017-05-04',
    dateTo: '2019-05-04',
    reportCode: 789
  }

At first glance, what shared fields do you see on the objects? 🔍 Humm… I bet you found idAgent, reportName, dateFrom, dateTo and others.

These objects might seem a little messi tough 🤯 and would become hard to manage if the number of fields increases, as well as the number of report kinds and so on. Thinking about scalability, it’s important to take a time as dedicated developers and make sure we know what type of data we are handling.

Ha! What would a TypeScript developer had done in that case? 🚀 ️Well of course, the solution was to leverage the power of interface inheritance. This approach would allow us to validate the information integrity and its types when generating a specific report before sending the data to the server.

Analysis

Because I was managing POST HTTP requests with query parameters and different body requests these are the interfaces I created:

export interface CreateReportQueryParams {
  idAgent: number;
  reportName: string;
  fileFormat: string;
}
interface CreateReportGeneralRequest {
  dateFrom: Date;
  dateTo: Date;
  reportCode: number;
}
export interface CreateReportCashier extends CreateReportGeneralRequest {
  idCashier: number;
  factor555: boolean;
}
export interface CreateReportClaim extends CreateReportGeneralRequest {
  language: string;
  showRate: boolean;
}
export interface CreateReportExchange extends CreateReportGeneralRequest {
  imageQR: string;
  quantityRate: number;
}

export type CreateReportRequestBodyTypes =
  | CreateReportCashier
  | CreateReportClaim
  | CreateReportExchange;

So what is happening here? After breaking down all the fields, now we have 4 concepts:

An interface for the query parameters
A parent interface which has the request body shared fields
Specific interfaces for each kind of report which extend the parent interface
A discriminating union type that joins the specific interfaces

Improvements

So we are good, but wait… Did you notice something that can be improved? 🤔 These interfaces will help us by making sure if we want to get, I can say, the exchange report; we will need to adhere to its data type.

That’s exacly what we are looking for, nevertheless what would happen if someone misstypes reportName or fileFormat or reportCode and enters a wrong value? We would probably get a 404 — Bad Request response from the server or something similar, I most say. Well, in that case 💡we can take advantage of Enums.

Enums Usage

Enums allows us to define a set of named constants and thus a set of distinct cases:

export enum FileFormats {
  pdf = "pdf",
  word = "word",
  excel = "excel",
}
export enum ReportNames {
  ExchangeReport = "exchange-report",
  ClaimReport = "claim-report",
  CashierReport = "cashier-report",
}
export enum ReportCodes {
  ExchangeCode = 123,
  ClaimCode = 456,
  CashierCode = 789,
}

export interface CreateReportQueryParams {
  idAgent: number;
  reportName: ReportNames;
  fileFormat: FileFormats;
}
interface CreateReportGeneralRequest {
  dateFrom: Date;
  dateTo: Date;
  reportCode: ReportCodes;
}

With Enums no wrong values are allowed and therefore possible typing issues are prevented.

Using axios, the http service would look similar to this:

export interface CreateReportResponse {
  reportUrl: string;
}

//AxiosResponse schema here: https://axios-http.com/docs/res_schema

export class CreateReportService {
  /**
   * Will create a report.
   * ---
   * @param {CreateReportQueryParams} params request query parameters
   * @param {CreateReportRequestBodyTypes} requestBody the request body object which can have different types
   * @returns {CreateReportParams} The generated url for the report
   */
  createReport = async (
    params: CreateReportQueryParams,
    requestBody: CreateReportRequestBodyTypes
  ): Promise<AxiosResponse<CreateReportResponse>> => {
    const reponse = 
      await axios.post("http://dom.io/api/reports/create", 
        requestBody, 
        {
          params: {
            ...params,
          }
        }
      );
    return reponse;
  };
}

It’s so nice when you have a well typed function, isn’t it? 😏💻

Note: It’s worth saying we have an interfaceCreateReportResponse, that defines the data response structure we are expecting.

Creating a Report

So now that we have our service class, interfaces, types and enums… let’s create an exchange report:

  const exchangeReportParams: CreateReportQueryParams = {
    idAgent: 4444,
    reportName: ReportNames.ExchangeReport,
    fileFormat: FileFormatType.pdf,
  };
  const exchangeReportRequest: CreateReportExchange = {
    imageQR: "http://domain.com/image.jpg",
    quantityRate: 0.44,
    dateFrom: new Date("2017-05-04"),
    dateTo: new Date("2019-05-04"),
    reportCode: ReportCodes.ExchangeCode,
  };
  const createReportService = new CreateReportService();
  const exchangeReportResponse = await createReportService.createReport(
    exchangeReportParams,
    exchangeReportRequest
  );

After some analysis, the structure we are using to create new reports is now quite more neat and organized than before. Beautiful! 🌹💯

Solution Code

Lastly, putting all together, this was the solution that would allow everyone know the exact types of information required for the generation of new reports:

export enum FileFormats {
  pdf = "pdf",
  word = "word",
  excel = "excel",
}
export enum ReportNames {
  ExchangeReport = "exchange-report",
  ClaimReport = "claim-report",
  CashierReport = "cashier-report",
}
export enum ReportCodes {
  ExchangeCode = 123,
  ClaimCode = 456,
  CashierCode = 789,
}

export interface CreateReportResponse {
  reportUrl: string;
}
export interface CreateReportQueryParams {
  idAgent: number;
  reportName: ReportNames;
  fileFormat: FileFormats;
}
export interface CreateReportGeneralRequest {
  dateFrom: Date;
  dateTo: Date;
  reportCode: ReportCodes;
}
export interface CreateReportCashier extends CreateReportGeneralRequest {
  idCashier: number;
  factor555: boolean;
}
export interface CreateReportClaim extends CreateReportGeneralRequest {
  language: string;
  showRate: boolean;
}
export interface CreateReportExchange extends CreateReportGeneralRequest {
  imageQR: string;
  quantityRate: number;
}

export type CreateReportRequestBodyTypes =
  | CreateReportCashier
  | CreateReportClaim
  | CreateReportExchange;

export class CreateReportService {
  createReport = async (
    params: CreateReportQueryParams,
    requestBody: CreateReportRequestBodyTypes
  ): Promise<AxiosResponse<CreateReportResponse>> => {
    const reponse = 
      await axios.post("http://dom.io/api/reports/create", 
        requestBody, 
        {
          params: {
            ...params,
          }
        }
      );
    return reponse;
  };
}

Conclusions

The usage of interfaces, types and enums can help us represent concrete objects, define the structure of objects and have a strict typed system that will be less prompt to typing errors.
Enums allows us to define a set of named constants and thus a set of distinct cases.
Adhering to the type of data that is received/sent on a system is easier when leveraging TypeScript powers and thinking of clean code.

Well that was quite a lot of concepts! Always remember that the best way to keep the concepts fresh is to practice. The TypeScript Handbook will always be your source of truth when discovering new fun stuff with TypeScript, so don’t forget to give it a look. 😃

Here are some cool resources you can use to get more into TypeScript:

Utility Types | Decorators | Namespaces

Happy Coding! 🤓💻

PostgreSQL Functions, Must-Knows Quick Start

Diego Sevilla — Mon, 07 Jul 2025 04:17:14 +0000

As a software developer I bet you spend the majority of time creating functions in different kinds of programming languages like: Typecript, Python, Java, PHP, C# and so on. 💻 That’s terrific! Nevertheless, you can also build functions using PL/pgSQL (Procedural Language/PostgreSQL) in order to encapsulate SQL statements in one place and execute calculations and iterations with data, directly in the DB (data base). Since the syntax is a little different to what developers are used to, this article might be useful and save you some time.

PostgreSQL 🐘 is one popular relational data base management system (RDBMS), which is open-source and has a big community giving support to it. Read More

In this occasion, I will be sharing a brief practical example involving various useful Must-Knows that will help you quick start your development and data management with PostgreSQL functions.

TOPICS COVERED

Variables Declaration and Types
FOR loops
Conditionals
Logs
Helper Functions
Generic Error Handling

QUICK NOTE: in case you are short on time, you can jump directly to the Analysis Section to review the PL/pgSQL function examples and start creating your own functions⏩

📌Introduction
📌Analysis

📍FIRST - Logs
📍SECOND - Helper functions
📍THIRD - The Main Function

📌Conclusions

Introduction

Let’s say a movie theater manager 🎥 decides to start a discount promotion by giving coupons representing future discounts to existing customers. These coupons most be created for each customer that has watched movies with specific genres. Depending on the genre of the movie watched, the coupon will accumulate more, less or none points. Also, if the movie duration is less than 2 hours (120 min), the coupon will not apply regardless the movie genre.

So having this in mind 💡, here is the test DB:

/**
 * For simplificy purposes, I'm not specifying FOREIGN keys and the creation
 * of more tables Ex. Writer, MovieWriters, Actor, MovieCast, etc.
 * NOTE: replace gen_random_uuid() with uuid_generate_v4() in case you're 
 * using a previous PostgreSQL version. I'm using PostgreSQL 17.0.
 */
CREATE TABLE "Movie"(
 id UUID PRIMARY KEY DEFAULT(gen_random_uuid()),
 "title" VARCHAR(255),
 "duration" NUMERIC,
 "mainDirectorId" UUID,
 "writers"  TEXT, 
 "cast" TEXT 
);
CREATE TABLE "Genre" ( 
 id UUID PRIMARY KEY DEFAULT(gen_random_uuid()),
 "name" VARCHAR(255),
 "pointsApply" BOOLEAN,
 "points" NUMERIC
);
CREATE TABLE "MovieGenre" ( 
 id UUID PRIMARY KEY DEFAULT(gen_random_uuid()),
 "movieId" UUID,
 "genreId" UUID
);
CREATE TABLE "Director" (
 id UUID PRIMARY KEY DEFAULT(gen_random_uuid()),
 "name" VARCHAR(255),
 "otherWorks" TEXT
);
CREATE TABLE "Customer" (
 id UUID PRIMARY KEY DEFAULT(gen_random_uuid()),
 "name" VARCHAR(255),
 "phoneNumber" VARCHAR(255)
);
CREATE TABLE "CustomerWatchedMovie" (
 id UUID PRIMARY KEY DEFAULT(gen_random_uuid()),
 "customerId" UUID,
 "movieId" UUID
);
CREATE TABLE "Coupon" (
 id UUID PRIMARY KEY DEFAULT(gen_random_uuid()),
 "movieId" UUID,
 "customerId" UUID,
 "points" NUMERIC
);

and this is the sample data for our DB:

INSERT INTO "Genre" (name, "pointsApply", "points") VALUES ('Action', TRUE, 15),('Comedy', TRUE, 3),('Drama', TRUE, 4),('Horror', FALSE, 0),('Sci-Fi', TRUE, 10),('Romance', FALSE, 0),('Fantasy', TRUE, 4),('Thriller', FALSE, 0),('Documentary', FALSE, 0),('Adventure', TRUE, 10);
INSERT INTO "Director" (name, "otherWorks") VALUES('Christopher Nolan', 'Inception, The Dark Knight, Interstellar'),('Quentin Tarantino', 'Pulp Fiction, Kill Bill, Django Unchained'),('Steven Spielberg', 'Jurassic Park, E.T., Schindler''s List'),('Martin Scorsese', 'Goodfellas, Taxi Driver, The Irishman'),('James Cameron', 'Titanic, Avatar, Terminator'),('Greta Gerwig', 'Lady Bird, Little Women'),('Jordan Peele', 'Get Out, Us, Nope'),('Ridley Scott', 'Gladiator, Alien, The Martian'),('Wes Anderson', 'The Grand Budapest Hotel, Moonrise Kingdom'),('Denis Villeneuve', 'Blade Runner 2049, Dune, Arrival'),('George Lucas', 'Star Wars, Indiana Jones');
INSERT INTO "Movie" (title, "duration", "mainDirectorId", "writers", "cast") VALUES('Inception', 148, (SELECT id FROM "Director" WHERE name = 'Christopher Nolan'), 'Christopher Nolan', 'Leonardo DiCaprio, Joseph Gordon-Levitt, Ellen Page'),('Pulp Fiction', 149, (SELECT id FROM "Director" WHERE name = 'Quentin Tarantino'), 'Quentin Tarantino', 'John Travolta, Uma Thurman, Samuel L. Jackson'),('Jurassic Park', 127, (SELECT id FROM "Director" WHERE name = 'Steven Spielberg'), 'Michael Crichton', 'Sam Neill, Laura Dern, Jeff Goldblum'),('Goodfellas', 146, (SELECT id FROM "Director" WHERE name = 'Martin Scorsese'), 'Nicholas Pileggi', 'Robert De Niro, Ray Liotta, Joe Pesci'),('Avatar', 162, (SELECT id FROM "Director" WHERE name = 'James Cameron'), 'James Cameron', 'Sam Worthington, Zoe Saldana, Sigourney Weaver'),('Lady Bird', 95, (SELECT id FROM "Director" WHERE name = 'Greta Gerwig'), 'Greta Gerwig', 'Saoirse Ronan, Laurie Metcalf, Tracy Letts'),('Get Out', 104, (SELECT id FROM "Director" WHERE name = 'Jordan Peele'), 'Jordan Peele', 'Daniel Kaluuya, Allison Williams, Bradley Whitford'),('Gladiator', 155, (SELECT id FROM "Director" WHERE name = 'Ridley Scott'), 'David Franzoni', 'Russell Crowe, Joaquin Phoenix, Connie Nielsen'),('The Grand Budapest Hotel', 100, (SELECT id FROM "Director" WHERE name = 'Wes Anderson'), 'Wes Anderson', 'Ralph Fiennes, Tony Revolori, Saoirse Ronan'),('Dune', 155, (SELECT id FROM "Director" WHERE name = 'Denis Villeneuve'), 'Denis Villeneuve', 'Timothée Chalamet, Rebecca Ferguson, Oscar Isaac'),('Star Wars', 121, (SELECT id FROM "Director" WHERE name = 'George Lucas'), 'George Lucas', 'Mark Hamill, Harrison Ford, Carrie Fisher');
INSERT INTO "MovieGenre" ("movieId", "genreId") VALUES((SELECT id FROM "Movie" WHERE title = 'Inception'), (SELECT id FROM "Genre" WHERE name = 'Sci-Fi')),((SELECT id FROM "Movie" WHERE title = 'Pulp Fiction'), (SELECT id FROM "Genre" WHERE name = 'Thriller')),((SELECT id FROM "Movie" WHERE title = 'Jurassic Park'), (SELECT id FROM "Genre" WHERE name = 'Adventure')),((SELECT id FROM "Movie" WHERE title = 'Jurassic Park'), (SELECT id FROM "Genre" WHERE name = 'Drama')),((SELECT id FROM "Movie" WHERE title = 'Goodfellas'), (SELECT id FROM "Genre" WHERE name = 'Drama')),((SELECT id FROM "Movie" WHERE title = 'Avatar'), (SELECT id FROM "Genre" WHERE name = 'Fantasy')),((SELECT id FROM "Movie" WHERE title = 'Lady Bird'), (SELECT id FROM "Genre" WHERE name = 'Drama')),((SELECT id FROM "Movie" WHERE title = 'Get Out'), (SELECT id FROM "Genre" WHERE name = 'Horror')),((SELECT id FROM "Movie" WHERE title = 'Gladiator'), (SELECT id FROM "Genre" WHERE name = 'Action')),((SELECT id FROM "Movie" WHERE title = 'The Grand Budapest Hotel'), (SELECT id FROM "Genre" WHERE name = 'Comedy')),((SELECT id FROM "Movie" WHERE title = 'Dune'), (SELECT id FROM "Genre" WHERE name = 'Sci-Fi')),((SELECT id FROM "Movie" WHERE title = 'Star Wars'), (SELECT id FROM "Genre" WHERE name = 'Sci-Fi')),((SELECT id FROM "Movie" WHERE title = 'Star Wars'), (SELECT id FROM "Genre" WHERE name = 'Adventure'));
INSERT INTO "Customer" (name, "phoneNumber") VALUES('Alice Johnson', '465 101 010'),('Bob Smith', '111 222 333'),('Charlie Brown', '798 444 222'),('Daisy Miller', '432 222 789'),('Edward Green', '899 654 333');
INSERT INTO "CustomerWatchedMovie" ("customerId", "movieId") VALUES ((SELECT id FROM "Customer" WHERE name = 'Alice Johnson'), (SELECT id FROM "Movie" WHERE title = 'Inception')), ((SELECT id FROM "Customer" WHERE name = 'Alice Johnson'), (SELECT id FROM "Movie" WHERE title = 'Lady Bird')), ((SELECT id FROM "Customer" WHERE name = 'Alice Johnson'), (SELECT id FROM "Movie" WHERE title = 'Star Wars')), ((SELECT id FROM "Customer" WHERE name = 'Bob Smith'), (SELECT id FROM "Movie" WHERE title = 'Pulp Fiction')), ((SELECT id FROM "Customer" WHERE name = 'Bob Smith'), (SELECT id FROM "Movie" WHERE title = 'Get Out')), ((SELECT id FROM "Customer" WHERE name = 'Charlie Brown'), (SELECT id FROM "Movie" WHERE title = 'Jurassic Park')), ((SELECT id FROM "Customer" WHERE name = 'Charlie Brown'), (SELECT id FROM "Movie" WHERE title = 'Gladiator')), ((SELECT id FROM "Customer" WHERE name = 'Daisy Miller'), (SELECT id FROM "Movie" WHERE title = 'Goodfellas')), ((SELECT id FROM "Customer" WHERE name = 'Daisy Miller'), (SELECT id FROM "Movie" WHERE title = 'The Grand Budapest Hotel')), ((SELECT id FROM "Customer" WHERE name = 'Edward Green'), (SELECT id FROM "Movie" WHERE title = 'Avatar')), ((SELECT id FROM "Customer" WHERE name = 'Edward Green'), (SELECT id FROM "Movie" WHERE title = 'Dune'));

The INSERTs will basically do the following:

Insert 10 genres, movies and directors
Insert 5 customers
Link genres and movies respectively
Add at least 2–3 watched movies per customer

Analysis

Ok, awesome! 💯 Now that we have the data ready, let's review our main goal:

Create coupons for each customer that has watched movies with specific genres. Points will accumulate according to the movie genre and no coupon will be added if the duration is less than 2 hours.

This is the syntax for a PL/pgSQL function:

-- $$: opens and closes the body of the function
CREATE OR REPLACE FUNCTION "functionOne"(param1 VARCHAR, param2 INTEGER)
  RETURNS VARCHAR
  LANGUAGE plpgsql
  AS 
$$
DECLARE
  -- variables declaration here
BEGIN
  -- function logic here
RETURN 'Done.';
END;
$$;

FIRST - Logs

Depending on the amount of data and complexity of calculations, functions can take several minutes to complete. For debugging purposes, it's recommended to add info console logs which will let you know the progress of the function overall. However, for a post data analysis, it's important to consider a more robust logs approach, so that when the function finishes you have a way to verify the results:

-- Console log in PL/pgSQL
RAISE NOTICE 'Movie: % Customer: %', movieName, customerName;

-- Will store the logs of the backfill process 
CREATE TABLE "CouponBackfillHistory"(
 id UUID PRIMARY KEY DEFAULT(gen_random_uuid()),
 "movieId" UUID,
 "movieGenreId" UUID,
 "customerId" UUID,
 "accumulatedPoints" NUMERIC,
 "couponCreatedSuccessfully" BOOLEAN, -- indicator
 "notes" TEXT -- info regarding coupon insertion
);

SECOND - Helper functions

Since we need to iterate in Movies, Customers, Genres and add Coupons depending on what it's found, we need to reuse code:

-- Helper function to insert into CouponBackfillHistory table
CREATE OR REPLACE FUNCTION "insertCouponBackfillHistory"(
 movieId UUID,
 movieGenreId UUID,
 customerId UUID,
 accumulatedPoints NUMERIC,
 couponCreatedSuccessfully BOOLEAN,
 notes TEXT
) 
 RETURNS VOID -- will not return any value
 LANGUAGE plpgsql 
 AS 
$$
BEGIN
 INSERT INTO "CouponBackfillHistory" 
  ("movieId", "movieGenreId", "customerId", "accumulatedPoints",  "couponCreatedSuccessfully", "notes")
    VALUES 
  (movieId, movieGenreId, customerId, accumulatedPoints,  couponCreatedSuccessfully, notes);
END;
$$;

-- Helper function to handle generic errors
-- Ref: https://www.postgresql.org/docs/current/plpgsql-errors-and-messages.html
CREATE OR REPLACE FUNCTION "handleGenericError"(pgSqlState TEXT, pgSqlErrMsg TEXT, pgFunctionName TEXT)
 RETURNS VOID -- will not return any value
 LANGUAGE plpgsql
 AS 
$$
BEGIN
   RAISE EXCEPTION USING 
    ERRCODE = pgSqlState,
    MESSAGE = pgSqlErrMsg,
    HINT = pgSqlErrMsg || ' in function ' || pgFunctionName;
END;
$$;

THIRD - The Main Function

CREATE OR REPLACE FUNCTION "backfillCoupons"(customerName VARCHAR(255)) 
 RETURNS VARCHAR 
 LANGUAGE plpgsql
 AS 
$$
DECLARE
 customers RECORD; -- Iterator variables
 movies RECORD; 
 genreName VARCHAR(255); -- Other variables
 genrePoints INTEGER;
 genrePointsApply BOOLEAN;
 movieDuration INTEGER; 
 pointsCnt INTEGER := 0; -- Counters
 recordsCreated INTEGER := 0;
BEGIN
 RAISE NOTICE '----------------- START ------------------';
 RAISE NOTICE 'Customer: %', customerName;
 FOR customers IN -- Customer records loop
  SELECT c.id, c.name, cwm."movieId" watched_movie_id
  FROM "Customer" c 
  JOIN "CustomerWatchedMovie" cwm ON cwm."customerId" = c.id
  WHERE c.name = customerName
 LOOP
  pointsCnt := 0;
  FOR movies IN -- Movie records loop
   SELECT DISTINCT m.id, m.title, m.duration, mg."genreId" genre_id,
   m.writers, m.cast, d.name director_name
   FROM "Movie" m
   JOIN "Director" d on d.id = m."mainDirectorId"
   JOIN "MovieGenre" mg on mg."movieId" = m.id 
   WHERE m.id = customers.watched_movie_id
  LOOP
   RAISE NOTICE 'Movie: % Id: %', movies.title, movies.id;
   BEGIN
    SELECT g.name, g."pointsApply", g.points 
    INTO genreName, genrePointsApply, genrePoints
    FROM "Genre" g
    WHERE g.id = movies.genre_id;

    IF genrePointsApply = FALSE THEN
     RAISE NOTICE 'Points do not apply for Genre';
     PERFORM "insertCouponBackfillHistory"(movies.id,movies.genre_id, customers.id, 0, FALSE, 'Points do not apply for Genre');
     CONTINUE;
    ELSIF  movies.duration < 120 THEN
     RAISE NOTICE 'Movie duration is not equal or greater than 2 hours';
     PERFORM "insertCouponBackfillHistory"(movies.id, movies.genre_id, customers.id, genrePoints, FALSE, 'Movie duration is not equal or greater than 2 hours');
     CONTINUE;
    END IF;

    pointsCnt := pointsCnt + genrePoints;
    INSERT INTO "Coupon" ("movieId", "customerId", "points") 
    VALUES (movies.id,customers.id,genrePoints);
    PERFORM "insertCouponBackfillHistory"(movies.id, movies.genre_id, customers.id, genrePoints, TRUE, 'Coupon created succesfully');
    recordsCreated := recordsCreated +1;

    EXCEPTION --Handle unexpected errors
     WHEN OTHERS THEN
      PERFORM "handleGenericError"(SQLSTATE, SQLERRM, 'backfillCoupons');
   END;
  END LOOP; -- End Movie records loop
  RAISE NOTICE 'Total Points Accumulated: %', pointsCnt;
 END LOOP; --End Customer records loop
RAISE NOTICE 'Total number of coupons created: %', recordsCreated;
RAISE NOTICE 'Check CouponsBackfillHistory for details';
RETURN 'Success.';
END;
$$;

The function is simple, but looks wild at first sight 🍃🐯 haha let's break it down. It basically performs the following actions:

Iterate in one Customer
Iterate in each Movie watched by the Customer
Verify the Genre points and the Movie duration
Add a Coupon or jump to the next iteration depending on the conditions

Side note: the SELECT.. INTO.. query could have been omitted and included in a JOIN clause in the previous query, but was added for DEMO purposes.

Execute the function:

-- for all customers
SELECT "backfillCoupons"(name) FROM "Customer"; 

-- for one customer
SELECT "backfillCoupons"(name) FROM "Customer" WHERE c.name = 'Daisy Miller';

Logs for Daisy Miller:

----------------- START ------------------
Customer: Daisy Miller
Movie: Goodfellas Id: 487e3227-f6f0-4faf-8011-13dfa7abcc77
Total Points Accumulated: 4
Movie: The Grand Budapest Hotel Id: 3bd9fd29-f593-4b1f-8904-59456918e41a
Movie duration is not equal or greater than 2 hours
Total Points Accumulated: 0
Total number of coupons created: 1
Check CouponsBackfillHistory for details

Now let's execute a query to see the records:

-- Query 1
SELECT m.title "movieTitle", g."name" genre, cbh."accumulatedPoints", cbh."couponCreatedSuccessfully", cbh.notes
FROM "CouponBackfillHistory" cbh
JOIN "Movie" m ON m.id = cbh."movieId"
JOIN "Genre" g ON g.id = cbh."movieGenreId";

The coupon created:

-- Query 2
SELECT c.id, m.title "movieTitle", g."name" genre, cu.name, c.points
FROM "Coupon" c
JOIN "Movie" m ON m.id = c."movieId"
JOIN "MovieGenre" mg ON mg."movieId" = m.id
JOIN "Genre" g ON g.id = mg."genreId"
JOIN "Customer" cu ON cu.id = c."customerId";

Important things to keep in mind:

Use "" to use camelCase instead of snake_case in PostgreSQL.
Init all needed variables in the DECLARE section
FOR LOOPs and SELECT.. INTO.. statements depend on previous declared variables to work
Organize the code inside your function with BEGIN.. END; statements
Use SELECT DISTINCT.. to avoid duplicate rows
No changes will be committed to the DB unless the function completes
EXCEPTIONS will stop the execution of the function
Use CONTINUE; statement to jump to the next iteration in a loop

Conclusions

Getting familiarized with PL/pgSQL functions, is a nice ability that will help you automate SQL statements, iterate in complex data and execute operations depending on certain conditions.
Always consider a robust logs approach when creating any kind of function involving data changes.
Take into consideration the time you have and decide whether to use PL/pgSQL or implement a PostgreSQL connector with your preferred programming language for a better debugging experience.

PostgreSQL has lots of docs and examples throughout the internet. Checkout these references, I consider very helpful, for further reading:

My favorite DB IDE: DBeaver Community
Happy Coding! 😃💻

React Redux 5.x to 7.x - Brief Notes and Changes To Take Into Account

Diego Sevilla — Fri, 27 Jun 2025 16:53:19 +0000

Understanding the core concepts behind Redux is something quite important to study as Front-End web engineers. Now a days, quite a few React web applications use this JS library for managing the global state of a website, not to mention other frontend technologies like Angular and Vue as well. To understand Redux structure and how it works overall will open your mind to its purpose and usage in web development.

📌Introduction
📌Main changes between react-redux@5.0.7 and react-redux@7.2.2
📌Analysis

📍FIRST - this.context.store is not supported anymore
📍SECOND - withRef and forwardRef
📍THIRD - be aware of store prop

📌Conclusions

Introduction

Redux will help you manage the global state of your app, however if you are working with React it’s very probable you will end up using React Redux, which is the official React UI bindings layer for Redux.

Not long ago, I had the opportunity to start working on a medium tenure complex React 16.X application with lots of intrinsic business logic on its code. Due to the age of the app there was a mixture of old and new React practices such as: class based components using lifecycle functions, functional components, hooks and so on.

While working on the Front-End side of things, I noticed the versions of some npm packages were outdated. So I decided to upgrade the react-redux version to the most latest version possible in order to leverage the usage of Redux with Hooks, which is a common recent practice when working with Redux. During this process, I found different kinds of errors that broke the web application and were stopping me to achieve what I wanted at the moment.

After doing a research on the web, I was not able to find a consistent list of changes between version 5.X and version 7.X of React Redux. So after fixing the errors, this is the list of changes I made:

Main changes between `react-redux@5.0.7` and `react-redux@7.2.2`

this.context.store is not supported anymore within Classed Based Components since the store can be accessed via the useStore() hook
withRef occurrences most be replaced with forwardRef
The store needs to be passed as a prop to App wrappers like <ConnectedRouter/>

Note: when updating npm packages it’s important to check the peer dependencies of the package you’re planning to upgrade to make sure the packages installed in your project will work well together. Read More

It’s always a good idea to go check the main repo of the npm package to understand the changes made with each release. Here is a link to react-redux 7.x release notes.

Analysis

Ok, so this is getting interesting. 🔍 Let’s take a closer look to each of the bullets.

FIRST - `this.context.store` is not supported anymore

In the case of the app I was working on, there were several classed based components that were using this.context.store to pass the entire Redux state as a prop to child components using Redux Form. Redux Form uncontrolled forms are not wrapped by the react-redux provider by default.

To fix this I created a custom functional component used as a wrapper to pass the global store to class based components. The reason of this was, of course, because we are not allowed to use hooks within class based components:

interface ComponentTypes { 
  Component: React.ReactNode | React.ReactElement | JSX.Element; 
}
export const withReduxStoreHOC = ({ Component }: ComponentTypes) => {
  return (props: any) => {
    const store = useStore();
    return <Component store={store} {...props} />;
  };
};

So then, I replaced this.context.store with this.props.store and everything worked well ⭐️

Check this link for react typescript references.

Note: this.context.store I would say was not the best practice, since one can use Selectors to select a specific peace of the redux store. Nevertheless, it was being used to pass the store to uncontrolled forms (redux-forms) that are not wrapped by the react-redux provider by default.

import { Provider } from 'react-redux';
import store from './store';

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

SECOND - `withRef` and `forwardRef`

This bullet is pretty self explanatory, I just changed withRef occurrences with forwardRef and everything was good. If you want to do further research on this topic, check the following link: How to use Refs on Connected Components

THIRD - be aware of `store` prop

Be aware of your React App wrappers such as <ConnectedRouter/>. For this case the store needed to be passed to <ConnectedRouter/> as a prop.

import { Provider } from 'react-redux';
import store, { history} from './store';

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

Conclusions

When updating npm packages it’s important to check the peer dependencies of the package you’re planning to upgrade.
Unless you’re starting a new react app, it’s very likely that you will find old projects which will have older versions of packages.

Note: I hope this article is useful to you! Take into account the setup of your app might have differences, so keep in mind you should always do a thorough testing of your application and consult the Official Docs.

If you have used Redux before, you and I will not argue about the fact that the complexity may become a little big when it comes to manage complex applications, nevertheless I most say the package itself is powerful and cool stuff can be built with it. 😃

Currently, Redux Toolkit (a new big update to Redux) is now intended to be the standard way to manage Redux logic. It’s approach makes it easier to manage Redux and to say “good bye” to old Redux concerns.

Checkout this interesting link about the history of React Redux History.

Happy Coding! 🤓💻

DEV Community: Diego Sevilla

Interface Inheritance, Types and Enums with TypeScript - Practical Example

Table of Contents

Introduction

Analysis

Improvements

Enums Usage

Creating a Report

Solution Code

Conclusions

PostgreSQL Functions, Must-Knows Quick Start

Table of Contents

Introduction

Analysis

FIRST - Logs

SECOND - Helper functions

THIRD - The Main Function

Conclusions

React Redux 5.x to 7.x - Brief Notes and Changes To Take Into Account

Table of Contents

Introduction

Main changes between `react-redux@5.0.7` and `react-redux@7.2.2`

Analysis

FIRST - `this.context.store` is not supported anymore

SECOND - `withRef` and `forwardRef`

THIRD - be aware of `store` prop

Conclusions

DEV Community: Diego Sevilla

Interface Inheritance, Types and Enums with TypeScript - Practical Example

Table of Contents

Introduction

Analysis

Improvements

Enums Usage

Creating a Report

Solution Code

Conclusions

PostgreSQL Functions, Must-Knows Quick Start

Table of Contents

Introduction

Analysis

FIRST - Logs

SECOND - Helper functions

THIRD - The Main Function

Conclusions

React Redux 5.x to 7.x - Brief Notes and Changes To Take Into Account

Table of Contents

Introduction

Main changes between react-redux@5.0.7 and react-redux@7.2.2

Analysis

FIRST - this.context.store is not supported anymore

SECOND - withRef and forwardRef

THIRD - be aware of store prop

Conclusions

Main changes between `react-redux@5.0.7` and `react-redux@7.2.2`

FIRST - `this.context.store` is not supported anymore

SECOND - `withRef` and `forwardRef`

THIRD - be aware of `store` prop