Skip to content

Commit

Permalink
feat: display files in table
Browse files Browse the repository at this point in the history
  • Loading branch information
@gjgd
gjgd committed Jun 28, 2020
1 parent 26a4266 commit a610457
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 78 deletions.
10 changes: 4 additions & 6 deletions packages/app/src/components/CheckRepoTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,9 @@ const CheckRepoTab: React.FunctionComponent<{}> = () => {
}
return 'https://github.com/transmute-industries/universal-wallet';
});
const [files, setFiles] = React.useState<Array<{ path: string }>>([]);
console.log(files);
const [files, setFiles] = React.useState<
Array<{ path: string; url: string }>
>([]);

React.useEffect(() => {
updateQueryParameter('repo', repo);
Expand All @@ -58,10 +59,7 @@ const CheckRepoTab: React.FunctionComponent<{}> = () => {
fullWidth
margin="normal"
/>
{files.map((file) => (
<div>{file.path}</div>
))}
<FilesTable />
{files.length > 0 ? <FilesTable files={files} /> : <></>}
</div>
);
};
Expand Down
102 changes: 30 additions & 72 deletions packages/app/src/components/FilesTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
} from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableCell, { TableCellProps } from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TablePagination from '@material-ui/core/TablePagination';
Expand All @@ -20,45 +20,14 @@ import Paper from '@material-ui/core/Paper';
import Checkbox from '@material-ui/core/Checkbox';
import IconButton from '@material-ui/core/IconButton';
import Tooltip from '@material-ui/core/Tooltip';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Switch from '@material-ui/core/Switch';
import DeleteIcon from '@material-ui/icons/Delete';
import FilterListIcon from '@material-ui/icons/FilterList';

interface Data {
calories: number;
carbs: number;
fat: number;
name: string;
protein: number;
path: string;
url: string;
}

function createData(
name: string,
calories: number,
fat: number,
carbs: number,
protein: number
): Data {
return { name, calories, fat, carbs, protein };
}

const rows = [
createData('Cupcake', 305, 3.7, 67, 4.3),
createData('Donut', 452, 25.0, 51, 4.9),
createData('Eclair', 262, 16.0, 24, 6.0),
createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
createData('Gingerbread', 356, 16.0, 49, 3.9),
createData('Honeycomb', 408, 3.2, 87, 6.5),
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
createData('Jelly Bean', 375, 0.0, 94, 0.0),
createData('KitKat', 518, 26.0, 65, 7.0),
createData('Lollipop', 392, 0.2, 98, 0.0),
createData('Marshmallow', 318, 0, 81, 2.0),
createData('Nougat', 360, 19.0, 9, 37.0),
createData('Oreo', 437, 18.0, 63, 4.0),
];

