Migrate to react-router v6

AlexandrLi · AlexandrLi · commit 4e27f32fa847 · 2022-07-06T14:15:51.000+06:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,17 +31,14 @@
     "@mui/material": "^5.8.7",
     "@mui/styles": "^5.8.7",
     "@reduxjs/toolkit": "^1.2.5",
-    "@types/lodash": "^4.14.158",
     "@types/react-redux": "^7.1.7",
-    "@types/react-router-dom": "^5.1.5",
     "@types/yup": "^0.29.14",
     "axios": "^0.19.2",
     "formik": "^2.2.9",
-    "lodash": "^4.17.19",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "react-redux": "^7.2.0",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.3.0",
     "serverless": "^2.29.0",
     "serverless-finch": "^2.6.0",
     "yup": "^0.32.11"
diff --git a/src/components/AddProductToCart/AddProductToCart.tsx b/src/components/AddProductToCart/AddProductToCart.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import Typography from "@mui/material/Typography";
 import { Product } from "~/models/Product";
 import CartIcon from "@mui/icons-material/ShoppingCart";
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -1,7 +1,6 @@
-import React from "react";
 import PageProducts from "~/components/pages/PageProducts/PageProducts";
 import MainLayout from "~/components/MainLayout/MainLayout";
-import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import { Routes, Route } from "react-router-dom";
 import PageProductForm from "~/components/pages/PageProductForm/PageProductForm";
 import PageCart from "~/components/pages/PageCart/PageCart";
 import PageOrders from "~/components/pages/PageOrders/PageOrders";
@@ -10,35 +9,20 @@ import PageProductImport from "~/components/pages/admin/PageProductImport/PagePr
 
 function App() {
   return (
-    <Router>
-      <Switch>
-        <Route path="/">
-          <MainLayout>
-            <Route exact path="/">
-              <PageProducts />
-            </Route>
-            <Route
-              exact
-              path={["/admin/product-form/:id", "/admin/product-form"]}
-            >
-              <PageProductForm />
-            </Route>
-            <Route exact path="/cart">
-              <PageCart />
-            </Route>
-            <Route exact path="/admin/orders">
-              <PageOrders />
-            </Route>
-            <Route exact path="/admin/order/:id">
-              <PageOrder />
-            </Route>
-            <Route exact path="/admin/products">
-              <PageProductImport />
-            </Route>
-          </MainLayout>
+    <MainLayout>
+      <Routes>
+        <Route path="/" element={<PageProducts />} />
+        <Route path="cart" element={<PageCart />} />
+        <Route path="admin">
+          <Route path="orders" element={<PageOrders />} />
+          <Route path="order/:id" element={<PageOrder />} />
+          <Route path="products" element={<PageProductImport />} />
+          <Route path="product-form" element={<PageProductForm />}>
+            <Route path=":id" element={<PageProductForm />} />
+          </Route>
         </Route>
-      </Switch>
-    </Router>
+      </Routes>
+    </MainLayout>
   );
 }
 
