qs-wang · February 19, 2022 11:22 · Jun 22, 2020 · Jun 22, 2020 · Jun 22, 2020 · Jun 22, 2020
diff --git a/error-hook.js b/error-hook.js
@@ -13,6 +13,7 @@ export const useErrorHandler = (hookOptions = {}) => {
    */
   const handleError = useCallback((error, options) => (
       // use error and options here
+      ['message', '']
   ), []);
 
   return {

diff --git a/error-hook → error-hook.js b/error-hook → error-hook.js
diff --git a/auth-hook.js b/auth-hook.js
@@ -0,0 +1,55 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useSetRecoilState } from 'recoil';
+import { useKeycloak } from '@react-keycloak/web';
+
+import { commonNotification } from './common';
+
+/**
+ * Returns the auth info and some auth strategies.
+ *
+ */
+export const useAuth = () => {
+  const [keycloak, initialized] = useKeycloak();
+  const setNotification = useSetRecoilState(commonNotification);
+
+  const [user, setUser] = useState({});
+
+  // fetch user profile
+  useEffect(() => {
+    if (!initialized) {
+      return;
+    }
+
+    const fetchUserInfo = async () => {
+      try {
+        const userProfile = await keycloak.loadUserProfile();
+
+        setUser({ ...userProfile, fullName: `${userProfile.firstName} ${userProfile.lastName}` });
+      } catch (err) {
+        setNotification({ isVisible: true, message: err.message });
+      }
+    };
+
+    if (keycloak.authenticated) {
+      fetchUserInfo();
+    }
+  }, [keycloak, initialized]);
+
+  return {
+    isAuthenticated: !!keycloak.authenticated,
+    initialized,
+    meta: {
+      keycloak,
+    },
+    token: keycloak.token,
+    user,
+    roles: keycloak.realmAccess,
+    login: useCallback(() => { keycloak.login(); }, [keycloak]),
+    logout: useCallback(() => { keycloak.logout(); }, [keycloak]),
+    register: useCallback(() => { keycloak.register(); }, [keycloak]),
+  };
+};
+
+export default {
+  useAuth,
+};
diff --git a/axios-hook.js b/axios-hook.js
@@ -0,0 +1,42 @@
+import axios from 'axios';
+import { useState, useEffect } from 'react';
+import { useAuth } from 'auth-hook';
+
+/**
+ * Returns an authorizated axios instance
+ *
+ * @param {Object} config is the default config to be sent to the axios creator
+ *
+ * @return {Object} an object containing the axios instance and the initialized prop
+ *
+ */
+export const useAxios = (config = {}) => {
+  const { token, initialized: authInitialized } = useAuth();
+
+  const [initialized, setInitialized] = useState(false);
+  const [axiosInstance, setAxiosInstance] = useState({});
+
+  useEffect(() => {
+    const instance = axios.create({
+      ...config,
+      headers: {
+        ...(config.headers || {}),
+        'Content-Type': 'application/json',
+        'Access-Control-Allow-Origin': '*',
+        Authorization: authInitialized ? `Bearer ${token}` : undefined,
+      },
+    });
+
+    setAxiosInstance({ instance });
+    setInitialized(true);
+
+    return () => {
+      setAxiosInstance({});
+      setInitialized(false);
+    };
+  }, [token, authInitialized]);
+
+  return { axios: axiosInstance.instance, initialized };
+};
+
+export default { useAxios };
diff --git a/common.js b/common.js
@@ -0,0 +1,10 @@
+import { atom } from 'recoil';
+
+// notification
+export const commonNotification = atom({
+  key: 'commonNotification',
+  default: {
+    isVisible: false,
+    message: '',
+  },
+});
diff --git a/error-hook b/error-hook
@@ -0,0 +1,23 @@
+import { useCallback } from 'react';
+
+// Hook defined thinking in the future. Actually it does not behave as a hook.
+export const useErrorHandler = (hookOptions = {}) => {
+  /**
+   * Error handler
+   *
+   * En la función se define el flujo de la aplicación en caso de un error.
+   *
+   * @param {String | Object | Error} error
+   * @returns {String[2]}
+   *
+   */
+  const handleError = useCallback((error, options) => (
+      // use error and options here
+  ), []);
+
+  return {
+    handleError,
+  };
+};
+
+export default { useErrorHandler };
diff --git a/request-hook.js b/request-hook.js
@@ -0,0 +1,107 @@
+import { useState, useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
+import { useSetRecoilState } from 'recoil';
+
+import { commonNotification } from './common';
+import { useAxios } from './axios-hook';
+import { useErrorHandler } from './error-hook';
+
+const API_BASE_URL = '/api/';
+const REQUEST_TIMEOUT = 5;
+
+/**
+ *
+ * @param {Object} options request options
+ * @param {String} options.url The request url
+ * @param {String} options.method The request http method
+ * @param {Object} requestParams.initialValue The response data initial value
+ *
+ * @see useAxios
+ * @see axiosDefaultConfig
+ * @see mapResponseToData
+ *
+ * @return {Object} return an object containing the data, isLoading and the request strategy.
+ *
+ */
+export const useRequest = (options = {}, axiosConfig = {}) => {
+  const [data, setData] = useState(options.initialValue);
+  const [isLoading, setLoading] = useState(false);
+
+  const setNotification = useSetRecoilState(commonNotification);
+  const { handleError } = useErrorHandler();
+  const { axios, initialized: axiosInitialized } = useAxios({
+    ...axiosDefaultConfig,
+    ...axiosConfig,
+  });
+
+  const history = useHistory();
+
+  /**
+   * Specific request for options
+   *
+   * @param {Object} requestParams Request
+   * @param {Object} requestParams.params The request query params
+   * @param {Object} requestParams.data The request body data
+   *
+   */
+  const request = (requestParams) => {
+    if (!axiosInitialized) {
+      return;
+    }
+
+    const fetchData = async () => {
+      setLoading(true);
+
+      try {
+        const response = await axios({ ...options, ...requestParams });
+        const responseData = mapResponseToData(response);
+
+        setData(responseData);
+        setLoading(false);
+      } catch (err) {
+        const [message, redirect] = handleError(err);
+
+        setLoading(false);
+        setNotification({ message, isVisible: true });
+
+        if (redirect) {
+          history.push(redirect);
+        }
+      }
+    };
+
+    fetchData();
+  };
+
+  const fetch = useCallback(request, [axiosInitialized]);
+
+  return { isLoading, data, fetch };
+};
+
+/**
+ * Request default config for axios creator
+ *
+ * @see API_BASE_URL
+ * @see REQUEST_TIMEOUT
+ */
+const axiosDefaultConfig = {
+  baseURL: API_BASE_URL,
+  withCredentials: true,
+  timeout: REQUEST_TIMEOUT,
+};
+
+/**
+ * Maps axios response to data
+ *
+ * @param {Object} response
+ *
+ * @return {Object} the response data
+ * @throws {Object} throws an object containing the axios response
+ */
+export const mapResponseToData = (response) => {
+  const { data } = response;
+
+  return data;
+};
+
+export default { useRequest };
No results found