feat(Grid): add update checker

package.json

@@ -35,6 +35,7 @@
     "prismjs": "^1.28.0",
     "react-dropdown": "^1.10.0",
     "react-simple-code-editor": "^0.11.2",
+    "spcr-whats-new": "^1.0.1",
     "spicetify-creator": "^1.0.10",
     "typescript": "^4.7.3"
   }

src/components/Grid.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { CardItem, CardType, Config, SchemeIni, Snippet, TabItemConfig, TabType } from "../types/marketplace-types";
 import { getLocalStorageDataFromKey, generateSchemesOptions, injectColourScheme } from "../logic/Utils";
-import { LOCALSTORAGE_KEYS, ITEMS_PER_REQUEST } from "../constants";
+import { LOCALSTORAGE_KEYS, ITEMS_PER_REQUEST, MARKETPLACE_VERSION } from "../constants";
 import { openModal } from "../logic/LaunchModals";
 import {
   getExtensionRepos, fetchExtensionManifest,
@@ -15,6 +15,8 @@ import SortBox from "./Sortbox";
 import { TopBarContent } from "./TabBar";
 import Card from "./Card/Card";
 import Button from "./Button";
+import DownloadIcon from "./Icons/DownloadIcon";
+import whatsNew from "./Modals/Changelog";
 
 export default class Grid extends React.Component<
 {
@@ -24,6 +26,7 @@ export default class Grid extends React.Component<
 },
 {
   // TODO: add types
+  version: string,
   searchValue: string,
   cards: Card[],
   tabs: TabItemConfig[],
@@ -45,6 +48,7 @@ export default class Grid extends React.Component<
     };
 
     this.state = {
+      version: MARKETPLACE_VERSION,
       searchValue: "",
       cards: [],
       tabs: props.CONFIG.tabs,
@@ -349,6 +353,20 @@ export default class Grid extends React.Component<
   * If the cardList isn't loaded, it loads the cardList.
   */
   async componentDidMount() {
+    // Checks for new Marketplace updates
+    fetch("https://raw.githubusercontent.com/spicetify/spicetify-marketplace/main/package.json").then(res => res.json()).then(
+      result => {
+        this.setState({
+          version: result.version,
+        });
+      },
+      error => {
+        console.log("Failed to check for updates", error);
+      },
+    );
+
+    whatsNew;
+
     this.gridUpdateTabs = this.updateTabs.bind(this);
     this.gridUpdatePostsVisual = this.updatePostsVisual.bind(this);
 
@@ -406,11 +424,26 @@ export default class Grid extends React.Component<
     return this.state.activeScheme;
   }
 
+  changelogModal() {
+    return Changelog;
+  }
+
   render() {
     return (
+
       <section className="contentSpacing">
         <div className="marketplace-header">
-          <h1>{this.props.title}</h1>
+          <div className="marketplace-header__left">
+            <h1>{this.props.title}</h1>
+            {this.state.version !== MARKETPLACE_VERSION
+              ? <button type="button" title="New update" className="marketplace-update" id="marketplace-update"
+                onClick={() => window.location.href = "https://github.com/spicetify/spicetify-marketplace"}
+              >
+                <DownloadIcon />
+                &nbsp;{this.state.version}
+              </button>
+              : null}
+          </div>
           <div className="marketplace-header__right">
             {/* Show colour scheme dropdown if there is a theme with schemes installed */}
 
@@ -420,58 +453,53 @@ export default class Grid extends React.Component<
               sortBoxOptions={generateSchemesOptions(this.state.schemes)}
               // It doesn't work when I directly use CONFIG.theme.activeScheme in the sortBySelectedFn
               // because it hardcodes the value into the fn
-              sortBySelectedFn={(a) => a.key === this.getActiveScheme()}
-
-            /> : null}
+              sortBySelectedFn={(a) => a.key === this.getActiveScheme()} /> : null}
+            <div className="searchbar--bar__wrapper">
+              <input
+                className="searchbar-bar"
+                type="text"
+                placeholder={`Search ${this.CONFIG.activeTab}...`}
+                value={this.state.searchValue}
+                onChange={(event) => {
+                  this.setState({ searchValue: event.target.value });
+                } }
+                onKeyDown={(event) => {
+                  if (event.key === "Enter") {
+                    this.setState({ endOfList: false });
+                    this.newRequest(ITEMS_PER_REQUEST, this.state.searchValue.trim().toLowerCase());
+                    this.searchRequested = true;
+                  } else if ( // Refreshes result when user deletes all queries
+                    ((event.key === "Backspace") || (event.key === "Delete")) &&
+                    this.searchRequested &&
+                    this.state.searchValue.trim() === "") {
+                    this.setState({ endOfList: false });
+                    this.newRequest(ITEMS_PER_REQUEST, this.state.searchValue.trim().toLowerCase());
+                    this.searchRequested = false;
+                  }
+                } } />
+            </div>
             <button type="button" title="Settings" className="marketplace-settings-button" id="marketplace-settings-button"
               onClick={() => openModal("SETTINGS", this.CONFIG, this.updateAppConfig)}
             >
               <SettingsIcon />
             </button>
           </div>
         </div>
-        {
-          <div className="searchbar--bar__wrapper">
-            <input
-              className="searchbar-bar"
-              type="text"
-              placeholder={`Search ${this.CONFIG.activeTab}...`}
-              value={this.state.searchValue}
-              onChange={(event) => {
-                this.setState({ searchValue: event.target.value });
-              }}
-              onKeyDown={(event) => {
-                if (event.key === "Enter") {
-                  this.setState({ endOfList: false });
-                  this.newRequest(ITEMS_PER_REQUEST, this.state.searchValue.trim().toLowerCase());
-                  this.searchRequested = true;
-                } else if ( // Refreshes result when user deletes all queries
-                  ((event.key === "Backspace") || (event.key === "Delete")) &&
-                  this.searchRequested &&
-                  this.state.searchValue.trim() === ""
-                ) {
-                  this.setState({ endOfList: false });
-                  this.newRequest(ITEMS_PER_REQUEST, this.state.searchValue.trim().toLowerCase());
-                  this.searchRequested = false;
-                }}} />
-          </div>
-        }
         {/* Add a header and grid for each card type if it has any cards */}
         {[
           { handle: "extension", name: "Extensions" },
           { handle: "theme", name: "Themes" },
           { handle: "snippet", name: "Snippets" },
         ].map((cardType) => {
           const cardsOfType = this.cardList.filter((card) => card.props.type === cardType.handle)
-            .filter((card) => { // Search filter
+            .filter((card) => {
               const { searchValue } = this.state;
               const { title, user } = card.props.item;
 
-              if (
-                searchValue.trim() === "" ||
+              if (searchValue.trim() === "" ||
                 title.toLowerCase().includes(searchValue.trim().toLowerCase()) ||
-                user?.toLowerCase().includes(searchValue.trim().toLowerCase())
-              ) return card;
+                user?.toLowerCase().includes(searchValue.trim().toLowerCase()))
+                return card;
             })
             .map((card) => {
               // Clone the cards and update the prop to trigger re-render
@@ -513,8 +541,7 @@ export default class Grid extends React.Component<
         <TopBarContent
           switchCallback={this.switchTo.bind(this)}
           links={this.CONFIG.tabs}
-          activeLink={this.CONFIG.activeTab}
-        />
+          activeLink={this.CONFIG.activeTab} />
       </section>
     );
   }

src/components/Modals/Changelog/index.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import whatsNew from "spcr-whats-new";
+import { MARKETPLACE_VERSION } from "../../../constants";
+
+const changelogDetails = (
+  <>
+    <h2>0.6.1</h2>
+    <ul>
+      <li>Fixed Readme pages sometimes missing scrollbar{" "}
+        <a href="https://github.com/spicetify/spicetify-marketplace/issues/113">(#113)</a>
+      </li>
+      <li>General improvements</li>
+    </ul>
+    <h2>0.6.0</h2>
+    <ul>
+      <li>Patched{" "}
+        <a href="https://github.com/spicetify/spicetify-marketplace/commit/6636908f86be91b84e381c2a2424a37b394b5119">createPortal</a>
+        {" "} error that makes Marketplace unable to start
+      </li>
+      <li>You can now preview snippets&apos; content by clicking on its card!{" "}
+        <a href="https://github.com/spicetify/spicetify-marketplace/pull/225">(#225)</a>
+      </li>
+      <li>Snippets now have preview images, and you can add your own also{" "}
+        <a href="https://github.com/spicetify/spicetify-marketplace/pull/226">(#226)</a>
+      </li>
+      <li>General improvements</li>
+    </ul>
+  </>
+);
+
+export default whatsNew(
+  "marketplace",
+  // This semver version is only used to trigger the Changelog modal and must be bumped simutaneously as MARKETPLACE_VERSION
+  "1.0.0",
+  {
+    title: `✨ Marketplace v${MARKETPLACE_VERSION}`,
+    content: changelogDetails,
+    isLarge: true,
+  },
+);

src/styles/components/_grid.scss

@@ -15,21 +15,21 @@
   flex-direction: row-reverse;
   top: 80px;
   z-index: 1;
-
-  h1 {
-    position: fixed;
-    left: 16px;
-
-    @media (min-width: 1024px) {
-      left: 32px;
-    }
-  }
 }
 
-.marketplace-header__right {
+.marketplace-header__right, .marketplace-header__left {
   display: flex;
 }
 
+.marketplace-header__left {
+  position: fixed;
+  left: 16px;
+
+  @media (min-width: 1024px) {
+    left: 32px;
+  }
+}
+
 .marketplace-grid {
   --minimumColumnWidth: 180px;
   --column-width: minmax(var(--minimumColumnWidth),1fr);
@@ -94,12 +94,13 @@
   margin-left: 8px;
 }
 
-.marketplace-settings-button {
+.marketplace-settings-button, .marketplace-update {
   border-radius: 4px;
   color: var(--spice-text);
   display: inline-block;
   padding: 10px 14px 6px;
   margin-left: 8px;
+  font-weight: bold;
   position: relative;
   text-decoration: none !important;
   cursor: pointer;

yarn.lock

@@ -2318,7 +2318,7 @@ semver@^6.3.0:
   resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
-semver@^7.2.1, semver@^7.3.7:
+semver@^7.2.1, semver@^7.3.5, semver@^7.3.7:
   version "7.3.7"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
   integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
@@ -2421,6 +2421,13 @@ source-map@~0.8.0-beta.0:
   dependencies:
     whatwg-url "^7.0.0"
 
+spcr-whats-new@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/spcr-whats-new/-/spcr-whats-new-1.0.1.tgz#cafa24ceb0d2f21bf432975c32c14c27907bc7dc"
+  integrity sha512-hLr3PvgVGVqRoDdJEfPxjdmOeJMz0uzjfELk2QBYQT0ulxPkUXEBqe7/scNTdi/Z1mwy1gIZNNjnpOORk1Xwug==
+  dependencies:
+    semver "^7.3.5"
+
 spicetify-creator@^1.0.10:
   version "1.0.10"
   resolved "https://registry.npmjs.org/spicetify-creator/-/spicetify-creator-1.0.10.tgz"