continuacion con definicion de tipos en hooks

src/constants/index.ts

@@ -1,2 +1 @@
-import httpCodes from "./httpStatusCodes";
-export { httpCodes };
+export * as httpStatusCodes from "./httpStatusCodes";

src/hooks/useAlert.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
-const AlertContext = React.createContext();
+const AlertContext = React.createContext(null);
 
-export function AlertProvider(props) {
+export function AlertProvider(props: null) {
   const [open, setOpen] = React.useState(false);
   const [position, setPosition] = React.useState({
     vertical: "bottom",
@@ -34,22 +34,12 @@ export function AlertProvider(props) {
   );
 
   const memData = React.useMemo(() => {
-    // const closeAlert = () => {
-    //   setOpen(false);
-    //   setTimeout(() => {
-    //     setPosition(defaultPlace);
-    //     setSeverity(defaultColor);
-    //     setIcon(defaultIcon);
-    //     setMessage(defaultMessage);
-    //   }, 2000);
-    // };
     return {
       open,
       position,
       severity,
       message,
       showAlert,
-      // closeAlert,
     };
   }, [open, position, severity, message, showAlert]);
 

src/hooks/useApp.tsx

@@ -1,34 +1,33 @@
 import React from "react";
+import { AppProviderProps, defaultAppProviderProps } from "../types";
 
-const localStorageKey = "usr_jwt";
-interface AppProviderProps {
-  type: "regular" | "firebase";
-  token: string | null;
-  setToken: (newToken: string) => void
-}
-
-const AppContext = React.createContext<AppProviderProps>({type: 'regular', token: null, setToken: () => {}});
+const AppContext = React.createContext<AppProviderProps>(defaultAppProviderProps);
 
 export function AppProvider(props: AppProviderProps) {
   const [type] = React.useState(props.type);
-  const [token, setToken] = React.useState<string|null>(props.token);
+  const [tokenStorageKey] = React.useState(props.tokenStorageKey);
+  const [token, setToken] = React.useState<string | null>(props.token);
 
   React.useEffect(() => {
-    const jwt = localStorage.getItem(localStorageKey);
-    setToken(jwt);
-  }, []);
+    if (typeof tokenStorageKey === "string" && tokenStorageKey !== "") {
+      const jwt = localStorage.getItem(tokenStorageKey);
+      setToken(jwt);
+    }
+  }, [tokenStorageKey]);
 
   React.useEffect(() => {
-    if (token && token !== "") {
-      localStorage.setItem(localStorageKey, token);
-    } else if (localStorage.getItem(localStorageKey)) {
-      localStorage.removeItem(localStorageKey);
+    if (typeof tokenStorageKey === "string" && tokenStorageKey !== "") {
+      if (typeof token === "string" && token !== "") {
+        localStorage.setItem(tokenStorageKey, token);
+      } else if (localStorage.getItem(tokenStorageKey)) {
+        localStorage.removeItem(tokenStorageKey);
+      }
     }
-  }, [token]);
+  }, [tokenStorageKey, token]);
 
   const memData = React.useMemo(() => {
-    return { token, type, setToken };
-  }, [token, type, setToken]);
+    return {type, token, tokenStorageKey: undefined, setToken};
+  }, [type, token, tokenStorageKey, setToken]);
 
   return <AppContext.Provider value={memData} {...props} />;
 }

src/hooks/useAuth.tsx

@@ -1,10 +1,11 @@
 import React from "react";
+import { AuthProviderProps, defaultAuthProviderProps } from "../types";
 
-const AuthContext = React.createContext();
+const AuthContext = React.createContext<AuthProviderProps>(defaultAuthProviderProps);
 
 // const defaultNotifications = () => [1, 2];
 
