From a3d6573d93281d1529fcae117cbd79a6b755df5e Mon Sep 17 00:00:00 2001
From: Dmitry Yankowski <dmitry@snoculars.com>
Date: Mon, 24 Feb 2020 23:34:06 -0500
Subject: [PATCH] Save collapsed sections to state

When you refresh or navigate to a new page and back, your collapsed sections will be as you set them.
---
 components/section.vue |  26 ++-
 pages/graphql.vue      | 441 ++++++++++++++++++-----------------------
 store/mutations.js     |   6 +
 store/state.js         |  55 ++---
 4 files changed, 248 insertions(+), 280 deletions(-)

diff --git a/components/section.vue b/components/section.vue
index 368da65c7..056d7ed4b 100644
--- a/components/section.vue
+++ b/components/section.vue
@@ -6,10 +6,13 @@
     <legend @click.prevent="collapse">
       <span>{{ label }}</span>
       <i class="material-icons">
-        {{ isCollapsed ? "expand_more" : "expand_less" }}
+        {{ isCollapsed(label) ? "expand_more" : "expand_less" }}
       </i>
     </legend>
-    <div class="collapsible" :class="{ hidden: collapsed }">
+    <div
+      class="collapsible"
+      :class="{ hidden: isCollapsed(label.toLowerCase()) }"
+    >
       <slot />
     </div>
   </fieldset>
@@ -26,15 +29,12 @@ export default {
   computed: {
     frameColorsEnabled() {
       return this.$store.state.postwoman.settings.FRAME_COLORS_ENABLED || false;
+    },
+    sectionString() {
+      return `${this.$route.path}/${this.label}`;
     }
   },
 
-  data() {
-    return {
-      isCollapsed: false
-    };
-  },
-
   props: {
     label: {
       type: String,
@@ -49,7 +49,15 @@ export default {
     collapse({ target }) {
       const parent = target.parentNode.parentNode;
       parent.querySelector(".collapsible").classList.toggle("hidden");
-      this.isCollapsed = !this.isCollapsed;
+      // Save collapsed section to local state
+      this.$store.commit("setCollapsedSection", this.sectionString);
+    },
+    isCollapsed(label) {
+      return (
+        this.$store.state.theme.collapsedSections.includes(
+          this.sectionString
+        ) || false
+      );
     }
   }
 };
diff --git a/pages/graphql.vue b/pages/graphql.vue
index a430d4ff0..465e5fbdb 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -6,12 +6,7 @@
           <ul>
             <li>
               <label for="url">{{ $t("url") }}</label>
-              <input
-                id="url"
-                type="url"
-                v-model="url"
-                @keyup.enter="getSchema()"
-              />
+              <input id="url" type="url" v-model="url" @keyup.enter="getSchema()" />
             </li>
             <div>
               <li>
@@ -31,11 +26,7 @@
               <div class="flex-wrap">
                 <label for="headerList">{{ $t("header_list") }}</label>
                 <div>
-                  <button
-                    class="icon"
-                    @click="headers = []"
-                    v-tooltip.bottom="$t('clear')"
-                  >
+                  <button class="icon" @click="headers = []" v-tooltip.bottom="$t('clear')">
                     <i class="material-icons">clear_all</i>
                   </button>
                 </div>
@@ -60,7 +51,7 @@
                 @input="
                   $store.commit('setGQLHeaderKey', {
                     index,
-                    value: $event
+                    value: $event,
                   })
                 "
                 autofocus
@@ -74,7 +65,7 @@
                 @change="
                   $store.commit('setGQLHeaderValue', {
                     index,
-                    value: $event.target.value
+                    value: $event.target.value,
                   })
                 "
                 autofocus
@@ -112,9 +103,7 @@
                 @click="ToggleExpandResponse"
                 ref="ToggleExpandResponse"
                 v-tooltip="{
-                  content: !expandResponse
-                    ? $t('expand_response')
-                    : $t('collapse_response')
+                  content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
                 }"
               >
                 <i class="material-icons">
@@ -149,20 +138,16 @@
               autoScrollEditorIntoView: true,
               readOnly: true,
               showPrintMargin: false,
-              useWorker: false
+              useWorker: false,
             }"
           />
         </pw-section>
 
         <pw-section class="cyan" :label="$t('query')" ref="query">
