Merge pull request #31 from LuisValgoi/issue-22

feat: issue#22

Author: LuisValgoi

packages/ui5-webcomponents-react-seed/README.md

@@ -37,12 +37,12 @@ The goal of this repository is to increase the boostrap time spent on a new proj
 
 ## From a Hook point of view, it includes:
 
-<!-- - `useActions`: Which wraps the redux action. -->
-
 - `useBrowser`: Which identifies the user browser.
 
 - `useIsMobile`: Which identifies the user device perspective.
 
+- `useRequest`: Which includes `get`, `post`, `patch`, `delete`, `put` HTTP helpers.
+
 # Available Scripts
 
 In the project directory, you can run:

packages/ui5-webcomponents-react-seed/src/auth/ComponentValidator.js

@@ -1,21 +1,13 @@
 import React from 'react';
-import { useQuery } from 'react-query';
+import { useGet } from '../hooks/useRequest';
 
-import Request from '../util/Request';
 import Constants from '../util/Constants';
-import UrlProvider from '../util/URLProvider';
-
-const fetchUser = async () => {
-  const url = UrlProvider.getUrl('GET_USER_LOGGED');
-  const res = await Request.get(url)
-  return res.data;
-};
 
 const ComponentValidator = ({ allowedAuthorities, authorityKey, children }) => {
-  const { data, status } = useQuery('GET_USER_LOGGED', fetchUser);
+  const { data, status } = useGet(Constants.REACT_QUERY.KEYS.GET_USER_LOGGED, 'GET_USER_LOGGED', null);
 
   const getRoute = () => {
-    if (status === Constants.CODES.RQ_SUCCESS) {
+    if (status === Constants.REACT_QUERY.CODES.SUCCESS) {
       const hasAccess = data.data.user[authorityKey].some(permission => allowedAuthorities.includes(permission));
       if (hasAccess) {
         return children;

packages/ui5-webcomponents-react-seed/src/auth/RouteValidator.js

@@ -1,25 +1,17 @@
 import React from 'react';
 import { Route } from "react-router-dom";
-import { useQuery } from 'react-query';
+import { useGet } from '../hooks/useRequest';
 
-import Request from '../util/Request';
-import Constants from '../util/Constants';
-import UrlProvider from '../util/URLProvider';
 import NotFound from '../pages/Fallback/NotFound';
-
 import Empty from '../pages/Fallback/Empty';
 
-const fetchUser = async () => {
-  const url = UrlProvider.getUrl('GET_USER_LOGGED');
-  const res = await Request.get(url)
-  return res.data;
-};
+import Constants from '../util/Constants';
 
 const RouteValidator = ({ allowedAuthorities, authorityKey, path, component, ...props }) => {
-  const { data, status } = useQuery('GET_USER_LOGGED', fetchUser);
+  const { data, status } = useGet(Constants.REACT_QUERY.KEYS.GET_USER_LOGGED, 'GET_USER_LOGGED', null);
 
   const getRoute = () => {
-    if (status === Constants.CODES.RQ_SUCCESS) {
+    if (status === Constants.REACT_QUERY.CODES.SUCCESS) {
       const hasAccess = data.data.user[authorityKey].some(permission => allowedAuthorities.includes(permission));
       return <Route path={path} {...props} component={hasAccess ? component : NotFound} />;
     }

packages/ui5-webcomponents-react-seed/src/hooks/useRequest.js

@@ -0,0 +1,35 @@
+import { useQuery } from 'react-query';
+
+import UrlProvider from '../util/URLProvider';
+import Request from '../util/Request';
+import Constants from '../util/Constants';
+
+function useOperation(reactQueryKey, operation, urlKey, dataParam, config) {
+  const { data, status } = useQuery(reactQueryKey, async () => {
+    const url = UrlProvider.getUrl(urlKey);
+    const res = await Request[operation](url, dataParam, config);
+    return res.data;
+  });
+
+  return { data, status };
+}
+
+export function useGet(reactQueryKey, urlKey, config) {
+  return useOperation(reactQueryKey, Constants.REQUEST.GET, urlKey, null, config ? config : null);
+}
+
+export function usePost(reactQueryKey, urlKey, dataParam, config) {
+  return useOperation(reactQueryKey, Constants.REQUEST.POST, urlKey, dataParam ? dataParam : null, config ? config : null);
+}
+
+export function usePut(reactQueryKey, urlKey, dataParam, config) {
+  return useOperation(reactQueryKey, Constants.REQUEST.PUT, urlKey, dataParam ? dataParam : null, config ? config : null);
+}
+
+export function usePatch(reactQueryKey, urlKey, dataParam, config) {
+  return useOperation(reactQueryKey, Constants.REQUEST.PATCH, urlKey, dataParam ? dataParam : null, config ? config : null);
+}
+
+export function useDelete(reactQueryKey, urlKey, config) {
+  return useOperation(reactQueryKey, Constants.REQUEST.DELETE, urlKey, null, config ? config : null);
+}

packages/ui5-webcomponents-react-seed/src/util/Constants.js

@@ -1,7 +1,19 @@
 export default {
-  CODES: {
-    RQ_SUCCESS: 'success',
-    RQ_LOADING: 'loading',
-    RQ_ERROR: 'error',
+  REACT_QUERY: {
+    CODES: {
+      SUCCESS: 'success',
+      LOADING: 'loading',
+      ERROR: 'error',
+    },
+    KEYS: {
+      GET_USER_LOGGED: 'GET_USER_LOGGED'
+    }
+  },
+  REQUEST: {
+    GET: 'get',
+    POST: 'get',
+    PUT: 'put',
+    PATCH: 'patch',
+    DELETE: 'delete',
   }
 };