Cleanup

src/App.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
-import { S3Client, ListBucketsCommand } from '@aws-sdk/client-s3';
+import { S3Client } from '@aws-sdk/client-s3';
 import {
   HashRouter,
-  Link,
   Routes,
   Route,
-  PathRouteProps,
 } from "react-router-dom";
 import BucketList from './BucketList';
 import { ObjectList1, ObjectList2 } from './ObjectList';
@@ -30,10 +28,6 @@ class App extends React.Component<AppProps, AppState> {
     client: null,
   };
 
-  constructor(props: AppProps) {
-    super(props);
-  }
-
   handleChangeAccessKeyId = (e: React.ChangeEvent<HTMLInputElement>): void => {
     this.setState({accessKeyId: e.currentTarget.value});
   }
@@ -89,17 +83,11 @@ class App extends React.Component<AppProps, AppState> {
             <Form.Group className="mb-3" controlId="formAccessKeyId">
               <Form.Label>Access key ID</Form.Label>
               <Form.Control type="text" placeholder="Access key id" value={ this.state.accessKeyId } onChange={this.handleChangeAccessKeyId} />
-              <Form.Text className="text-muted">
-                Hello!
-              </Form.Text>
             </Form.Group>
 
             <Form.Group className="mb-3" controlId="formSecretAccessKey">
               <Form.Label>Secret access key</Form.Label>
               <Form.Control type="text" placeholder="Secret access key" value={ this.state.secretAccessKey } onChange={this.handleChangeSecreteAccessKey} />
-              <Form.Text className="text-muted">
-                world!
-              </Form.Text>
             </Form.Group>
 
             <Button variant="primary" type="submit" onClick={this.login}>

src/BucketList.tsx

@@ -1,12 +1,13 @@
 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 Container from 'react-bootstrap/Container';
 import ListGroup from 'react-bootstrap/ListGroup';
 import { LinkContainer } from 'react-router-bootstrap'
 
+import { BsBucket } from 'react-icons/bs';
+
 
 type Props = {
   client: S3Client;
@@ -37,14 +38,16 @@ class BucketList extends React.Component<Props, State> {
   render() {
     return (
       <>
-        <Breadcrumb>
+        <Container className="pb-3">
-          <Breadcrumb.Item active>my buckets</Breadcrumb.Item>
+          <Breadcrumb>
-        </Breadcrumb>
+            <Breadcrumb.Item active>my buckets</Breadcrumb.Item>
+          </Breadcrumb>
+        </Container>
         <ListGroup>
           { this.state.buckets.map((b) =>
             <LinkContainer to={ "/" + b }>
               <ListGroup.Item key={ b } action>
-                { b }
+                <BsBucket /> { b }
               </ListGroup.Item>
             </LinkContainer>
           )}

src/ObjectInfo.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Link, useParams } from 'react-router-dom';
+import { S3Client, HeadObjectCommand } from '@aws-sdk/client-s3';
-import { S3Client, ListObjectsV2Command, HeadObjectCommand } from '@aws-sdk/client-s3';
 
 import Button from 'react-bootstrap/Button';
 import Modal from 'react-bootstrap/Modal';
@@ -31,10 +30,6 @@ class ObjectInfo extends React.Component<Props, State> {
     contentType: "",
   };
 
-  constructor(props: Props) {
-    super(props);
-  }
-
   async componentDidMount() {
     let command = new HeadObjectCommand({
       Bucket: this.props.bucket,

src/ObjectList.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
-import { Link, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
-import { S3Client, ListObjectsV2Command, GetObjectCommand, DeleteObjectCommand } from '@aws-sdk/client-s3';
+import { S3Client, ListObjectsV2Command, DeleteObjectCommand } from '@aws-sdk/client-s3';
 
 import Alert from 'react-bootstrap/Alert';
 import Breadcrumb from 'react-bootstrap/Breadcrumb';
 import Button from 'react-bootstrap/Button';
 import Container from 'react-bootstrap/Container';
-import Card from 'react-bootstrap/Card';
 import ListGroup from 'react-bootstrap/ListGroup';
 import Stack from 'react-bootstrap/Stack';
 import { LinkContainer } from 'react-router-bootstrap'
@@ -45,15 +44,11 @@ class ObjectList extends React.Component<Props, State> {
     iUpload: 0,
   };
 
-  constructor(props: Props) {
-    super(props);
-  }
-
   componentDidMount() {
     //console.log(this.props);
 
-    if (cache[this.path()]) {
+    if (cache[this.fullPathWithBucket()]) {
-      this.setState(cache[this.path()]);
+      this.setState(cache[this.fullPathWithBucket()]);
     }
 
     this.loadEntries();
@@ -82,13 +77,13 @@ class ObjectList extends React.Component<Props, State> {
         folders: folders,
         files: files,
       });
-      cache[this.path()] = this.state;
+      cache[this.fullPathWithBucket()] = this.state;
     } catch(error) {
       console.log("err", error);
     }
   }
 
-  path() {
+  fullPathWithBucket() {
     return this.props.bucket + "/" + this.props.prefix;
   }
 
@@ -114,7 +109,7 @@ class ObjectList extends React.Component<Props, State> {
         <LinkContainer key="BUCKETS" to="/">
           <Breadcrumb.Item>my buckets</Breadcrumb.Item>
         </LinkContainer>
-        { this.props.prefix == "" ?
+        { this.props.prefix === "" ?
             <Breadcrumb.Item active>{ this.props.bucket }</Breadcrumb.Item>
           :
           <LinkContainer key="BUCKET" to={ "/" + this.props.bucket + "/" }>
@@ -137,7 +132,7 @@ class ObjectList extends React.Component<Props, State> {
         Bucket: this.props.bucket,
         Key: this.props.prefix + f,
       });
-      let res = await this.props.client.send(command);
+      await this.props.client.send(command);
       this.loadEntries();
     }
   }
@@ -227,12 +222,6 @@ class ObjectList extends React.Component<Props, State> {
   }
 }
 
-
-function isBlob(obj: any): obj is Blob {
-  return !! obj;
-}
-
-
 interface IClient {
   client: S3Client;
 }

src/UploadFiles.tsx

@@ -1,16 +1,14 @@
 import React from 'react';
-import { Link, useParams } from 'react-router-dom';
+import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
-import { S3Client, ListObjectsV2Command, HeadObjectCommand, PutObjectCommand } from '@aws-sdk/client-s3';
 
 import Button from 'react-bootstrap/Button';
 import ListGroup from 'react-bootstrap/ListGroup';
 import Modal from 'react-bootstrap/Modal';
 import Stack from 'react-bootstrap/Stack';
 
-import { BsFileEarmarkText, BsDownload, BsHourglassSplit, BsCheckCircle } from 'react-icons/bs';
+import { BsFileEarmarkText, BsHourglassSplit, BsCheckCircle } from 'react-icons/bs';
 import { AiOutlineDelete } from 'react-icons/ai';
 
-import downloadFile from './downloadFile';
 import fileSizePretty from './fileSizePretty';
 
 interface Props {
@@ -41,10 +39,6 @@ class UploadFiles extends React.Component<Props, State> {
     progressEach: [],
   };
 
-  constructor(props: Props) {
-    super(props);
-  }
-
   async componentDidMount() {
     this.addFile();
   }
@@ -75,15 +69,17 @@ class UploadFiles extends React.Component<Props, State> {
   }
 
   async processUpload() {
+    var i: number;
+
     this.setState({canceled: false});
 
     let progressEach: number[] = [];
-    for (var i = 0; i < this.state.files.length; i++) {
+    for (i = 0; i < this.state.files.length; i++) {
       progressEach.push(0);
     }
     this.setState({canceled: false, processing: true, progressEach: progressEach});
 
-    for (var i = 0; i < this.state.files.length; i++) {
+    for (i = 0; i < this.state.files.length; i++) {
       let file: File = this.state.files[i];
       let req = new PutObjectCommand({
         Bucket: this.props.bucket,
@@ -92,7 +88,7 @@ class UploadFiles extends React.Component<Props, State> {
         ContentLength: file.size,
         Body: file,
       });
-      let resp = await this.props.client.send(req);
+      await this.props.client.send(req);
       progressEach[i] = 100;
       this.setState({progressEach: progressEach});
     }
@@ -117,7 +113,7 @@ class UploadFiles extends React.Component<Props, State> {
             onChange={() => this.handleFileChange()}
             multiple
             hidden />
-          { this.state.files.length == 0 ? <p>No files added yet, click "add file" below.</p> : <></> }
+          { this.state.files.length === 0 ? <p>No files added yet, click "add file" below.</p> : <></> }
           <ListGroup>
             { this.state.files.map((f: File, i: number) =>
               <ListGroup.Item>
@@ -127,7 +123,7 @@ class UploadFiles extends React.Component<Props, State> {
                   </div>
                   <div className="ms-auto">
                     { this.state.processing ?
-                      (this.state.progressEach[i] == 100 ?  <BsCheckCircle />
+                      (this.state.progressEach[i] === 100 ?  <BsCheckCircle />
                       : this.state.progressEach[i] > 0 ? this.state.progressEach[i] + "%"
                       : <BsHourglassSplit /> )
                     :
@@ -139,7 +135,7 @@ class UploadFiles extends React.Component<Props, State> {
                 </Stack>
                 <Stack direction="horizontal">
                   <div className="px-2">&nbsp;</div>
-                  <div className="small">
+                  <div className="text-muted small">
                     { fileSizePretty(f.size) } - { f.type }
                   </div>
                 </Stack>
@@ -151,7 +147,7 @@ class UploadFiles extends React.Component<Props, State> {
           <Button variant="success" onClick={() => this.addFile()}>
             Add file
           </Button>
-          <Button variant="primary" onClick={() => this.processUpload()} disabled={this.state.files.length == 0}>
+          <Button variant="primary" onClick={() => this.processUpload()} disabled={this.state.files.length === 0}>
              Upload
           </Button>
         </Modal.Footer>