-          <div class="flex-wrap">
+          <div class="flex-wrap gqlRunQuery">
             <label for="gqlQuery">{{ $t("query") }}</label>
             <div>
-              <button
-                class="icon"
-                @click="runQuery()"
-                v-tooltip.bottom="$t('run_query')"
-              >
+              <button @click="runQuery()" v-tooltip.bottom="$t('run_query')">
                 <i class="material-icons">play_arrow</i>
               </button>
               <button
@@ -184,7 +169,7 @@
               fontSize: '16px',
               autoScrollEditorIntoView: true,
               showPrintMargin: false,
-              useWorker: false
+              useWorker: false,
             }"
           />
         </pw-section>
@@ -199,7 +184,7 @@
               fontSize: '16px',
               autoScrollEditorIntoView: true,
               showPrintMargin: false,
-              useWorker: false
+              useWorker: false,
             }"
           />
         </pw-section>
@@ -228,7 +213,7 @@
               autoScrollEditorIntoView: true,
               readOnly: true,
               showPrintMargin: false,
-              useWorker: false
+              useWorker: false,
             }"
           />
         </pw-section>
@@ -248,10 +233,7 @@
             </label>
             <div v-if="queryFields.length > 0" class="tab">
               <div v-for="field in queryFields" :key="field.name">
-                <gql-field
-                  :gqlField="field"
-                  :jumpTypeCallback="handleJumpToType"
-                />
+                <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
               </div>
             </div>
 
@@ -267,10 +249,7 @@
             </label>
             <div v-if="mutationFields.length > 0" class="tab">
               <div v-for="field in mutationFields" :key="field.name">
-                <gql-field
-                  :gqlField="field"
-                  :jumpTypeCallback="handleJumpToType"
-                />
+                <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
               </div>
             </div>
 
@@ -286,10 +265,7 @@
             </label>
             <div v-if="subscriptionFields.length > 0" class="tab">
               <div v-for="field in subscriptionFields" :key="field.name">
-                <gql-field
-                  :gqlField="field"
-                  :jumpTypeCallback="handleJumpToType"
-                />
+                <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
               </div>
             </div>
 
@@ -304,15 +280,8 @@
               {{ $t("types") }}
             </label>
             <div v-if="gqlTypes.length > 0" class="tab">
-              <div
-                v-for="type in gqlTypes"
-                :key="type.name"
-                :id="`type_${type.name}`"
-              >
-                <gql-type
-                  :gqlType="type"
-                  :jumpTypeCallback="handleJumpToType"
-                />
+              <div v-for="type in gqlTypes" :key="type.name" :id="`type_${type.name}`">
+                <gql-type :gqlType="type" :jumpTypeCallback="handleJumpToType" />
               </div>
             </div>
           </section>
@@ -339,20 +308,23 @@
   max-height: calc(100vh - 186px);
   overflow: auto;
 }
+.gqlRunQuery {
+  margin-bottom: 12px;
+}
 </style>
 
 <script>
