✨ Add ReloadModal for when uninstalling extensions,

ESLint

.eslintrc.json

@@ -39,7 +39,10 @@
             "always-multiline"
         ],
         "no-var": "error",
-        "space-before-blocks": "error"
+        "space-before-blocks": "error",
+        "comma-spacing": [
+            "error", { "before": false, "after": true }
+        ]
     },
     "globals": {
         "react": "readonly",
@@ -53,6 +56,11 @@
         "TopBarContent": "readonly",
         "LoadingIcon": "readonly",
         "LoadMoreIcon": "readonly",
-        "CONFIG": "writable"
+        "CONFIG": "writable",
+        "openConfig": "writable",
+        "openReloadModal": "writable",
+        "sortConfig": "writable",
+        "gridUpdateTabs": "writable",
+        "gridUpdatePostsVisual": "writable"
     }
 }

Card.js

@@ -40,9 +40,8 @@ class Card extends react.Component {
             console.log(`Removing extension ${this.localStorageKey}`);
             localStorage.removeItem(this.localStorageKey);
             console.log("Removed");
-            // TODO: probably don't need to since it will reload
-            this.setState({ installed: true });
-            location.reload();
+            this.setState({ installed: false });
+            openReloadModal();
         } else {
             console.log(`Extension ${this.localStorageKey} not found`);
         }
@@ -116,7 +115,7 @@ class Card extends react.Component {
             className: "main-cardSubHeader-root main-type-mestoBold marketplace-cardSubHeader",
             as: "div",
         }, react.createElement("span", null, detail.join(" ‒ ")),
-        ),react.createElement("br"),
+        ), react.createElement("br"),
         this.manifest.description,
         this.state.installed && react.createElement("div", {
             className: "marketplace-card__bottom-meta main-type-mestoBold",

OptionsMenu.js

@@ -56,9 +56,9 @@ const OptionsMenu = react.memo(({
         className: bold ? "main-type-mestoBold" : "main-type-mesto",
     }, selected?.value || defaultValue),
     react.createElement("svg", {
-        height: "16" ,
-        width: "16" ,
-        fill: "currentColor" ,
+        height: "16",
+        width: "16",
+        fill: "currentColor",
         viewBox: "0 0 16 16",
     }, react.createElement("path", {
         d: "M3 6l5 5.794L13 6z",

ReloadModal.js

@@ -0,0 +1,57 @@
+let reloadContainer;
+
+// const MODAL_SUBTITLE = "Reload needed to complete uninstall";
+const MODAL_TITLE = "Reload required";
+
+// eslint-disable-next-line no-unused-vars, no-redeclare
+function openReloadModal() {
+    if (reloadContainer) {
+        Spicetify.PopupModal.display({
+            title: MODAL_TITLE,
+            content: reloadContainer,
+        });
+        return;
+    }
+
+    reloadContainer = document.createElement("div");
+    reloadContainer.id = "marketplace-reload-container";
+
+    // const optionHeader = document.createElement("h2");
+    // optionHeader.innerText = MODAL_SUBTITLE;
+
+    const paragraph = document.createElement("p");
+    paragraph.innerText = "A page reload is required to complete uninstall.";
+
+    const buttonContainer = document.createElement("div");
+    buttonContainer.classList.add("marketplace-reload-modal__button-container");
+
+    const okayBtn = document.createElement("button");
+    okayBtn.id = "marketplace-reload-okay";
+    // TODO: add our own classes for styling?
+    okayBtn.innerText = "Reload now";
+    okayBtn.classList.add("main-buttons-button", "main-button-secondary", "main-playlistEditDetailsModal-save");
+    okayBtn.onclick = () => {
+        Spicetify.PopupModal.hide();
+        location.reload();
+    };
+
+    const cancelBtn = document.createElement("button");
+    cancelBtn.id = "marketplace-reload-cancel";
+    cancelBtn.innerText = "Reload later";
+    cancelBtn.classList.add("main-buttons-button", "main-button-secondary", "main-playlistEditDetailsModal-save");
+    cancelBtn.onclick = () => {
+        Spicetify.PopupModal.hide();
+    };
+
+    buttonContainer.append(okayBtn, cancelBtn);
+
+    reloadContainer.append(
+        paragraph,
+        buttonContainer,
+    );
+
+    Spicetify.PopupModal.display({
+        title: MODAL_TITLE,
+        content: reloadContainer,
+    });
+}

Settings.js

@@ -1,5 +1,6 @@
 let configContainer;
 
+// eslint-disable-next-line no-unused-vars, no-redeclare
 function openConfig() {
     if (configContainer) {
         Spicetify.PopupModal.display({

index.js

@@ -24,7 +24,7 @@ const {
 
 // Define a function called "render" to specify app entry point
 // This function will be used to mount app to main view.
-// eslint-disable-next-line
+// eslint-disable-next-line no-unused-vars
 function render() {
     // console.log('outer render');
     return react.createElement(Grid, { title: "Spicetify Marketplace" });
@@ -59,6 +59,8 @@ const CONFIG = {
 if (!CONFIG.lastService || !CONFIG.services.includes(CONFIG.lastService)) {
     CONFIG.lastService = CONFIG.services[0];
 }
+
+// eslint-disable-next-line no-redeclare
 let sortConfig = {
     by: localStorage.getItem("reddit:sort-by") || "top",
     time: localStorage.getItem("reddit:sort-time") || "month",
@@ -69,7 +71,7 @@ let lastScroll = 0;
 let requestQueue = [];
 let requestAfter = null;
 
-// eslint-disable-next-line no-unused-vars
+// eslint-disable-next-line no-unused-vars, no-redeclare
 let gridUpdateTabs, gridUpdatePostsVisual;
 
 // eslint-disable-next-line no-unused-vars

manifest.json

@@ -8,6 +8,7 @@
         "OptionsMenu.js",
         "SortBox.js",
         "TabBar.js",
-        "Settings.js"
+        "Settings.js",
+        "ReloadModal.js"
     ]
 }

style.css

@@ -170,3 +170,18 @@ It should fix broken extension modals
 .GenericModal {
     background-color: var(--spice-player);
 }
+
+/* Need to hijack height because .GenericModal has it set to 90% via style attr... */
+.GenericModal[aria-label="Reload required"] {
+    height: 240px !important;
+}
+
+.marketplace-reload-modal__button-container {
+    display: flex;
+    justify-content: center;
+    padding-top: 18px;
+}
+.marketplace-reload-modal__button-container button {
+    margin: 18px;
+    padding: 8px 24px;
+}