## Usage

### GET Method

```sh

/**
 * @author Ashique
 */

import {useState,useEffect} from 'react';

import { ApiUtils } from 'soxo-bootstrap-core';

/**
* Exporting our default functional component 'Demo' here
* @returns {JSX.Element} A React element representing the Demo component.
*/

export default function Demo() {

/**
* A state variable called data, initialized as an empty array.
* @type {[any[], function]} An array containing the current state value and a function to update it.
*/

const [data,setData] = useState([])

/**
 * A hook that runs a function called loadData when the component mounts (i.e., when the component is first rendered).
 * The empty dependency array [] ensures that this hook only runs once.
 */

useEffect(()=>{

  loadData();

},[])

/**
 * Loads data from the server and updates the component state with the retrieved data.
 * @function
 * @returns {void}
 */

function loadData(){

/**
   * An object destructuring assignment that extracts the 'result' property from the object returned by the ApiUtils.get() method.
   * @type {Array}
   */

  const {result=[]} = ApiUtils.get({url:'/branches'})

  /**
   * Updates the component state with the retrieved data.
   * @param {Array} result - The data to be set in the component state.
   * @returns {void}
   */

  setData(result);

}

/**
* The return statement generates a list of branch names based on the branches array.
*/

  return (
    <>

        {
          branches.map((branch)=>{

          return branch.name;

        })
      }

    </>
  );
}

```

### POST Method

```sh

/**
 * @author Sharafudheen
 */

import { useState, useEffect } from 'react';

import { ApiUtils } from 'soxo-bootstarp-core';

/**
* Exporting our default functional component 'Demo' here.
*/

export default function Demo() {

/**
* This is a React hook that creates a state variable called `name` and `Description`.
* and a function called `setName` and `setDescription` to update their variables.
* The initial values of the variables were an empty string.
*/

  const [name,setName] = useState('')

  const [description,setDescription] = useState('')


/**
 * Handle the form submission event.
 * @param {Event} event - The form submission event.
 */

function handleSubmit(event) {

/**
 * Prevent the form from submitting normally.
 */

    event.preventDefault();

 /**
  * Construct an object containing the name and description from the form.
  */

    const data = { name, description };

 /**
  * Make a POST request to create a new branch using the ApiUtils.
  */
    ApiUtils.post({ url: '/branches', data })

      .then(response => {

 /**
  * If the request succeeds, log a success message to the console.
  */
        console.log('Branch created successfully:', response);

      })
      .catch(error => {

/**
 * If the request fails, log an error message to the console.
 */
        console.error('Error creating branch:', error);

      });
  }

/**
* returns a value. Here it returns the form component.
* When form is submitted, handleSubmit function will be called.
*/

  return (

    <form onSubmit={handleSubmit}>

      <label>

        Name:

        <input type="text" value={name} onChange={e => setName(e.target.value)} />

      </label>

      <label>

        Description:

        <textarea value={description} onChange={e => setDescription(e.target.value)} />

      </label>

      <button type="submit">Create Branch</button>

    </form>

  );

}

```

### PUT Method

```sh

/**
 * @author Sharafudheen
 */

import { useState, useEffect } from 'react';

import { ApiUtils } from 'soxo-bootstrap-core';

/**
 * Exporting our default functional component 'Demo' here.
 */

export default function Demo() {

/**
 * A state variable called data, initialized as an empty array.
 * @type {[any[], function]} An array containing the current state value and a function to update it.
 */

  const [data,setData] = useState([]);

/**
 * A hook that runs a function called loadData when the component mounts (i.e., when the component is first rendered).
 * The empty dependency array [] ensures that this hook only runs once.
 */

  useEffect(() => {

/**
  * @param {function} loadData - The function to be executed.
  * @param {array} dependencies - An array of dependencies for the effect.
  */

    loadData();

  }, []);


/**
 * Loads data from the server using the PUT method.
 */

  function loadData() {

    ApiUtils.put({ url: '/branches'})

/**
  * @returns {Promise<void>} A Promise that resolves when the data has been successfully loaded.
  */
      .then(response => setData(response.result));

/**
 * @throws {Error} If there was an error loading the data.
 */

      .catch(error => console.log(error));
  }


/**
 * Render a list of branch names.
 */

  return (
    <>

/*    
 * @param {Array} data - An array of objects representing branches.
 */
      {data.map((branch) => {

/**
 * @returns {JSX.Element} A React fragment containing the names of each branch
 */

        return branch.name;

      })}

    </>

  );

}

```

### DELETE Method

```sh

/**
 * @author Sharafudheen
 */

import { useState, useEffect } from 'react';

import { ApiUtils } from 'soxo-bootstrap-core';

/**
* @author Sharafu
* Exporting our default functional component 'Demo' here.
*/

export default function Demo() {

/**
 * A state variable called data, initialized as an empty array.
 * @type {[any[], function]} An array containing the current state value and a function to update it.
 */

  const [data, setData] = useState([]);

/**
 * A hook that runs a function called loadData when the component mounts (i.e., when the component is first rendered).
 * The empty dependency array [] ensures that this hook only runs once.
 */

  useEffect(() => {

/**
 * @param {function} loadData - The function to be executed.
 * @param {array} dependencies - An array of dependencies for the effect.
 */

    loadData();

  }, []);

/**
 * A function that loads data from the '/branches' endpoint using the ApiUtils.get() method and sets the result to the component state using setData().
 * @function
 * @returns {void}
 */

  function loadData() {

  /**
   * Destructuring the 'result' property from the object returned by the ApiUtils.get() method. If 'result' is undefined or null, set it to an empty array.
   * @type {Array}
   */

    const { result = [] } = ApiUtils.get({ url: '/branches' });

 /**
   * Sets the 'result' to the component state using the 'setData()' method.
   * @type {Function}
   * @param {Array} result - An array of data obtained from the '/branches' endpoint.
   * @returns {void}
   */

    setData(result);
  }

/**
 * Deletes data with the given id.
 * @param {number} id - The id of the data to be deleted.
 */

  function deleteData(id) {

/**
 * Makes an API delete request to delete data with the given id.
 * @param {object} options - An object containing the API request options.
 * @param {string} options.url - The URL for the delete request.
 * @returns {Promise} A promise that resolves when the delete request is successful.
 */

    ApiUtils.delete({ url: `/branches/${id}` }).then(() => {

/**
 * Sets the state of the data after deleting the data with the given id.
 * @param {function} prevData - The previous state of the data.
 * @returns {array} An array of data with the item that has the given id removed.
 */

      setData((prevData) => prevData.filter((item) => item.id !== id));

    });

  }

/**
 * Renders a list of branches and a "Delete" button for each branch.
 *
 * @function
 * @returns {JSX.Element} A React fragment containing a list of branches and a "Delete" button for each branch.
 */


  return (

    <>

/**
 * @param {Object[]} data - An array of objects representing branch data.
 */

      {data.map((branch) => {

        return (

/**
 * @param {number} data[].id - The unique ID of the branch.
 */

          <div key={branch.id}>

/**
 * @param {string} data[].name - The name of the branch.
 */
 
            <span>{branch.name}</span>

/**
 * @param {function} deleteData - A function that deletes the branch data when Button is clicked.
 */
 
            <button onClick={() => deleteData(branch.id)}>Delete</button>

          </div>

        );

      })}

    </>
  );
}

```