PAGINATION in pieces

Anunirva — Fri, 08 Oct 2021 13:46:24 +0000

Pagination

Instead of dumping and confusing the END USER with all the data we have on the server at once, we can use concept of pagination.

Here we will present data in chunks, so basically we will feed small piece of pizza slice instead of the 12' pizza at once.

Benefits

We can reduce the end point API response time as we are requesting only small piece of data. Consider the server has users list of 43,890 records instead of pumping all the records at once, we will pass the EXACT needed slice of record based on the where the user is.

Show the logic

Here are few things we need to keep in mind while designing pagination concept.

Number of records we need to show on each page (5,10,15)
How many number of pages you want to show the end user (<,1,2,3 > or <1,2,3,4,5)

Here i'm taking JavaScript as my coding language, consider the data is residing inside the huggeeeee array. To extract piece of data at specific place from an array can be done by using SLICE

Array.slice(startIndex, endIndex), this will provide you the data at that frame.

Now how to calculate startIndex & endIndex

dataLimit = the number of records we want to show on the page!

endIndex = startIndex + dataLimit;

Now what about startIndex

startIndex = (pageNumber * dataLimit) - dataLimit

consider dataLimit = 10 records per page.

so for the first page startIndex = (1 * 10) - 10 = 0

now the endIndex will be = 0 + 10 = 10;

Also to get the paginationGroup, ie how many pages we want to show on the UI

consider pageLimit = 5, we show atleast 5 pages eveytime

let start = Math.floor((currentPage - 1) / pageLimit) * pageLimit;

return new Array(pageLimit).fill().map((_, idx) => start + idx + 1);

hey future you, i hope that makes sense.

Links used for reference:

https://academind.com/tutorials/reactjs-pagination

Introducing JATAYU !

Anunirva — Fri, 24 Sep 2021 06:13:56 +0000

JATAYU 🦅

Jatayu is a command line interface (CLI) tool which helps to generate production ready hand-made React templates for the App (web-app) or Library (components) development. 🚀

See npm package details here here

See Repo here here

What is the purpose of JATAYU ? 💁

Did you ever tried setting up your own react environment without create-react-app ? Then you know the pain behind it. Adding testing support | webpack | typescript | docker will just increases that pain. 😪

JATAYU is that pain killer 💊. If you want to have custom template setup for your react web app or component library without the need of CRA or it's alternatives, JATAYU to the rescue. 🥳

We provide you the skeleton template structure and sky is the limit for it's tuning.

At its very core JATAYU offers below described templates with both Typescript & Javascript support as template supporting languages and Docker setup (for web apps).

  1.React Component Library
  2.React Web App
  3.React Web App with Redux
  4.React Web App with Redux Toolkit
  5.React Web App with Context

When you choose any one of the above projects, we provide you the ready-made template structure.

Features

Template Type/Support	Webpack	Testing (@testing-library)	Storybook	Typescript	State Management	Lint	Build	Docker
React Component Library	✅	✅	✅	✅	No	✅	✅	No
React Web App	✅	✅	No	✅	✅	✅	✅	✅
React Web App with Redux	✅	✅	No	✅	✅	✅	✅	✅
React Web App with Redux Toolkit	✅	✅	No	✅	✅	✅	✅	✅
React Web App with Context API	✅	✅	No	✅	✅	✅	✅	✅

Installation 🔨

Use the package manager npm to install jatayu globally.

npm install -g jatayu

Usage ⚠️ ✅

After installation, create an empty directory anywhere you want and type jatayu in the terminal of the newly created folder. Voila! you will be prompted to answer two basic questions go ahead and answer them !

  1. Please enter directory name where your react template will reside

  2. Please select template type  (Use arrow keys)

    React Component Library  
    React Web App  
    React Web App with Redux 
    React Web App with Redux Toolkit
    React Web App with Context  

  3. Please select template support 

     Javascript(JS)
     Typescript(TS) 

  4. Do you want to add docker to the Template ? (if you select app template)

      Yes
      No

Enter the directory name where you want to setup react app and select the type of project you want.

Steps after installing the project 📌

If you select Web App or Library template without Docker support:

Now cd to the newly created folder by jatayu and do npm install. It's good to update your newly created node_modules by npm outdated you will get list of outdated node_modules, update them by npm update.

Start the template by npm run start (if you have chosen webapp template) or npm run storybook (if it is library template)

cd `your-newly-created-folder`

npm install

run -> npm run start (if you have chosen webapp template)

       or

       npm run storybook (if it is library template)

If you chose to add Docker to the App template

cd `your-newly-created-folder`

dev-run -> docker compose up --build (starts dev server, please navigate to http:localhost:5200 to see your App up and rolling!)

build -> docker compose -f docker-compose.prod.yml up --build (to build and run on dist folder, please navigate to http:localhost:1337 to see your App up and rolling!)

What's next in the store?

We have plans to make JATAYU library/framework independent. So that JATAYU can offer custom templates to Angular, Vue, Svelte etc.

Upcoming templates:

  React with GraphQL

  Full stack MERN combo (MongoDB+Express+React+Node)

Screenshots 💣

Screenshots of the flow

Enter directory name

Select template type

Select template supporting language type

Need docker support?

Successful template creation without docker

Successful template creation with docker

Enough with the theory, let's see Jatayu in action 💣

I want to setup React Web App with Redux, let's find out how Jatayu helps us!

I will chose my directory as hello select React Web App with Redux template with Typescript support.

Project Templates:

Expannded view:

Install all the dependencies by npm install command in the terminal and then

without docker support

Run the template by npm run start

(broswer open with localhost:5203)

with docker support

Run the template by docker compose up -d --build

(Open broswer with localhost:5200)

Always make sure the ports defined in the docker-compose.yml file and npm start script file are always same.

License 🦔

MIT

Feedback 📣

If you have any feedback, please reach out to us at manoj.gangavarapuu@gmail.com

DEV Community: Anunirva