feat(Snippet): preview & edit snippets

src/components/Card/Card.tsx

@@ -16,7 +16,7 @@ import AuthorsDiv from "./AuthorsDiv";
 import TagsDiv from "./TagsDiv";
 import Button from "../Button";
 
-type CardProps = {
+export type CardProps = {
   // From `fetchExtensionManifest()`, `fetchThemeManifest()`, and snippets.json
   item: CardItem | Snippet;
 
@@ -385,7 +385,17 @@ export default class Card extends React.Component<CardProps, {
     }
 
     return (
-      <div className={cardClasses.join(" ")} onClick={() => this.openReadme()}>
+      <div className={cardClasses.join(" ")} onClick={() => {
+        if (this.props.type === "snippet") {
+          const processedName = this.props.item.title.replace(/\n/g, "");
+
+          if (getLocalStorageDataFromKey(`marketplace:installed:snippet:${processedName}`)?.custom)
+            return openModal("EDIT_SNIPPET", undefined, undefined, this.props);
+
+          openModal("VIEW_SNIPPET", undefined, undefined, this.props);
+        } else this.openReadme();
+      }
+      }>
         <div className="main-card-draggable" draggable="true">
           <div className="main-card-imageContainer">
             <div className="main-cardImage-imageWrapper">

src/components/Modals/AddSnippet/index.tsx → src/components/Modals/Snippet/index.tsx

@@ -5,30 +5,43 @@ import {
 } from "../../../logic/Utils";
 import { LOCALSTORAGE_KEYS } from "../../../constants";
 import Button from "../../Button";
+import { CardProps } from "../../Card/Card";
+import { ModalType } from "../../../logic/LaunchModals";
 
-const AddSnippetModal = () => {
-  const [code, setCode] = React.useState("");
-  const [name, setName] = React.useState("");
-  const [description, setDescription] = React.useState("");
+const SnippetModal = (props: { content?: CardProps, type: ModalType }) => {
+  const [code, setCode] = React.useState(props.type === "ADD_SNIPPET" ? "" : props.content?.item.code || "");
+  const [name, setName] = React.useState(props.type === "ADD_SNIPPET" ? "" : props.content?.item.title || "");
+  const [description, setDescription] = React.useState(props.type === "ADD_SNIPPET" ? "" : props.content?.item.description || "");
 
   const saveSnippet = () => {
     const processedCode = code.replace(/\n/g, "");
     const processedName = name.replace(/\n/g, "");
     const processedDescription = description.trim();
 
     const localStorageKey = `marketplace:installed:snippet:${processedName}`;
-    if (getLocalStorageDataFromKey(localStorageKey)) {
-      alert("That name is already taken!");
+    if (getLocalStorageDataFromKey(localStorageKey) && props.type !== "EDIT_SNIPPET") {
+      Spicetify.showNotification("That name is already taken!");
       return;
     }
 
     console.log(`Installing snippet: ${processedName}`);
+    if (props.content && props.content.item.title !== processedName) {
+      // Remove from installed list
+      console.log(`Deleting outdated snippet: ${props.content.item.title}`);
+
+      localStorage.removeItem(`marketplace:installed:snippet:${props.content.item.title}`);
+      const installedSnippetKeys = getLocalStorageDataFromKey(LOCALSTORAGE_KEYS.installedSnippets, []);
+      const remainingInstalledSnippetKeys = installedSnippetKeys.filter((key: string) => key !== `marketplace:installed:snippet:${props.content?.item.title}`);
+      localStorage.setItem(LOCALSTORAGE_KEYS.installedSnippets, JSON.stringify(remainingInstalledSnippetKeys));
+    }
+
     localStorage.setItem(
       localStorageKey,
       JSON.stringify({
         code: processedCode,
         description: processedDescription,
         title: processedName,
+        custom: true,
       }),
     );
 
@@ -39,6 +52,7 @@ const AddSnippetModal = () => {
     );
     if (installedSnippetKeys.indexOf(localStorageKey) === -1) {
       installedSnippetKeys.push(localStorageKey);
+      console.log(installedSnippetKeys);
       localStorage.setItem(
         LOCALSTORAGE_KEYS.installedSnippets,
         JSON.stringify(installedSnippetKeys),
@@ -50,6 +64,7 @@ const AddSnippetModal = () => {
     initializeSnippets(installedSnippets);
 
     Spicetify.PopupModal.hide();
+    if (props.type === "EDIT_SNIPPET") location.reload();
   };
 
   return (
@@ -58,14 +73,20 @@ const AddSnippetModal = () => {
         <label htmlFor="marketplace-custom-css">Custom CSS</label>
         <textarea id="marketplace-custom-css"
           rows={4} cols={50}
-          value={code} onChange={(e) => setCode(e.target.value)}
+          value={code} onChange={(e) => {
+            if (props.type !== "VIEW_SNIPPET")
+              setCode(e.target.value);
+          }}
           placeholder="Input your own custom CSS here! You can find them in the installed tab for management."
         />
       </div>
       <div className="marketplace-customCSS-input-container">
         <label htmlFor="marketplace-customCSS-name-submit">Snippet Name</label>
         <input id="marketplace-customCSS-name-submit"
-          value={name} onChange={(e) => setName(e.target.value)}
+          value={name} onChange={(e) => {
+            if (props.type !== "VIEW_SNIPPET")
+              setName(e.target.value);
+          }}
           placeholder="Enter a name for your custom snippet."
         />
       </div>
@@ -74,15 +95,19 @@ const AddSnippetModal = () => {
           Snippet Description
         </label>
         <input id="marketplace-customCSS-description-submit"
-          value={description} onChange={(e) => setDescription(e.target.value)}
+          value={description} onChange={(e) => {
+            if (props.type !== "VIEW_SNIPPET")
+              setDescription(e.target.value);
+          }}
           placeholder="Enter a description for your custom snippet."
         />
       </div>
-      <Button onClick={saveSnippet}>
-        Save CSS
-      </Button>
+      {props.type !== "VIEW_SNIPPET"
+        ? <Button onClick={saveSnippet}>
+          Save CSS
+        </Button>
+        : <></>}
     </div>
   );
 };
-
-export default AddSnippetModal;
+export default SnippetModal;

src/extensions/extension.tsx

@@ -29,7 +29,7 @@ import {
   }
 
   // Show message on start.
-  Spicetify.showNotification("Loaded Marketplace extension!");
+  // Spicetify.showNotification("Loaded Marketplace extension!");
 
   // Expose useful methods in global context
   window.Marketplace = {

src/logic/LaunchModals.tsx

@@ -1,22 +1,36 @@
 import React from "react";
 import { Config } from "../types/marketplace-types";
 
-import AddSnippetModal from "../components/Modals/AddSnippet";
+import SnippetModal from "../components/Modals/Snippet";
 import ReloadModal from "../components/Modals/Reload";
 import SettingsModal from "../components/Modals/Settings";
+import { CardProps } from "../components/Card/Card";
 
-type ModalType = "ADD_SNIPPET" | "RELOAD" | "SETTINGS";
+export type ModalType = "ADD_SNIPPET" | "EDIT_SNIPPET" | "VIEW_SNIPPET" | "RELOAD" | "SETTINGS";
 
 const getModalSettings = (
   modalType: ModalType,
   CONFIG?: Config,
   updateAppConfig?: (CONFIG: Config) => void,
+  props?: CardProps,
 ) => {
   switch (modalType) {
   case "ADD_SNIPPET":
     return {
       title: "Add Snippet",
-      content: <AddSnippetModal />,
+      content: <SnippetModal type={modalType} />,
+      isLarge: false,
+    };
+  case "EDIT_SNIPPET":
+    return {
+      title: "Edit Snippet",
+      content: <SnippetModal type={modalType} content={props as CardProps} />,
+      isLarge: false,
+    };
+  case "VIEW_SNIPPET":
+    return {
+      title: "View Snippet",
+      content: <SnippetModal type={modalType} content={props as CardProps} />,
       isLarge: false,
     };
   case "RELOAD":
@@ -45,9 +59,10 @@ export const openModal = (
   modal: ModalType,
   CONFIG?: Config,
   updateAppConfig?: (CONFIG: Config) => void,
+  props?: CardProps,
 ) => {
   const triggerModal = () => {
-    const modalSettings = getModalSettings(modal, CONFIG, updateAppConfig);
+    const modalSettings = getModalSettings(modal, CONFIG, updateAppConfig, props);
     Spicetify.PopupModal.display(modalSettings);
   };