Merge pull request #76 from Paker30/update_react_18

Update react 18 and react-router v6
Paker30 · Jan 11, 2024 · f21fed4 · f21fed4
2 parents 61403db + 06e19b7
commit f21fed4
Show file tree

Hide file tree

Showing 12 changed files with 1,366 additions and 1,487 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -16,5 +16,8 @@
         "no-sequences": "off",
         "no-confusing-arrow": "off",
         "no-underscore-dangle": "off"
+    },
+    "globals": {
+        "document": true
     }
 }
diff --git a/babel.config.js b/babel.config.js
@@ -1,8 +1,4 @@
 const presets = ['@babel/preset-env', '@babel/preset-react'];
 const plugins = [];
 
-if (!process.env.NODE_ENV.match(/test/i)) {
-    plugins.push(['import', { libraryName: 'antd', libraryDirectory: 'src', style: 'css' }]);
-}
-
 module.exports = { presets, plugins };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -60,30 +60,30 @@
     "less-loader": "^6.0.0",
     "less-vars-to-js": "^1.3.0",
     "react-hot-loader": "^4.12.21",
-    "react-test-renderer": "^16.13.1",
+    "react-test-renderer": "^16.14.0",
     "standard-version": "^8.0.1",
-    "style-loader": "^1.2.1",
+    "style-loader": "^3.3.3",
     "terser-webpack-plugin": "^5.3.9",
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",
     "workbox-webpack-plugin": "^7.0.0"
   },
   "dependencies": {
-    "@ant-design/icons": "^4.1.0",
-    "antd": "^4.2.0",
+    "@ant-design/icons": "^5.2.6",
+    "antd": "^5.11.2",
     "aphrodite": "^2.4.0",
     "i18next": "^19.4.4",
     "i18next-browser-languagedetector": "^4.2.0",
     "i18next-http-backend": "^1.0.12",
     "moment": "^2.29.4",
     "pouchdb-browser": "^7.2.1",
-    "react": "^16.13.1",
+    "react": "^16.14.0",
     "react-dom": "^16.13.1",
     "react-i18next": "^11.4.0",
     "react-is": "^18.2.0",
     "react-router-dom": "^5.1.2",
-    "styled-components": "^5.1.0",
+    "styled-components": "^6.1.1",
     "styled-media-query": "^2.1.2",
     "uniqid": "^5.2.0"
   },

