feat: add update window

.eslintrc.js

@@ -1,9 +1,8 @@
-// eslint-disable-next-line no-undef
 module.exports = {
-  "ignorePatterns": ["node_modules", "dist"],
+  "ignorePatterns": ["node_modules", "dist", ".eslintrc.js", "spicetify.d.ts"],
   "env": {
     "browser": true,
-    "es2021": true,
+    "es2022": true,
   },
   "extends": [
     "eslint:recommended",
@@ -12,11 +11,8 @@ module.exports = {
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true,
-    },
-    "ecmaVersion": "latest",
     "sourceType": "module",
+    "project": ["tsconfig.json"],
   },
   "plugins": [
     "react",
@@ -64,7 +60,7 @@ module.exports = {
   "settings": {
     "react": {
       // This is what Spotify uses
-      "version": "17",
+      "version": "17.0.2",
     },
   },
 };

package.json

@@ -2,10 +2,7 @@
 	"name": "spicetify-marketplace",
 	"version": "0.9.2",
 	"homepage": "https://github.com/spicetify/spicetify-marketplace",
-	"repository": {
-		"type": "git",
-		"url": "[email protected]:spicetify/spicetify-marketplace.git"
-	},
+	"repository": "github:spicetify/spicetify-marketplace",
 	"bugs": {
 		"url": "https://github.com/spicetify/spicetify-marketplace/issues"
 	},
@@ -19,7 +16,8 @@
 		"lint:ci": "eslint src",
 		"type-check": "tsc --noEmit",
 		"watch": "spicetify-creator --watch",
-		"prepare": "husky install"
+		"prepare": "husky install",
+		"update-types": "curl -s -o src/types/spicetify.d.ts https://raw.githubusercontent.com/spicetify/spicetify-cli/master/globals.d.ts"
 	},
 	"engines": {
 		"yarn": "please-use-pnpm",
@@ -29,8 +27,8 @@
 	},
 	"devDependencies": {
 		"@types/chroma-js": "^2.4.2",
-		"@types/react": "^17.0.65",
-		"@types/react-dom": "^17.0.20",
+		"@types/react": "17.0.2",
+		"@types/react-dom": "17.0.2",
 		"@types/semver": "^7.5.4",
 		"@typescript-eslint/eslint-plugin": "^6.9.1",
 		"@typescript-eslint/parser": "^6.9.1",
@@ -46,7 +44,6 @@
 		"react-i18next": "^13.3.1",
 		"react-simple-code-editor": "^0.13.1",
 		"semver": "^7.5.4",
-		"spcr-whats-new": "^1.0.1",
 		"spicetify-creator": "^1.0.16",
 		"typescript": "^5.2.2",
 		"util": "^0.12.5"

src/app.tsx

@@ -42,21 +42,7 @@ i18n
     },
   });
 
-// TODO: the mono-stylesheet doesn't seem to import nested component stylesheets properly on build?
-// import './styles/styles.scss';
-import "./styles/components/_grid.scss";
-import "./styles/components/_dropdown.scss";
-import "./styles/components/_card.scss";
-import "./styles/components/_settings.scss";
-import "./styles/components/_reload-modal.scss";
-import "./styles/components/_add-snippet-modal.scss";
-import "./styles/components/_readme-pages.scss";
-import "./styles/components/_fixes.scss";
-import "./styles/components/prismjs-themes/prism-tomorrow.scss";
-import "./styles/components/_devtools.scss";
-import "./styles/components/_code-editors.scss";
-import "./styles/components/_backup.scss";
-
+import "./styles/styles.scss";
 import Grid from "./components/Grid";
 import ReadmePage from "./components/ReadmePage";
 import { getLocalStorageDataFromKey } from "./logic/Utils";

src/components/Grid.tsx

@@ -11,7 +11,7 @@ import { getLocalStorageDataFromKey,
   generateSortOptions,
   sortCardItems,
 } from "../logic/Utils";
