Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Main Catalog Page (Frontend) and Integrate w/ Backend #20

Merged
merged 9 commits into from
Jan 21, 2024
+47 −0
Merged

Main Catalog Page (Frontend) and Integrate w/ Backend #20

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
817d29f
ChakraUI table setup
Philip-Jian Jan 18, 2024
033fbfd
populate table with catalog
Philip-Jian Jan 20, 2024
7950445
Merge branch '9-main-catalog-page-and-integrate-backend' of https://g…
seancfong Jan 21, 2024
fa501a3
Add catalog component to router
seancfong Jan 21, 2024
af58be6
Refactor code in Catalog component
seancfong Jan 21, 2024
d983ce9
Remove ChakraProvider context in main
seancfong Jan 21, 2024
843f161
edited backend call
michellelin1 Jan 21, 2024
0b4be37
removed comments
michellelin1 Jan 21, 2024
29367bf
Merge branch 'dev' into 9-main-catalog-page-and-integrate-backend-dev
ThatMegamind Jan 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 28 additions & 26 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import './App.css';
import EmailSending from './components/EmailTemplates/EmailSending';
import { ChakraProvider, Text } from '@chakra-ui/react'
import { ChakraProvider } from '@chakra-ui/react';
import { Route, Routes, BrowserRouter as Router } from 'react-router-dom';
import { CookiesProvider } from 'react-cookie';
import Login from './components/Authentication/Login';
Expand All @@ -11,36 +11,38 @@ 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;

const App = () => {
return (
<ChakraProvider>
<EmailSending />
<CookiesProvider>
<Router>
<Routes>
<Route exact path="/" element={<Login />} />
<Route exact path="/logout" element={<Logout />} />
<Route exact path="/forgotpassword" element={<ForgotPassword />} />
<Route exact path="/register" element={<Register />} />
<Route exact path="/emailAction" element={<EmailAction redirectPath="/" />} />
<Route
exact
path="/dashboard"
element={
<ProtectedRoute
Component={Dashboard}
redirectPath="/"
roles={[ADMIN_ROLE, USER_ROLE]}
/>
}
/>
</Routes>
</Router>
</CookiesProvider>
</ChakraProvider>
<ChakraProvider>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This could have been a prettier change on my end to fix the formatting; should I revert this?

<EmailSending />
<CookiesProvider>
<Router>
<Routes>
<Route exact path="/" element={<Login />} />
<Route exact path="/logout" element={<Logout />} />
<Route exact path="/forgotpassword" element={<ForgotPassword />} />
<Route exact path="/register" element={<Register />} />
<Route exact path="/emailAction" element={<EmailAction redirectPath="/" />} />
<Route
exact
path="/dashboard"
element={
<ProtectedRoute
Component={Dashboard}
redirectPath="/"
roles={[ADMIN_ROLE, USER_ROLE]}
/>
}
/>
<Route exact path="/catalog" element={<Catalog />} />
</Routes>
</Router>
</CookiesProvider>
</ChakraProvider>
);
};

Expand Down
45 changes: 45 additions & 0 deletions src/pages/Catalog/Catalog.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
Loading