Skip to content

Commit

Permalink
Issue 376: Updated MUI component to used styled component
Browse files Browse the repository at this point in the history 
Resolves #376
Resolves #219
  • Loading branch information
@bingeboy
bingeboy committed Oct 4, 2023
1 parent ef7a24e commit 5b447b9
Show file tree
Hide file tree
Showing 6 changed files with 157 additions and 134 deletions.
52 changes: 29 additions & 23 deletions src/components/Contacts/ContactListTable.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,18 @@ import React from 'react';
// Material UI Imports
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';

// MUI Theme
import { ThemeProvider } from '@mui/material/styles';
import theme from '../../theme';

// Component Imports
import ContactListTableRow from './ContactListTableRow';
import { StyledTableCell } from '../Table/TableStyles';

// ===== MAKE CHANGES HERE FOR TABLE HEADER / COLUMN TITLES =====
const columnTitlesArray = ['Contact', 'Pin', 'Delete'];
Expand Down Expand Up @@ -43,32 +48,33 @@ const ContactListTable = ({ contacts, deleteContact }) => {
return 0;
};
const contactsCopy = [...contacts];

const sortedContacts = contactsCopy.sort(comparePerson);

return (
<TableContainer component={Paper} sx={{ margin: '1rem 0', maxWidth: '500px' }}>
<Table aria-label="contact list table">
<TableHead>
<TableRow>
{columnTitlesArray.map((columnTitle) => (
<StyledTableCell key={columnTitle} align="center">
{columnTitle}
</StyledTableCell>
<ThemeProvider theme={theme}>
<TableContainer component={Paper} sx={{ margin: '1rem 0', maxWidth: '500px' }}>
<Table aria-label="contact list table">
<TableHead>
<TableRow>
{columnTitlesArray.map((columnTitle) => (
<TableCell key={columnTitle} align="center">
{columnTitle}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{sortedContacts?.map((contact) => (
<ContactListTableRow
key={contact.webId}
contact={contact}
deleteContact={deleteContact}
/>
))}
</TableRow>
</TableHead>
<TableBody>
{sortedContacts?.map((contact) => (
<ContactListTableRow
key={contact.webId}
contact={contact}
deleteContact={deleteContact}
/>
))}
</TableBody>
</Table>
</TableContainer>
</TableBody>
</Table>
</TableContainer>
</ThemeProvider>
);
};

Expand Down
67 changes: 38 additions & 29 deletions src/components/Contacts/ContactListTableRow.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,23 @@ import { Link, useNavigate } from 'react-router-dom';
// Inrupt Imports
import { getWebIdDataset } from '@inrupt/solid-client';
// Material UI Imports
import { useTheme } from '@mui/material/styles';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
import PushPinIcon from '@mui/icons-material/PushPin';
import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined';
import TableCell from '@mui/material/TableCell';
import TableRow from '@mui/material/TableRow';

// Context Imports
import { DocumentListContext } from '@contexts';

// MUI Theme
import { ThemeProvider } from '@mui/material/styles';
import theme from '../../theme';

// Custom Hook Imports
import useNotification from '../../hooks/useNotification';
// Component Imports
import { StyledTableCell, StyledTableRow } from '../Table/TableStyles';

/**
* contactListTableRowProps is an object that stores the props for the
Expand All @@ -37,7 +42,6 @@ import { StyledTableCell, StyledTableRow } from '../Table/TableStyles';
* @returns {React.JSX.Element} The ContactListTableRow Component
*/
const ContactListTableRow = ({ contact, deleteContact }) => {
const theme = useTheme();
const [pinned, setPinned] = useState(false);
const { setContact } = useContext(DocumentListContext);
const navigate = useNavigate();
Expand Down Expand Up @@ -65,32 +69,37 @@ const ContactListTableRow = ({ contact, deleteContact }) => {
};

return (
<StyledTableRow>
<StyledTableCell align="center">
<Link
to={`/profile/${encodeURIComponent(contact.webId)}`}
state={{ contact }}
style={{ textDecoration: 'none', color: theme.palette.primary.dark }}
<ThemeProvider theme={theme}>
<TableRow>
<TableCell align="center">
<Link
to={`/profile/${encodeURIComponent(contact.webId)}`}
state={{ contact }}
style={{ textDecoration: 'none', color: theme.palette.primary.dark }}
>
<Button
sx={{ textTransform: 'capitalize' }}
onClick={() => handleSelectProfile(contact)}
>
{contact.person}
</Button>
</Link>
</TableCell>
<TableCell
align="center"
style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}
>
<Button sx={{ textTransform: 'capitalize' }} onClick={() => handleSelectProfile(contact)}>
{contact.person}
</Button>
</Link>
</StyledTableCell>
<StyledTableCell
align="center"
style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}
>
<IconButton size="large" onClick={handlePinClick}>
{pinnedIcon}
</IconButton>
</StyledTableCell>
<StyledTableCell align="center">
<IconButton size="large" onClick={() => deleteContact(contact)}>
<DeleteOutlineOutlinedIcon />
</IconButton>
</StyledTableCell>
</StyledTableRow>
<IconButton size="large" onClick={handlePinClick}>
{pinnedIcon}
</IconButton>
</TableCell>
<TableCell align="center">
<IconButton size="large" onClick={() => deleteContact(contact)}>
<DeleteOutlineOutlinedIcon />
</IconButton>
</TableCell>
</TableRow>
</ThemeProvider>
);
};

Expand Down
55 changes: 30 additions & 25 deletions src/components/Documents/DocumentTable.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,16 @@ import Container from '@mui/material/Container';
import Paper from '@mui/material/Paper';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
// Context Imports
import { DocumentListContext } from '@contexts';

// Component Imports
import { StyledTableCell } from '../Table/TableStyles';
import { ThemeProvider } from '@mui/material/styles';
import theme from '../../theme';
import DocumentTableRow from './DocumentTableRow';
import { EmptyListNotification, LoadingAnimation } from '../Notification';

Expand Down Expand Up @@ -43,31 +46,33 @@ const DocumentTable = ({ handleAclPermissionsModal, handleSelectDeleteDoc }) =>

const determineDocumentsTable = documentListObject?.docList?.length ? (
// render if documents
<Container>
<TableContainer component={Paper} sx={{ margin: '1rem 0' }}>
<Table aria-label="Documents Table">
<TableHead>
<TableRow>
{columnTitlesArray.map((columnTitle) => (
<StyledTableCell key={columnTitle} align="center">
{columnTitle}
</StyledTableCell>
<ThemeProvider theme={theme}>
<Container>
<TableContainer component={Paper} sx={{ margin: '1rem 0' }}>
<Table aria-label="Documents Table">
<TableHead>
<TableRow>
{columnTitlesArray.map((columnTitle) => (
<TableCell key={columnTitle} align="center">
{columnTitle}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{documentListObject?.docList.map((document) => (
<DocumentTableRow
key={document.name}
document={document}
handleAclPermissionsModal={handleAclPermissionsModal}
handleSelectDeleteDoc={handleSelectDeleteDoc}
/>
))}
</TableRow>
</TableHead>
<TableBody>
{documentListObject?.docList.map((document) => (
<DocumentTableRow
key={document.name}
document={document}
handleAclPermissionsModal={handleAclPermissionsModal}
handleSelectDeleteDoc={handleSelectDeleteDoc}
/>
))}
</TableBody>
</Table>
</TableContainer>
</Container>
</TableBody>
</Table>
</TableContainer>
</Container>
</ThemeProvider>
) : (
// render if no documents
<EmptyListNotification type="documents" />
Expand Down
61 changes: 35 additions & 26 deletions src/components/Documents/DocumentTableRow.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,16 @@ import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined
import FileOpenIcon from '@mui/icons-material/FileOpen';
import IconButton from '@mui/material/IconButton';
import ShareIcon from '@mui/icons-material/Share';
import TableCell from '@mui/material/TableCell';
import TableRow from '@mui/material/TableRow';

// Utility Imports
import { getBlobFromSolid } from '@utils';
// Component Imports
import { StyledTableCell, StyledTableRow } from '../Table/TableStyles';

// MUI Theme
import { ThemeProvider } from '@mui/material/styles';
import theme from '../../theme';

// Constants Imports
import DOC_TYPES from '../../constants/doc_types';

Expand All @@ -37,30 +43,33 @@ const DocumentTableRow = ({ document, handleAclPermissionsModal, handleSelectDel
};

return (
<StyledTableRow>
<StyledTableCell align="center">{name}</StyledTableCell>
<StyledTableCell align="center">{DOC_TYPES[type]}</StyledTableCell>
<StyledTableCell align="center">{description}</StyledTableCell>
<StyledTableCell align="center">
{uploadDate ? uploadDate.toDateString() : ''}
</StyledTableCell>
<StyledTableCell align="center">{endDate ? endDate.toDateString() : 'N/A'}</StyledTableCell>
<StyledTableCell align="center">
<IconButton type="button" onClick={() => handleShowDocumentLocal(fileUrl)}>
<FileOpenIcon />
</IconButton>
</StyledTableCell>
<StyledTableCell align="center">
<IconButton type="button" onClick={() => handleAclPermissionsModal('document', name, type)}>
<ShareIcon />
</IconButton>
</StyledTableCell>
<StyledTableCell align="center">
<IconButton size="large" edge="end" onClick={() => handleSelectDeleteDoc(document)}>
<DeleteOutlineOutlinedIcon />
</IconButton>
</StyledTableCell>
</StyledTableRow>
<ThemeProvider theme={theme}>
<TableRow>
<TableCell align="center">{name}</TableCell>
<TableCell align="center">{DOC_TYPES[type]}</TableCell>
<TableCell align="center">{description}</TableCell>
<TableCell align="center">{uploadDate ? uploadDate.toDateString() : ''}</TableCell>
<TableCell align="center">{endDate ? endDate.toDateString() : 'N/A'}</TableCell>
<TableCell align="center">
<IconButton type="button" onClick={() => handleShowDocumentLocal(fileUrl)}>
<FileOpenIcon />
</IconButton>
</TableCell>
<TableCell align="center">
<IconButton
type="button"
onClick={() => handleAclPermissionsModal('document', name, type)}
>
<ShareIcon />
</IconButton>
</TableCell>
<TableCell align="center">
<IconButton size="large" edge="end" onClick={() => handleSelectDeleteDoc(document)}>
<DeleteOutlineOutlinedIcon />
</IconButton>
</TableCell>
</TableRow>
</ThemeProvider>
);
};

Expand Down
29 changes: 0 additions & 29 deletions src/components/Table/TableStyles.js
View file

This file was deleted.

Loading

0 comments on commit 5b447b9

Please sign in to comment.