ui-soxo-bootstrap-core 2.4.24

package/core/lib/utils/api/api.utils.js

@@ -0,0 +1,188 @@
+import {
+  PostData,
+  GetData,
+  PutData,
+  PatchData,
+  DeleteData,
+} from "./../http/http.utils";
+
+let headers = {};
+
+var settings = {
+  getToken: () => {},
+};
+
+export default class ApiUtils {
+  /**
+   * Update the settings manualy
+   *
+   * Used in case of branch switcher
+   *
+   *
+   * @param {*} config
+   */
+  updateSettings = (config) => {
+    settings = config;
+  };
+
+  static getUser = () => {
+    return this.user;
+  };
+
+  static get = ({ url, config = { queries: [], order: {} }, ...props }) => {
+    const { headers } = settings;
+
+    return GetData({
+      url: createUrlParams(url, config),
+      settings,
+      headers,
+      ...props,
+    }).catch((result) => {
+      console.log(result);
+    });
+  };
+
+  static getRecordDetail = ({ url, config = { queries: [] }, ...props }) => {
+    const { headers } = settings;
+
+    return GetData({
+      url: createUrlParams(url, config),
+      settings,
+      headers,
+      ...props,
+    }).catch((result) => {
+      console.log(result);
+    });
+  };
+
+  static post = ({ url, formBody, ...props }) => {
+    const { headers } = settings;
+
+    return PostData({
+      url,
+      formBody,
+      settings,
+      headers,
+      ...props,
+    });
+  };
+
+  static put = ({ url, formBody, ...props }) => {
+    const { headers } = settings;
+
+    return PutData({
+      url,
+      settings,
+      formBody,
+      headers,
+      ...props,
+    });
+  };
+
+  static patch = ({ url, formBody, ...props }) => {
+    const { headers } = settings;
+
+    return PatchData({
+      url,
+      settings,
+      formBody,
+      headers,
+      ...props,
+    });
+  };
+
+  static delete = ({ url, formBody, ...props }) => {
+    const { headers } = settings;
+
+    return DeleteData({
+      url,
+      settings,
+      headers,
+      ...props,
+    });
+  };
+
+  static upload = ({ url, data }) => {
+    return fetch(process.env.REACT_APP_endpoint + url, {
+      // Your POST endpoint
+      method: "POST",
+      headers: {
+        //   'App-Type': 313,
+        //   'App-Version': '1.0.1',
+        Authorization: "Bearer " + localStorage.access_token,
+        // type:'multipart/formData'
+      },
+      //   credentials: 'include',
+      body: data,
+    }).then(
+      (result) => {
+        return result.json();
+      },
+      (error) => {
+        console.log(error);
+        return error;
+      },
+      (progress) => {
+        console.log(progress);
+        return progress;
+      }
+    );
+  };
+
+  /**
+   * Get Auth Status
+   *
+   * @param {*} param0
+   * @returns
+   */
+  static getAuthStatus = ({ settings: config, token }) => {
+    headers = headers;
+
+    settings = config;
+
+    return GetData({
+      url: `auth/profile`,
+      settings,
+
+      headers,
+      token
+    });
+  };
+}
+
+/**
+ *
+ */
+function createUrlParams(url, config) {
+  var base_url = url;
+
+  let { queries = [], limit, order } = config;
+
+  if (queries.length > 0 || limit > 0) {
+    base_url += "?";
+  }
+
+  queries.forEach((ele) => {
+    base_url += `${ele.field}=${ele.value}&`;
+  });
+
+  // Remove the last ambersent added
+  if (queries.length) {
+    base_url = base_url.substring(0, base_url.length - 1);
+  }
+
+  // If there is limit  , add it
+  if (limit > 0) {
+    base_url += `&limit=${limit}`;
+  }
+
+  if (config.includes) {
+    base_url += `&includes=${config.includes}`;
+  }
+
+  if (order && order.order) {
+    base_url += `&order=${order.order},${order.order_by}`;
+  }
+
+  return base_url;
+}

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

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

package/core/lib/utils/async.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+
+export default function asyncComponent(importComponent) {
+
+    class AsyncComponent extends Component {
+
+        constructor(props) {
+            super(props);
+
+            this.state = {
+                component: null,
+            };
+        }
+
+        async componentDidMount() {
+            // const { default: component } = await import(`./../Scenes/Generic-Listing/genericListing.scene`);
+            // const { default: component } = await import(`./../Scenes/${importComponent}.js`);
+            const { default: component } = await importComponent();
+
+            this.setState({
+                component: component
+            });
+        }
+
+        render() {
+            const C = this.state.component;
+
+            return C
+                ? <C {...this.props} />
+                : null;
+        }
+
+    }
+
+    return AsyncComponent;
+}