ezhooks v0.0.5

ezhooks

This is a custom hook for data processing from the frontend

Installation

npm install ezhooks

or

yarn add ezhooks

• useMutation
• useTable
• useFetch
• useSValidation

useMutation

Hook form data mutation

Generic Props

Usage

import useMutation from 'ezhooks/lib/useMutation';

const App = () => {
    const form = useMutation({
        defaultValue: {
            title: '',
            contact: {
                phone: '',
                office: ''
            },
            item: [],
            rating: 0
        }
    })
    ...
}

Props

processing

form.processing ? "loading...." : <div>...</div>;

data

console.log("Data", data);

setData(value*)

...
return <div>
    <input type='text' name='title' onChange={e => form.setData({[e.target.name]: e.target.value})} />
</div>

Nested Value

for nested values we break them down using dots

set value if object nested (object)

...
return <div>
    <input type='text' onChange={e => form.setData({'contact.phone': e.target.value})} />
    <input type='text' onChange={e => form.setData({'contact.office': e.target.value})} />
</div>

set value value if array object

...
return <div>
    <input type='text' onChange={e => form.setData({'item.0.label': e.target.value})} />
    <input type='text' onChange={e => form.setData({'item.0.item.1.label': e.target.value})} />
</div>

value(key*, defaultValue = '')

...
return <div>
    <input ... value={form.value('title')}/>
    <input ... value={form.value('contact.phone')}/>
    <input ... value={form.value('item.0.label')}/>
</div>

Nested Get Value

for get values we break them down using dots

increment(value*)

...
return <div>
   <input type='text' onChange={e => form.increment({'rating': 1})} />
</div

Nested Increment

for nested values we break them down using dots

decrement(value*)

...
return <div>
   <input type='text' onChange={e => form.decrease({'rating': 1})} />
</div

Nested Decrement

for nested values we break them down using dots

addItem(key*, value*, position)

...
form.addItem('item', {label: ''}) //default position:end
form.addItem('item', {label: ''}, 1) //position by number:index start by 0

Nested Decrement

for nested values we break them down using dots

removeItem(key*, condition)

...
form.removeItem('item', 0)
form.removeItem('item', (item) => item.label === 'test') //condition with function

Nested Decrement

for nested values we break them down using dots

reset()

...
form.reset()

send(props*)

...

function onSubmit(){
    form.send({
        service: (event) => fetch('http:example.com', {
            method: 'post',
            body: JSON.stringify(event.data),
            signal: event.ctr.signal
        }),
        onSuccess: (resp) => {

        },
        onError: (err) => {},
        onAlways: () => {}
    })
}

// import { EventSend } from 'ezhooks/lib/useMutation' if typescripts
const addExample = async(event : EventSend) => {
return fetch('http:example.com', {
            method: 'post',
            body: JSON.stringify(event.data),
            signal: event.ctr.signal
}).then(resp => resp.json())
}

function onSubmit(){
    form.send({
        service: addExample,
        onSuccess: (resp) => {},
        onError: (err) => {},
        onAlways: () => {}
    })
}

the service can use another method request: GET, PUT, POST, DELETE or PATH

with scenario

const form = useMutation({
    ...
    scenario: {
        create: ['title'],
        update: ['id', 'title']
    }
}

...
function onSubmit(){
    form.send({
        ...
       scenario: 'create'
    })
}

with except

...
function onSubmit(){
    form.send({
        ...
       except: ['title']
    })
}

with only

...
function onSubmit(){
    form.send({
        ...
       only: ['rating']
    })
}

with include

...
function onSubmit(){
    form.send({
        ...
       include: [...value] // or {...value}
    })
}

useFetch

Hook for get data

Generic Props

Usage

import useFetch from 'ezhooks/lib/useFetch';

const App = () => {
    const fetch = useFetch({
        service: () => fetch('http://example.com').then(resp => resp.json())
        selector: (resp) => resp.products,
        defaultValue: [] //or {}
    })
    ...
}

for service can use another service request like fetch, axios ..etc

Props

loading

form.loading ? "loading...." : <div>...</div>;

isEmpty

form.isEmpty ? "Data not available" : <div>...</div>;

data

form.data;

query

form.query;

setQuery(value*)

<input
  type="search"
  name="keywords"
  onChange={(e) => fetch.setQuery({ [e.target.name]: fetch.target.value })}
/>

getQuery(key*, defaultValue = '')

<input type='search' name='keywords' ... value={fecth.getQuery('keywords')}) />

