add function: install plugins

Wox-launcher · Nov 27, 2023 · 3d200a9 · 3d200a9
1 parent 0ab1709
commit 3d200a9
Show file tree

Hide file tree

Showing 7 changed files with 226 additions and 29 deletions.
diff --git a/Wox.UI.React/package.json b/Wox.UI.React/package.json
@@ -16,6 +16,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@mui/icons-material": "^5.14.16",
+    "@mui/lab": "5.0.0-alpha.153",
     "@mui/material": "^5.14.16",
     "@mui/styled-engine-sc": "6.0.0-alpha.4",
     "axios": "^1.6.0",

diff --git a/Wox.UI.React/pnpm-lock.yaml b/Wox.UI.React/pnpm-lock.yaml
diff --git a/Wox.UI.React/public/wox-preview-bg.jpg b/Wox.UI.React/public/wox-preview-bg.jpg
diff --git a/Wox.UI.React/src/api/WoxAPI.ts b/Wox.UI.React/src/api/WoxAPI.ts
@@ -27,6 +27,10 @@ export async function getInstalledPlugins() {
   return post<API.WoxRestResponse<StorePluginManifest[]>>(`/plugin/installed`)
 }
 
+export async function installPlugin(id: string) {
+  return post<API.WoxRestResponse<string>>(`/plugin/install`, JSON.stringify({ id: id }))
+}
+
 export async function updateSetting(setting: UpdateSetting) {
   return post<API.WoxRestResponse<Setting>>(`/setting/wox/update`, JSON.stringify(setting))
 }

diff --git a/Wox.UI.React/src/components/plugins/WoxPluginList.tsx b/Wox.UI.React/src/components/plugins/WoxPluginList.tsx
@@ -1,15 +1,16 @@
 import WoxScrollbar from "../tools/WoxScrollbar.tsx"
-import { Box, Button, Divider, List, ListItemAvatar, ListItemButton, ListItemText, Tab, Tabs, Typography } from "@mui/material"
+import { Box, Button, CircularProgress, Divider, List, ListItemAvatar, ListItemButton, ListItemText, Tab, Tabs, Typography } from "@mui/material"
 import ImageGallery from "react-image-gallery"
 import { useWindowSize } from "usehooks-ts"
 import { InstalledPluginManifest, StorePluginManifest } from "../../entity/Plugin.typing"
 import React, { useState } from "react"
 import styled from "styled-components"
-import { openUrl } from "../../api/WoxAPI.ts"
+import { installPlugin, openUrl } from "../../api/WoxAPI.ts"
 import WoxImage from "../tools/WoxImage.tsx"
 
-export default (props: { plugins: StorePluginManifest[] | InstalledPluginManifest[]; type: string }) => {
+export default (props: { plugins: StorePluginManifest[] | InstalledPluginManifest[]; type: string; refreshCallback?: () => void }) => {
   const { plugins } = props
+  const [installLoading, setInstallLoading] = useState(false)
   const [selectedTab, setSelectedTab] = useState(0)
   const [selectedIndex, setSelectedIndex] = useState(0)
   const size = useWindowSize()
@@ -44,16 +45,28 @@ export default (props: { plugins: StorePluginManifest[] | InstalledPluginManifes
                       </ListItemAvatar>
                       <ListItemText primary={plugin.Name} secondary={<span className={"plugin-description"}>{plugin.Description}</span>} />
                       {isStore && !plugin.IsInstalled && (
-                        <Button
-                          variant="contained"
-                          sx={{ textTransform: "none", marginLeft: "5px" }}
-                          onClick={event => {
-                            event.preventDefault()
-                            event.stopPropagation()
-                          }}
-                        >
-                          Install
-                        </Button>
+                        <>
+                          {installLoading && <CircularProgress size={24} sx={{ marginLeft: "5px" }} />}
+                          {!installLoading && (
+                            <Button
+                              variant="contained"
+                              sx={{ textTransform: "none", marginLeft: "5px" }}
+                              onClick={event => {
+                                setInstallLoading(true)
+                                installPlugin(plugin.Id).then(resp => {
+                                  if (!resp.Success) {
+                                    alert(resp.Message)
+                                  }
+                                  setInstallLoading(false)
+                                })
+                                event.preventDefault()
+                                event.stopPropagation()
+                              }}
+                            >
+                              Install
+                            </Button>
+                          )}
+                        </>
                       )}
                       {plugin.NeedUpdate && (
                         <Button variant="contained" sx={{ textTransform: "none", marginLeft: "5px" }}>
@@ -99,8 +112,8 @@ export default (props: { plugins: StorePluginManifest[] | InstalledPluginManifes
             </div>
 
             <Tabs value={selectedTab} sx={{ borderBottom: "1px solid #23272d" }} onChange={handleChange}>
-              <Tab label="Description" sx={{ textTransform: "none" }} />
-              {!isStore && <Tab label="Setting" sx={{ textTransform: "none" }} />}
+              <Tab label="Description" sx={{ textTransform: "none", color: "white" }} />
+              {!isStore && <Tab label="Setting" sx={{ textTransform: "none", color: "white" }} />}
             </Tabs>
 
             <div className={"plugin-detail-description"} style={{ display: `${selectedTab === 0 ? "block" : "none"}` }}>
@@ -131,8 +144,12 @@ export default (props: { plugins: StorePluginManifest[] | InstalledPluginManifes
 const Style = styled.div`
   .plugin-list-container {
     height: 100%;
+    flex: 1;
     border-right: 1px solid #23272d;
   }
+  .plugin-detail-container {
+    flex: 1;
+  }
 
   .plugin-description {
     color: #787b8b;

diff --git a/Wox.UI.React/src/components/plugins/WoxStorePlugins.tsx b/Wox.UI.React/src/components/plugins/WoxStorePlugins.tsx
@@ -10,19 +10,31 @@ export default () => {
   const [loading, setLoading] = useState(true)
   const [plugins, setPlugins] = useState<StorePluginManifest[]>([])
 
-  useEffect(() => {
+  const loadStorePlugins = () => {
     WoxPluginHelper.getInstance()
       .loadStorePlugins()
       .then(_ => {
         setPlugins(WoxPluginHelper.getInstance().getStorePlugins())
         setLoading(false)
       })
+  }
+
+  useEffect(() => {
+    loadStorePlugins()
   }, [])
 
   return (
     <Style>
       {loading && <CircularProgress />}
-      {!loading && <WoxPluginList plugins={plugins} type={"store"} />}
+      {!loading && (
+        <WoxPluginList
+          plugins={plugins}
+          type={"store"}
+          refreshCallback={() => {
+            loadStorePlugins()
+          }}
+        />
+      )}
     </Style>
   )
 }