feat(postgraphiql): save headers to localStorage (#1174)

Author: phryneas

postgraphiql/src/components/PostGraphiQL.js

@@ -71,6 +71,11 @@ const websocketUrl = POSTGRAPHILE_CONFIG.graphqlUrl.match(/^https?:/)
       l.port !== 80 && l.port !== 443 ? ':' + l.port : ''
     }${POSTGRAPHILE_CONFIG.graphqlUrl}`;
 
+const STORAGE_KEYS = {
+  SAVE_HEADERS_TEXT: 'PostGraphiQL:saveHeadersText',
+  HEADERS_TEXT: 'PostGraphiQL:headersText',
+};
+
 /**
  * The standard GraphiQL interface wrapped with some PostGraphile extensions.
  * Including a JWT setter and live schema udpate capabilities.
@@ -85,7 +90,8 @@ class PostGraphiQL extends React.PureComponent {
     schema: null,
     query: '',
     showHeaderEditor: false,
-    headersText: '{\n"Authorization": null\n}\n',
+    saveHeadersText: this._storage.get(STORAGE_KEYS.SAVE_HEADERS_TEXT) === 'true' ? true : false,
+    headersText: this._storage.get(STORAGE_KEYS.HEADERS_TEXT) || '{\n"Authorization": null\n}\n',
     headersTextValid: true,
     explorerIsOpen: this._storage.get('explorerIsOpen') === 'false' ? false : true,
     haveActiveSubscription: false,
@@ -510,6 +516,22 @@ class PostGraphiQL extends React.PureComponent {
     );
   };
 
+  handleToggleSaveHeaders = () => {
+    this.setState(
+      oldState => ({ saveHeadersText: !oldState.saveHeadersText }),
+      () => {
+        this._storage.set(
+          STORAGE_KEYS.SAVE_HEADERS_TEXT,
+          JSON.stringify(this.state.saveHeadersText),
+        );
+        this._storage.set(
+          STORAGE_KEYS.HEADERS_TEXT,
+          this.state.saveHeadersText ? this.state.headersText : '',
+        );
+      },
+    );
+  };
+
   renderSocketStatus() {
     const { socketStatus, error } = this.state;
     if (socketStatus === null) {
@@ -681,13 +703,18 @@ class PostGraphiQL extends React.PureComponent {
             open={this.state.showHeaderEditor}
             value={this.state.headersText}
             valid={this.state.headersTextValid}
+            toggleSaveHeaders={this.handleToggleSaveHeaders}
+            saveHeaders={this.state.saveHeadersText}
             onChange={e =>
               this.setState(
                 {
                   headersText: e.target.value,
                   headersTextValid: isValidJSON(e.target.value),
                 },
                 () => {
+                  if (this.state.headersTextValid && this.state.saveHeadersText) {
+                    this._storage.set(STORAGE_KEYS.HEADERS_TEXT, this.state.headersText);
+                  }
                   if (this.state.headersTextValid && this.subscriptionsClient) {
                     // Reconnect to websocket with new headers
                     this.subscriptionsClient.close(false, true);
@@ -706,7 +733,7 @@ class PostGraphiQL extends React.PureComponent {
   }
 }
 
-function EditHeaders({ children, open, value, onChange, valid }) {
+function EditHeaders({ children, open, value, onChange, valid, saveHeaders, toggleSaveHeaders }) {
   return (
     <div
       className="graphiql-container not-really"
@@ -723,6 +750,10 @@ function EditHeaders({ children, open, value, onChange, valid }) {
             <div className="doc-explorer-rhs">{children}</div>
           </div>
           <div className="doc-explorer-contents">
+            <label>
+              <input type="checkbox" checked={saveHeaders} onChange={toggleSaveHeaders} />
+              save headers to localStorage
+            </label>
             <textarea
               value={value}
               onChange={onChange}