behnamazimi

// this will fire immediately after adding to the queue
new ClientHandler({url: "https://reqres.in/api/users"})
   .fire({parallel: true})
   .then(res=> {
       //...
   })


// this will for its turn on queue
new ClientHandler({url: "https://reqres.in/api/users"})

behnamazimi

new ClientHandler(clientConfig)
   .setClient(manualClient) 
   .setHook(HOOKS.BEFORE_RESOLVE, res => res.body) // get result and return the data property
   .fire({parallel: true})
   .then(res=> {
       //...
   })

behnamazimi

ServiceWrapper
         // get result and return the data property
        .setHook(HOOKS.BEFORE_RESOLVE, res => res.data)
        // this method will call on all successes.
        .setHook(HOOKS.AFTER_SUCCESS, res => {
            console.log(res);
        });

behnamazimi

ServiceWrapper
    .init({
        // `client` is the function that call inside `ClientHandler`
        client: axios, 
        
        // `queue` is for determining that your service wrapper should active queue or not 
        queue: true,
    
        // if this will be true, queue will log details in different stages 
        queueLogs: true,

behnamazimi

new ClientHandler({url: "https://reqres.in/api/users"})
    .fire()
    .then(res => {
        // handle result
        console.log("users fetched");
    })
    .catch(err => {
        /// handle error
        console.log(err);
    })

behnamazimi

+ ADDED: 1__glmag
* FIRED: 1__glmag [type: pending]
+ ADDED: 2__bgvrg
+ ADDED: 3__8jlr8
* FIRED: 3__8jlr8 [type: parallel]
- REMOVED: 1__glmag
* FIRED: 2__bgvrg [type: pending]
users fetched
- REMOVED: 3__8jlr8
user 3 fetched ==> this service was parallel

behnamazimi

const {ServiceWrapper, ClientWrapper, HOOKS} = require("js-service-wrapper");

ServiceWrapper
    .init({
        client: axios,
        queue: true,
        queueLogs: true,
    })
    .setResolveValidation(res => res.status === 200)
    .setHook(HOOKS.BEFORE_RESOLVE, res => res.data)

behnamazimi

<div class="loading-container">
  <div class="box-loading">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

behnamazimi

$duration: 1;
$box-number: 5;
$box-size: 1.5rem;
$box-gap: .7rem;
$primary-color: #039be5;

@keyframes moving {
  0%, 5% {
    left: 0;
    background-color: $primary-color;

behnamazimi

/**
 * React component for Jodit HTML editor
 *  + Jodit module lazy loading support.
 *  + Debounce for change event to improve performance
 */
import React, {useEffect, useRef, forwardRef, useLayoutEffect, useMemo} from 'react'
import * as PropTypes from 'prop-types'
import 'jodit/build/jodit.min.css'

let CHANGE_DEBOUNCE_FLAG;