Add plugin actions on ModData page

components/Map.tsx

@@ -851,11 +851,14 @@ const Map: React.FC = () => {
             setOpen={setSidebarOpenWithResize}
             lastModified={cellsData && cellsData.lastModified}
             onSelectFile={(selectedFile) => {
+              const { plugin, ...withoutPlugin } = router.query;
               if (selectedFile) {
-                router.push({ query: { ...router.query, file: selectedFile } });
+                router.push({
+                  query: { ...withoutPlugin, file: selectedFile },
+                });
               } else {
-                const { file, ...rest } = router.query;
+                const { file, ...withoutFile } = withoutPlugin;
-                router.push({ query: { ...rest } });
+                router.push({ query: { ...withoutFile } });
               }
             }}
             onSelectPlugin={(selectedPlugin) => {
@@ -864,8 +867,8 @@ const Map: React.FC = () => {
                   query: { ...router.query, plugin: selectedPlugin },
                 });
               } else {
-                const { plugin, ...rest } = router.query;
+                const { plugin, ...withoutPlugin } = router.query;
-                router.push({ query: { ...rest } });
+                router.push({ query: { ...withoutPlugin } });
               }
             }}
           />

components/ModData.tsx

@@ -3,9 +3,16 @@ import Head from "next/head";
 import React, { useCallback, useEffect, useState } from "react";
 import useSWRImmutable from "swr/immutable";
 
+import { useAppDispatch, useAppSelector } from "../lib/hooks";
 import CellList from "./CellList";
 import styles from "../styles/ModData.module.css";
 import { jsonFetcher } from "../lib/api";
+import {
+  PluginsByHashWithMods,
+  removeFetchedPlugin,
+  updateFetchedPlugin,
+} from "../slices/plugins";
+import Link from "next/link";
 
 export interface CellCoord {
   x: number;
@@ -103,9 +110,16 @@ const ModData: React.FC<Props> = ({
 
   const { data: pluginData, error: pluginError } = useSWRImmutable(
     selectedPlugin
-      ? `https://files.modmapper.com/${selectedPlugin}.json`
+      ? `https://plugins.modmapper.com/${selectedPlugin}.json`
       : null,
-    (_) => jsonFetcher<File>(_)
+    (_) => jsonFetcher<PluginsByHashWithMods>(_)
+  );
+
+  const dispatch = useAppDispatch();
+  const fetchedPlugin = useAppSelector((state) =>
+    state.plugins.fetchedPlugins.find(
+      (plugin) => plugin.hash === selectedPlugin
+    )
   );
 
   const handleFileChange = useCallback(
@@ -267,6 +281,27 @@ const ModData: React.FC<Props> = ({
             </select>
           </div>
         )}
+        {pluginData ? (
+          <div className={styles["plugin-actions"]}>
+            <Link href={`/?plugin=${pluginData.hash}`}>
+              <a className={styles["plugin-link"]}>View plugin</a>
+            </Link>
+            <button
+              className={styles.button}
+              onClick={() =>
+                fetchedPlugin
+                  ? dispatch(removeFetchedPlugin(pluginData.hash))
+                  : dispatch(
+                      updateFetchedPlugin({ ...pluginData, enabled: true })
+                    )
+              }
+            >
+              {Boolean(fetchedPlugin) ? "Remove plugin" : "Add plugin"}
+            </button>
+          </div>
+        ) : (
+          <div className={styles.spacer} />
+        )}
         {fileError &&
           (fileError.status === 404 ? (
             <div>File cound not be found.</div>

components/PluginDetail.tsx

@@ -92,7 +92,7 @@ const PluginDetail: React.FC<Props> = ({ hash, counts }) => {
           onClick={() =>
             fetchedPlugin
               ? dispatch(removeFetchedPlugin(data.hash))
-              : dispatch(updateFetchedPlugin(data))
+              : dispatch(updateFetchedPlugin({ ...data, enabled: true }))
           }
         >
           {Boolean(fetchedPlugin) ? "Remove plugin" : "Add plugin"}

styles/ModData.module.css

@@ -26,3 +26,27 @@ a.name {
   display: block;
   margin-bottom: 4px;
 }
+
+.spacer {
+  margin-bottom: 12px;
+}
+
+.plugin-actions {
+  display: flex;
+  flex-direction: row;
+  padding-right: 12px;
+  padding-left: 12px;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+.plugin-link {
+  flex: 1;
+}
+
+.button {
+  flex: 1;
+  margin-top: 12px;
+  margin-bottom: 12px;
+  margin-right: auto;
+}

styles/PluginDetail.module.css

@@ -4,7 +4,6 @@
 }
 
 .button {
-  margin-top: 12px;
   margin-bottom: 12px;
   margin-right: auto;
   padding-left: 12px;