Feature/manage plugins

Dockerfile

@@ -3,6 +3,18 @@ FROM alpine AS cache
 RUN apk add -U --no-cache ca-certificates
 
 
+FROM node:latest as admin
+
+WORKDIR /app
+COPY ./admin/package.json .
+COPY ./admin/pnpm-lock.yaml .
+RUN npm install -g pnpm
+RUN pnpm install
+COPY ./admin .
+RUN pnpm run build
+
+
+
 FROM node:latest as frontend
 WORKDIR /app
 
@@ -21,6 +33,7 @@ RUN go mod download
 
 COPY . .
 
+COPY --from=admin /app/dist ./assets/js/admin
 COPY --from=frontend /assets/js/pad/assets/pad.js ./assets/js/pad/assets/pad.js
 COPY --from=frontend /assets/js/welcome/assets/welcome.js ./assets/js/welcome/assets/welcome.js
 

admin/src/pages/HomePage.tsx

@@ -12,6 +12,7 @@ import settingSocket from "../utils/globals.ts";
 
 export const HomePage = () => {
     const [plugins,setPlugins] = useState<PluginDef[]>([])
+    const [loadedPlugins, setLoadedPlugins] = useState<boolean>(false)
   const installedPlugins = useStore(state=>state.installedPlugins)
   const setInstalledPlugins = useStore(state=>state.setInstalledPlugins)
   const [searchParams, setSearchParams] = useState<SearchParams>({
@@ -129,6 +130,7 @@ export const HomePage = () => {
             results: PluginDef[]
         }) => {
             setPlugins(data.results)
+            setLoadedPlugins(true)
         })
         settingSocket!.on('results:searcherror', (data: {error: string}) => {
             console.log(data.error)
@@ -138,7 +140,7 @@ export const HomePage = () => {
                 success: false
             })
         })
-    }, [searchParams, settingSocket]);
+    }, [searchParams]);
 
     const uninstallPlugin  = (pluginName: string)=>{
         settingSocket!.emit('uninstall', pluginName);
@@ -225,7 +227,7 @@ export const HomePage = () => {
             </tr>
             </thead>
             <tbody style={{overflow: 'auto'}}>
-            {(filteredInstallablePlugins.length > 0) ?
+            {loadedPlugins ?
               filteredInstallablePlugins.map((plugin) => {
                         return <tr key={plugin.name}>
                             <td><a rel="noopener noreferrer" href={`https://npmjs.com/${plugin.name}`} target="_blank">{plugin.name}</a></td>

admin/src/pages/ShoutPage.tsx

@@ -1,39 +1,32 @@
 import {useEffect, useState} from "react";
 import {SendHorizonal} from 'lucide-react'
-import {useStore} from "../store/store.ts";
 import * as Switch from '@radix-ui/react-switch';
 import {ShoutType} from "../components/ShoutType.ts";
+import settingSocket from "../utils/globals.ts";
 
 export const ShoutPage = ()=>{
     const [totalUsers, setTotalUsers] = useState(0);
     const [message, setMessage] = useState<string>("");
     const [sticky, setSticky] = useState<boolean>(false);
-    const socket = useStore(state => state.settingsSocket);
-    const pluginSocket = useStore(state => state.pluginsSocket);
     const [shouts, setShouts] = useState<ShoutType[]>([]);
 
 
     useEffect(() => {
-        if(socket && pluginSocket) {
-          console.log('Socket connected', socket.id);
-            socket.on('shout', (shout) => {
+            settingSocket.on('shout', (shout) => {
                 setShouts([...shouts, shout])
             })
-          pluginSocket.on('results:stats', (statData) => {
+        settingSocket.on('results:stats', (statData) => {
             setTotalUsers(statData.totalUsers);
           })
-        }
-    }, [socket, shouts, pluginSocket])
+    }, [shouts])
 
 
   useEffect(() => {
-    if (pluginSocket) {
-      pluginSocket.emit('getStats', {});
-    }
-  }, [pluginSocket]);
+      settingSocket.emit('getStats');
+  }, []);
 
     const sendMessage = () => {
-        socket?.emit('shout', {
+        settingSocket?.emit('shout', {
             message,
             sticky
         });

admin/src/utils/socketIoWrapper.ts

@@ -100,7 +100,7 @@ export class SocketIoWrapper {
     }
 
     public io = {
-        on: (event: string, callback: Function) => {
+        on: (event: string, callback: (data: any)=>void) => {
             this.on(event, callback)
         }
     }
@@ -113,7 +113,7 @@ export class SocketIoWrapper {
         }
     }
 
-    public on(event: string, callback: Function) {
+    public on(event: string, callback: (data: any)=>void) {
         if (SocketIoWrapper.eventCallbacks[event]) {
             SocketIoWrapper.eventCallbacks[event].push(callback)
         } else {

admin/vite.config.ts

@@ -26,7 +26,7 @@ export default defineConfig({
     })],
     base: '/admin',
     build: {
-        outDir: '../src/templates/admin',
+        outDir: 'dist',
         emptyOutDir: true,
     },
     server: {

lib/api/static/init.go

@@ -107,6 +107,7 @@ func Init(app *fiber.App, uiAssets embed.FS, retrievedSettings settings.Settings
 	if nodeEnv == "production" {
 		registerEmbeddedStatic(app, "/js/pad/assets/", "assets/js/pad/assets", uiAssets)
 		registerEmbeddedStatic(app, "/js/welcome/assets/", "assets/js/welcome/assets", uiAssets)
+		registerEmbeddedStatic(app, "/admin/assets", "assets/js/admin/assets", uiAssets)
 	} else {
 		app.Get("/js/*", func(c *fiber.Ctx) error {
 			var entrypoint string

lib/models/ws/admin/AdminPluginDefinition.go

@@ -0,0 +1,18 @@
+package admin
+
+type InstalledPluginDefinition struct {
+	Name      string `json:"name"`
+	Version   string `json:"version"`
+	Path      string `json:"path"`
+	RealPath  string `json:"realPath"`
+	Updatable bool   `json:"updatable"`
+}
+
+type PluginSearchDefinition struct {
+	Name        string `json:"name"`
+	Description string `json:"description"`
+	Downloads   int    `json:"downloads"`
+	Official    bool   `json:"official"`
+	Time        string `json:"time"`
+	Version     string `json:"version"`
+}

lib/models/ws/admin/SearchPluginDefinition.go

@@ -0,0 +1,14 @@
+package admin
+
+type SearchPluginDefinitionQuery struct {
+	Offset     int    `json:"offset"`
+	Limit      int    `json:"limit"`
+	SortBy     string `json:"sortBy"`
+	SortDir    string `json:"sortDir"`
+	SearchTerm string `json:"searchTerm"`
+}
+
+type SeachchPluginDefinition struct {
+	Query   SearchPluginDefinitionQuery `json:"query"`
+	Results []PluginSearchDefinition    `json:"results"`
+}