Plugins 2

client/src/pages/Config/index.tsx

@@ -1,4 +1,4 @@
-import {usePrompt} from "@thorium/ui/AlertDialog";
+import {useConfirm, usePrompt} from "@thorium/ui/AlertDialog";
 import Button from "@thorium/ui/Button";
 import InfoTip from "@thorium/ui/InfoTip";
 import Input from "@thorium/ui/Input";
@@ -10,24 +10,18 @@ import {useNetRequest} from "client/src/context/useNetRequest";
 import {useNetSend} from "client/src/context/useNetSend";
 import {useState} from "react";
 import {FaEdit} from "react-icons/fa";
-import {NavLink, useNavigate, useParams} from "react-router-dom";
+import {NavLink, useMatch, useNavigate} from "react-router-dom";
 
-let plugin: null | {
-  id: string;
-  name: string;
-  description: string;
-  tags: string[];
-} = null;
-const setName = (params: any) => {};
-const setDescription = (params: any) => {};
-const setTags = (params: any) => {};
 export default function Config() {
   const [error, setError] = useState(false);
   const data = useNetRequest("pluginsList");
   const netSend = useNetSend();
   const navigate = useNavigate();
-  const params = useParams();
+  const match = useMatch("/config/:pluginId/*");
+  const params = match?.params || {};
   const prompt = usePrompt();
+  const confirm = useConfirm();
+  const plugin = data.find(d => d.id === params.pluginId);
   return (
     <div className="h-full">
       <Menubar></Menubar>
@@ -42,7 +36,7 @@ export default function Config() {
                 const name = await prompt({header: "Enter plugin name"});
                 if (typeof name !== "string") return;
                 const id = await netSend("pluginCreate", {name});
-                navigate(`/config/${id}/edit`);
+                navigate(`/config/${id}`);
               }}
             >
               New Plugin
@@ -79,54 +73,94 @@ export default function Config() {
           </div>
           <div className="w-96 space-y-4">
             <Input
-              className="pb-4"
               label="Plugin Name"
               defaultValue={plugin?.name}
               isInvalid={error}
               invalidMessage="Name is required"
+              disabled={!plugin}
               onChange={() => setError(false)}
               onBlur={(e: React.FocusEvent<Element>) => {
                 const target = e.target as HTMLInputElement;
-                plugin && target.value
-                  ? setName({
-                      variables: {id: plugin.id, name: target.value},
+                if (!plugin) return;
+                target.value
+                  ? netSend("pluginSetName", {
+                      name: target.value,
+                      pluginId: plugin.id,
                     })
                   : setError(true);
               }}
             />
             <Input
-              className="pb-4"
               label="Description"
+              as="textarea"
+              className="h-64"
               defaultValue={plugin?.description}
               onChange={() => setError(false)}
+              disabled={!plugin}
               onBlur={(e: React.FocusEvent<Element>) => {
                 const target = e.target as HTMLInputElement;
-                plugin && target.value
-                  ? setDescription({
-                      variables: {id: plugin.id, description: target.value},
-                    })
-                  : setError(true);
+                plugin &&
+                  netSend("pluginSetDescription", {
+                    description: target.value,
+                    pluginId: plugin.id,
+                  });
               }}
             />
             <TagInput
               label="Tags"
               tags={plugin?.tags || []}
+              disabled={!plugin}
               onAdd={tag => {
                 if (plugin?.tags.includes(tag) || !plugin) return;
-                setTags({
-                  variables: {id: plugin.id, tags: plugin.tags.concat(tag)},
+                netSend("pluginSetTags", {
+                  tags: [...plugin.tags, tag],
+                  pluginId: plugin.id,
                 });
               }}
               onRemove={tag => {
                 if (!plugin) return;
-                setTags({
-                  variables: {
-                    id: plugin.id,
-                    tags: plugin.tags.filter(t => t !== tag),
-                  },
+                netSend("pluginSetTags", {
+                  tags: plugin.tags.filter(t => t !== tag),
+                  pluginId: plugin.id,
                 });
               }}
             />
+            <Button
+              className="w-full btn-outline btn-error"
+              disabled={!params.pluginId}
+              onClick={async () => {
+                if (
+                  !params.pluginId ||
+                  !(await confirm({
+                    header: "Are you sure you want to delete this plugin?",
+                    body: "All content in this plugin, including images and other assets, will be gone forever.",
+                  }))
+                )
+                  return;
+                netSend("pluginDelete", {pluginId: params.pluginId});
+                navigate("/config");
+              }}
+            >
+              Delete Plugin
+            </Button>
+            <Button
+              className="w-full btn-outline btn-alert"
+              disabled={!params.pluginId}
+              onClick={async () => {
+                if (!params.pluginId) return;
+                const name = await prompt({
+                  header: "What is the name of the duplicated plugin?",
+                });
+                if (!name || typeof name !== "string") return;
+                const pluginId = await netSend("pluginDuplicate", {
+                  pluginId: params.pluginId,
+                  name,
+                });
+                navigate(`/config/${pluginId}`);
+              }}
+            >
+              Duplicate Plugin
+            </Button>
           </div>
           <div>
             <label>
@@ -140,17 +174,20 @@ export default function Config() {
               <UploadWell
                 accept="image/*"
                 onChange={(files: FileList) => {
-                  // if (!plugin) return;
-                  // setCoverImage({variables: {id: plugin?.id, image: files[0]}});
+                  if (!plugin) return;
+                  netSend("pluginSetCoverImage", {
+                    pluginId: plugin.id,
+                    coverImage: files[0],
+                  });
                 }}
               >
-                {/* {plugin?.coverImage && (
-                <img
-                  src={`${plugin.coverImage}?${new Date().getTime()}`}
-                  className="w-[90%] h-[90%] object-cover"
-                  alt="Cover"
-                />
-              )} */}
+                {plugin?.coverImage && (
+                  <img
+                    src={`${plugin.coverImage}?${new Date().getTime()}`}
+                    className="w-[90%] h-[90%] object-cover"
+                    alt="Cover"
+                  />
+                )}
               </UploadWell>
             </label>
           </div>

client/vite.config.ts

@@ -45,6 +45,7 @@ export default defineConfig(async () => {
       },
       proxy: {
         "/netSend": "http://localhost:3001",
+        "/plugins": "http://localhost:3001",
       },
     },
   };

server/src/classes/Plugins/index.ts

@@ -15,16 +15,10 @@ export default class BasePlugin {
   name: string;
   author: string;
   description: string;
+  coverImage: string;
   assetPath(asset: string) {
-    return asset ? `/plugins/${this.name}/${asset}` : "";
+    return asset ? `/plugins/${this.name}/assets/${asset}` : "";
   }
-  get coverImage() {
-    return this.assetPath(this._coverImage);
-  }
-  set coverImage(value) {
-    this._coverImage = value;
-  }
-  _coverImage!: string;
 
   tags: string[];
 
@@ -33,7 +27,7 @@ export default class BasePlugin {
     this.name = params.name || "New Plugin";
     this.author = params.author || "";
     this.description = params.description || "A great plugin";
-    this.coverImage = params._coverImage || "";
+    this.coverImage = params.coverImage || "";
     this.tags = params.tags || [];
   }
   async writeFile(force?: boolean) {}
@@ -46,4 +40,12 @@ export default class BasePlugin {
     const data = {...this};
     return data;
   }
+  duplicate(name: string) {
+    const data = this.serialize();
+    data.name = name;
+    data.id = uniqid();
+    // TODO October 23: Properly duplicate all of the files associated with this plugin
+    // in the file system
+    return new BasePlugin(data);
+  }
 }

server/src/init/httpServer.ts

@@ -3,12 +3,12 @@ import cookies from "fastify-cookie";
 import staticServe from "fastify-static";
 import cors from "fastify-cors";
 import path from "path";
+import {thoriumPath} from "../utils/appPaths";
 import {promises as fs, createWriteStream} from "fs";
 import {pipeline} from "stream";
 import uniqid from "@thorium/uniqid";
 import os from "os";
 import multipart, {MultipartFile} from "fastify-multipart";
-import {thoriumPath} from "../utils/appPaths";
 
 export default function buildHTTPServer({
   staticRoot = path.join(__dirname, "public"),

server/src/init/setUpAPI.ts

@@ -5,7 +5,6 @@ import type buildHTTPServer from "./httpServer";
 import inputs, {AllInputNames} from "../inputs";
 import {
   cardSubscriptions,
-  AllSubscriptions,
   DataCardNames,
   SubscriptionNames,
 } from "client/src/utils/cardData";
@@ -116,7 +115,6 @@ export function setUpAPI(
       }
       body = {...body, ...fileParams};
     }
-    console.log(body);
     const clientId =
       req.headers.authorization?.replace("Bearer ", "").replace("bearer", "") ||
       "";

server/src/inputs/plugins.ts

@@ -1,6 +1,15 @@
 import BasePlugin from "../classes/Plugins";
 import {DataContext} from "../utils/DataContext";
 import {pubsub} from "../utils/pubsub";
+import fs from "fs/promises";
+import path from "path";
+import {thoriumPath} from "../utils/appPaths";
+
+function getPlugin(context: DataContext, pluginId: string): BasePlugin {
+  const plugin = context.server.plugins.find(plugin => plugin.id === pluginId);
+  if (!plugin) throw new Error("Plugin not found");
+  return plugin;
+}
 
 export const pluginInputs = {
   pluginCreate(context: DataContext, params: {name: string}) {
@@ -10,4 +19,74 @@ export const pluginInputs = {
     pubsub.publish("plugin", {pluginId: plugin.id});
     return plugin.id;
   },
+  pluginDelete(context: DataContext, params: {pluginId: string}) {
+    const plugin = getPlugin(context, params.pluginId);
+    plugin.removeFile(true);
+    context.server.plugins.splice(context.server.plugins.indexOf(plugin), 1);
+    pubsub.publish("pluginsList");
+    pubsub.publish("plugin", {pluginId: plugin.id});
+  },
+  pluginDuplicate(
+    context: DataContext,
+    params: {pluginId: string; name: string}
+  ) {
+    const plugin = getPlugin(context, params.pluginId);
+
+    const pluginCopy = plugin.duplicate(params.name);
+    context.server.plugins.push(pluginCopy);
+    pubsub.publish("pluginsList");
+    pubsub.publish("plugin", {pluginId: pluginCopy.id});
+    return pluginCopy.id;
+  },
+  pluginSetName(
+    context: DataContext,
+    params: {pluginId: string; name: string}
+  ) {
+    const plugin = getPlugin(context, params.pluginId);
+
+    plugin.name = params.name;
+    pubsub.publish("pluginsList");
+    pubsub.publish("plugin", {pluginId: plugin.id});
+  },
+  pluginSetDescription(
+    context: DataContext,
+    params: {pluginId: string; description: string}
+  ) {
+    const plugin = getPlugin(context, params.pluginId);
+
+    plugin.description = params.description;
+    pubsub.publish("pluginsList");
+    pubsub.publish("plugin", {pluginId: plugin.id});
+  },
+  pluginSetTags(
+    context: DataContext,
+    params: {pluginId: string; tags: string[]}
+  ) {
+    const plugin = getPlugin(context, params.pluginId);
+
+    plugin.tags = params.tags;
+    pubsub.publish("pluginsList");
+    pubsub.publish("plugin", {pluginId: plugin.id});
+  },
+  async pluginSetCoverImage(
+    context: DataContext,
+    params: {pluginId: string; coverImage: File | string}
+  ) {
+    const plugin = getPlugin(context, params.pluginId);
+    // coverImage will be a string pointing to a temporary file
+    // move it into place.
+    if (plugin && typeof params.coverImage === "string") {
+      const ext = path.extname(params.coverImage);
+      const coverImagePath = path.join(
+        thoriumPath,
+        plugin.assetPath(`coverImage${ext}`)
+      );
+
+      await fs.mkdir(path.dirname(coverImagePath), {recursive: true});
+      await fs.rename(params.coverImage, coverImagePath);
+      plugin.coverImage = plugin.assetPath(`coverImage${ext}`);
+      pubsub.publish("pluginsList");
+      pubsub.publish("plugin", {pluginId: plugin.id});
+    }
+  },
 };