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.

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

Add edit, delete, create event to catalog #37

Merged
merged 7 commits into from
Feb 16, 2024
Prev Previous commit
Next Next commit
Implements delete functionality for rows without conflicting ids with…
… other tables
  • Loading branch information
liannejl committed Feb 2, 2024
commit eb503f5a48a8de49135ed70d8821f329cc9014fe
113 changes: 110 additions & 3 deletions src/pages/Catalog/Catalog.jsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,41 @@
import { Table, Thead, Tbody, Tr, Th, Td, TableContainer, Button } from '@chakra-ui/react';
import {
Table,
Thead,
Tbody,
Tr,
Th,
Td,
TableContainer,
Button,
IconButton,
Modal,
ModalBody,
ModalContent,
ModalOverlay,
ModalHeader,
ModalCloseButton,
ModalFooter,
useDisclosure,
} from '@chakra-ui/react';
import { useState, useEffect } from 'react';
import { NPOBackend } from '../../utils/auth_utils';
import CreateEventForm from '../../components/CreateEventForm/CreateEventForm';
import { EditIcon, DeleteIcon } from '@chakra-ui/icons';

export default function Catalog() {
const { isOpen, onOpen, onClose } = useDisclosure();
const [tableData, setTableData] = useState([]);
const [isCreateFormOpen, setIsCreateFormOpen] = useState(false);
const [hoveredRow, setHoveredRow] = useState(null);
const [isEditFormOpen, setIsEditFormOpen] = useState(false);
const [deleteItemId, setDeleteItemId] = useState(null);
const [editData, setEditData] = useState([]);

useEffect(() => {
const fetchCatalogData = async () => {
const response = await NPOBackend.get('/catalog');
setTableData(response.data);
console.log(editData);
};

fetchCatalogData().catch(console.error);
Expand All @@ -20,10 +45,53 @@ export default function Catalog() {
setIsCreateFormOpen(!isCreateFormOpen);
};

const handleRowHover = index => {
setHoveredRow(index);
};

const handleRowLeave = () => {
setHoveredRow(null);
};

const handleEditForm = data => {
setEditData(data);
setIsEditFormOpen(!isEditFormOpen);
// populate form with data from setEditData (pass into CreateEventForm component as an event prop?)
};

const handleCloseEditForm = () => {
setIsEditFormOpen(!isEditFormOpen);
};

const handleDeleteClick = id => {
setDeleteItemId(id);
onOpen();
};

const handleConfirmDelete = async idToDelete => {
try {
await NPOBackend.delete(`/catalog/${idToDelete}`);

const response = await NPOBackend.get('/catalog');
setTableData(response.data);

onClose();
} catch (error) {
console.error(error);
}
};

return (
<div>
<Button onClick={openCreateForm}>Create</Button>
{isCreateFormOpen && <CreateEventForm />}
<Modal id="editForm" isOpen={isEditFormOpen} onClose={handleCloseEditForm}>
<ModalContent>
<ModalBody>
<CreateEventForm />
</ModalBody>
</ModalContent>
</Modal>
<TableContainer>
<Table variant="simple">
<Thead>
Expand All @@ -37,19 +105,58 @@ export default function Catalog() {
</Tr>
</Thead>
<Tbody>
{tableData.map(({ id, host, title, eventType, subject, description, year }) => (
<Tr key={id}>
{tableData.map(({ id, host, title, eventType, subject, description, year }, index) => (
<Tr key={id} onMouseEnter={() => handleRowHover(index)} onMouseLeave={handleRowLeave}>
<Td>{title}</Td>
<Td>{host}</Td>
<Td>{year}</Td>
<Td>{eventType}</Td>
<Td>{subject}</Td>
<Td>{description}</Td>
<Td>
{hoveredRow === index && (
<>
<IconButton
icon={
<EditIcon
onClick={() =>
handleEditForm([
id,
title,
host,
year,
eventType,
subject,
description,
])
}
/>
}
/>
<IconButton icon={<DeleteIcon />} onClick={() => handleDeleteClick(id)} />
</>
)}
</Td>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>

<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Confirm Delete</ModalHeader>
<ModalCloseButton />
<ModalBody>Are you sure you want to delete this row?</ModalBody>
<ModalFooter>
<ModalFooter>
<Button onClick={() => handleConfirmDelete(deleteItemId)}>Delete</Button>
<Button onClick={onClose}>Cancel</Button>
</ModalFooter>
</ModalFooter>
</ModalContent>
</Modal>
</div>
);
}