p5.js-web-editor/client/modules/User/components/APIKeyList.jsx

57 lines
1.7 KiB
React
Raw Normal View History

2019-05-15 10:11:58 +00:00
import PropTypes from 'prop-types';
import React from 'react';
import format from 'date-fns/format';
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
import orderBy from 'lodash/orderBy';
import { APIKeyPropType } from './APIKeyForm';
2020-04-29 22:34:37 +00:00
import TrashCanIcon from '../../../images/trash-can.svg';
2019-05-15 10:11:58 +00:00
function APIKeyList({ apiKeys, onRemove, t }) {
2019-05-15 10:11:58 +00:00
return (
<table className="api-key-list">
<thead>
<tr>
<th>{t('APIKeyList.Name')}</th>
<th>{t('APIKeyList.Created')}</th>
<th>{t('APIKeyList.LastUsed')}</th>
<th>{t('APIKeyList.Actions')}</th>
2019-05-15 10:11:58 +00:00
</tr>
</thead>
<tbody>
{orderBy(apiKeys, ['createdAt'], ['desc']).map((key) => {
2019-05-15 14:25:58 +00:00
const lastUsed = key.lastUsedAt ?
distanceInWordsToNow(new Date(key.lastUsedAt), { addSuffix: true }) :
t('APIKeyList.Never');
2019-05-15 10:11:58 +00:00
return (
<tr key={key.id}>
<td>{key.label}</td>
<td>{format(new Date(key.createdAt), 'MMM D, YYYY h:mm A')}</td>
<td>{lastUsed}</td>
2019-05-15 10:11:58 +00:00
<td className="api-key-list__action">
<button
className="api-key-list__delete-button"
onClick={() => onRemove(key)}
aria-label={t('APIKeyList.DeleteARIA')}
>
<TrashCanIcon focusable="false" aria-hidden="true" />
2019-05-15 10:11:58 +00:00
</button>
</td>
</tr>
);
})}
</tbody>
</table>
);
}
APIKeyList.propTypes = {
apiKeys: PropTypes.arrayOf(PropTypes.shape(APIKeyPropType)).isRequired,
onRemove: PropTypes.func.isRequired,
t: PropTypes.func.isRequired
2019-05-15 10:11:58 +00:00
};
export default APIKeyList;