DEV Community: Sanskar Gupta

Ag-grid hacks 1 - getting updated rows

Sanskar Gupta — Sun, 02 Aug 2020 09:54:46 +0000

Prologue

Implementing ag-grid functionalities can be quite frustrating at times especially when you are handling the enterprise version, the ag-grid hacks series will be considerate in reducing implementation time and reducing the extent of frustration that may arise scavenging the internet for sample implementations.

Introduction

To all who are not familiar: Ag-grid is a library to implement data grids and charts in your project , where data changes can be in real time as well, the community version is free while you need to pay a hefty amount to get the enterprise version which is loaded with more features.

Problem Statement

It becomes difficult at times to get the list of all recent rows in the from of objects while dealing with an editable ag-grid as there is no straight api like getUpdatedRows() in ag grid documentation though we can trigger a method when cell value changes.
Link

Solution

Consider the following piece of code:



import React from 'react'
import { AgGridReact } from 'ag-grid-react'
import 'ag-grid-community/dist/styles/ag-grid.css'
import 'ag-grid-community/dist/styles/ag-theme-balham.css'
import { getColumnDefs } from './ColumnDefUtils'

const columnDefs=[
{
      headerName: 'City',
      field: 'type',
      filter: 'text',
      editable: true,
    },
    {
      headerName: 'Population',
      field: 'children',
      filter: 'text',
      editable: true,
    },{
      headerName: 'Currency',
      field: 'children',
      filter: 'text',
      editable: true,
    },

]



class Example extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      rowData: [],
    }
  }

  componentDidMount() {
    methodToFetchDataFromBackend()
      .then((response) => {
        this.setState({ rowData: response.data })
      })
      .catch(() => {})
  }

  getUpdatedRows = () => {
    return this.state.rowData.filter((row) => row.changed === true)
  }

  handleSave = async () => {
    // filter the row data(this.state.rowData) where the changed in true and send ony those objects to backend
    saveMethod(this.getUpdatedRows())
  }

  onCellValueChanged = (params) => {
    this.setState({ saveButtonDisableFlag: false })
    params.node.data['changed'] = true
  }

  render() {
    return (
      <AgGridReact
        columnDefs={columnDefs}
        rowData={this.state.rowData}
        onCellValueChanged={this.onCellValueChanged}
      />
    )
  }
}

Consider the rowData being updated when the component mounts by fetching data from backend. Ag grid api provides an inbuilt method "onCellValueChanged" that is triggered when we edit the grid.
Ag grid api methods: link

The line params.node.data['changed'] = true inserts an extra field to the row object whose cell underwent change.
Note that, here params contains all information about the row and cell.
Here is the sample params object

It contains the oldValue , newValue , the data is the rowData for which the cell belongs.
In the above code getUpdatedRows filters the data by "changed " field and sends only the updated rows to the backend for saving.

This is how one can get hold of updated rows by a simple hack!

Add a rich text editor to your app: react-draft-wysiwyg

Sanskar Gupta — Wed, 22 Jul 2020 19:35:08 +0000

Introduction

The npm library react-draft-wysiwyg is one of the popular ready to use rich text editor framework built on top of react and draft-js which is in turn a framework for building rich text editors that leverages the power of immutable collections in javascript.

Rich text and plain text

Rich Text Format (RTF) is a file format that allows the exchange of text files between different editors. ... Plain Text: Plain text contains no formatting, only line breaks and spacing. Therefore no text formatting (such as font sizes and colors, bolding or italics) can be used.

Use case

A rich text editor has many use cases, some of them being creating website wide announcements, illustrative and emphasized description of products.

Installation

Execute npm install draft-js he react-draft-wysiwyg

Note that he is an html encoder/decoder.It will be used to decode text coming from the backend and covert to object.

An example

The best way to get acquainted with a concept is by an example , so let's follow this approach.
The following example will demonstrate step by step process to show, edit and save text in the text editor.

The message coming form backend will be in the form of an unescaped html string eg:

{
   "text": "{&#34;blocks&#34;:[{&#34;key&#34;:&#34;13trq&#34;,&#34;text&#34;:&#34;Important message!&#34;,&#34;type&#34;:&#34;unstyled&#34;,&#34;depth&#34;:0,&#34;inlineStyleRanges&#34;:[],&#34;entityRanges&#34;:[],&#34;data&#34;:{}}],&#34;entityMap&#34;:{}}"
}

Note that in the above sample response the text that will be shown is "Important message!"

Lets decode this html string using he and set the editor state using below sample function

