project screen code optimization

src/components/projects/ProjectsList.tsx

@@ -9,35 +9,31 @@ import TablePagination from '@mui/material/TablePagination';
 import TableRow from '@mui/material/TableRow';
 import { Button } from '@mui/material';
 import { Link } from 'react-router-dom';
+import { useState } from 'react';
 
 const columns = [
-  // { id: 'name', label: 'Name', minWidth: 170 },
-  // { id: 'code', label: 'ISO\u00a0Code', minWidth: 100 },
   {
     id: 'project_title',
     label: 'Title',
     minWidth: 170,
     align: 'right',
-    // format: (value) => value.toLocaleString('en-US'),
   },
   {
     id: 'cms_contract_no',
     label: 'Contract No',
     minWidth: 170,
     align: 'right',
-    // format: (value) => value.toLocaleString('en-US'),
   },
   {
     id: 'ticket_title',
     label: 'Project Title',
     minWidth: 170,
     align: 'right',
-    // format: (value) => value.toFixed(2),
   },
   {
     id: 'term',
     label: 'Term',
-    Cell: (row:any) => (
+    Cell: (row: any) => (
       (row.perpetuity !== '' && row.perpetuity !== null)
         ? (row.perpetuity !== "Yes" ? <span>{row.effective_from1} - {row.effective_to1}</span> : `${row.effective_from1} - Perpetual`)
         : ""
@@ -46,7 +42,7 @@ const columns = [
   {
     id: 'link',
     label: 'Link',
-    Cell: (row:any) => (
+    Cell: (row: any) => (
       (row.cid === null || row.cid === 0 || row.effective_from1 === null)
         ? <Button component={Link} to={{ pathname: `${process.env.PUBLIC_URL}/${row.id}/project-details` }} variant="contained"  size="small">Link</Button>
         : (row.published === 1
@@ -59,79 +55,82 @@ const columns = [
   },
 ];
 
-type Props={
+
-  projectData:any
+const ProjectTableHead = () => (
-}
+  <TableHead>
+    <TableRow>
+      {columns.map((column) => (
+        <TableCell
+          sx={{ bgcolor: '#171716', color: 'white', borderBottom: '#171716' }}
+          key={column.id}
+          style={{ minWidth: column.minWidth }}
+        >
+          {column.label}
+        </TableCell>
+      ))}
+    </TableRow>
+  </TableHead>
+);
+
+type Props = {
+  projectData: any;
+  page:any;
+  rowsPerPage:any
+};
+
+const ProjectTable = ({ projectData, page, rowsPerPage }:Props) => (
+  <Table stickyHeader aria-label="sticky table">
+    <TableBody>
+      {projectData &&
+        projectData
+          .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+          .map((row:any) => (
+            <TableRow hover role="checkbox" tabIndex={-1} key={row.code}>
+              {columns.map((column) => (
+                <TableCell key={column.id}>{ typeof row[column.id] === 'number' ? (row[column.id]) : row[column.id]}</TableCell>
+              ))}
+            </TableRow>
+          ))}
+    </TableBody>
+  </Table>
+);
 
 
-export default function ProjectList({projectData}:Props) {
-  const [page, setPage] = React.useState(0);
-  const [rowsPerPage, setRowsPerPage] = React.useState(10);
 
-  const handleChangePage = (event:any, newPage:any) => {
+
+const ProjectList = ({ projectData}: any) => {
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+
+  const handleChangePage = (event: any, newPage: React.SetStateAction<number>) => {
     setPage(newPage);
   };
 
-  const handleChangeRowsPerPage = (event:any) => {
+  const handleChangeRowsPerPage = (event: { target: { value: string | number; }; }) => {
     setRowsPerPage(+event.target.value);
     setPage(0);
   };
 
-
   return (
-    <Paper square className='projectScreen-background' sx={{ width: '100%', overflow: 'hidden',backgroundColor:'rgb(13 13 13)' }}>
+    <Paper square className="projectScreen-background" sx={{ width: '100%', overflow: 'hidden', backgroundColor: 'rgb(13 13 13)' }}>
-    <Paper  className='projectScreen-background' sx={{ margin:'1%', width: '100%', overflow: 'hidden' }}>
+      <Paper className="projectScreen-background" sx={{ margin: '1%', width: '100%', overflow: 'hidden' }}>
-      <TableContainer sx={{ maxHeight: '600px'}}>
+        <TableContainer sx={{ maxHeight: '600px' }}>
-        <Table stickyHeader aria-label="sticky table">
+          <ProjectTableHead />
-          <TableHead >
+          <ProjectTable projectData={projectData} page={page} rowsPerPage={rowsPerPage} />
-            <TableRow >
+        </TableContainer>
-              {columns.map((column) => (
+        <TablePagination
-                <TableCell 
+          sx={{ bgcolor: '#171716', color: 'white' }}
-                  sx={{bgcolor:'#171716',color:'white', borderBottom:'#171716'}}
+          rowsPerPageOptions={[10, 25, 100]}
-                  key={column.id}
+          component="div"
-                  // align={column.align}
+          count={projectData && projectData.length}
-                  style={{ minWidth: column.minWidth }}
+          rowsPerPage={rowsPerPage}
-                >
+          page={page}
-                  {column.label}
+          onPageChange={handleChangePage}
-                </TableCell>
+          onRowsPerPageChange={handleChangeRowsPerPage}
-              ))}
+        />
-            </TableRow>
+      </Paper>
-          </TableHead>
-          <TableBody>
-            {projectData && projectData
-              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-              .map((row:any) => {
-                return (
-                  <TableRow hover role="checkbox" tabIndex={-1} key={row.code}>
-                    {columns.map((column:any) => {
-                      const value = row[column.id];
-                      return (
-                        <TableCell key={column.id} 
-                        // align={column.align}
-                        >
-                          {column.format && typeof value === 'number'
-                            ? column.format(value)
-                            : value}
-                        </TableCell>
-                      );
-                    })}
-                  </TableRow>
-                );
-              })}
-          </TableBody>
-        </Table>
-      </TableContainer>
-      <TablePagination
-        sx={{bgcolor:'#171716',color:'white'}}
-        rowsPerPageOptions={[10, 25, 100]}
-        component="div"
-        count={projectData && projectData.length}
-        rowsPerPage={rowsPerPage}
-        page={page}
-        onPageChange={handleChangePage}
-        onRowsPerPageChange={handleChangeRowsPerPage}
-      />
-    </Paper>
     </Paper>
   );
-}
+};
+
+export default ProjectList;