ui-soxo-bootstrap-core 2.6.40-dev.0 → 2.6.40-dev.11

package/core/lib/utils/api/readme.md

@@ -1,426 +1,426 @@
-## 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>
-
-        );
-
-      })}
-
-    </>
-  );
-}
-
-```
+## 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>
+
+        );
+
+      })}
+
+    </>
+  );
+}
+
+```