Main Catalog Page (Frontend) and Integrate w/ Backend

src/App.jsx

@@ -12,6 +12,7 @@ import ForgotPassword from './components/Authentication/ForgotPassword';
 import EmailAction from './components/Authentication/EmailAction';
 import AUTH_ROLES from './utils/auth_config';
 import ProtectedRoute from './utils/ProtectedRoute';
+import Catalog from './pages/Catalog/Catalog';
 
 const { ADMIN_ROLE, USER_ROLE } = AUTH_ROLES.AUTH_ROLES;
 
@@ -39,6 +40,7 @@ const App = () => {
                 />
               }
             />
+            <Route exact path="/catalog" element={<Catalog />} />
           </Routes>
         </Router>
       </CookiesProvider>

src/pages/Catalog/Catalog.jsx

@@ -0,0 +1,45 @@
+import { Table, Thead, Tbody, Tr, Th, Td, TableContainer } from '@chakra-ui/react';
+import { useState, useEffect } from 'react';
+import { NPOBackend } from '../../utils/auth_utils';
+
+export default function Catalog() {
+  const [tableData, setTableData] = useState([]);
+
+  useEffect(() => {
+    const fetchCatalogData = async () => {
+      const response = await NPOBackend.get('/catalog');
+      setTableData(response.data);
+    };
+
+    fetchCatalogData().catch(console.error);
+  }, []);
+
+  return (
+    <TableContainer>
+      <Table variant="simple">
+        <Thead>
+          <Tr>
+            <Th>Title</Th>
+            <Th>Host</Th>
+            <Th>Cohort Type</Th>
+            <Th>Event Type</Th>
+            <Th>Subject</Th>
+            <Th>Description</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {tableData.map(({ id, host, title, eventType, subject, description, year }) => (
+            <Tr key={id}>
+              <Td>{title}</Td>
+              <Td>{host}</Td>
+              <Td>{year}</Td>
+              <Td>{eventType}</Td>
+              <Td>{subject}</Td>
+              <Td>{description}</Td>
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </TableContainer>
+  );
+}