-export function AuthProvider(props) {
+export function AuthProvider(props: AuthProviderProps) {
   const [notifications, setNotifications] = React.useState([]);
 
   // COMPONENTE SE MONTÓ

src/hooks/useHttp.tsx

@@ -4,6 +4,7 @@ import { useHistory } from "react-router";
 import { httpCodes } from "../constants";
 // import { auth } from "../services";
 import { useApp } from "./useApp";
+import { useHttpProps, innerFetch} from '../types'
 
 const { REACT_APP_API_URL: baseUrl } = process.env;
 
@@ -12,7 +13,7 @@ const defaultHeaders = {
   Accept: "application/json",
 };
 
-const makeHeaders = (token) =>
+const makeHeaders = (token: string | null) =>
   token
     ? {
         ...defaultHeaders,
@@ -20,22 +21,22 @@ const makeHeaders = (token) =>
       }
     : defaultHeaders;
 
-const paramsToQuery = (params) =>
+const paramsToQuery = (params: any) =>
   Object.keys(params)
     .map(
       (key) => encodeURIComponent(key) + "=" + encodeURIComponent(params[key])
     )
     .join("&");
 
-const capitalize = (s) => s.charAt(0).toUpperCase() + s.slice(1);
+const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
 
 export function useHttp({
   req = "GET",
-  url = null,
+  url = "",
   params = null,
   body = null,
-  alert = false,
-}) {
+  triggerAlert = false,
+}: useHttpProps) {
   const { showAlert } = useAlert();
   const { token } = useApp();
   const [response, setResponse] = React.useState(null);
@@ -61,12 +62,14 @@ export function useHttp({
         // if (auth.currentUser) {
         //   token = await auth.currentUser.getIdToken();
         // }
-        let fetchReq = {
+        const fetchReq: innerFetch = {
           method: req,
           headers: makeHeaders(token),
+          body: null
         };
         if (body) {
-          fetchReq = { ...fetchReq, body: JSON.stringify(body) };
+          const serializedBody =  JSON.stringify(body);
+          fetchReq.body = serializedBody;
         }
         const paramsFinal = { ...params, ...inlineParams };
         const str = `${baseUrl}${url}${
@@ -80,7 +83,7 @@ export function useHttp({
           case httpCodes.OK:
             setResponse(resBody);
             setError(null);
-            alert &&
+            triggerAlert &&
               showAlert({
                 severity: "success",
                 message: resBody.mensaje
@@ -91,7 +94,7 @@ export function useHttp({
           case httpCodes.BAD_REQUEST:
             window["scrollTo"]({ top: 0, behavior: "smooth" });
             setError(resBody.errores);
-            alert &&
+            triggerAlert &&
               showAlert({
                 severity: "warning",
                 message: resBody.mensaje
@@ -104,7 +107,7 @@ export function useHttp({
             break;
           case httpCodes.SERVER_ERROR:
           default:
-            alert &&
+            triggerAlert &&
               showAlert({
                 severity: "error",
                 message: resBody.mensaje
@@ -113,7 +116,7 @@ export function useHttp({
               });
         }
       } catch (error) {
-        alert &&
+        triggerAlert &&
           showAlert({
             severity: "error",
             message: "No se pudo establecer conexión con el servidor.",
@@ -123,7 +126,7 @@ export function useHttp({
         setLoading(false);
       }
     },
-    [body, params, req, url, alert, history, token]
+    [body, params, req, url, triggerAlert, history, token]
   );
 
   React.useEffect(() => {

src/services/httpService.ts

@@ -1,7 +1,7 @@
 const { REACT_APP_API_URL: baseUrl } = process.env;
 const localStorageKey = "usr_jwt";
 
-const getCurrentToken = () => {
+const getCurrentToken = () : Promise<string | null> => {
   return new Promise((resolve, reject) => {
     const jwt = localStorage.getItem(localStorageKey);
     if (!jwt) reject("No hay sesión.");
@@ -9,7 +9,7 @@ const getCurrentToken = () => {
   });
 };
 
-const getHeaders = (token) => ({
+const getHeaders = (token: string) => ({
   "Content-Type": "application/json",
   Accept: "application/json",
   Authorization: `Bearer ${token}`,
@@ -21,25 +21,23 @@ const getHeadersWithoutToken = () => ({
 });
 
 const HttpService = {
-  get: async (url, auth = true) => {
+  get: async (url: string, auth = true) => {
     let token = null;
     if (auth) token = await getCurrentToken();
     const response = await fetch(baseUrl + url, {
       method: "GET",
-      headers: auth ? getHeaders(token) : getHeadersWithoutToken(),
+      headers: auth ? getHeaders(token || "") : getHeadersWithoutToken(),
     });
-
     return response.json();
   },
-  post: async (url, data, auth = true) => {
+  post: async (url: string, data: any, auth = true) => {
     let token = null;
     if (auth) token = await getCurrentToken();
     const response = await fetch(baseUrl + url, {
       method: "POST",
-      headers: auth ? getHeaders(token) : getHeadersWithoutToken(),
+      headers: auth ? getHeaders(token || "") : getHeadersWithoutToken(),
       body: JSON.stringify(data),
     });
-
     return response.json();
   },
 };

src/types/AlertProviderProps.ts

@@ -0,0 +1,11 @@
+
+
+interface AlertProviderProps {
+
+}
+
+const defaultAlertProviderProps: AlertProviderProps = {
+
+};
+
+export { AlertProviderProps, defaultAlertProviderProps };

src/types/AppProviderProps.ts

@@ -0,0 +1,18 @@
+
+type AppProviderType = "regular" | "firebase";
+
+interface AppProviderProps {
+  type: AppProviderType,
+  token: string | null,
+  tokenStorageKey: string | undefined,
+  setToken: (newToken: string) => void
+}
+
+const defaultAppProviderProps: AppProviderProps = {
+  type: "regular",
+  token: null,
+  tokenStorageKey: undefined,
+  setToken: () => {}
+};
+
+export { AppProviderProps, defaultAppProviderProps };

src/types/AuthProviderProps.ts

@@ -0,0 +1,11 @@
+
+
+interface AuthProviderProps {
+
+}
+
+const defaultAuthProviderProps: AuthProviderProps = {
+
+};
+
+export { AuthProviderProps, defaultAuthProviderProps };

src/types/index.ts

@@ -0,0 +1,4 @@
+export * from './AlertProviderProps';
+export * from './AppProviderProps';
+export * from './AuthProviderProps';
+export * from './useHttpProps';

src/types/useHttpProps.ts

@@ -0,0 +1,17 @@
+type httpRequestType = "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
+
+interface useHttpProps {
+  req: httpRequestType,
+  url: string,
+  params: any | null,
+  body: any | null,
+  triggerAlert: boolean,
+}
+
+interface innerFetch {
+  method: httpRequestType,
+  headers: any,
+  body: string | null
+}
+
+export { useHttpProps, innerFetch };

src/utils/capitalize.ts

@@ -0,0 +1,3 @@
+const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
+
+export default capitalize;

src/utils/capitalizeFirst.ts

@@ -0,0 +1,10 @@
+const capitalizeFirst = (str: string) => {
+  const split = str.split("-");
+  let palabraUnida = "";
+  split.forEach((s) => {
+    palabraUnida = palabraUnida + s.charAt(0).toUpperCase() + s.slice(1);
+  });
+  return palabraUnida;
+};
+
+export default capitalizeFirst;

src/utils/index.ts

@@ -1 +1,3 @@
+export * as capitalize from './capitalize'
+export * as capitalizeFirst from './capitalizeFirst'
 export * from "./requests";

src/utils/requests.ts

@@ -1,4 +1,4 @@
-import { capitalizeFirst } from "../utilities";
+import capitalizeFirst from "./capitalizeFirst";
 
 const emptyRequest = () => ({
   req: null,
@@ -7,21 +7,21 @@ const emptyRequest = () => ({
   body: null,
 });
 
-const getRequest = (url, params = {}) => ({
+const getRequest = (url: string, params = {}) => ({
   req: "GET",
   url,
   params,
   body: null,
 });
 
-const postRequest = (url, body, params = {}) => ({
+const postRequest = (url: string, body: any, params: any = {}) => ({
   req: "POST",
   url,
   params,
   body,
 });
 
-const deleteRequest = (url, id, params = {}) => ({
+const deleteRequest = (url: string, id: number | string, params: any = {}) => ({
   req: "DELETE",
   url: `${url}/eliminar`,
   params: {

tsconfig.json

@@ -4,7 +4,7 @@
 
     /* Basic Options */
     // "incremental": true,                         /* Enable incremental compilation */
-    "target": "es5",                                /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */
+    "target": "es2015",                             /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */
     "module": "commonjs",                           /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
     // "lib": [],                                   /* Specify library files to be included in the compilation. */
     // "allowJs": true,                             /* Allow javascript files to be compiled. */