feat(grid): remove unsupported sorting options on snippets page

src/components/Card/Card.tsx

@@ -40,6 +40,7 @@ class Card extends React.Component<CardProps, {
   tagsExpanded: boolean;
   externalUrl: string;
   lastUpdated: string | undefined;
+  created: string | undefined;
 }> {
   // Theme stuff
   // cssURL?: string;
@@ -83,6 +84,7 @@ class Card extends React.Component<CardProps, {
         ? `https://github.com/${this.props.item.user}/${this.props.item.repo}`
         : "",
       lastUpdated: (this.props.item.user && this.props.item.repo) ? this.props.item.lastUpdated : undefined,
+      created: (this.props.item.user && this.props.item.repo) ? this.props.item.created : undefined,
     };
   }
 
@@ -168,7 +170,7 @@ class Card extends React.Component<CardProps, {
       Spicetify.showNotification("There was an error installing extension", true);
       return;
     }
-    const { manifest, title, subtitle, authors, user, repo, branch, imageURL, extensionURL, readmeURL, lastUpdated } = this.props.item;
+    const { manifest, title, subtitle, authors, user, repo, branch, imageURL, extensionURL, readmeURL, lastUpdated, created } = this.props.item;
     localStorage.setItem(this.localStorageKey, JSON.stringify({
       manifest,
       type: this.props.type,
@@ -183,6 +185,7 @@ class Card extends React.Component<CardProps, {
       readmeURL,
       stars: this.state.stars,
       lastUpdated,
+      created,
     }));
 
     // Add to installed list if not there already
@@ -241,7 +244,7 @@ class Card extends React.Component<CardProps, {
     // Add to localstorage (this stores a copy of all the card props in the localstorage)
     // TODO: refactor/clean this up
 
-    const { manifest, title, subtitle, authors, user, repo, branch, imageURL, extensionURL, readmeURL, cssURL, schemesURL, include, lastUpdated } = item;
+    const { manifest, title, subtitle, authors, user, repo, branch, imageURL, extensionURL, readmeURL, cssURL, schemesURL, include, lastUpdated, created } = item;
 
     localStorage.setItem(this.localStorageKey, JSON.stringify({
       manifest,
@@ -265,6 +268,7 @@ class Card extends React.Component<CardProps, {
       schemes: parsedSchemes,
       activeScheme,
       lastUpdated,
+      created,
     }));
 
     // TODO: handle this differently?

src/components/Grid.tsx

@@ -209,7 +209,7 @@ class Grid extends React.Component<
 
         if (repoExtensions && repoExtensions.length) {
           extensions.push(...repoExtensions.map((extension) => ({
-            ...extension, lastUpdated: repo.pushed_at,
+            ...extension, lastUpdated: repo.pushed_at, created: repo.created_at,
           })));
         }
       }
@@ -287,6 +287,7 @@ class Grid extends React.Component<
             (theme) => ({
               ...theme,
               lastUpdated: repo.pushed_at,
+              created: repo.created_at,
             }),
           ));
         }
@@ -330,6 +331,7 @@ class Grid extends React.Component<
           apps.push(...repoApps.map((app) => ({
             ...app,
             lastUpdated: repo.pushed_at,
+            created: repo.created_at,
           })));
         }
       }
