Add support for installing plugin-hub plugins via website

src/components/external-plugin.js

@@ -9,7 +9,10 @@ const ExternalPlugin = ({
   support,
   imageUrl,
   installed,
-  count
+  internalName,
+  count,
+  update,
+  showInstall
 }) => (
   <div class="col-md-4 col-sm-6 col-xs-12 mb-2">
     <div class="card">
@@ -45,7 +48,22 @@ const ExternalPlugin = ({
                 {numberWithCommas(count)}{' '}
                 {count > 1 ? 'active installs' : 'active install'}
               </span>{' '}
-              {installed && <span class="badge badge-success">installed</span>}
+              {showInstall &&
+                (installed ? (
+                  <button
+                    class="badge badge-danger btn"
+                    onClick={() => update(installed, internalName)}
+                  >
+                    uninstall
+                  </button>
+                ) : (
+                  <button
+                    class="badge badge-success btn"
+                    onClick={() => update(installed, internalName)}
+                  >
+                    install
+                  </button>
+                ))}
             </p>
           )}
           <p class="card-text">

src/modules/config.js

@@ -15,7 +15,13 @@ const configNameFilters = [
 ]
 
 // Actions
-export const { fetchConfig, setConfig, changeAccount } = createActions(
+export const {
+  fetchConfig,
+  updateConfig,
+  setConfig,
+  addModifiedKey,
+  changeAccount
+} = createActions(
   {
     FETCH_CONFIG: () => async (dispatch, getState) => {
       const version = getLatestRelease(getState())
@@ -51,9 +57,37 @@ export const { fetchConfig, setConfig, changeAccount } = createActions(
       }
 
       return config
+    },
+    UPDATE_CONFIG: (key, value) => async (dispatch, getState) => {
+      const version = getLatestRelease(getState())
+      const uuid = getState().account.uuid
+
+      if (!uuid) {
+        return {}
+      }
+
+      if (value.length > 0) {
+        await runeliteApi(`runelite-${version}/config/${key}`, {
+          method: 'PUT',
+          headers: {
+            'RUNELITE-AUTH': uuid
+          },
+          body: value
+        })
+      } else {
+        await runeliteApi(`runelite-${version}/config/${key}`, {
+          method: 'DELETE',
+          headers: {
+            'RUNELITE-AUTH': uuid
+          }
+        })
+      }
+
+      dispatch(addModifiedKey(key))
     }
   },
   'SET_CONFIG',
+  'ADD_MODIFIED_KEY',
   'CHANGE_ACCOUNT'
 )
 
@@ -67,17 +101,23 @@ export default handleActions(
     [changeAccount]: (state, { payload }) => ({
       ...state,
       selectedAccount: payload
+    }),
+    [addModifiedKey]: (state, { payload }) => ({
+      ...state,
+      modifiedKeys: [...new Set(state.modifiedKeys.concat([payload]))]
     })
   },
   {
     config: {},
+    modifiedKeys: [],
     selectedAccount: ''
   }
 )
 
 // Selectors
 export const getConfig = state => state.config.config
 export const getSelectedAccount = state => state.config.selectedAccount
+export const getModifiedKeys = state => state.config.modifiedKeys
 
 export const getAccounts = createSelector(getConfig, config => {
   const names = new Set()

src/routes/plugin-hub.js

@@ -17,9 +17,15 @@ import {
   setPluginSorting
 } from '../modules/plugin-hub'
 import SearchBar from '../components/search-bar'
-import { fetchConfig } from '../modules/config'
+import {
+  fetchConfig,
+  getExternalPlugins,
+  getModifiedKeys,
+  updateConfig
+} from '../modules/config'
 import Choice from '../components/choice'
 import { numberWithCommas } from '../util'
+import { isLoggedIn } from '../modules/account'
 
 const description =
   'The Plugin Hub is a repository of plugins that are created and ' +
@@ -33,21 +39,45 @@ const handleChange = (event, setPluginFilter) =>
     name: event.target.value
   })
 
+const handleUpdate = (updateConfig, fetchConfig, externalPlugins) => async (
+  installed,
+  pluginName
+) => {
+  if (installed) {
+    externalPlugins = externalPlugins.filter(i => i !== pluginName)
+  } else {
+    externalPlugins.push(pluginName)
+  }
+
+  await updateConfig('runelite.externalPlugins', externalPlugins.join(','))
+  await fetchConfig()
+}
+
 const PluginHub = ({
   author,
   externalPlugins,
+  configExternalPlugins,
   pluginFilter,
   pluginSorting,
   setPluginFilter,
-  setPluginSorting
+  setPluginSorting,
+  updateConfig,
+  fetchConfig,
+  modifiedKeys,
+  loggedIn
 }) => {
-  externalPlugins = externalPlugins.filter(plugin =>
+  externalPlugins = [...externalPlugins].filter(plugin =>
     author ? plugin.author === author : true
   )
 
   const pluginCount = externalPlugins.length
   const installedPluginCount = externalPlugins.filter(p => p.installed).length
   const totalCount = externalPlugins.reduce((a, b) => a + b.count, 0)
+  const updateFunction = handleUpdate(
+    updateConfig,
+    fetchConfig,
+    configExternalPlugins
+  )
   const sortChoices = ['active installs', 'name', 'time updated', 'time added']
 
   if (installedPluginCount > 0) {
@@ -115,9 +145,28 @@ const PluginHub = ({
               />
             </div>
           </div>
+          {modifiedKeys.includes('runelite.externalPlugins') && (
+            <div
+              style={{
+                background: '#1e1e1e'
+              }}
+              class="p-3"
+            >
+              <span class="badge badge-warning">
+                <b>Warning</b>
+              </span>{' '}
+              Installing and uninstalling plugins through this interface
+              requires client restart.
+            </div>
+          )}
           <div class="row">
             {externalPlugins.map(plugin => (
-              <ExternalPlugin key={plugin.internalName} {...plugin} />
+              <ExternalPlugin
+                key={plugin.internalName}
+                {...plugin}
+                update={updateFunction}
+                showInstall={loggedIn}
+              />
             ))}
           </div>
         </div>
@@ -129,8 +178,11 @@ const PluginHub = ({
 const mapStateToProps = (state, props) => ({
   ...props,
   externalPlugins: getSortedExternalPlugins(state),
+  configExternalPlugins: getExternalPlugins(state),
   pluginFilter: getPluginFilter(state),
-  pluginSorting: getPluginSorting(state)
+  pluginSorting: getPluginSorting(state),
+  modifiedKeys: getModifiedKeys(state),
+  loggedIn: isLoggedIn(state)
 })
 
 const mapDispatchToProps = dispatch =>
@@ -141,7 +193,8 @@ const mapDispatchToProps = dispatch =>
       fetchExternalPlugins,
       fetchPluginHubStats,
       setPluginFilter,
-      setPluginSorting
+      setPluginSorting,
+      updateConfig
     },
     dispatch
   )

src/store.js

@@ -16,7 +16,12 @@ export default callback => {
 
   // Add logger
   if (isDebug) {
-    middlewares.push(require('redux-logger').default)
+    const { createLogger } = require('redux-logger')
+    middlewares.push(
+      createLogger({
+        diff: true
+      })
+    )
   }
 
   // Create reducer