Implement basic list of buckets

This commit is contained in:
Alex 2022-02-28 12:30:54 +01:00
parent b77d9f5ef6
commit 771604b0df
Signed by: lx
GPG key ID: 0E496D15096376BE
6 changed files with 4668 additions and 25 deletions

View file

@ -6,7 +6,7 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
In the project directory, you can run: In the project directory, you can run:
### `npm start` ### `yarn start`
Runs the app in the development mode.\ Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser. Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
@ -14,12 +14,12 @@ Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.\ The page will reload if you make edits.\
You will also see any lint errors in the console. You will also see any lint errors in the console.
### `npm test` ### `yarn test`
Launches the test runner in the interactive watch mode.\ Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `npm run build` ### `yarn run build`
Builds the app for production to the `build` folder.\ Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance. It correctly bundles React in production mode and optimizes the build for the best performance.
@ -29,7 +29,7 @@ Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `npm run eject` ### `yarn run eject`
**Note: this is a one-way operation. Once you `eject`, you cant go back!** **Note: this is a one-way operation. Once you `eject`, you cant go back!**

4546
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -3,6 +3,7 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@aws-sdk/client-s3": "^3.53.1",
"@testing-library/jest-dom": "^5.16.2", "@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.3", "@testing-library/react": "^12.1.3",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",

View file

@ -1,26 +1,76 @@
import React from 'react'; import React from 'react';
import logo from './logo.svg'; import { S3Client, ListBucketsCommand } from '@aws-sdk/client-s3';
import BucketList from './BucketList';
import './App.css'; import './App.css';
function App() { type AppProps = {};
return (
<div className="App"> type AppState = {
<header className="App-header"> accessKeyId: string;
<img src={logo} className="App-logo" alt="logo" /> secretAccessKey: string;
<p> client: S3Client | null;
Edit <code>src/App.tsx</code> and save to reload. };
</p>
<a class App extends React.Component<AppProps, AppState> {
className="App-link" state = {
href="https://reactjs.org" accessKeyId: "GK31c2f218a2e44f485b94239e",
target="_blank" secretAccessKey: "b892c0665f0ada8a4755dae98baa3b133590e11dae3bcc1f9d769d67f16c3835",
rel="noopener noreferrer" client: null,
> };
Learn React
</a> constructor(props: AppProps) {
</header> super(props);
</div> }
);
handleChangeAccessKeyId = (e: React.FormEvent<HTMLInputElement>): void => {
this.setState({accessKeyId: e.currentTarget.value});
}
handleChangeSecreteAccessKey = (e: React.FormEvent<HTMLInputElement>): void => {
this.setState({secretAccessKey: e.currentTarget.value});
}
login = async (e: React.SyntheticEvent) => {
e.preventDefault();
console.log("Login with: ", this.state);
let client = new S3Client({
//endpoint: 'https://garage-staging.home.adnab.me',
logger: console,
// Necessary to write the full endpoint struct instead of endpoint: 'http://localhost:3811'
// otherwise AWS SDK removes the port number from the signature, which is a bug:
// https://github.com/aws/aws-sdk-js-v3/issues/1941
endpoint: {
protocol: 'http',
hostname: 'localhost:3811',
path: '/',
},
tls: false,
credentials: {
accessKeyId: this.state.accessKeyId,
secretAccessKey: this.state.secretAccessKey,
},
forcePathStyle: true,
region: 'us-east-1',
});
this.setState({client: client});
};
render() {
if (this.state.client) {
return (
<BucketList client={ this.state.client } />
);
} else {
return (
<form onSubmit={this.login} >
<p>Access key id: <input type="text" value={ this.state.accessKeyId } onChange={this.handleChangeAccessKeyId} /></p>
<p>Secret access key: <input type="text" value={ this.state.secretAccessKey } onChange={this.handleChangeSecreteAccessKey} /></p>
<p><input type="submit" value="Log in" /></p>
</form>
);
}
}
} }
export default App; export default App;

47
src/BucketList.tsx Normal file
View file

@ -0,0 +1,47 @@
import React from 'react';
import { S3Client, ListBucketsCommand } from '@aws-sdk/client-s3';
type Props = {
client: S3Client;
};
type State = {
buckets: string[];
};
class BucketList extends React.Component<Props, State> {
state = {
buckets: [],
};
constructor(props: Props) {
super(props);
this.init();
}
async init() {
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'));
this.setState({buckets: buckets});
} catch(error) {
console.log("err", error);
}
}
render() {
return (
<ul>
{ this.state.buckets.map((b) =>
<li key="{b}">{ b }</li>
)}
</ul>
);
}
}
export default BucketList;

View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

Before

Width:  |  Height:  |  Size: 2.6 KiB