Add parent

src/ObjectList.tsx

@@ -9,12 +9,14 @@ type Props = {
 };
 
 type State = {
+  loaded: boolean;
   folders: string[];
   files: string[];
 };
 
 class ObjectList extends React.Component<Props, State> {
   state = {
+    loaded: false,
     folders: [],
     files: [],
   };
@@ -32,23 +34,52 @@ class ObjectList extends React.Component<Props, State> {
       Delimiter: '/',
     });
     try {
+      const pxlen = this.props.prefix.length;
+
       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!),
+        loaded: true,
+        folders: (data.CommonPrefixes || []).map((cp) => cp.Prefix!.substring(pxlen)),
+        files: (data.Contents || []).map((obj) => obj.Key!.substring(pxlen)),
       });
     } catch(error) {
       console.log("err", error);
     }
   }
 
+  parentTag() {
+    let spl = this.props.prefix.split("/");
+    while (spl.pop() == "");
+    spl.push("");
+    let pp = spl.join("/");
+    return (
+      <li key="PARENT">
+        <Link to={ "/" + this.props.bucket + "/" + pp }>..</Link>
+      </li>
+    );
+  }
+
   render() {
+    let par = (this.props.prefix.length > 0 ?
+      this.parentTag()
+      : <></>);
+
+    if (!this.state.loaded) {
+      return (
+        <ul>
+          { par }
+          <li>Loading...</li>
+        </ul>
+        );
+    }
+
     return (
       <ul>
+        { par }
         { this.state.folders.map((f) =>
           <li key={f + "/" }>
-            <Link to={ "/" + this.props.bucket + "/" + f }>{ f }</Link>
+            <Link to={ "/" + this.props.bucket + "/" + this.props.prefix + f }>{ f }</Link>
           </li>
         )}
         { this.state.files.map((f) =>