@autobusal/providers 1.0.55 → 1.0.56

package/Errors/ErrorBoundary.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Message from './Message';
+
+interface Props {
+  children: JSX.Element[] | JSX.Element
+}
+
+class ErrorBoundary extends React.Component<Props> {
+  state = { hasError: false };
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo): void {
+    console.log(error, info);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <Message type="error" />;
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

package/Errors/Message.tsx

@@ -0,0 +1,37 @@
+import { useNavigate } from 'react-router-dom';
+import { RiAlarmWarningFill, RiFileWarningLine } from 'react-icons/ri';
+import { Button } from '@autobusal/common';
+import { getLanguage } from '../Setup/utilities/languages';
+import { Container, Description } from './styles';
+import errors from '@lang/errors';
+
+interface Props {
+  type: 'error' | 'not_found'
+}
+
+const Message = ({ type }: Props): JSX.Element => {
+  const navigate = useNavigate();
+
+  const language = getLanguage('en');
+
+  const translations = errors[language as keyof typeof errors];
+
+  return (
+    <Container>
+      { type === 'not_found' ? <RiFileWarningLine size={ 100 } /> : <RiAlarmWarningFill size={ 100 } /> }
+
+      <Description>
+        { type === 'not_found' ? translations.not_found : translations.system }
+      </Description>
+
+      <Button
+        type="button"
+        text={ translations.back }
+        noMargin
+        onClick={ () => navigate('/') }
+      />
+    </Container>
+  );
+};
+
+export default Message;

package/Errors/styles.ts

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 15px;
+`;
+
+export const Description = styled.div`
+  margin-bottom: 15px;
+`;

package/Queries/apiClient.ts

@@ -1,6 +1,7 @@
 import axios from 'axios';
-// import i18next from 'i18next';
-// import { error } from '@utilities/notify';
+import languages from '@lang/errors';
+import { getLanguage } from '../Setup/utilities/languages';
+import { error as systemError } from '@autobusal/utilities';
 
 const apiClient = axios.create({
   baseURL: import.meta.env.VITE_API_OBT,
@@ -9,11 +10,11 @@ const apiClient = axios.create({
 
 apiClient.interceptors.request.use(
   config => {
-//   //   const token = localStorage.getItem('token');
+    const token = localStorage.getItem('token');
 
-//   //   if (token !== null) {
-//   //     config.headers.Authorization = token;
-//   //   }
+    if (token !== null) {
+      config.headers.Authorization = `Bearer ${ token }`;
+    }
 
     return config;
   }
@@ -21,29 +22,29 @@ apiClient.interceptors.request.use(
 
 apiClient.interceptors.response.use(response => (
   response
-), err => {
-  console.log(err.response);
-
-//   if (err.response) {
-//   // if we have a 401, we go to the logout page
-//   // if (err.response.status === 401) {
-//   //   alert(401);
-//   // }
-
-//     // @todo: how to handle 404?
-
-//     // if we have a 422 error, we display the message
-//     if (err.response.status === 422) {
-//       error(err.response.data.message);
-//     }
-//   } else if (err.request) {
-//     // if we have a 500 error, we display an error message
-//     error(i18next.t('server_error', { ns: 'general' }))
-//   } else {
-//     console.log('ERROR', err.message);
-//   }
-
-  return err;
+), error => {
+  if (error.response) {
+    // if we have a 401, we go to the logout page
+    if (error.response.status === 401) {
+      alert(401);
+    }
+
+    // if we have a 422 error, we display the message
+    if (error.response.status === 422) {
+      systemError(error.response.data.message);
+    }
+
+    // if we have a 500 error, we display a generic error message
+    if (error.response.status === 500) {
+      const language = getLanguage('en');
+
+      systemError(languages[language as keyof typeof languages].server);
+    }
+  } else if (error.request) {
+    alert('NO REQUEST!!!');
+  } else {
+    alert('OPAOPA!');
+  }
 });
 
 export default apiClient;

package/Setup/utilities/languages.ts

@@ -2,9 +2,11 @@ import i18next from 'i18next';
 import Backend from 'i18next-http-backend';
 import { initReactI18next } from 'react-i18next';
 
-const languages = (type: string, defaultLanguage: string): void => {
-  const currentLanguage = localStorage.getItem('language');
+export const getLanguage = (defaultLanguage: string): string => (
+  localStorage.getItem('language') ?? defaultLanguage
+);
 
+const languages = (type: string, defaultLanguage: string): void => {
   if (i18next.isInitialized) {
     return;
   }
@@ -16,7 +18,7 @@ const languages = (type: string, defaultLanguage: string): void => {
       interpolation: {
         escapeValue: false
       },
-      lng: currentLanguage ?? defaultLanguage,
+      lng: getLanguage(defaultLanguage),
       fallbackLng: defaultLanguage,
       debug: true,
       backend: {

package/index.ts

@@ -1,11 +1,15 @@
 import Providers from './Providers';
 import apiClient from './Queries/apiClient';
 import useSystemTheme from './Styles/hooks/useSystemTheme';
+import ErrorBoundary from './Errors/ErrorBoundary';
+import Message from './Errors/Message';
 import useMenuStore from './stores/menu';
 import useUserStore from './stores/user';
 
 export {
   apiClient,
+  ErrorBoundary,
+  Message,
   useMenuStore,
   useSystemTheme,
   useUserStore

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/providers",
-  "version": "1.0.55",
+  "version": "1.0.56",
   "type": "module",
   "main": "index.ts"
 }