refresh()

<button onClick={fetch.refresh}>Reload</button>

clear(fields?: {except, only})

<button onClick={ ()=> fetch.clear()}>Reset All</button>
<button onClick={ ()=> fetch.clear({only: ['keywords']})}>Reset only keywords</button>
<button onClick={ ()=> fetch.clear({except: ['keywords']})}>Reset excpet keywords</button>

has(key*)

if (fetch.has("keywords")) {
  console.log("exists");
}

cancel()

<button onClick={fetch.cancel}>Cancel</button>

useTable

Hook for get request with pagination

Generic Props

Props

Pagination Props

import {useTable} from 'frhooks'
const App = () => {
  const table = useTable({
   ...
    // this option for custom sort
    sort: {
      params: {
        order: "order",
        orderBy: "orderBy",
      },
      order: "desc", // Note: default order, default: desc
      orderBy: "id", // Note: default orderBy, default: id
    },
    // this option for custom pagination
    pagination: {
      params: {
        page: "page",
        perPage: "perPage",
      },
      startPage: 1,// default page, default: 1 or 0
      perPage: 10,// default perPage, default: 10,
      perPageOptions: [5, 10, 15, 25],
      from: (total, page, size, df) => page - 1 + (df === 0 ? 1 : 0)) * size +
      (total === 0 ? 0 : df === 0 ? 1 : df),
      to: (total, page, size, df) =>  Math.min(total, (page + (df === 0 ? 1 : 0)) * size),
      lastPage: (total, size) => Math.max(0, Math.ceil(total / size)), // formula
      disableFirst: (total, page, df) => total !== 0 && page === df,
      disableLast: (total, page, lp) => total !== 0 && page === lp,
    },
  })

  render <div>
      <div>
      <input type="text" value={table.query('title', '')} onChange={e => table.setQuery({title: e.target.value})} />
          {table.pagination.text} //summary

          <button {...table.pagination.firstButton()}>prev</button>
          <button {...table.pagination.backButton()}>prev</button>
          {table.pagination.page}
          <button {...table.pagination.nextButton()}>next</button>
          <button {...table.pagination.lastButton()}>next</button>

        <button onClick={() => table.onOrder("name")}>
            {table.order}-{table.orderBy}
        </button>

        <button onClick={table.clear}>Clear</button>
        <button onClick={table.reload}>Reload</button>
     </div>

      <table>
        <thead>
          <tr>
            <td>No</td>
            <td>Title</td>
          </tr>
        </thead>

        <tbody>
          {table.loading ? 'loading...' : null}

          {table.data.map((v: any, i) => (
            <tr key={i}>
              <td>{table.data.from + (i+1)}</td>
              <td>{v.title}</td>
            </tr>
          ))}
        </tbody>
      </table>
  </div>
}

useFetch & useTable

additional props array data for manipulation data

useSValidation

server validation

Generic Props

Usage

//API Response
error: [
    {field: "title", type: "required"},
]

or

error: {
    field: 'title',
    type: 'required
}

import useSValidation from 'ezhooks/lib/useSValidation';

const App = () => {
    const server = useSValidation({
       service: (event) => {
        fetch("http://example/validation", {method: 'post', body: event.data})
        .then((resp) => resp.json())
        .then((resp) => {
          event.parser(resp.error);
        });
    },
    data: {
        title: "",
    },
    message: {
      required: (resp) => "this field is required",
    },
    param: {
        path: "field",
        type: "type"
    }
    })
    ...
}

Props

processing

server.processing ? "loading...." : <div>...</div>;

error(?key)

...
server.error()
//
server.error('key')

message(key*)

...
server.message('key')

clear()

...
server.clear()

cancel()

...
server.cancel()

validate(?option)

...
server.validate()
//or
server.validate({
    service: (event) => {
         fetch("http://example/validation", {method: 'post', body: event.data})
            .then((resp) => resp.json())
            .then((resp) => {
        event.parser(resp.error);
        });
    }
})
//or
server.validate({
    service: (data) =>  (event) => {
         fetch("http://example/validation", {method: 'post', body:data})
            .then((resp) => resp.json())
            .then((resp) => {
        event.parser(resp.error);
        });
    }
})