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 { 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 ( ); } } interface IClient { client: S3Client; } export const ObjectList1 = ({ client }: IClient) => { const params = useParams(); const bucket = params["bucket"]!; return <> ; }; export const ObjectList2 = ({ client }: IClient) => { const params = useParams(); const bucket = params["bucket"]!; const prefix = params["*"] || ""; const key = bucket + "/" + prefix; return <> ; };