Merge branch 'main' of https://csgit.ucalgary.ca/junyi.li/seng513-202401-group-13

client/pages/view-community.js

@@ -3,29 +3,37 @@ import React, { useState } from 'react'
 import Banner from '../components/Banner'
 import Navbar from '../components/Navbar'
 import Footer from '../components/Footer'
+import CommunityTable from '../components/CommunityTable' //Imports the CommunityTable component
 import AddEditWindow from '../components/AddEditWindow'
 import '../styles/addedit.module.css'
 
-
 export default function ViewCommunity() {
-
     const [showWindow, setShowWindow] = useState("");
-    const openAdd = () => setShowWindow("add")
-    const openEdit = () => setShowWindow("edit")
-    const closeWindow = () => setShowWindow("")
+
+    const openAdd = () => setShowWindow("add");
+    const openEdit = () => setShowWindow("edit");
+    const closeWindow = () => setShowWindow("");
+
+    const communities = [
+        { id: 1, name: 'Community 1', description: 'Description 1', dataTypes: ['Type A', 'Type B'], index: 1 },
+        { id: 2, name: 'Community 2', description: 'Description 2', dataTypes: ['Type C', 'Type D'], index: 2 },
+    ];
 
     return (
-        <div class="z-0">
+        <div className="z-0">
             <Banner title="View Community" />
             <div style={{ background: "#3E415C", minHeight: "80vh" }} className='p-3'>
                 <Navbar />
                 <div className='row mx-5'>
-                    <p className='col-md-10 mt-4'>
-                        This is a placeholder page. Content will be added here by @Charan.
-                    </p>
+                    <div className='col-md-10 mt-4'>
+                        {/* Render the CommunityTable component and pass the communities data */}
+                        <CommunityTable communities={communities} />
+                    </div>
+                    <div className="col-md-2 mt-4">
                         <button onClick={openAdd}>Add Data</button>
                         <button onClick={openEdit}>Edit Data</button>
                     </div>
+                </div>
                 {showWindow ? <AddEditWindow state={showWindow} close={closeWindow} /> : null}
             </div>
             <Footer />