feat(app): Agrega @laboratoria/react

Laboratoria · Mar 2, 2023 · 5c0b0a1 · 5c0b0a1
1 parent 613b3fa
commit 5c0b0a1
Show file tree

Hide file tree

Showing 19 changed files with 347 additions and 414 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,13 +35,13 @@
   "dependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
+    "@laboratoria/react": "^3.0.0",
     "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.3",
     "@mui/styles": "^5.11.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^13.2.1",
-    "firebase": "^9.17.1",
     "highlight.js": "^11.7.0",
     "react": "^17.0.2",
     "react-ace": "^9.4.4",
@@ -94,4 +94,4 @@
       "<rootDir>/src/lib/theme.js"
     ]
   }
-}
+}
diff --git a/public/index.html b/public/index.html
@@ -9,7 +9,9 @@
   <meta name="description" content="Curriculum del Bootcamp de Laboratoria (Web Dev + UX)" />
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bitter:400,700|Open+Sans:400,400i,700" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Bitter:wght@100;200;400;500;700&family=Open+Sans:wght@300;400;500;700&display=swap"
+    rel="stylesheet">
   <title>Laboratoria/bootcamp</title>
 </head>
 

diff --git a/src/__mocks__/@laboratoria/react.js b/src/__mocks__/@laboratoria/react.js
@@ -0,0 +1,7 @@
+export const useApp = jest.fn();
+
+export const themeConfig = {
+  palette: {
+    mint: {},
+  },
+};
diff --git a/src/components/App/App.spec.js b/src/components/App/App.spec.js
@@ -1,48 +1,42 @@
 import { render, screen, waitFor } from '@testing-library/react';
-import { createTheme, ThemeProvider, StyledEngineProvider, adaptV4Theme } from '@mui/material/styles';
-import themeConfig from '../../lib/theme';
-import app from '../../lib/app';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { useApp, themeConfig } from '@laboratoria/react';
 import App from '.';
 
-jest.mock('../../lib/app');
-
 describe('App', () => {
-  beforeEach(() => {
-    app.mockRestore();
-  });
-
   it('should show loading when auth user is undefined', () => {
-    const { container } = render(<App />);
+    useApp.mockReturnValue({ auth: {} });
+    const { container } = render(
+      <ThemeProvider theme={createTheme(themeConfig)}>
+        <App />
+      </ThemeProvider>
+    );
     const progress = container.querySelector('.MuiCircularProgress-root');
-    expect(progress instanceof HTMLDivElement).toBe(true);
+    expect(progress instanceof HTMLSpanElement).toBe(true);
   });
 
   it('should show spanish home by default', async () => {
-    app.useApp.mockImplementationOnce(() => ({
+    useApp.mockImplementation(() => ({
       auth: { user: null },
     }));
     render(
-      <StyledEngineProvider injectFirst>
-        <ThemeProvider theme={createTheme(adaptV4Theme(themeConfig))}>
-          <App />
-        </ThemeProvider>
-      </StyledEngineProvider>
+      <ThemeProvider theme={createTheme(themeConfig)}>
+        <App />
+      </ThemeProvider>
     );
     await waitFor(() => screen.getByText('Desarrollo Web'));
   });
 
   it('should show portuguese home when navigator.language is pt-BR', async () => {
     window.history.pushState({}, 'Test page', '/');
     const spy = jest.spyOn(window.navigator, 'language', 'get').mockReturnValue('pt');
-    app.useApp.mockImplementationOnce(() => ({
+    useApp.mockImplementation(() => ({
       auth: { user: null },
     }));
     render(
-      <StyledEngineProvider injectFirst>
-        <ThemeProvider theme={createTheme(adaptV4Theme(themeConfig))}>
-          <App />
-        </ThemeProvider>
-      </StyledEngineProvider>
+      <ThemeProvider theme={createTheme(themeConfig)}>
+        <App />
+      </ThemeProvider>
     );
     await waitFor(() => screen.getByText('Desenvolvimento Web'));
     spy.mockRestore();

diff --git a/src/components/App/index.jsx b/src/components/App/index.jsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
-import { useApp } from '../../lib/app';
+import { useApp } from '@laboratoria/react';
 import Loading from '../Loading';
 import RoutesWithIntl from './RoutesWithIntl';
 import './App.css';
@@ -10,18 +10,15 @@ const App = () => {
   const [defaulLocale, setDefaulLocale] = useState();
 
   useEffect(() => {
-    if (auth.user && !auth.profile) {
-      return;
-    }
-
-
-    const profileLocale = (auth.profile || {}).locale;
+    const userLang = auth.user?.lang;
     setDefaulLocale(
-      ['es-ES', 'pt-BR'].includes(profileLocale)
-        ? profileLocale
-        : navigator.language.split('-')[0] === 'pt'
+      userLang === 'es'
+        ? 'es-ES'
+        : userLang === 'pt'
           ? 'pt-BR'
-          : 'es-ES'
+          : navigator.language.split('-')[0] === 'pt'
+            ? 'pt-BR'
+            : 'es-ES'
     )
   }, [auth]);
 

diff --git a/src/components/SignIn/index.jsx b/src/components/SignIn/index.jsx
@@ -6,7 +6,7 @@ import Container from '@mui/material/Container';
 import Grid from '@mui/material/Grid';
 import TextField from '@mui/material/TextField';
 import Loading from '../Loading';
-import { useApp } from '../../lib/app';
+import { useApp } from '@laboratoria/react';
 
 const useStyles = makeStyles((theme) => ({
   root: {