import { Editor } from 'react-draft-wysiwyg'
import { EditorState, convertFromRaw, convertToRaw } from 'draft-js'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
import he from 'he'

//some_code


function setUpEditor(){

const serverResposne = {
   "text": "{&#34;blocks&#34;:[{&#34;key&#34;:&#34;13trq&#34;,&#34;text&#34;:&#34;Important message!&#34;,&#34;type&#34;:&#34;unstyled&#34;,&#34;depth&#34;:0,&#34;inlineStyleRanges&#34;:[],&#34;entityRanges&#34;:[],&#34;data&#34;:{}}],&#34;entityMap&#34;:{}}"
}

const message = JSON.parse(he.decode(serverResposne.text))
      if (message.blocks[0].text === '') {
       //this condition indicates empty message
      } else {
        const contentState = convertFromRaw(message)
        const editorState = 
                  EditorState.createWithContent(contentState)
        setEditorState(editorState) //setting the message state in editor
      }

Note that editorState is the top level object for the editor and has the following information:

1)The current text content state
2)The current selection state
3)The fully decorated representation of the contents
4)Undo/redo stacks
5)The most recent type of change made to the contents

More information on editorState: Link

As you start typing the editorState will get updated accordingly

Action Buttons

You can add some action buttons beneath the editor , such as
save, clear

Clear

This will clear out the text in the editor on button click.Here is how the onClick handler will look like:

const onClear = () => {
    setEditorState(EditorState.createEmpty())
  }

Save

Convert the state to unescaped html string and call the save method responsible for triggering rest call.

const onSave = async () => {
    const newMessage = {
message:
JSON.stringify(convertToRaw(editorState.getCurrentContent()))
      }

//api call here with newMessage as request body
}

Note that we can check if the editor state has empty message by editorState.getCurrentContent().hasText()

Refer Example file for sample implementation.

Demystifying React Portals-Don't let the parent enforce styles on the child

Sanskar Gupta — Sat, 18 Jul 2020 16:46:00 +0000

A portal is defined as a doorway, gate, or other entrance, especially an imposing and a secretive one.

This same concept is applied to a react component who is able to travel through a portal and is able to render itself on a DOM node which does NOT belong to its parent's DOM hierarchy.

Why to use it?

Every UI developer might have faced a scenario where parent css styles gets applied to the children components and this takes up huge amounts of time to come up with a workaround.
React portals enables the children not to get rendered in same DOM tree as its parent ,hence they are saved from getting css being applied to them forcefully.

Some of the use cases of portals include modals, tooltips, notification bars, toasters etc.

Example use case

Consider the following piece of code

import React from "react";
import "./styles.css";
import ReactDOM from 'react-dom'

const modalRoot = document.getElementById('root')
const modalRoot = document.getElementById('another_root')

class App extends React.Component {
  state = {
    show: false
  };
  showModal = e => {
    this.setState({
      show: !this.state.show
    });
  };
  render() {
    return (
      <div style={{textAlign: 'center', maxWidth: '50%'}}>
        <button
          onClick={e => {
            this.showModal(e);
          }}
        >
          {" "}
          show Modal{" "}
        </button>

        <Modal onClose={this.showModal} show={this.state.show}>
          Text
        </Modal>
      </div>
    );
  }
}

class Modal extends React.Component {
    onClose = e => {
        this.props.onClose && this.props.onClose(e);
    };
    render() {
        if (!this.props.show) {
            return null;
        }
        return (
            <div >
                <h2>Modal Window</h2>
                <div >{this.props.children}</div>
                <div >
                    <button  onClick={this.onClose}>
                        close
                    </button>
                </div>
            </div>
        );
    }
}


ReactDOM.render(<App />, rootElement);

Here it can be seen that the parent(App) has a div whose max width is set to 50 percent , as a result this width restriction gets applied to modal as well.

Here is the result:(Click on image to get the width idea)

Now consider this piece of code with portals:

import React from "react";
import "./styles.css";
import ReactDOM from 'react-dom'

const modalRoot = document.getElementById('root')
const modalRoot = document.getElementById('another_root')

class App extends React.Component {
  state = {
    show: false
  };
  showModal = e => {
    this.setState({
      show: !this.state.show
    });
  };
  render() {
    return (
      <div style={{textAlign: 'center', maxWidth: '50%'}}>
        <button
          onClick={e => {
            this.showModal(e);
          }}
        >
          {" "}
          show Modal{" "}
        </button>

        <Modal onClose={this.showModal} show={this.state.show}>
          Text
        </Modal>
      </div>
    );
  }
}

