refacto(PaginatedData) : remplace MobileStepper by Pagination component for PreviousExchangesTab

Relates to #191

frontend/src/components/common/PaginatedData.jsx

 import React from "react";
 import { makeStyles } from "@material-ui/core/styles";
-import MobileStepper from "@material-ui/core/MobileStepper";
-import Button from "@material-ui/core/Button";
-import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft";
-import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";
+import Pagination from "@material-ui/lab/Pagination";
 import PropTypes from "prop-types";
 
 const useStyles = makeStyles((theme) => ({
@@ -12,7 +9,8 @@ const useStyles = makeStyles((theme) => ({
     margin: "0 auto",
   },
   stepperContainer: {
-    width: "100%",
+    margin: "0 auto",
+    width: "max-content",
   },
   progress: {
     [theme.breakpoints.up("sm")]: {
@@ -38,9 +36,7 @@ function PaginatedData(props) {
     EmptyMessageComponent,
   } = props;
   const {
-    page: activeStep,
-    last,
-    first,
+    page,
     pages_count: nbOfPages,
     content,
     number_elements: totalElements,
@@ -50,39 +46,23 @@ function PaginatedData(props) {
     return EmptyMessageComponent;
   }
 
+  const handleChange = (event, value) => {
+    goToPage(value);
+  };
+
   function renderStepper() {
     if (nbOfPages === 1) {
       return <></>;
     }
     return (
       <div className={classes.stepperContainer}>
-        <MobileStepper
-          variant="progress"
-          steps={nbOfPages}
-          position="static"
-          activeStep={activeStep - 1}
-          className={classes.root}
-          classes={{ progress: classes.progress }}
-          backButton={
-            <Button
-              size="small"
-              onClick={() => goToPage(activeStep - 1)}
-              disabled={first}
-            >
-              <KeyboardArrowLeft />
-              Précédent
-            </Button>
-          }
-          nextButton={
-            <Button
-              size="small"
-              onClick={() => goToPage(activeStep + 1)}
-              disabled={last}
-            >
-              Suivant
-              <KeyboardArrowRight />
-            </Button>
-          }
+        <Pagination
+          count={nbOfPages}
+          page={page}
+          onChange={handleChange}
+          showFirstButton
+          showLastButton
+          color="secondary"
         />
       </div>
     );