DEV Community: Karan

Dynamic PDF generation made simple

Karan — Wed, 20 Sep 2023 11:11:30 +0000

One major challenge every developer faces is generating reports and sending it as emails, coping up with the client's everchanging requirements over the templates, and data configuration.

The traditional way of doing it, is by creating a HTML Pug template for the requested PDF and place template placeholders and pass the real-time data as dynamic variables. Most probably we'll end up using Puppeteer or PDFKit. Customizing these templates as the requirement changes is a tedious and repetitive work.

To tackle these issues, why not ask the business people to design their PDF templates and customize it as per their requirements. As a developer our focus is to prepare data for the reports and call a service that will take care of the PDF Generation. We created an service that does exactly this.

PDFHippo a tool that let you business people design their report just using an Excel and map the cells that's going to render dynamic data using the syntax var:customer_name and define the cell ranges.

To render array of data like invoice table we can use the formula

Upload the excel and save it as a template in PDFHippo and it will give you and unique api end point for the template.

Prepare the JSON data using your favorite programming language and call the template api. Save the blob and boom... Now you can share it with your clients, send it an email or save it in your bucket.
Best part: None of your data is getting saved in PDFHippo.

Documentation: https://pdf-hippo.readme.io/reference/getting-started-with-your-api

Give it a try and let me know what we can do to build up on this!

When Promise.race() wasn't racing

Karan — Sat, 15 Oct 2022 17:16:08 +0000

The Problem

A week ago we encountered this weird bug in one of our core APIs. The issue was that it was not returning any response whatsoever.

Luckily we’d found this issue during staging. My senior and I immediately got to work. For almost an hour we scratched our heads checking all the edge cases, connections, environments and queries. Everything looked perfectly fine on the command line, so why wasn’t this working?

Annoyed beyond repair, we just decided to take the age old route and decipher each piece of code piece by piece on blocks and queries in the API, until the culprit revealed itself.

Promise.race()

We had initialised a simple check to return a response as soon as the validation service found at least one error in the data that we were validating. Pretty simple use case. We used Promise.race() to achieve this. Promise.race() works perfectly fine when validating lot of data. Again, pretty straightforward answer.

EXCEPT! The function only works on certain conditions.

The BUG

The data that we needed to be validated was being fetched from another query. Apparently when we were passing this data, it was empty and we were unknowingly passing an empty array into the Promise.race([]) function.

This will result in something called a foreverPendingPromise. It’s clearly mentioned in the MDN about this case, and we’d overlooked it.

To understand this situation better, let's dig a little deeper on how the function actually works.

This results in

As we see callPromise() took exactly 5 seconds to execute - the fastest getValue() promise to resolve. Works totally fine.

The whole fiasco starts when we pass an empty array. Code pen to Cry - where the console logs `start' and wait forever for the race to finish.

The fix

The simple fix we patched is to run the race only if something in the validation array. It’s a simple problem and a simple solution, but it’s the simplest things that are often neglected. The devil is in the details.

Editing courtesy ah__sho
Code Snippets by Carbon
Cover pic by Austris Augusts on Unsplash

Use hook functions in class component: React

Karan — Fri, 22 Oct 2021 13:02:58 +0000

Converting the legacy class components to functional components is not an easy task if the component is dealing with complex logic.

There are times when we can implement custom hook functions to achieve a shared functionality like triggering the popup with a message on any component. Eg: Popup will be visible on the component. But we can't consume the hook directly in a class based component. However there's a workaround to achieve it.

Step 1:

Create a functional Higher Order Component which accepts the initialState for the hook and a react component as the param.

Step 2:

Import the hooks here and pass the hook functions as params to the return component.

Step 3:

Wrap the class component with our HOC component. Pass the initial states for the hook as params in the HOC.

Result:

Now we can call the hook methods from this.props.