refactor(web): remove typescript

packages/web/src/components/UserList/TablePaginationActions/index.jsx

@@ -5,47 +5,21 @@ import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
 import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
 import LastPageIcon from '@mui/icons-material/LastPage';
 import Box from '@mui/material/Box';
-
-interface TablePaginationActionsProps {
-  count: number;
-  page: number;
-  rowsPerPage: number;
-  onPageChange: (
-    event: React.MouseEvent<HTMLButtonElement>,
-    newPage: number
-  ) => void;
-}
-
-export default function TablePaginationActions(
-  props: TablePaginationActionsProps
-) {
+export default function TablePaginationActions(props) {
   const theme = useTheme();
   const { count, page, rowsPerPage, onPageChange } = props;
-
-  const handleFirstPageButtonClick = (
-    event: React.MouseEvent<HTMLButtonElement>
-  ) => {
+  const handleFirstPageButtonClick = (event) => {
     onPageChange(event, 0);
   };
-
-  const handleBackButtonClick = (
-    event: React.MouseEvent<HTMLButtonElement>
-  ) => {
+  const handleBackButtonClick = (event) => {
     onPageChange(event, page - 1);
   };
-
-  const handleNextButtonClick = (
-    event: React.MouseEvent<HTMLButtonElement>
-  ) => {
+  const handleNextButtonClick = (event) => {
     onPageChange(event, page + 1);
   };
-
-  const handleLastPageButtonClick = (
-    event: React.MouseEvent<HTMLButtonElement>
-  ) => {
+  const handleLastPageButtonClick = (event) => {
     onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
   };
-
   return (
     <Box sx={{ flexShrink: 0, ml: 2.5 }}>
       <IconButton

packages/web/src/components/UserList/index.jsx

@@ -12,7 +12,6 @@ import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import EditIcon from '@mui/icons-material/Edit';
 import TableFooter from '@mui/material/TableFooter';
-
 import DeleteUserButton from 'components/DeleteUserButton/index.ee';
 import ListLoader from 'components/ListLoader';
 import useUsers from 'hooks/useUsers';
@@ -20,32 +19,18 @@ import useFormatMessage from 'hooks/useFormatMessage';
 import * as URLS from 'config/urls';
 import TablePaginationActions from './TablePaginationActions';
 import { TablePagination } from './style';
-
-export default function UserList(): React.ReactElement {
+export default function UserList() {
   const formatMessage = useFormatMessage();
   const [page, setPage] = React.useState(0);
   const [rowsPerPage, setRowsPerPage] = React.useState(10);
-  const {
-    users,
-    pageInfo,
-    totalCount,
-    loading,
-  } = useUsers(page, rowsPerPage);
-
-  const handleChangePage = (
-    event: React.MouseEvent<HTMLButtonElement> | null,
-    newPage: number
-  ) => {
+  const { users, pageInfo, totalCount, loading } = useUsers(page, rowsPerPage);
+  const handleChangePage = (event, newPage) => {
     setPage(newPage);
   };
-
-  const handleChangeRowsPerPage = (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => {
+  const handleChangeRowsPerPage = (event) => {
     setRowsPerPage(+event.target.value);
     setPage(0);
   };
-
   return (
     <>
       <TableContainer component={Paper}>
@@ -83,10 +68,13 @@ export default function UserList(): React.ReactElement {
             </TableRow>
           </TableHead>
           <TableBody>
-            {loading && <ListLoader
-              data-test="users-list-loader"
-              rowsNumber={3}
-              columnsNumber={2} />}
+            {loading && (
+              <ListLoader
+                data-test="users-list-loader"
+                rowsNumber={3}
+                columnsNumber={2}
+              />
+            )}
             {!loading &&
               users.map((user) => (
                 <TableRow
@@ -95,22 +83,19 @@ export default function UserList(): React.ReactElement {
                   data-test="user-row"
                 >
                   <TableCell scope="row">
-                    <Typography
-                      variant="subtitle2"
-                      data-test="user-full-name">{user.fullName}</Typography>
+                    <Typography variant="subtitle2" data-test="user-full-name">
+                      {user.fullName}
+                    </Typography>
                   </TableCell>
 
                   <TableCell>
-                    <Typography
-                      variant="subtitle2"
-                      data-test="user-email">{user.email}</Typography>
+                    <Typography variant="subtitle2" data-test="user-email">
+                      {user.email}
+                    </Typography>
                   </TableCell>
 
                   <TableCell>
-                    <Typography
-                      variant="subtitle2"
-                      data-test="user-role"
-                    >
+                    <Typography variant="subtitle2" data-test="user-role">
                       {user.role.name}
                     </Typography>
                   </TableCell>
@@ -128,7 +113,8 @@ export default function UserList(): React.ReactElement {
 
                       <DeleteUserButton
                         data-test="user-delete"
-                        userId={user.id} />
+                        userId={user.id}
+                      />
                     </Stack>
                   </TableCell>
                 </TableRow>

packages/web/src/components/UserList/style.js

@@ -2,7 +2,6 @@ import { styled } from '@mui/material/styles';
 import MuiTablePagination, {
   tablePaginationClasses,
 } from '@mui/material/TablePagination';
-
 export const TablePagination = styled(MuiTablePagination)(() => ({
   [`& .${tablePaginationClasses.selectLabel}, & .${tablePaginationClasses.displayedRows}`]:
     {