Slight improvements to multiple terminal tabs

1 files changed, 36 insertions, 18 deletions

diff --git a/src/App.js b/src/App.js
index 9217930..ac2b4ad 100644
--- a/src/App.js
+++ b/src/App.js
@@ -42,10 +42,11 @@ function App() {
 class TerminalManager extends React.Component {
   constructor(props) {
     super(props);
+    const ogTermId = (new Date().getMilliseconds()).toString();
     this.state = {
       curTermID: 0,
       terminals: [
-        <TerminalComponent />
+        <TerminalComponent key={ogTermId} createdAt={ogTermId}/>
       ],
       numberOfTerminals: 1,
     };
@@ -90,7 +91,8 @@ class TerminalManager extends React.Component {
       return;
     }
 
-    curTerminals.push(<TerminalComponent />);
+    let termId = (new Date().getMilliseconds()).toString();
+    curTerminals.push(<TerminalComponent key={termId} createdAt={termId}/>);
 
     this.setState({
       curTermID: id,
@@ -109,10 +111,27 @@ class TerminalManager extends React.Component {
 
   deleteCurTerminal = () => {
     console.log("   deleteCurTerminal:  Beginning new terminal creation");
-    const id = this.state.curTermID - 1;
-    const curTerminals1 = this.state.terminals.slice(0, id + 1);
-    const curTerminals2 = this.state.terminals.slice(id + 2);
+    const curId = this.state.curTermID;
+    let id = curId - 1;
     const numTerm = this.state.numberOfTerminals - 1;
+    let curTerminals1;
+    let curTerminals2;
+
+    if (numTerm < this.minTerminals)
+    {
+      alert("Maximum number of terminals deleted");
+      return;
+    }
+
+    if (id < 0 || curId === 0) {
+      id = numTerm - 1;
+
+      curTerminals1 = this.state.terminals.slice(curId + 1);
+    }
+    else {
+      curTerminals1 = this.state.terminals.slice(0, curId);
+      curTerminals2 = this.state.terminals.slice(curId + 1);
+    }
   
     console.log("   deleteCurTerminal:  curTermID: " + this.state.curTermID);
     console.log("   deleteCurTerminal:  terminals: ");
@@ -122,23 +141,23 @@ class TerminalManager extends React.Component {
     console.log("   deleteCurTerminal:  id: " + id);
     console.log("   deleteCurTerminal:  curTerminals1: ");
     console.log(curTerminals1);
-    console.log("   deleteCurTerminal:  curTerminals2: ");
-    console.log(curTerminals2);
-    console.log("   deleteCurTerminal:  numTerm:  " + numTerm);
-
-    if (numTerm < this.minTerminals)
-    {
-      alert("Maximum number of terminals deleted");
-      return;
+    
+    if (curId !== 0) {
+      console.log("   deleteCurTerminal:  curTerminals2: ");
+      console.log(curTerminals2);
     }
 
+    console.log("   deleteCurTerminal:  numTerm:  " + numTerm);
+
     console.log("   deleteCurTerminal:  Begin switching other terminals to hidden");
     console.log("   deleteCurTerminal:  Altering visibility of terminal");
     console.log(curTerminals1[id]);
     
-    for(let i = 0; i < curTerminals2.length; i++)
-    {
-      curTerminals1.push(curTerminals2[i]);
+    if (curId !== 0) {
+      for(const element of curTerminals2)
+      {
+        curTerminals1.push(element);
+      }
     }
 
     this.setState({
@@ -250,8 +269,7 @@ class TerminalComponent extends React.Component {
       },
     });
     this.isConnecting = false;
-    this.key = (new Date().getMilliseconds()).toString();
-    this.terminalId = "xterm" + this.key;
+    this.terminalId = "xterm" + this.props.createdAt;
   }
 
   componentDidMount() {