project table api data, pagination

src/components/projects/Projects.js

@@ -1,10 +1,14 @@
 import React from "react";
 import ProjectList from "./ProjectsList";
+import { useGetProjectData } from "APIs/getProject";
 
 export default function Projects(){
+    const { data: getProjectDataList } = useGetProjectData();
+
     return(
         <>
-        <ProjectList/>
+        
+        <ProjectList projectData={getProjectDataList}/>
         </>
     )
 }

src/components/projects/ProjectsList.js

@@ -7,57 +7,60 @@ import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TablePagination from '@mui/material/TablePagination';
 import TableRow from '@mui/material/TableRow';
+import { Button } from '@mui/material';
+import { Link } from 'react-router-dom';
 
 const columns = [
-  { id: 'name', label: 'Name', minWidth: 170 },
+  // { id: 'name', label: 'Name', minWidth: 170 },
-  { id: 'code', label: 'ISO\u00a0Code', minWidth: 100 },
+  // { id: 'code', label: 'ISO\u00a0Code', minWidth: 100 },
   {
-    id: 'population',
+    id: 'project_title',
-    label: 'Population',
+    label: 'Title',
     minWidth: 170,
     align: 'right',
-    format: (value) => value.toLocaleString('en-US'),
+    // format: (value) => value.toLocaleString('en-US'),
   },
   {
-    id: 'size',
+    id: 'cms_contract_no',
-    label: 'Size\u00a0(km\u00b2)',
+    label: 'Contract No',
     minWidth: 170,
     align: 'right',
-    format: (value) => value.toLocaleString('en-US'),
+    // format: (value) => value.toLocaleString('en-US'),
   },
   {
-    id: 'density',
+    id: 'ticket_title',
-    label: 'Density',
+    label: 'Project Title',
     minWidth: 170,
     align: 'right',
-    format: (value) => value.toFixed(2),
+    // format: (value) => value.toFixed(2),
+  },
+  {
+    id: 'term',
+    label: 'Term',
+    Cell: ({ row }) => (
+      (row.perpetuity !== '' && row.perpetuity !== null)
+        ? (row.perpetuity !== "Yes" ? <span>{row.effective_from1} - {row.effective_to1}</span> : `${row.effective_from1} - Perpetual`)
+        : ""
+    ),
+  },
+  {
+    id: 'link',
+    label: 'Link',
+    Cell: ({ row }) => (
+      (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
+          ? <Button component={Link} to={{ pathname: `${process.env.PUBLIC_URL}/${row.id}/project-details` }} variant="contained" color="primary" size="small">View</Button>
+          : <Button component={Link} to={{ pathname: `${process.env.PUBLIC_URL}/${row.id}/project-details` }} variant="contained" color="primary" size="small">Publish</Button>
+        )
+    ),
+    minWidth: 80,
+    align: 'right',
   },
 ];
 
-function createData(name, code, population, size) {
-  const density = population / size;
-  return { name, code, population, size, density };
-}
 
-const rows = [
+export default function ProjectList({projectData}) {
-  createData('India', 'IN', 1324171354, 3287263),
-  createData('China', 'CN', 1403500365, 9596961),
-  createData('Italy', 'IT', 60483973, 301340),
-  createData('United States', 'US', 327167434, 9833520),
-  createData('Canada', 'CA', 37602103, 9984670),
-  createData('Australia', 'AU', 25475400, 7692024),
-  createData('Germany', 'DE', 83019200, 357578),
-  createData('Ireland', 'IE', 4857000, 70273),
-  createData('Mexico', 'MX', 126577691, 1972550),
-  createData('Japan', 'JP', 126317000, 377973),
-  createData('France', 'FR', 67022000, 640679),
-  createData('United Kingdom', 'GB', 67545757, 242495),
-  createData('Russia', 'RU', 146793744, 17098246),
-  createData('Nigeria', 'NG', 200962417, 923768),
-  createData('Brazil', 'BR', 210147125, 8515767),
-];
-
-export default function ProjectList() {
   const [page, setPage] = React.useState(0);
   const [rowsPerPage, setRowsPerPage] = React.useState(10);
 
@@ -70,6 +73,7 @@ export default function ProjectList() {
     setPage(0);
   };
 
+
   return (
     <Paper sx={{ width: '100%', overflow: 'hidden' }}>
       <TableContainer sx={{ maxHeight: 440}}>
@@ -88,7 +92,7 @@ export default function ProjectList() {
             </TableRow>
           </TableHead>
           <TableBody>
-            {rows
+            {projectData && projectData
               .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
               .map((row) => {
                 return (
@@ -114,7 +118,7 @@ export default function ProjectList() {
       <TablePagination
         rowsPerPageOptions={[10, 25, 100]}
         component="div"
-        count={rows.length}
+        count={projectData && projectData.length}
         rowsPerPage={rowsPerPage}
         page={page}
         onPageChange={handleChangePage}