-import axios from "axios";
-import * as gql from "graphql";
-import textareaAutoHeight from "../directives/textareaAutoHeight";
-import { commonHeaders } from "../functions/headers";
-import AceEditor from "../components/ace-editor";
-import QueryEditor from "../components/graphql/queryeditor";
-import { sendNetworkRequest } from "../functions/network";
+import axios from "axios"
+import * as gql from "graphql"
+import textareaAutoHeight from "../directives/textareaAutoHeight"
+import { commonHeaders } from "../functions/headers"
+import AceEditor from "../components/ace-editor"
+import QueryEditor from "../components/graphql/queryeditor"
+import { sendNetworkRequest } from "../functions/network"
 
 export default {
   directives: {
-    textareaAutoHeight
+    textareaAutoHeight,
   },
   components: {
     "pw-section": () => import("../components/section"),
@@ -360,7 +332,7 @@ export default {
     "gql-type": () => import("../components/graphql/type"),
     autocomplete: () => import("../components/autocomplete"),
     Editor: AceEditor,
-    QueryEditor: QueryEditor
+    QueryEditor: QueryEditor,
   },
   data() {
     return {
@@ -373,359 +345,338 @@ export default {
       downloadButton: '<i class="material-icons">get_app</i>',
       doneButton: '<i class="material-icons">done</i>',
       expandResponse: false,
-      responseBodyMaxLines: 16
-    };
+      responseBodyMaxLines: 16,
+    }
   },
 
   computed: {
     url: {
       get() {
-        return this.$store.state.gql.url;
+        return this.$store.state.gql.url
       },
       set(value) {
-        this.$store.commit("setGQLState", { value, attribute: "url" });
-      }
+        this.$store.commit("setGQLState", { value, attribute: "url" })
+      },
     },
     headers: {
       get() {
-        return this.$store.state.gql.headers;
+        return this.$store.state.gql.headers
       },
       set(value) {
-        this.$store.commit("setGQLState", { value, attribute: "headers" });
-      }
+        this.$store.commit("setGQLState", { value, attribute: "headers" })
+      },
     },
     gqlQueryString: {
       get() {
-        return this.$store.state.gql.query;
+        return this.$store.state.gql.query
       },
       set(value) {
-        this.$store.commit("setGQLState", { value, attribute: "query" });
-      }
+        this.$store.commit("setGQLState", { value, attribute: "query" })
+      },
     },
     response: {
       get() {
-        return this.$store.state.gql.response;
+        return this.$store.state.gql.response
       },
       set(value) {
-        this.$store.commit("setGQLState", { value, attribute: "response" });
-      }
+        this.$store.commit("setGQLState", { value, attribute: "response" })
+      },
     },
     schema: {
       get() {
-        return this.$store.state.gql.schema;
+        return this.$store.state.gql.schema
       },
       set(value) {
-        this.$store.commit("setGQLState", { value, attribute: "schema" });
-      }
+        this.$store.commit("setGQLState", { value, attribute: "schema" })
+      },
     },
     variableString: {
       get() {
-        return this.$store.state.gql.variablesJSONString;
+        return this.$store.state.gql.variablesJSONString
       },
       set(value) {
         this.$store.commit("setGQLState", {
           value,
-          attribute: "variablesJSONString"
-        });
-      }
+          attribute: "variablesJSONString",
+        })
+      },
     },
     headerString() {
       const result = this.headers
         .filter(({ key }) => !!key)
         .map(({ key, value }) => `${key}: ${value}`)
-        .join(",\n");
-      return result === "" ? "" : `${result}`;
-    }
+        .join(",\n")
+      return result === "" ? "" : `${result}`
+    },
   },
   methods: {
     handleJumpToType(type) {
-      const typesTab = document.getElementById("gqltypes-tab");
-      typesTab.checked = true;
+      const typesTab = document.getElementById("gqltypes-tab")
+      typesTab.checked = true
 
-      const rootTypeName = this.resolveRootType(type).name;
+      const rootTypeName = this.resolveRootType(type).name
 
-      const target = document.getElementById(`type_${rootTypeName}`);
+      const target = document.getElementById(`type_${rootTypeName}`)
       if (target && this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED) {
         target.scrollIntoView({
-          behavior: "smooth"
-        });
+          behavior: "smooth",
+        })
       }
     },
     resolveRootType(type) {
-      let t = type;
-      while (t.ofType != null) t = t.ofType;
-      return t;
+      let t = type
+      while (t.ofType != null) t = t.ofType
+      return t
     },
     copySchema() {
-      this.$refs.copySchemaCode.innerHTML = this.doneButton;
-      const aux = document.createElement("textarea");
-      aux.innerText = this.schema;
-      document.body.appendChild(aux);
-      aux.select();
-      document.execCommand("copy");
-      document.body.removeChild(aux);
+      this.$refs.copySchemaCode.innerHTML = this.doneButton
+      const aux = document.createElement("textarea")
+      aux.innerText = this.schema
+      document.body.appendChild(aux)
+      aux.select()
+      document.execCommand("copy")
+      document.body.removeChild(aux)
       this.$toast.success(this.$t("copied_to_clipboard"), {
-        icon: "done"
-      });
-      setTimeout(
-        () => (this.$refs.copySchemaCode.innerHTML = this.copyButton),
-        1000
-      );
+        icon: "done",
+      })
+      setTimeout(() => (this.$refs.copySchemaCode.innerHTML = this.copyButton), 1000)
     },
     copyQuery() {
-      this.$refs.copyQueryButton.innerHTML = this.doneButton;
-      const aux = document.createElement("textarea");
-      aux.innerText = this.gqlQueryString;
-      document.body.appendChild(aux);
-      aux.select();
-      document.execCommand("copy");
-      document.body.removeChild(aux);
+      this.$refs.copyQueryButton.innerHTML = this.doneButton
+      const aux = document.createElement("textarea")
+      aux.innerText = this.gqlQueryString
+      document.body.appendChild(aux)
+      aux.select()
+      document.execCommand("copy")
+      document.body.removeChild(aux)
       this.$toast.success(this.$t("copied_to_clipboard"), {
-        icon: "done"
-      });
-      setTimeout(
-        () => (this.$refs.copyQueryButton.innerHTML = this.copyButton),
-        1000
-      );
+        icon: "done",
+      })
+      setTimeout(() => (this.$refs.copyQueryButton.innerHTML = this.copyButton), 1000)
     },
     copyResponse() {
-      this.$refs.copyResponseButton.innerHTML = this.doneButton;
-      const aux = document.createElement("textarea");
-      aux.innerText = this.response;
-      document.body.appendChild(aux);
-      aux.select();
-      document.execCommand("copy");
-      document.body.removeChild(aux);
+      this.$refs.copyResponseButton.innerHTML = this.doneButton
+      const aux = document.createElement("textarea")
+      aux.innerText = this.response
+      document.body.appendChild(aux)
+      aux.select()
+      document.execCommand("copy")
+      document.body.removeChild(aux)
       this.$toast.success(this.$t("copied_to_clipboard"), {
-        icon: "done"
-      });
-      setTimeout(
-        () => (this.$refs.copyResponseButton.innerHTML = this.copyButton),
-        1000
-      );
+        icon: "done",
+      })
+      setTimeout(() => (this.$refs.copyResponseButton.innerHTML = this.copyButton), 1000)
     },
     async runQuery() {
-      const startTime = Date.now();
+      const startTime = Date.now()
 
-      this.$nuxt.$loading.start();
-      this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED &&
-        this.scrollInto("response");
+      this.$nuxt.$loading.start()
+      this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED && this.scrollInto("response")
 
       try {
-        let headers = {};
+        let headers = {}
         this.headers.forEach(header => {
-          headers[header.key] = header.value;
-        });
+          headers[header.key] = header.value
+        })
 
