84 lines
1.8 KiB
TypeScript
84 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { Link, useParams } from 'react-router-dom';
|
|
import { S3Client, ListObjectsV2Command } from '@aws-sdk/client-s3';
|
|
|
|
type Props = {
|
|
client: S3Client;
|
|
bucket: string;
|
|
prefix: string;
|
|
};
|
|
|
|
type State = {
|
|
folders: string[];
|
|
files: string[];
|
|
};
|
|
|
|
class ObjectList extends React.Component<Props, State> {
|
|
state = {
|
|
folders: [],
|
|
files: [],
|
|
};
|
|
|
|
constructor(props: Props) {
|
|
super(props);
|
|
}
|
|
|
|
async componentDidMount() {
|
|
console.log(this.props);
|
|
|
|
let command = new ListObjectsV2Command({
|
|
Bucket: this.props.bucket,
|
|
Prefix: this.props.prefix,
|
|
Delimiter: '/',
|
|
});
|
|
try {
|
|
const data = await this.props.client.send(command);
|
|
console.log("ok", data);
|
|
this.setState({
|
|
folders: (data.CommonPrefixes || []).map((cp) => cp.Prefix!),
|
|
files: (data.Contents || []).map((obj) => obj.Key!),
|
|
});
|
|
} catch(error) {
|
|
console.log("err", error);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<ul>
|
|
{ this.state.folders.map((f) =>
|
|
<li key={f + "/" }>
|
|
<Link to={ "/" + this.props.bucket + "/" + f }>{ f }</Link>
|
|
</li>
|
|
)}
|
|
{ this.state.files.map((f) =>
|
|
<li key={f}>{ f }</li>
|
|
)}
|
|
</ul>
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
interface IClient {
|
|
client: S3Client;
|
|
}
|
|
|
|
export const ObjectList1 = ({ client }: IClient) => {
|
|
const params = useParams();
|
|
const bucket = params["bucket"]!;
|
|
return <>
|
|
<ObjectList client={client} bucket={bucket} prefix="" key={bucket} />
|
|
</>;
|
|
};
|
|
|
|
export const ObjectList2 = ({ client }: IClient) => {
|
|
const params = useParams();
|
|
const bucket = params["bucket"]!;
|
|
const prefix = params["*"] || "";
|
|
const key = bucket + "/" + prefix;
|
|
return <>
|
|
<ObjectList client={client} bucket={bucket} prefix={prefix} key={key} />
|
|
</>;
|
|
};
|