diff --git a/public/index.html b/public/index.html
@@ -55,7 +55,7 @@
       <h1>Upss something went wrong :(</h1>
       <h2>It seems your browser has Javascript disabled, enable it and reload please</h2>
     </noscript>
-    <div id="app" style="height: 100%;"></div>
+    <div id="app" style="height: 100vh;"></div>
 
     <script src="./bundle.js"></script>
 </body>

diff --git a/src/App.js b/src/App.js
@@ -1,5 +1,5 @@
 import React, { Suspense, useEffect, useState } from 'react';
-import { BrowserRouter as Router, Switch, Route, Link, Redirect } from 'react-router-dom';
+import { BrowserRouter, Routes, Route, Link, redirect } from 'react-router-dom';
 import { Layout } from 'antd';
 import Uniqid from 'uniqid';
 import PouchDB from 'pouchdb-browser';
@@ -99,25 +99,7 @@ const addLink = (
     </Link>
 );
 
-function PrivateRoute({ userLogged, children, ...rest }) {
-    return (
-        <Route
-            {...rest}
-            // eslint-disable-next-line arrow-body-style
-            render={() => {
-                return userLogged
-                    ? (children)
-                    : (
-                        <Redirect
-                            to={{
-                                pathname: '/login'
-                            }}
-                        />
-                    );
-            }}
-        />
-    );
-}
+const PrivateRoute = ({ userLogged, children }) => userLogged ? (children) : redirect('/login');
 
 const App = () => {
     const [db] = useState(new PouchDB('cellar_db'));
@@ -191,7 +173,7 @@ const App = () => {
 
     return (
         <Area>
-            <Router>
+            <BrowserRouter>
                 <HeaderArea>
                     <Title userName={user} />
                     <ToolBar
@@ -202,32 +184,46 @@ const App = () => {
                 </HeaderArea>
                 <MainArea>
                     <ListArea>
-                        <Switch>
-                            <Route path="/">
-                                <Suspense fallback={<div><Trans i18nKey="loading" /></div>}>
-                                    {mainContent}
-                                </Suspense>
-                            </Route>
-                        </Switch>
+                        <Routes>
+                            <Route
+                                path="/"
+                                element={(
+                                    <Suspense fallback={<div><Trans i18nKey="loading" /></div>}>
+                                        {mainContent}
+                                    </Suspense>
+                                )}
+                            />
+                        </Routes>
                     </ListArea>
                     <DetailArea>
-                        <Switch>
-                            <Route path="/bottle">
-                                <Suspense fallback={<Loading />}>
-                                    <Bottle find={pickBottle(bottles)} deleteBootle={deleteBootle} />
-                                </Suspense>
-                            </Route>
-                            <PrivateRoute userLogged={user.name} path="/add">
-                                <Suspense fallback={<Loading />}>
-                                    <OtherBottle add={addBottle} find={pickBottle(bottles)} />
-                                </Suspense>
-                            </PrivateRoute>
-                            <Route path="/edit">
-                                <Suspense fallback={<Loading />}>
-                                    <OtherBottle add={updateBottle} find={pickBottle(bottles)} />
-                                </Suspense>
-                            </Route>
-                        </Switch>
+                        <Routes>
+                            <Route
+                                path="/bottle"
+                                element={(
+                                    <Suspense fallback={<Loading />}>
+                                        <Bottle find={pickBottle(bottles)} deleteBootle={deleteBootle} />
+                                    </Suspense>
+                                )}
+                            />
+                            <Route
+                                path="/add"
+                                element={(
+                                    <PrivateRoute userLogged={user.name} path="/add">
+                                        <Suspense fallback={<Loading />}>
+                                            <OtherBottle add={addBottle} find={pickBottle(bottles)} />
+                                        </Suspense>
+                                    </PrivateRoute>
+                                )}
+                            />
+                            <Route
+                                path="/edit"
+                                element={(
+                                    <Suspense fallback={<Loading />}>
+                                        <OtherBottle add={updateBottle} find={pickBottle(bottles)} />
+                                    </Suspense>
+                                )}
+                            />
+                        </Routes>
                     </DetailArea>
                 </MainArea>
                 <FooterArea>
@@ -246,7 +242,7 @@ const App = () => {
                         <span style={{ marginLeft: 'auto' }}>{`v ${pkg.version}`}</span>
                     </Footer>
                 </FooterArea>
-            </Router>
+            </BrowserRouter>
         </Area>
     );
 };

diff --git a/src/components/bottle/index.js b/src/components/bottle/index.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import { useLocation, withRouter } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import Styled from 'styled-components';
 import Media from 'styled-media-query';
 import { Rate, Button } from 'antd';
@@ -111,7 +111,7 @@ const MainSection = ({ title, description, value, border = true }) => (
     </DetailContainer>
 );
 
-function Bottle({ find, deleteBootle, history, t }) {
+function Bottle({ find, deleteBootle, t }) {
     const divRef = useRef(null);
     const query = new URLSearchParams(useLocation().search);
     const bottle = find(query.get('id'));
@@ -121,9 +121,11 @@ function Bottle({ find, deleteBootle, history, t }) {
         divRef.current.scrollIntoView();
     }, [id]);
 
+    const navigate = useNavigate();
+
     return (
-        <Detail ref={divRef}>
-            <CloseWrapper><Button onClick={() => history.push('/')} icon={<Close />} /></CloseWrapper>
+        <Detail ref={divRef} navigate={navigate}>
+            <CloseWrapper><Button onClick={() => navigate('/')} icon={<Close />} /></CloseWrapper>
             <MainSection title={name} description={appellationOfOrigin} value={selectCup({ color, type })} border={false} />
             <Section title={<Trans i18nKey={`bottle.color.${color}`} />} description={<Trans i18nKey={`bottle.type.${type}`} />} value={`${price} ${t('currency')}`} />
             <Section title={region} description={year} value={<Rate allowHalf disabled="true" value={rate} />} />
@@ -136,7 +138,7 @@ function Bottle({ find, deleteBootle, history, t }) {
             <Buttons>
                 <Button
                     onClick={() => {
-                        history.push(`/edit?id=${bottle.id}`);
+                        navigate(`/edit?id=${bottle.id}`);
                     }}
                     shape="round"
                     style={{
@@ -159,12 +161,12 @@ function Bottle({ find, deleteBootle, history, t }) {
                     }}
                     onClick={() => {
                         deleteBootle(bottle);
-                        history.push('/');
+                        navigate('/');
                     }}
                 />
             </Buttons>
         </Detail>
     );
 }
 
-export default withTranslation()(withRouter(Bottle));
+export default withTranslation()(Bottle);
diff --git a/src/components/login/index.js b/src/components/login/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { withRouter } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { Form, Input, Button } from 'antd';
 import Styled from 'styled-components';
 import { Trans } from 'react-i18next';
@@ -35,8 +35,10 @@ function Login({ history, saveUser }) {
         history.push('/');
     };
 
+    const navigate = useNavigate();
+
     return (
-        <LoginForm>
+        <LoginForm navigate={navigate}>
             <Form
                 name="loginForm"
                 layout="vertical"
@@ -64,4 +66,4 @@ function Login({ history, saveUser }) {
     );
 }
 
-export default withRouter(Login);
+export default Login;
diff --git a/src/components/new/index.js b/src/components/new/index.js
@@ -1,5 +1,5 @@
 import React, { useRef, useEffect } from 'react';
-import { withRouter, useLocation } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import { Form, Input, Button, Select, Rate, DatePicker, InputNumber } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import { Trans } from 'react-i18next';
@@ -46,8 +46,9 @@ const B = (f) => (g) => (x) => f(g(x));
 const capitalized = (word) => word.charAt(0).toUpperCase() + word.slice(1);
 const toCapitalized = (str) => str.split(' ').map(capitalized).join(' ');
 
-function OtherBottle({ add, history, find }) {
+function OtherBottle({ add, find }) {
     const nameRef = useRef(null);
+    const navigate = useNavigate();
     const query = new URLSearchParams(useLocation().search);
     const bottle = find(query.get('id')) || {};
 
@@ -58,16 +59,16 @@ function OtherBottle({ add, history, find }) {
     const onFinish = (form) => {
         // eslint-disable-next-line no-underscore-dangle
         B(add)(cleanObject)({ ...form, year: form.year.year(), _id: bottle._id, _rev: bottle._rev, id: bottle.id });
-        history.push('/');
+        navigate('/');
     };
 
     useEffect(() => {
         nameRef.current.focus();
     }, []);
 
     return (
-        <NewBottle>
-            <CloseWrapper><Button onClick={() => history.push('/')} icon={<Close />} /></CloseWrapper>
+        <NewBottle navigate={navigate}>
+            <CloseWrapper><Button onClick={() => navigate('/')} icon={<Close />} /></CloseWrapper>
             <Form
                 name="newBottle"
                 layout="vertical"
@@ -208,4 +209,4 @@ function OtherBottle({ add, history, find }) {
     );
 }
 
-export default withRouter(OtherBottle);
+export default OtherBottle;
diff --git a/src/components/toolBar/index.js b/src/components/toolBar/index.js
@@ -14,13 +14,14 @@ const ToolBarContainer = Styled.div`
 
 const AddWrapper = Styled.div`
     margin-left: auto;
-    padding-top: 9px;
-    padding-right: 25px;
-    padding-left: 15px;
     border-radius: 50%;
     background: #E1BBCA;
     height: 50px;
     width: 50px;
+    & > a > svg {
+        padding-top: 9px;
+        padding-left: 15px;
+    }
 `;
 
 const SearchWrapper = Styled.div`

diff --git a/src/index.js b/src/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import App from './App';
 import i18n from './i18n';
 
@@ -14,10 +14,7 @@ i18n
         initImmediate: false
     })
     .then(() => {
-        ReactDOM.render(
-            <App />,
-            document.getElementById('app'), //  eslint-disable-line no-undef
-        );
+        ReactDOM.createRoot(document.getElementById('app')).render(<App />);
 
         module.hot.accept();
     });
diff --git a/webpack.config.js b/webpack.config.js
@@ -14,11 +14,6 @@ module.exports = {
                 loader: 'babel-loader',
                 exclude: /node_modules/,
                 test: /\.(js|jsx)$/,
-                options: {
-                    plugins: [
-                        ['import', { libraryName: 'antd', style: 'css' }]
-                    ]
-                },
             },
             {
                 loader: 'eslint-loader',