-        let variables = JSON.parse(this.variableString);
+        let variables = JSON.parse(this.variableString)
 
-        const gqlQueryString = this.gqlQueryString;
+        const gqlQueryString = this.gqlQueryString
 
         const reqOptions = {
           method: "post",
           url: this.url,
           headers: {
             ...headers,
-            "content-type": "application/json"
+            "content-type": "application/json",
           },
-          data: JSON.stringify({ query: gqlQueryString, variables })
-        };
+          data: JSON.stringify({ query: gqlQueryString, variables }),
+        }
 
-        const data = await sendNetworkRequest(reqOptions, this.$store);
+        const data = await sendNetworkRequest(reqOptions, this.$store)
 
-        this.response = JSON.stringify(data.data, null, 2);
+        this.response = JSON.stringify(data.data, null, 2)
 
-        this.$nuxt.$loading.finish();
-        const duration = Date.now() - startTime;
+        this.$nuxt.$loading.finish()
+        const duration = Date.now() - startTime
         this.$toast.info(this.$t("finished_in", { duration }), {
-          icon: "done"
-        });
+          icon: "done",
+        })
       } catch (error) {
-        this.$nuxt.$loading.finish();
+        this.$nuxt.$loading.finish()
 
         this.$toast.error(`${error} ${this.$t("f12_details")}`, {
-          icon: "error"
-        });
-        console.log("Error", error);
+          icon: "error",
+        })
+        console.log("Error", error)
       }
     },
     async getSchema() {
-      const startTime = Date.now();
-      this.schema = this.$t("loading");
-      this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED &&
-        this.scrollInto("schema");
+      const startTime = Date.now()
+      this.schema = this.$t("loading")
+      this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED && this.scrollInto("schema")
 
       // Start showing the loading bar as soon as possible.
       // The nuxt axios module will hide it when the request is made.
-      this.$nuxt.$loading.start();
+      this.$nuxt.$loading.start()
 
       try {
         const query = JSON.stringify({
-          query: gql.getIntrospectionQuery()
-        });
+          query: gql.getIntrospectionQuery(),
+        })
 