@@ -533,6 +535,7 @@ class Grid extends React.Component<
 
   render() {
     const { t } = this.props;
+    const { activeTab } = this.CONFIG;
     return (
       <section className="contentSpacing">
         <div className="marketplace-header">
@@ -549,7 +552,7 @@ class Grid extends React.Component<
             <h2 className="marketplace-header__label">{t("grid.sort.label")}</h2>
             <SortBox
               onChange={(value) => this.updateSort(value)}
-              sortBoxOptions={generateSortOptions(t)}
+              sortBoxOptions={generateSortOptions(t, activeTab)}
               sortBySelectedFn={(a) => a.key === this.CONFIG.sort} />
           </div>
           <div className="marketplace-header__right">

src/logic/Utils.ts

@@ -196,20 +196,29 @@ export const generateSchemesOptions = (schemes: SchemeIni) => {
  * @param t The string translation function
  * @returns The sort options for the sort dropdown
  */
-export const generateSortOptions = (t: (key: string) => string) => {
+export const generateSortOptions = (t: (key: string) => string, activeTab: string) => {
   // TODO: It would be great if I could disable the options that don't apply for snippets
   // But it looks like that's not supported by the library
   // https://github.com/fraserxu/react-dropdown/pull/176
   // TODO: I could also just remove the options for snippets,
   // but then the sort resets when you switch tabs and it's disruptive
 
-  return [
-    { key: "stars", value: t("grid.sort.stars") },
-    { key: "newest", value: t("grid.sort.newest") },
-    { key: "oldest", value: t("grid.sort.oldest") },
-    { key: "a-z", value: t("grid.sort.aToZ") },
-    { key: "z-a", value: t("grid.sort.zToA") },
-  ];
+  if (activeTab !== "Snippets") {
+    return [
+      { key: "stars", value: t("grid.sort.stars") },
+      { key: "newest", value: t("grid.sort.newest") },
+      { key: "oldest", value: t("grid.sort.oldest") },
+      { key: "lastUpdated", value: t("grid.sort.lastUpdated") },
+      { key: "mostStale", value: t("grid.sort.mostStale") },
+      { key: "a-z", value: t("grid.sort.aToZ") },
+      { key: "z-a", value: t("grid.sort.zToA") },
+    ];
+  } else {
+    return [
+      { key: "a-z", value: t("grid.sort.aToZ") },
+      { key: "z-a", value: t("grid.sort.zToA") },
+    ];
+  }
 };
 /**
  * Reset Marketplace localStorage keys
@@ -613,6 +622,19 @@ const compareNames = (a: CardItem | Snippet, b: CardItem | Snippet) => {
   return aName.localeCompare(bName);
 };
 
+/**
+ * Compare two card items/snippets by created.
+ * This is skipped for snippets, since they don't have a created property.
+ */
+const compareCreated = (a: CardItem | Snippet, b: CardItem | Snippet) => {
+  // Abort compare if items are missing created
+  if (a.created === undefined || b.created === undefined) return 0;
+
+  const aDate = new Date(a.created);
+  const bDate = new Date(b.created);
+  return bDate.getTime() - aDate.getTime();
+};
+
 /**
  * Compare two card items/snippets by lastUpdated.
  * This is skipped for snippets, since they don't have a lastUpdated property.
@@ -635,9 +657,15 @@ export const sortCardItems = (cardItems: CardItem[] | Snippet[], sortMode: strin
     cardItems.sort((a, b) => compareNames(b, a));
     break;
   case "newest":
-    cardItems.sort((a, b) => compareUpdated(a, b));
+    cardItems.sort((a, b) => compareCreated(a, b));
     break;
   case "oldest":
+    cardItems.sort((a, b) => compareCreated(b, a));
+    break;
+  case "lastUpdated":
+    cardItems.sort((a, b) => compareUpdated(a, b));
+    break;
+  case "mostStale":
     cardItems.sort((a, b) => compareUpdated(b, a));
     break;
   case "stars":

src/resources/locales/en.json

@@ -87,6 +87,8 @@
         "stars": "Stars",
         "newest": "Newest",
         "oldest": "Oldest",
+        "lastUpdated": "Last Updated",
+        "mostStale": "Most Stale",
         "aToZ": "A-Z",
         "zToA": "Z-A"
       }

src/types/marketplace-types.d.ts

@@ -57,6 +57,7 @@ export type Snippet = {
   schemesURL: undefined;
   include: undefined;
   lastUpdated: undefined;
+  created: undefined;
 };
 
 // From `fetchExtensionManifest()` and `fetchThemeManifest()`
@@ -91,8 +92,8 @@ export type CardItem = {
   stars: number;
   tags: string[];
   lastUpdated: string;
+  created: string;
   name: string;
-  lastUpdated: string;
   stargazers_count: number;
   // For themes only
   cssURL?: string;
@@ -153,7 +154,7 @@ export type SchemeIni = {
   [key: string]: ColourScheme;
 };
 
-export type SortMode = "a-z" | "z-a" | "newest" | "oldest" | "stars";
+export type SortMode = "a-z" | "z-a" | "newest" | "oldest" | "stars" | "lastUpdated" | "mostStale";
 
 export type Config = {
   // Fetch the settings and set defaults. Used in Settings.js