A set of utility/helper functions to speed up development

Use this in your React, Vue, Angular, Solid, & Svelte Projects

Table of Contents

1. Installation
2. bordsFetch
   • Basic Usage
   • Advanced Usage
3. getObj
4. getURLParams
5. arrRemove
6. arrRemoveObj
7. arrReverse
8. removeItemOnce
9. removeItemAll
10. clearCacheData
11. formatDate
12. formateDate2
13. formatDateMiddleEastern
14. getDayName
15. counterAnimation
16. waitInSeconds
17. toggleInt
18. toggleBoolean
19. capitalizeFirstLetter
20. extractTime
21. calcPercOnNum
22. getTotalSecondsByTimeDiff

Installation

  npm i bords-utils

bordsFetch(methodType, apiUrl, authtoken, options, signal)

More Cleaner, More Modern & Concise Fetch! NO BOILERPLATE NEEDED!

Key Features

• Save hundred lines of code setting up fetching method boilerplates
• Easy to use Promise based HTTP client, shorthand fetch
• Uses native Fetch API (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
• Uses Async/Await internally
• Can be called anywhere (eg. helpers, components and state manager)
• Supports additional arguments for Headers and Authentication
• Supports abort signal/fetch request cancellation (AbortController)
• Supports Promise chaining or nested fetch
• Auto-detects API response between json and plain text

Basic Usage

  bordsFetch('GET','https://jsonplaceholder.typicode.com/posts/1',{},{},{})
  .then(res => console.log(res))

  // OR Async/Await below:

  const fetchData = async () => {
    let result = await bordsFetch('GET','https://jsonplaceholder.typicode.com/posts/1',{},{},{})
    console.log({result})
  }

Advanced Usage

constants.js

  export const __API_ROUTE   = 'http://localhost:3000/api'
  export const __BEARER      = 'SecretBearer '
  ...

your-component.js

  // Sample Code in React JS
  import * as CONSTANT from 'constants'
  import { bordsFetch } from 'bords-utils'

  const [value,setValue] = useState({})
  useEffect(() => {
      //call with no options, just pass empty object {} to token, options & signal
      bordsFetch(
        'GET',                                // request method
        `${CONSTANT.__API_ROUTE}/gettodos`,   // api URL
        `${CONSTANT.__BEARER}<api-token>`,    // Bearer Token
        {},                                   // fetch options, body AND/OR headers
        {}                                    // signal
      ).then(setValue)
  }, [])

Other example usage:

//example body options
const fetchOptions = {
  body:{
    userId  : 1,
    title   : "foo",
    body    : "bar"
  }
}

//example with body and headers options
const fetchOptions = {
  headers:{'Custom-Header': 'hello bords'},
  body:{
    userId  : 1,
    title   : "foo",
    body    : "bar"
  }
}

//sample call with fetchOptions
bordsFetch(
  'POST',
  `${CONSTANT.__API_ROUTE}/your_api_endpoint`,
  `${CONSTANT.__BEARER}<api-token>`,
  fetchOptions,
  {}).then(...)

//sample call with no token, no options, & no signal
bordsFetch('GET',`${CONSTANT.__API_ROUTE}/your_api_endpoint`,{},{},{}).then(...)

//sample call for Request Cancellation or Aborting Signal
const controller = new AbortController()
const signal = controller.signal
...
bordsFetch('GET',`${CONSTANT.__API_ROUTE}/your_api_endpoint`,{},{},{signal}).then(...)
...
//calling abort() cancels the fetch request
controller.abort() 

helper-sample.js

//sample call inside an external helper
export const fetchDDLOptions = async (authToken) => {  
  try {   
    let ddlOptions = [];    

    bordsFetch(
      'POST', 
      `${CONSTANT.__API_ROUTE}/your_api_endpoint`, 
      `${CONSTANT.__BEARER}${authToken}`, 
      {},
      {}).then(items=> {      
            items.forEach(element => {
              let ddlList = { value: element["id"], label: element["description"] }
              ddlOptions.push(ddlList)          
            });
          }) 
    return ddlOptions

  } catch (err) { console.log(err) }
}

async-helper-sample.js

//sample call inside an external helper with async/await function
export const fetchUserCount = async (authToken, userID, userName) => {  
  try {   
    const fetchOptions = {body: {userID,userName},};

    let result = await bordsFetch(
      'POST', 
      `${CONSTANT.__API_ROUTE}/your_api_endpoint`, 
      `${CONSTANT.__BEARER}${authToken}`, 
      fetchOptions,
      {})

    return result[0]

  } catch (bords_err) { console.log(bords_err) }
}

---

getObj(object, array)

useful when JSON response "keys" has special character property (eg. _text) which is difficult to navigate using dot notation.

// Example JSON Response

"EmpInfo": {
  "mobileNo": {
    "_text": "12345"
}

const mobileNumber = getObj(empInfo, ['mobileNo', '_text'])

---

getURLParams(props,name)

function to read URL Query parameters.

argument props - is your browser's object that contains history and location.

argument name - is the URL key (eg. localhost/?Name=bords)

let queryURL = getURLParams(props,'Name') 

---

arrRemove(arr, value)

Remove a value in an array.

---

arrRemoveObj(arrObj,fprop,fval)

Remove a value in an array object base of prop and value

---

arrReverse(arr)

Reverse array from ascending to descending and vice versa

Useful for reversing html list elements order inside Object .map

  const bords = require('bords-utils')
  var arr = [1,2,3,4,5]
  console.log(bords.arrReverse(arr))

OR

 import {arrReverse} from 'bords-utils'
 console.log(arrReverse([1,2,3,4,5]))

---

removeItemOnce(arr, value)

---

removeItemAll(arr, value)

---

clearCacheData()

//clears console logs, etc.
clearCacheData()

---

formatDate(date)

let today = new Date()
formatDate(today)

---

formateDate2(datestring)

let today = new Date()
formateDate2(today)

---

formatDateMiddleEastern(date)

let today = new Date()
formatDateMiddleEastern(today)

const expirydate = formatDateMiddleEastern(getObj(data, ['expirydate', '_text']));

---

getDayName(dateStr, locale)

let today = new Date()
getDayName(today, 'en-US')

---

counterAnimation(id, start, end, duration)

import counterAnimation from 'bords-utils'
counterAnimation("count1", 0, data.total, 2000);

<div>
  <span id="count1">{data.total}</span>
</div>

---

waitInSeconds(seconds)

delay timer sometimes comes in handy while processing something on the background

waitInSeconds(3000) //delay for 3 seconds

---

toggleInt(int)

  toggleInt(1) //returns 0
  toggleInt(0) //returns 1

---

toggleBoolean(bool)

  toggleBoolean(false) //returns true
  toggleBoolean(true) //returns false

---

capitalizeFirstLetter(stringVal)

  capitalizeFirstLetter('THE QUICK BROWN FOX') //returns 'The Quick Brown Fox'
  capitalizeFirstLetter('the quick brown fox') //returns 'The Quick Brown Fox'

---

extractTime(timeStamp)

  extractTime("2021-11-01T11:33:29.320+04:00") //returns 11:33:29 AM

---

calcPercOnNum(x,y)

  calcPercOnNum(10,10) returns 100
  calcPercOnNum(50,100) returns 50

---

getTotalSecondsByTimeDiff(startTime, endTime)

  let inTime = "06:30:04"
  let outTime = "16:04:14"
  getTotalSecondsByTimeDiff(inTime,outTime)

  //1 day is to 86400 seconds
  //8 Hours of work is to 28800 seconds
  calcPercOnNum(getTotalSecondsByTimeDiff(inTime, outTime), 28800).toFixed(0) + '%' //returns 120%

---

More features will be added from time to time, please tune in!