-        let headers = {};
+        let headers = {}
         this.headers.forEach(header => {
-          headers[header.key] = header.value;
-        });
+          headers[header.key] = header.value
+        })
 
         const reqOptions = {
           method: "post",
           url: this.url,
           headers: {
             ...headers,
-            "content-type": "application/json"
+            "content-type": "application/json",
           },
-          data: query
-        };
+          data: query,
+        }
 
         const reqConfig = this.$store.state.postwoman.settings.PROXY_ENABLED
           ? {
               method: "post",
               url:
-                this.$store.state.postwoman.settings.PROXY_URL ||
-                `https://postwoman.apollotv.xyz/`,
-              data: reqOptions
+                this.$store.state.postwoman.settings.PROXY_URL || `https://postwoman.apollotv.xyz/`,
+              data: reqOptions,
             }
-          : reqOptions;
+          : reqOptions
 
-        const res = await axios(reqConfig);
+        const res = await axios(reqConfig)
 
-        const data = this.$store.state.postwoman.settings.PROXY_ENABLED
-          ? res.data
-          : res;
+        const data = this.$store.state.postwoman.settings.PROXY_ENABLED ? res.data : res
 
-        const schema = gql.buildClientSchema(data.data.data);
+        const schema = gql.buildClientSchema(data.data.data)
         this.schema = gql.printSchema(schema, {
-          commentDescriptions: true
-        });
+          commentDescriptions: true,
+        })
         console.log(
           gql.printSchema(schema, {
-            commentDescriptions: true
+            commentDescriptions: true,
           })
-        );
+        )
 
         if (schema.getQueryType()) {
-          const fields = schema.getQueryType().getFields();
-          const qFields = [];
+          const fields = schema.getQueryType().getFields()
+          const qFields = []
           for (const field in fields) {
-            qFields.push(fields[field]);
+            qFields.push(fields[field])
           }
-          this.queryFields = qFields;
+          this.queryFields = qFields
         }
 
         if (schema.getMutationType()) {
-          const fields = schema.getMutationType().getFields();
-          const mFields = [];
+          const fields = schema.getMutationType().getFields()
+          const mFields = []
           for (const field in fields) {
-            mFields.push(fields[field]);
+            mFields.push(fields[field])
           }
-          this.mutationFields = mFields;
+          this.mutationFields = mFields
         }
 
         if (schema.getSubscriptionType()) {
-          const fields = schema.getSubscriptionType().getFields();
-          const sFields = [];
+          const fields = schema.getSubscriptionType().getFields()
+          const sFields = []
           for (const field in fields) {
-            sFields.push(fields[field]);
+            sFields.push(fields[field])
           }
-          this.subscriptionFields = sFields;
+          this.subscriptionFields = sFields
         }
 