class Modal extends React.Component {
    onClose = e => {
        this.props.onClose && this.props.onClose(e);
    };
    render() {
        if (!this.props.show) {
            return null;
        }
        return ReactDOM.createPortal (
            <div >
                <h2>Modal Window</h2>
                <div >{this.props.children}</div>
                <div >
                    <button  onClick={this.onClose}>
                        close
                    </button>
                </div>
            </div>, modalRoot
        );
    }
}


ReactDOM.render(<App />, rootElement);

Here is the result:

It can be seen that the modal is encompassing the whole width and not just the 50 percent as defined in parent.
ReactDOM.createPortal accepts two params , the jsx and the DOM node that is present outside like the div with id and "another_root"

On exploring the console:

It is proved that the modal is rendered under the "another_root" div and not the "root" on which the parent (App) is rendered.

The above example demonstrates the usage of a react portal considering modal as an example.

PS: It should be noted , though the child(modal) belongs to different DOM tree, there are no changes in flow of props and data i.e consider it as a normal child while dealing with props.

The above code can be found at: Link

NPM Primer: Publishing your first npm package

Sanskar Gupta — Wed, 15 Jul 2020 16:36:46 +0000

Publishing an npm package to npmjs registry can be your first step towards being part of open source community.Before diving into publishing a piece of javascript code as a package, let's brush up some relevant nomenclature.

What is NPM for?

npm is a package manager for the Node JavaScript platform.It manages packages/libraries in in a single place and facilitates node to find them when required.The registry www.npmjs.com hosts numerous free packages to download ,install and use in your projects.

To set up node and npm please follow the official documentation Link

Setting up the piece of code

Let's consider an example and create an npm module exposing some methods that will come in handy for array processing.

Make project directory

mkdir array-util

cd array-util

Make it a node project

npm init

This will create a file package.json that holds name of dependencies and scripts like test, eject, build etc.
Use the command line to follow through the entire process like the below image:

The package.json file will look like:

{
  "name": "arrayutil",
  "version": "1.0.0",
  "description": "Package having methods for array processing",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Sanskar Gupta",
  "license": "ISC"
}

Create a directory src and place your js file and name it as utils.js .This file will hold
all the methods that are supposed to be exposed.

const arrayutils = {
  sort: (array) => {
     return array.sort()
  }
}

export default arrayutils

Note that here ES6 is being used, we will convert it to ES5 using babel.

Create a file export.js under src that will will serve as the entry point for the module.
export { arrayutils } from "./utils"

Cant ignore .npmignore

Create a file namely .npmignore in the project root, here we will add all the directories or files that should not contribute to out npm module for eg, .vscode, .idea , src.

Note that here we are writing our module in ES6 that will be converted to ES5 later under the dist folder that will hold the cross browser supported module, as a result we need to add src (in ES6) to .npmignore to mitigate the unecessary increment in package size.

Modify package.json

Change the main field in package.json to "./dist/export.js"
Add a publish script under scripts

Include babel core and babel cli
PS: Babel is a free and open-source JavaScript transcompiler that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript that can be run by older JavaScript engines.

The package.json should look like:

{
  "name": "arrayutil",
  "version": "1.0.0",
  "description": "Package having methods for array processing",
  "main": "./dist/export.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    "publish:npm": "rm -rf dist && mkdir dist &&  babel src -d dist --copy-files"

  },
"babel": {
    "presets": [
      "@babel/preset-react"
    ]
  },
  "author": "Sanskar Gupta",
  "license": "ISC"
"dependencies": {
    "@babel/core": "^7.9.0",
  },
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/preset-react": "^7.9.1"
  }
}

Note that on running the command:
npm run publish:npm a folder named dist will be created having code in ES5 format.

Lets publish to npm!

1)Commit and push your changes to your preferred branch.We need to keep the commit tree clean before publishing to npm.

2)Run npm login

3)Login with the credentials.Make sure you have created an account on https://www.npmjs.com/

4)You can check your login status by npm whoami

5)Run npm run publish:npm to build

6)If publishing for the first time you can directly run npm publish, if updating the current published version execute
npm version <version_number> before publishing
You can follow any version sequence as per your choice
though it is suggested to use 1.x.x

7)Go to npmjs and validate your package by downloading and using in some other project

8)Note that its always good to have a readme, so make sure that README.md is added stating instructions on how to import and use the module preferably with an example.

Example Repo: https://github.com/Sanskar95/snack-toast

PS: You can check the download stats of your module on
https://npm-stat.com/