garage-box/src/BucketList.tsx

59 lines
1.4 KiB
TypeScript

import React from 'react';
import { Link } from 'react-router-dom';
import { S3Client, ListBucketsCommand } from '@aws-sdk/client-s3';
import Breadcrumb from 'react-bootstrap/Breadcrumb';
import Card from 'react-bootstrap/Card';
import ListGroup from 'react-bootstrap/ListGroup';
import { LinkContainer } from 'react-router-bootstrap'
type Props = {
client: S3Client;
};
type State = {
buckets: string[];
};
class BucketList extends React.Component<Props, State> {
state = {
buckets: [],
};
async componentDidMount() {
let command = new ListBucketsCommand({});
try {
const data = await this.props.client.send(command);
console.log("ok", data);
const buckets = (data.Buckets || []).map((b) => (b.Name || 'aza'));
buckets.sort((a, b) => a.localeCompare(b, undefined, {sensitivity: 'base'}));
this.setState({buckets: buckets});
} catch(error) {
console.log("err", error);
}
}
render() {
return (
<>
<Breadcrumb>
<Breadcrumb.Item active>my buckets</Breadcrumb.Item>
</Breadcrumb>
<ListGroup>
{ this.state.buckets.map((b) =>
<LinkContainer to={ "/" + b }>
<ListGroup.Item key={ b } action>
{ b }
</ListGroup.Item>
</LinkContainer>
)}
</ListGroup>
</>
);
}
}
export default BucketList;