-        const typeMap = schema.getTypeMap();
-        const types = [];
+        const typeMap = schema.getTypeMap()
+        const types = []
 
-        const queryTypeName = schema.getQueryType()
-          ? schema.getQueryType().name
-          : "";
-        const mutationTypeName = schema.getMutationType()
-          ? schema.getMutationType().name
-          : "";
+        const queryTypeName = schema.getQueryType() ? schema.getQueryType().name : ""
+        const mutationTypeName = schema.getMutationType() ? schema.getMutationType().name : ""
         const subscriptionTypeName = schema.getSubscriptionType()
           ? schema.getSubscriptionType().name
-          : "";
+          : ""
 
         for (const type in typeMap) {
           if (
             !typeMap[type].name.startsWith("__") &&
-            ![queryTypeName, mutationTypeName, subscriptionTypeName].includes(
-              typeMap[type].name
-            ) &&
+            ![queryTypeName, mutationTypeName, subscriptionTypeName].includes(typeMap[type].name) &&
             typeMap[type] instanceof gql.GraphQLObjectType
           ) {
-            types.push(typeMap[type]);
+            types.push(typeMap[type])
           }
         }
-        this.gqlTypes = types;
-        this.$refs.queryEditor.setValidationSchema(schema);
-        this.$nuxt.$loading.finish();
-        const duration = Date.now() - startTime;
+        this.gqlTypes = types
+        this.$refs.queryEditor.setValidationSchema(schema)
+        this.$nuxt.$loading.finish()
+        const duration = Date.now() - startTime
         this.$toast.info(this.$t("finished_in", { duration }), {
-          icon: "done"
-        });
+          icon: "done",
+        })
       } catch (error) {
-        this.$nuxt.$loading.finish();
-        this.schema = `${error}. ${this.$t("check_console_details")}`;
+        this.$nuxt.$loading.finish()
+        this.schema = `${error}. ${this.$t("check_console_details")}`
         this.$toast.error(`${error} ${this.$t("f12_details")}`, {
-          icon: "error"
-        });
-        console.log("Error", error);
+          icon: "error",
+        })
+        console.log("Error", error)
       }
     },
     ToggleExpandResponse() {
-      this.expandResponse = !this.expandResponse;
-      this.responseBodyMaxLines =
-        this.responseBodyMaxLines == Infinity ? 16 : Infinity;
+      this.expandResponse = !this.expandResponse
+      this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
     },
     downloadResponse() {
-      const dataToWrite = JSON.stringify(this.schema, null, 2);
-      const file = new Blob([dataToWrite], { type: "application/json" });
-      const a = document.createElement("a");
-      const url = URL.createObjectURL(file);
-      a.href = url;
-      a.download = `${this.url} on ${Date()}.graphql`.replace(/\./g, "[dot]");
-      document.body.appendChild(a);
-      a.click();
-      this.$refs.downloadResponse.innerHTML = this.doneButton;
+      const dataToWrite = JSON.stringify(this.schema, null, 2)
+      const file = new Blob([dataToWrite], { type: "application/json" })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      a.download = `${this.url} on ${Date()}.graphql`.replace(/\./g, "[dot]")
+      document.body.appendChild(a)
+      a.click()
+      this.$refs.downloadResponse.innerHTML = this.doneButton
       this.$toast.success(this.$t("download_started"), {
-        icon: "done"
-      });
+        icon: "done",
+      })
       setTimeout(() => {
-        document.body.removeChild(a);
-        window.URL.revokeObjectURL(url);
-        this.$refs.downloadResponse.innerHTML = this.downloadButton;
-      }, 1000);
+        document.body.removeChild(a)
+        window.URL.revokeObjectURL(url)
+        this.$refs.downloadResponse.innerHTML = this.downloadButton
+      }, 1000)
     },
     addRequestHeader(index) {
       this.$store.commit("addGQLHeader", {
         key: "",
-        value: ""
-      });
-      return false;
+        value: "",
+      })
+      return false
     },
     removeRequestHeader(index) {
       // .slice() is used so we get a separate array, rather than just a reference
-      const oldHeaders = this.headers.slice();
+      const oldHeaders = this.headers.slice()
 
-      this.$store.commit("removeGQLHeader", index);
+      this.$store.commit("removeGQLHeader", index)
       this.$toast.error(this.$t("deleted"), {
         icon: "delete",
         action: {
           text: this.$t("undo"),
           duration: 4000,
           onClick: (e, toastObject) => {
-            this.headers = oldHeaders;
-            toastObject.remove();
-          }
-        }
-      });
+            this.headers = oldHeaders
+            toastObject.remove()
+          },
+        },
+      })
       // console.log(oldHeaders);
     },
     scrollInto(view) {
       this.$refs[view].$el.scrollIntoView({
-        behavior: "smooth"
-      });
-    }
-  }
-};
+        behavior: "smooth",
+      })
+    },
+  },
+}
 </script>