-import { LOCALSTORAGE_KEYS, ITEMS_PER_REQUEST, MARKETPLACE_VERSION, LATEST_RELEASE } from "../constants";
+import { LOCALSTORAGE_KEYS, ITEMS_PER_REQUEST, MARKETPLACE_VERSION, LATEST_RELEASE_URL } from "../constants";
 import { openModal } from "../logic/LaunchModals";
 import {
   getTaggedRepos,
@@ -27,7 +27,6 @@ import { TopBarContent } from "./TabBar";
 import Card from "./Card/Card";
 import Button from "./Button";
 import DownloadIcon from "./Icons/DownloadIcon";
-import Changelog from "./Modals/Changelog";
 
 class Grid extends React.Component<
 {
@@ -457,11 +456,11 @@ class Grid extends React.Component<
   */
   async componentDidMount() {
     // Checks for new Marketplace updates
-    fetch(LATEST_RELEASE).then(res => res.json()).then(
+    fetch(LATEST_RELEASE_URL).then(res => res.json()).then(
       result => {
         if (result.message) throw result;
         this.setState({
-          version: result[0].name,
+          version: result.name,
         });
 
         try {
@@ -475,8 +474,6 @@ class Grid extends React.Component<
       },
     );
 
-    Changelog();
-
     this.gridUpdateTabs = this.updateTabs.bind(this);
     this.gridUpdatePostsVisual = this.updatePostsVisual.bind(this);
 
@@ -541,7 +538,7 @@ class Grid extends React.Component<
           <div className="marketplace-header__left">
             {this.state.newUpdate
               ? <button type="button" title={t("grid.newUpdate")} className="marketplace-header-icon-button" id="marketplace-update"
-                onClick={() => window.location.href = "https://github.com/spicetify/spicetify-marketplace/releases/latest"}
+                onClick={() => openModal("UPDATE")}
               >
                 <DownloadIcon />
                 &nbsp;{this.state.version}

src/components/Modals/Update/index.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { t } from "i18next";
+
+import {
+  LATEST_RELEASE_URL,
+  MARKETPLACE_VERSION,
+  RELEASES_URL,
+} from "../../../constants";
+import { getMarkdownHTML } from "../../../logic/Utils";
+
+async function fetchLatestReleaseInfo(): Promise<{
+  version: string;
+  changelog: string | null;
+} | null> {
+  try {
+    const result = await fetch(LATEST_RELEASE_URL);
+    const resultJson = await result.json();
+    const { body, tag_name, message } = resultJson;
+    return body && tag_name && !message
+      ? {
+        version: tag_name.replace("v", ""),
+        changelog: await getMarkdownHTML(
+          body.match(/## What's Changed([\s\S]*?)\r\n\r/)[1],
+          "spicetify",
+          "spicetify-marketplace",
+        ),
+      }
+      : null;
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+}
+
+function UpdateModal(): React.ReactElement {
+  const [releaseInfo, setReleaseInfo] = React.useState<{
+    version: string;
+    changelog: string | null;
+  } | null>(null);
+
+  React.useEffect(() => {
+    fetchLatestReleaseInfo().then((releaseInfo) => setReleaseInfo(releaseInfo));
+  }, []);
+
+  return (
+    <div id="marketplace-update-container">
+      <div id="marketplace-update-description">
+        <h4>{t("updateModal.description")}</h4>
+        <a href={`${RELEASES_URL}/tag/v${MARKETPLACE_VERSION}`}>
+          {t("updateModal.currentVersion", { version: MARKETPLACE_VERSION })}
+        </a>
+        <a href={`${RELEASES_URL}/tag/v${releaseInfo?.version}`}>
+          {t("updateModal.latestVersion", { version: releaseInfo?.version })}
+        </a>
+      </div>
+      <hr />
+      <div id="marketplace-update-whats-changed">
+        <h3 className="marketplace-update-header">
+          {t("updateModal.whatsChanged")}
+        </h3>
+        <details>
+          <summary>{t("updateModal.seeChangelog")}</summary>
+          <ul
+            dangerouslySetInnerHTML={{ __html: releaseInfo?.changelog ?? "" }}
+          />
+        </details>
+      </div>
+      <hr />
+      <div id="marketplace-update-guide">
+        <h3 className="marketplace-update-header">{t("updateModal.howToUpgrade")}</h3>
+        <a href="https://github.com/spicetify/spicetify-marketplace/wiki/Installation">
+          {t("updateModal.viewGuide")}
+        </a>
+      </div>
+    </div>
+  );
+}
+
+export default UpdateModal;

src/constants.ts

@@ -43,7 +43,6 @@ export const SNIPPETS_PAGE_URL =
 export const BLACKLIST_URL =
 	"https://raw.githubusercontent.com/spicetify/spicetify-marketplace/main/resources/blacklist.json";
 
-export const LATEST_RELEASE =
-	"https://api.github.com/repos/spicetify/spicetify-marketplace/releases";
+export const RELEASES_URL = "https://github.com/spicetify/spicetify-marketplace/releases";
 
-export const RELEASE_CHANGELOG = `https://api.github.com/repos/spicetify/spicetify-marketplace/releases/tags/v${MARKETPLACE_VERSION}`;
+export const LATEST_RELEASE_URL = "https://api.github.com/repos/spicetify/spicetify-marketplace/releases/latest";

src/logic/LaunchModals.tsx

@@ -7,9 +7,10 @@ import ReloadModal from "../components/Modals/Reload";
 import SettingsModal from "../components/Modals/Settings";
 import ThemeDevToolsModal from "../components/Modals/ThemeDevTools";
 import BackupModal from "../components/Modals/BackupModal";
+import UpdateModal from "../components/Modals/Update";
 import { CardProps } from "../components/Card/Card";
 
-export type ModalType = "ADD_SNIPPET" | "EDIT_SNIPPET" | "VIEW_SNIPPET" | "RELOAD" | "SETTINGS" | "THEME_DEV_TOOLS" | "BACKUP";
+export type ModalType = "ADD_SNIPPET" | "EDIT_SNIPPET" | "VIEW_SNIPPET" | "RELOAD" | "SETTINGS" | "THEME_DEV_TOOLS" | "BACKUP" | "UPDATE";
 
 const getModalSettings = (
   modalType: ModalType,
@@ -62,6 +63,12 @@ const getModalSettings = (
       content: <BackupModal />,
       isLarge: true,
     };
+  case "UPDATE":
+    return {
+      title: t("updateModal.title"),
+      content: <UpdateModal />,
+      isLarge: true,
+    };
 
   default:
     return {

src/resources/locales/en.json

@@ -72,6 +72,16 @@
       "colorIniEditorPlaceholder": "[your-colour-scheme-name]",
       "invalidCSS": "Invalid CSS"
     },
+    "updateModal": {
+      "title": "Update the Marketplace",
+      "description": "Update Spicetify Marketplace to receive new features and bug fixes.",
+      "currentVersion": "Current version: {{version}}",
+      "latestVersion": "Latest version: {{version}}",
+      "whatsChanged": "What's Changed",
+      "seeChangelog": "See changelog",
+      "howToUpgrade": "How to upgrade",
+      "viewGuide": "View install guide"
+    },
     "grid": {
       "spicetifyMarketplace": "Spicetify Marketplace",
       "newUpdate": "New update",

src/resources/locales/ru.json

@@ -72,6 +72,16 @@
       "colorIniEditorPlaceholder": "[название-вашей-цветовой-схемы]",
       "invalidCSS": "Неверный CSS"
     },
+    "updateModal": {
+      "title": "Обновление Маркетплейса",
+      "description": "Обновите Маркетплейс для получения новых функций и исправлений.",
+      "currentVersion": "Текущая версия: {{version}}",
+      "latestVersion": "Последняя версия: {{version}}",
+      "whatsChanged": "Что нового",
+      "seeChangelog": "Посмотреть изменения",
+      "howToUpgrade": "Инструкция по обновлению",
+      "viewGuide": "Посмотреть инструкцию"
+    },
     "grid": {
       "spicetifyMarketplace": "Маркетплейс Spicetify",
       "newUpdate": "Доступно обновление",