Change SAVE button text according to session already existing

BartoszKlonowski · Aug 17, 2024 · d8697a6 · d8697a6
1 parent 8edbe56
commit d8697a6
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/app/src/popup/MainPopup.js b/app/src/popup/MainPopup.js
@@ -3,6 +3,7 @@ import * as React from "react";
 import ReactDOM from "react-dom";
 import ExpandedSessionListInput from "./components/ExpandedSessionListInput";
 import ActionButton from "./components/ActionButton";
+import Database from "../engine/Database";
 
 if (!browser) {
     var browser = require("webextension-polyfill");
@@ -13,15 +14,35 @@ export class MainPopup extends React.Component {
         super(props);
         this.state = {
             extensionName: "Session Storage",
+            selectedSession: "",
+            saveButtonTitle: "",
         };
+
+        this.onTextInputChange = this.onTextInputChange.bind(this);
+        this.onSessionsLoad = this.onSessionsLoad.bind(this);
+    }
+
+    onSessionsLoad(sessions) {
+        const buttonTitle = sessions.includes(this.state.selectedSession) ? "OVERWRITE" : "SAVE";
+        this.setState({saveButtonTitle: buttonTitle});
+    }
+
+    onTextInputChange(newValue) {
+        const db = new Database();
+        this.setState({selectedSession: newValue});
+        db.loadSessions(this.onSessionsLoad);
     }
 
     render() {
         return (
             <form id="mainForm">
-                <ExpandedSessionListInput />
+                <ExpandedSessionListInput onTextInputChange={this.onTextInputChange} />
                 <div className="panel-actions">
-                    <ActionButton name="saveButton" text="SAVE" icon="glyphicon glyphicon-floppy-disk" />
+                    <ActionButton
+                        name="saveButton"
+                        text={this.state.saveButtonTitle}
+                        icon="glyphicon glyphicon-floppy-disk"
+                    />
                     <ActionButton name="deleteButton" text="DELETE" icon="glyphicon glyphicon-trash" />
                     <ActionButton name="reopenButton" text="REOPEN" icon="glyphicon glyphicon-refresh" />
                 </div>

diff --git a/app/src/popup/components/ExpandedSessionListInput.js b/app/src/popup/components/ExpandedSessionListInput.js
@@ -25,11 +25,13 @@ export class ExpandedSessionListInput extends React.Component {
     }
 
     onSelect(session) {
+        this.props.onTextInputChange(session);
         this.setState({selectedSessionName: session});
     }
 
     onChange(event) {
         const newValue = event.target.value;
+        this.props.onTextInputChange(newValue);
         this.setState({selectedSessionName: newValue});
     }