diff --git a/store/mutations.js b/store/mutations.js
index acc84471a..a978c957f 100644
--- a/store/mutations.js
+++ b/store/mutations.js
@@ -7,6 +7,12 @@ export default {
     gql[attribute] = value;
   },
 
+  setCollapsedSection({ theme }, value) {
+    theme.collapsedSections.includes(value)
+      ? (theme.collapsedSections = theme.collapsedSections.filter(section => section !== value))
+      : theme.collapsedSections.push(value)
+  },
+
   addGQLHeader({ gql }, object) {
     gql.headers.push(object);
   },
diff --git a/store/state.js b/store/state.js
index 271cf48ef..be29cd6a2 100644
--- a/store/state.js
+++ b/store/state.js
@@ -1,40 +1,43 @@
 export default () => ({
   request: {
-    method: 'GET',
-    url: 'https://httpbin.org',
-    path: '/get',
-    label: '',
-    auth: 'None',
-    httpUser: '',
-    httpPassword: '',
-    passwordFieldType: 'password',
-    bearerToken: '',
+    method: "GET",
+    url: "https://httpbin.org",
+    path: "/get",
+    label: "",
+    auth: "None",
+    httpUser: "",
+    httpPassword: "",
+    passwordFieldType: "password",
+    bearerToken: "",
     headers: [],
     params: [],
     bodyParams: [],
-    rawParams: '',
+    rawParams: "",
     rawInput: false,
-    requestType: '',
-    contentType: '',
+    requestType: "",
+    contentType: "",
   },
   gql: {
-    url: 'https://rickandmortyapi.com/graphql',
+    url: "https://rickandmortyapi.com/graphql",
     headers: [],
-    schema: '',
-    variablesJSONString: '{}',
-    query: '',
-    response: ''
+    schema: "",
+    variablesJSONString: "{}",
+    query: "",
+    response: "",
+  },
+  theme: {
+    collapsedSections: [],
   },
   oauth2: {
     tokens: [],
     tokenReqs: [],
-    tokenReqSelect: '',
-    tokenReqName: '',
-    accessTokenName: '',
-    oidcDiscoveryUrl: '',
-    authUrl: '',
-    accessTokenUrl: '',
-    clientId: '',
-    scope: '',
+    tokenReqSelect: "",
+    tokenReqName: "",
+    accessTokenName: "",
+    oidcDiscoveryUrl: "",
+    authUrl: "",
+    accessTokenUrl: "",
+    clientId: "",
+    scope: "",
   },
-})
\ No newline at end of file
+})