feat: Project Display

packages/client/src/pages/projects/ProjectControl.tsx

@@ -1,39 +1,54 @@
 import { Box, Typography } from '@mui/material';
-import { Control } from '../../components/Control.component';
+import { DataGrid, GridColDef } from '@mui/x-data-grid';
+import { useProject } from '../../context/Project.context';
+import { GridActionsCellItem } from '@mui/x-data-grid-pro';
+import DeleteIcon from '@mui/icons-material/DeleteOutlined';
+import { Project } from '../../graphql/graphql';
 
-// currently hardcoded values, but eventully
-// there will be a fetching function that retrieves project information
-const rows = [
-  {
-    id: 1,
-    name: 'Project Flour',
-    description:
-      'Led by James Beard Award-winning pastry chef + co-owner Joanne Chang, Flour Bakery now has nine locations in Boston + Cambridge. We offer buttery breakfast pastries; soft + chewy cookies; luscious pies; gorgeous cakes; and fresh, made-to-order sandwiches, soups, and salads - all prepared daily by our dedicated team.'
-  },
-  {
-    id: 2,
-    name: 'Project Tesla',
-    description:
-      'The Energy Generation and Storage segment engages in the design, manufacture, installation, sale, and leasing of solar energy generation and energy storage products, and related services to residential, commercial, and industrial customers and utilities through its website, stores, and galleries, as well as through a network of channel partners'
-  },
-  {
-    id: 3,
-    name: 'Project Starbucks',
-    description: 'The company was founded by Steven Paul Jobs, Ronald Gerald Wayne, and Stephen G. Wozniak on April 1, 1976 and is headquartered in Cupertino, CA.'
-  },
-  {
-    id: 4,
-    name: 'Project Charles',
-    description: 'Investment, wealth and alternative managers, asset owners and insurers in over 30 countries rely on Charles River IMS to manage USD $48 Trillion in assets.'
-  }
-];
 
 const ProjectControl: React.FC = () => {
+  const { projects } = useProject();
+
+  const columns: GridColDef[] = [
+    {
+      field: 'name',
+      headerName: 'Name',
+      width: 200,
+      editable: false
+    },
+    {
+      field: 'description',
+      headerName: 'Description',
+      width: 500,
+      editable: false
+    },
+    {
+      field: 'delete',
+      type: 'actions',
+      headerName: 'Delete',
+      width: 120,
+      maxWidth: 120,
+      cellClassName: 'delete',
+      getActions: () => {
+        return [<GridActionsCellItem icon={<DeleteIcon />} label="Delete" />];
+      }
+    }
+  ];
+
+  // Make sure the lines between rows are visible
+  const rowStyle = {
+    borderBottom: '1px solid rgba(224, 224, 224, 1)'
+  };
+
   return (
     <>
       <Typography variant='h3'>Project Control</Typography>
-      <Box>
-        <Control tableRows={rows} />
+      <Box sx={{ maxWidth: '1000px', margin: 'auto' }}>
+        <DataGrid
+          rows={projects || []}
+          columns={columns}
+          getRowId={(row: Project) => row._id}
+        />
       </Box>
     </>
   );