feat: dark mode toggle + Terminal as Component

1 files changed, 48 insertions, 29 deletions

diff --git a/src/App.js b/src/App.js
index b671044..a51cad9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,13 +1,45 @@
-import logo from './logo.svg';
-import './App.css';
-import { Terminal } from 'xterm';
-import './xterm.css';
-import { FitAddon } from 'xterm-addon-fit';
 import React from 'react';
-import { Resizable } from "re-resizable";
+import { InputGroup } from 'reactstrap';
 import ResizeObserver from "react-resize-observer";
+import { ToggleSlider } from 'react-toggle-slider';
+import { Terminal } from 'xterm';
+import { FitAddon } from 'xterm-addon-fit';
+import { ThemeContext, themes } from './theme';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSun, faMoon } from '@fortawesome/free-solid-svg-icons';
+import './App.css';
+import './xterm.css';
+
+function App() {
+  const [darkMode, setDarkMode] = React.useState(true);
 
-export default class App extends React.Component {
+  return (
+    <div className='App'>
+      <header className='App-header'>
+        <InputGroup>
+          <ThemeContext.Consumer>
+            {({ changeTheme }) => (
+              <div className='toggle-slider'>
+                <FontAwesomeIcon icon={faSun} size='xl' />
+                <ToggleSlider
+                  onToggle={() => {
+                    setDarkMode(!darkMode);
+                    changeTheme(darkMode ? themes.light : themes.dark);
+                  }}
+                />
+                <FontAwesomeIcon icon={faMoon} size='xl' />
+              </div>
+            )}
+
+          </ThemeContext.Consumer>
+        </InputGroup>
+        <TerminalComponent />
+      </header>
+    </div>
+  );
+}
+
+class TerminalComponent extends React.Component {
   constructor(props) {
     super(props);
     this.fitAddon = new FitAddon();
@@ -29,7 +61,6 @@ export default class App extends React.Component {
   }
 
   componentDidMount() {
-
     this.encoder = new TextEncoder();
     this.decoder = new TextDecoder();
     this.socket = new WebSocket('ws://localhost:8000/ws');
@@ -39,11 +70,7 @@ export default class App extends React.Component {
       return String.fromCharCode.apply(null, new Uint8Array(buf));
     }
 
-    // this.attachAddon = new AttachAddon(this.socket, false);
-
     this.term.loadAddon(this.fitAddon);
-    // this.term.loadAddon(this.attachAddon);
-
     this.term.open(document.getElementById("xterm"));
     this.fitAddon.fit();
 
@@ -70,7 +97,6 @@ export default class App extends React.Component {
     }
     this.socket.onclose = (evt) => {
       this.term.write("Session terminated");
-      this.term.destroy();
     }
 
     this.socket.onerror = (evt) => {
@@ -82,25 +108,18 @@ export default class App extends React.Component {
     this.fitAddon.fit();
   }
 
-
   render() {
     return (
-      <div className='App'>
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-          <div className="terminalContainer">
-            <div id="xterm" style={{ height: "100%", width: "100%" }} />
-            <ResizeObserver
-              onResize={() => {
-                this.fitAddon.fit();
-              }}
-            />
-          </div>
-        </header>
+      <div className="terminalContainer">
+        <div id="xterm" style={{ height: "100%", width: "100%" }} />
+        <ResizeObserver
+          onResize={() => {
+            this.fitAddon.fit();
+          }}
+        />
       </div>
     );
   }
 }
+
+export default App;