diff --git a/src/components/CartItems/CartItems.tsx b/src/components/CartItems/CartItems.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import Typography from "@mui/material/Typography";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
diff --git a/src/components/MainLayout/MainLayout.tsx b/src/components/MainLayout/MainLayout.tsx
@@ -24,7 +24,7 @@ const MainLayout: React.FC = ({ children }) => {
       <Header />
       <main>
         <Container sx={{ pb: 8 }} maxWidth="md">
-          {children!}
+          {children}
         </Container>
       </main>
       <Box
diff --git a/src/components/MainLayout/components/Cart.tsx b/src/components/MainLayout/components/Cart.tsx
@@ -1,7 +1,7 @@
 import Badge from "@mui/material/Badge";
 import CartIcon from "@mui/icons-material/ShoppingCart";
 import IconButton from "@mui/material/IconButton";
-import React, { useEffect } from "react";
+import React from "react";
 import axios from "axios";
 import { useDispatch, useSelector } from "react-redux";
 import { selectCartItems, updateFromApi } from "~/store/cartSlice";
@@ -10,7 +10,7 @@ import API_PATHS from "~/constants/apiPaths";
 
 export default function Cart() {
   const dispatch = useDispatch();
-  useEffect(() => {
+  React.useEffect(() => {
     axios
       .get(`${API_PATHS.cart}/profile/cart`, {
         headers: {
diff --git a/src/components/pages/PageCart/PageCart.tsx b/src/components/pages/PageCart/PageCart.tsx
@@ -9,14 +9,7 @@ import ReviewOrder from "~/components/pages/PageCart/components/ReviewOrder";
 import { useDispatch, useSelector } from "react-redux";
 import { selectCartItems, clearCart } from "~/store/cartSlice";
 import PaperLayout from "~/components/PaperLayout/PaperLayout";
-import {
-  Formik,
-  Form,
-  FormikProps,
-  FormikValues,
-  FastField,
-  Field,
-} from "formik";
+import { Formik, Form, FormikProps, FormikValues, Field } from "formik";
 import Grid from "@mui/material/Grid";
 import axios from "axios";
 import API_PATHS from "~/constants/apiPaths";
diff --git a/src/components/pages/PageCart/components/ReviewCart.tsx b/src/components/pages/PageCart/components/ReviewCart.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import Typography from "@mui/material/Typography";
 import CartItems from "~/components/CartItems/CartItems";
 import { useSelector } from "react-redux";
@@ -8,11 +7,11 @@ export default function ReviewCart() {
   const cartItems = useSelector(selectCartItems);
 
   return (
-    <React.Fragment>
+    <>
       <Typography variant="h6" gutterBottom>
         Order summary
       </Typography>
       <CartItems items={cartItems} isEditable />
-    </React.Fragment>
+    </>
   );
 }
diff --git a/src/components/pages/PageCart/components/ReviewOrder.tsx b/src/components/pages/PageCart/components/ReviewOrder.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import Typography from "@mui/material/Typography";
 import Grid from "@mui/material/Grid";
 import CartItems from "~/components/CartItems/CartItems";
@@ -12,7 +11,7 @@ type ReviewOrderProps = {
 
 export default function ReviewOrder({ address, items }: ReviewOrderProps) {
   return (
-    <React.Fragment>
+    <>
       <Typography variant="h6" gutterBottom>
         Order summary
       </Typography>
@@ -34,6 +33,6 @@ export default function ReviewOrder({ address, items }: ReviewOrderProps) {
           <Typography gutterBottom>{address.comment}</Typography>
         </Grid>
       </Grid>
-    </React.Fragment>
+    </>
   );
 }
diff --git a/src/components/pages/PageOrder/PageOrder.tsx b/src/components/pages/PageOrder/PageOrder.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { OrderItem } from "~/models/Order";
 import axios from "axios";
 import { useParams } from "react-router-dom";
@@ -101,17 +101,17 @@ const Form = (props: FormikProps<FormikValues>) => {
 
 export default function PageOrder() {
   const { id } = useParams<{ id: string }>();
-  const [order, setOrder] = useState<any>({});
-  const [cartItems, setCartItems] = useState<CartItem[]>([]);
-  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [order, setOrder] = React.useState<any>({});
+  const [cartItems, setCartItems] = React.useState<CartItem[]>([]);
+  const [isLoading, setIsLoading] = React.useState<boolean>(true);
 
   const onChangeStatus = (values: FormikValues) => {
     return axios
       .put(`${API_PATHS.order}/order/${order.id}/status`, values)
       .then(({ data }) => setOrder(data));
   };
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (!id) {
       setIsLoading(false);
       return;
diff --git a/src/components/pages/PageOrders/PageOrders.tsx b/src/components/pages/PageOrders/PageOrders.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import Orders from "~/components/pages/PageOrders/components/Orders";
 import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
diff --git a/src/components/pages/PageOrders/components/Orders.tsx b/src/components/pages/PageOrders/components/Orders.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import axios from "axios";
 import { Link } from "react-router-dom";
 import API_PATHS from "~/constants/apiPaths";
@@ -12,9 +12,9 @@ import Paper from "@mui/material/Paper";
 import Button from "@mui/material/Button";
 
 export default function Orders() {
-  const [orders, setOrders] = useState<any>([]);
+  const [orders, setOrders] = React.useState<any>([]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     axios.get(`${API_PATHS.order}/order`).then((res) => setOrders(res.data));
   }, []);
 
diff --git a/src/components/pages/PageProductForm/PageProductForm.tsx b/src/components/pages/PageProductForm/PageProductForm.tsx
@@ -1,11 +1,11 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import Button from "@mui/material/Button";
 import Grid from "@mui/material/Grid";
 import { Product, ProductSchema } from "~/models/Product";
 import { Formik, Field, FormikProps, FormikValues } from "formik";
 import TextField from "~/components/Form/TextField";
 import axios from "axios";
-import { useHistory, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import PaperLayout from "~/components/PaperLayout/PaperLayout";
 import Typography from "@mui/material/Typography";
 import API_PATHS from "~/constants/apiPaths";
@@ -33,7 +33,7 @@ const Form = (props: FormikProps<FormikValues>) => {
     // onGetCitizen,
     // shouldConfirmLeave,
   } = props;
-
+  const navigate = useNavigate();
   return (
     <form onSubmit={handleSubmit} autoComplete="off">
       <Grid container spacing={2}>
@@ -79,7 +79,9 @@ const Form = (props: FormikProps<FormikValues>) => {
           />
         </Grid>
         <Grid item container xs={12} justifyContent="space-between">
-          <Button color="primary">Cancel</Button>
+          <Button color="primary" onClick={() => navigate("/admin/products")}>
+            Cancel
+          </Button>
           <Button
             type="submit"
             variant="contained"
@@ -97,10 +99,10 @@ const Form = (props: FormikProps<FormikValues>) => {
 const emptyValues: any = ProductSchema.cast({});
 
 export default function PageProductForm() {
-  const history = useHistory();
+  const navigate = useNavigate();
   const { id } = useParams<{ id: string }>();
-  const [product, setProduct] = useState<Product | null>(null);
-  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [product, setProduct] = React.useState<Product | null>(null);
+  const [isLoading, setIsLoading] = React.useState<boolean>(true);
 
   const onSubmit = (values: FormikValues) => {
     const formattedValues = ProductSchema.cast(values);
@@ -109,10 +111,10 @@ export default function PageProductForm() {
       : formattedValues;
     axios
       .put(`${API_PATHS.bff}/product`, productToSave)
-      .then(() => history.push("/admin/products"));
+      .then(() => navigate("/admin/products"));
   };
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (!id) {
       setIsLoading(false);
       return;
diff --git a/src/components/pages/PageProducts/PageProducts.tsx b/src/components/pages/PageProducts/PageProducts.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import Products from "~/components/pages/PageProducts/components/Products";
 import Box from "@mui/material/Box";
 
diff --git a/src/components/pages/PageProducts/components/Products.tsx b/src/components/pages/PageProducts/components/Products.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import Card from "@mui/material/Card";
 import CardActions from "@mui/material/CardActions";
 import CardContent from "@mui/material/CardContent";
@@ -13,9 +13,9 @@ import AddProductToCart from "~/components/AddProductToCart/AddProductToCart";
 import productList from "./productList.json";
 
 export default function Products() {
-  const [products, setProducts] = useState<Product[]>([]);
+  const [products, setProducts] = React.useState<Product[]>([]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     // axios.get(`${API_PATHS.bff}/product/available/`)
     //   .then(res => setProducts(res.data));
     setProducts(productList);
diff --git a/src/components/pages/admin/PageProductImport/PageProductImport.tsx b/src/components/pages/admin/PageProductImport/PageProductImport.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import API_PATHS from "~/constants/apiPaths";
 import ProductsTable from "~/components/pages/admin/PageProductImport/components/ProductsTable";
 import CSVFileImport from "~/components/pages/admin/PageProductImport/components/CSVFileImport";
diff --git a/src/components/pages/admin/PageProductImport/components/CSVFileImport.tsx b/src/components/pages/admin/PageProductImport/components/CSVFileImport.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import Typography from "@mui/material/Typography";
 import axios from "axios";
 import Box from "@mui/material/Box";
@@ -9,7 +9,7 @@ type CSVFileImportProps = {
 };
 
 export default function CSVFileImport({ url, title }: CSVFileImportProps) {
-  const [file, setFile] = useState<any>();
+  const [file, setFile] = React.useState<any>();
 
   const onFileChange = (e: any) => {
     console.log(e);
diff --git a/src/components/pages/admin/PageProductImport/components/ProductsTable.tsx b/src/components/pages/admin/PageProductImport/components/ProductsTable.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import axios from "axios";
 import { Link } from "react-router-dom";
 import API_PATHS from "~/constants/apiPaths";
@@ -13,9 +13,9 @@ import Button from "@mui/material/Button";
 import { formatAsPrice } from "~/utils/utils";
 
 export default function ProductsTable() {
-  const [products, setProducts] = useState<any>([]);
+  const [products, setProducts] = React.useState<any>([]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     axios.get(`${API_PATHS.bff}/product`).then((res) => setProducts(res.data));
   }, []);
 
diff --git a/src/index.tsx b/src/index.tsx
@@ -6,6 +6,7 @@ import { Provider } from "react-redux";
 import CssBaseline from "@mui/material/CssBaseline";
 import axios from "axios";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
+import { BrowserRouter } from "react-router-dom";
 
 const theme = createTheme();
 
@@ -25,10 +26,12 @@ axios.interceptors.response.use(
 ReactDOM.render(
   <React.StrictMode>
     <Provider store={store}>
-      <ThemeProvider theme={theme}>
-        <CssBaseline />
-        <App />
-      </ThemeProvider>
+      <BrowserRouter>
+        <ThemeProvider theme={theme}>
+          <CssBaseline />
+          <App />
+        </ThemeProvider>
+      </BrowserRouter>
     </Provider>
   </React.StrictMode>,
   document.getElementById("root")

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import React from "react";`
`2`	`1`	`import Typography from "@mui/material/Typography";`
`3`	`2`	`import { Product } from "~/models/Product";`
`4`	`3`	`import CartIcon from "@mui/icons-material/ShoppingCart";`