function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
if (b[orderBy] < a[orderBy]) {
return -1;
Expand Down Expand Up @@ -97,20 +66,18 @@ interface HeadCell {
disablePadding: boolean;
id: keyof Data;
label: string;
numeric: boolean;
align: TableCellProps['align'];

}

const headCells: HeadCell[] = [
{
id: 'name',
numeric: false,
id: 'path',
align: 'left',
disablePadding: true,
label: 'Dessert (100g serving)',
label: 'Path',
},
{ id: 'calories', numeric: true, disablePadding: false, label: 'Calories' },
{ id: 'fat', numeric: true, disablePadding: false, label: 'Fat (g)' },
{ id: 'carbs', numeric: true, disablePadding: false, label: 'Carbs (g)' },
{ id: 'protein', numeric: true, disablePadding: false, label: 'Protein (g)' },
{ id: 'url', align: 'left', disablePadding: false, label: 'URL' },
];

interface EnhancedTableProps {
Expand Down Expand Up @@ -157,8 +124,7 @@ function EnhancedTableHead(props: EnhancedTableProps) {
{headCells.map((headCell) => (
<TableCell
key={headCell.id}
align={headCell.numeric ? 'right' : 'left'}
padding={headCell.disablePadding ? 'none' : 'default'}
align={headCell.align}
sortDirection={orderBy === headCell.id ? order : false}
>
<TableSortLabel
Expand Down Expand Up @@ -279,14 +245,15 @@ const useStyles = makeStyles((theme: Theme) =>
})
);

export default function EnhancedTable() {
const EnhancedTable: React.FunctionComponent<{ files: Array<Data> }> = ({
files,
}) => {
const classes = useStyles();
const [order, setOrder] = React.useState<Order>('asc');
const [orderBy, setOrderBy] = React.useState<keyof Data>('calories');
const [orderBy, setOrderBy] = React.useState<keyof Data>('path');
const [selected, setSelected] = React.useState<string[]>([]);
const [page, setPage] = React.useState(0);
const [dense, setDense] = React.useState(false);
const [rowsPerPage, setRowsPerPage] = React.useState(5);
const [rowsPerPage, setRowsPerPage] = React.useState(100);

const handleRequestSort = (
event: React.MouseEvent<unknown>,
Expand All @@ -299,7 +266,7 @@ export default function EnhancedTable() {

const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
if (event.target.checked) {
const newSelecteds = rows.map((n) => n.name);
const newSelecteds = files.map((n) => n.path);
setSelected(newSelecteds);
return;
}
Expand Down Expand Up @@ -337,14 +304,10 @@ export default function EnhancedTable() {
setPage(0);
};

const handleChangeDense = (event: React.ChangeEvent<HTMLInputElement>) => {
setDense(event.target.checked);
};

const isSelected = (name: string) => selected.indexOf(name) !== -1;

const emptyRows =
rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);
rowsPerPage - Math.min(rowsPerPage, files.length - page * rowsPerPage);

return (
<div className={classes.root}>
Expand All @@ -354,7 +317,7 @@ export default function EnhancedTable() {
<Table
className={classes.table}
aria-labelledby="tableTitle"
size={dense ? 'small' : 'medium'}
size="medium"
aria-label="enhanced table"
>
<EnhancedTableHead
Expand All @@ -364,23 +327,23 @@ export default function EnhancedTable() {
orderBy={orderBy}
onSelectAllClick={handleSelectAllClick}
onRequestSort={handleRequestSort}
rowCount={rows.length}
rowCount={files.length}
/>
<TableBody>
{stableSort(rows, getComparator(order, orderBy))
{stableSort(files, getComparator(order, orderBy))
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((row, index) => {
const isItemSelected = isSelected(row.name);
const isItemSelected = isSelected(row.path);
const labelId = `enhanced-table-checkbox-${index}`;

return (
<TableRow
hover
onClick={(event) => handleClick(event, row.name)}
onClick={(event) => handleClick(event, row.path)}
role="checkbox"
aria-checked={isItemSelected}
tabIndex={-1}
key={row.name}
key={row.path}
selected={isItemSelected}
>
<TableCell padding="checkbox">
Expand All @@ -395,17 +358,14 @@ export default function EnhancedTable() {
scope="row"
padding="none"
>
{row.name}
{row.path}
</TableCell>
<TableCell align="right">{row.calories}</TableCell>
<TableCell align="right">{row.fat}</TableCell>
<TableCell align="right">{row.carbs}</TableCell>
<TableCell align="right">{row.protein}</TableCell>
<TableCell align="right">{row.url}</TableCell>
</TableRow>
);
})}
{emptyRows > 0 && (
<TableRow style={{ height: (dense ? 33 : 53) * emptyRows }}>
<TableRow style={{ height: 53 * emptyRows }}>
<TableCell colSpan={6} />
</TableRow>
)}
Expand All @@ -415,17 +375,15 @@ export default function EnhancedTable() {
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
component="div"
count={rows.length}
count={files.length}
rowsPerPage={rowsPerPage}
page={page}
onChangePage={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage}
/>
</Paper>
<FormControlLabel
control={<Switch checked={dense} onChange={handleChangeDense} />}
label="Dense padding"
/>
</div>
);
}
};

export default EnhancedTable;

0 comments on commit a610457

Please sign in to comment.