Some Utils/Generic Functions
Tags: javascript, react, functional, utilities
Published: 2021-01-28 16:28:18

Utility functions are really good and powerful for every application , they can produce a good impact on application or on the code reviewer. let see some of the examples here to learn about them 

1. Name Concatenation
2. Date Format
3. Custom Tostify
4. Convert Imagetobase64
5. Image Extension Validation

# Name Concatenation
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/s4zaf8zec76gksf07tja.png)
in this example, I simple place 3 conditions in function , the function will take an object as param,

>first condition will check if lastname property is not present in data object then return only firstname.

>second condition will check if firstname property is not present in data object then return only lastname.

>thirsd condition will check if firstname and lastanme properties are present in data object then return firstname + lastname.

# Date Format
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0dnsxwd9kicitb7ggt5c.png)

in this example, i use the moment library to get date format, declare empty object with authentic name and then declare  different function for formatting in this object ,every function will take date as param and return the result with desire format.

> first one will return complete data and time , date will be in words and time with AM/PM.

> second one will return only date without time , date will be in words.

> third one will return date only with aligning in month-date-year.

> fourth one will return date only with aligning in date-month-year.

> fifth one will return date only with aligning in year-month-year.

# Custom toastify

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w4a0bglq9mxjpeuyzxvt.png)

in this example i used the library react-toastify for show simple message to user , i created a function import the library and then create a config object for my every message and create a switch case functions with 2 case , 1 is error and 2 is success, you can create as many as you want with given lib flags ,like error , success , info etc.
this function will take 2 arguments first will be flag for error and then message will be second param.

> first case will execute when flag "error" comes and it will show the message to user with default configuration.

> first case will execute when flag "success" comes and it will show the message to user with default configuration.

# Convert Imagetobase64

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k63cbg2gwfprrlyvf4nq.png)

in this example , I create a function for convert image to base64 , this function will accept one param which is file object, when this function call it will create a FileReader object and then i used the method to convert the file to base64 if file convert successfully it will resolve and return string. if any error occur it will reject and return the error.

# Image Extension Validation

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qutz6tan2tllf57n8qz5.png)

in this example function will receive image object and then i split the name of picture the name field will be in image object from which i get the image extension and then i simple create a condition that if image extension will be jpg,JPG,png,PNG then it will be true/valid image otherwise will be be false/invalid image
these all functions now can be use on entire application so you don't need to define again and again these functions in different pages to use , you can import functions and use them.