44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
|
import * as electronRemote from '@electron/remote';
|
||
|
|
const electronConsole = electronRemote.getGlobal('console') as Console;
|
||
|
|
import Logger from '../../../../logger/logger';
|
||
|
|
const LOG = Logger.create(__filename, electronConsole);
|
||
|
|
|
||
|
|
import React, { FC, useEffect, useState } from 'react';
|
||
|
|
|
||
|
|
export interface TableProps<T> {
|
||
|
|
header: JSX.Element;
|
||
|
|
fetchData: () => Promise<T[]>;
|
||
|
|
mapToRow: (data: T) => JSX.Element;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function Table<T>(props: TableProps<T>) {
|
||
|
|
const { header, fetchData, mapToRow } = props;
|
||
|
|
|
||
|
|
// TODO: Loading indicator + fetch failed indicator
|
||
|
|
|
||
|
|
const [ dataRows, setDataRows ] = useState<JSX.Element[]>([]);
|
||
|
|
const [ loading, setLoading ] = useState<boolean>(true);
|
||
|
|
const [ fetchFailed, setFetchFailed ] = useState<boolean>(false);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
(async () => {
|
||
|
|
setLoading(true);
|
||
|
|
try {
|
||
|
|
const data = await fetchData();
|
||
|
|
setDataRows(data.map(mapToRow));
|
||
|
|
} catch (e: unknown) {
|
||
|
|
LOG.error('error fetching data for table', e);
|
||
|
|
setFetchFailed(true);
|
||
|
|
}
|
||
|
|
setLoading(false);
|
||
|
|
})();
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<table>
|
||
|
|
<thead>{header}</thead>
|
||
|
|
<tbody>{dataRows}</tbody>
|
||
|
|
</table>
|
||
|
|
)
|
||
|
|
}
|