Select file and plugin, add to new plugins state

2022-08-17 23:19:55 -04:00
parent a067f21f15
commit 2065b5fa3a
15 changed files with 398 additions and 104 deletions
--- a/components/AddModData.tsx
+++ b/components/AddModData.tsx
@@ -1,79 +1,105 @@
 import { format } from "date-fns";
-import React from "react";
+import React, { useCallback, useState } from "react";
 import useSWRImmutable from "swr/immutable";

-import { Mod, NEXUS_MODS_URL } from "./ModData";
+import { Mod, File, NEXUS_MODS_URL } from "./ModData";
 import styles from "../styles/AddModData.module.css";
 import { jsonFetcher } from "../lib/api";

 type Props = {
  selectedMod: number;
+  selectedPlugin: string | null;
+  setSelectedPlugin: (plugin: string) => void;
  counts: Record<number, [number, number, number]> | null;
 };

-const AddModData: React.FC<Props> = ({ selectedMod, counts }) => {
-  const { data, error } = useSWRImmutable(
-    `https://mods.modmapper.com/${selectedMod}.json`,
+const AddModData: React.FC<Props> = ({
+  selectedMod,
+  selectedPlugin,
+  setSelectedPlugin,
+  counts,
+}) => {
+  const [selectedFile, setSelectedFile] = useState<number | null>(null);
+
+  const { data: modData, error: modError } = useSWRImmutable(
+    selectedMod ? `https://mods.modmapper.com/${selectedMod}.json` : null,
    (_) => jsonFetcher<Mod>(_)
  );
+  const { data: fileData, error: fileError } = useSWRImmutable(
+    selectedFile ? `https://files.modmapper.com/${selectedFile}.json` : null,
+    (_) => jsonFetcher<File>(_)
+  );

-  if (error && error.status === 404) {
+  const handleFileChange = useCallback(
+    (event) => {
+      setSelectedFile(event.target.value);
+    },
+    [setSelectedFile]
+  );
+  const handlePluginChange = useCallback(
+    (event) => {
+      setSelectedPlugin(event.target.value);
+    },
+    [setSelectedPlugin]
+  );
+
+  if (modError && modError.status === 404) {
    return <div>Mod could not be found.</div>;
-  } else if (error) {
-    return <div>{`Error loading mod data: ${error.message}`}</div>;
+  } else if (modError) {
+    return <div>{`Error loading mod data: ${modError.message}`}</div>;
  }
-  if (data === undefined)
+  if (modData === undefined)
    return <div className={styles.status}>Loading...</div>;
-  if (data === null)
+  if (modData === null)
    return <div className={styles.status}>Mod could not be found.</div>;

  let numberFmt = new Intl.NumberFormat("en-US");
-  const modCounts = counts && counts[data.nexus_mod_id];
+  const modCounts = counts && counts[modData.nexus_mod_id];
  const total_downloads = modCounts ? modCounts[0] : 0;
  const unique_downloads = modCounts ? modCounts[1] : 0;
  const views = modCounts ? modCounts[2] : 0;

-  if (selectedMod && data) {
+  if (selectedMod && modData) {
    return (
      <div className={styles.wrapper}>
        <h3>
          <a
-            href={`${NEXUS_MODS_URL}/mods/${data.nexus_mod_id}`}
+            href={`${NEXUS_MODS_URL}/mods/${modData.nexus_mod_id}`}
            target="_blank"
            rel="noreferrer noopener"
            className={styles.name}
          >
-            {data.name}
+            {modData.name}
          </a>
        </h3>
        <div>
          <strong>Category:&nbsp;</strong>
          <a
-            href={`${NEXUS_MODS_URL}/mods/categories/${data.category_id}`}
+            href={`${NEXUS_MODS_URL}/mods/categories/${modData.category_id}`}
            target="_blank"
            rel="noreferrer noopener"
          >
-            {data.category_name}
+            {modData.category_name}
          </a>
-          {data.is_translation && <strong>&nbsp;(translation)</strong>}
+          {modData.is_translation && <strong>&nbsp;(translation)</strong>}
        </div>
        <div>
          <strong>Author:&nbsp;</strong>
          <a
-            href={`${NEXUS_MODS_URL}/users/${data.author_id}`}
+            href={`${NEXUS_MODS_URL}/users/${modData.author_id}`}
            target="_blank"
            rel="noreferrer noopener"
          >
-            {data.author_name}
+            {modData.author_name}
          </a>
        </div>
        <div>
          <strong>Uploaded:</strong>{" "}
-          {format(new Date(data.first_upload_at), "d MMM y")}
+          {format(new Date(modData.first_upload_at), "d MMM y")}
        </div>
        <div>
          <strong>Last Update:</strong>{" "}
-          {format(new Date(data.last_update_at), "d MMM y")}
+          {format(new Date(modData.last_update_at), "d MMM y")}
        </div>
        <div>
          <strong>Total Downloads:</strong> {numberFmt.format(total_downloads)}
@@ -82,6 +108,44 @@ const AddModData: React.FC<Props> = ({ selectedMod, counts }) => {
          <strong>Unique Downloads:</strong>{" "}
          {numberFmt.format(unique_downloads)}
        </div>
+        <div className={styles["select-container"]}>
+          <label htmlFor="mod-file-select" className={styles.label}>
+            Select file:
+          </label>
+          <select
+            name="file"
+            id="mod-file-select"
+            className={styles.select}
+            onChange={handleFileChange}
+          >
+            <option value="">--Select file--</option>
+            {[...modData.files].reverse().map((file) => (
+              <option key={file.nexus_file_id} value={file.nexus_file_id}>
+                {file.name} (v{file.version}) ({file.category})
+              </option>
+            ))}
+          </select>
+        </div>
+        {fileData && (
+          <div className={styles["select-container"]}>
+            <label htmlFor="file-plugin-select" className={styles.label}>
+              Select plugin:
+            </label>
+            <select
+              name="plugin"
+              id="file-plugin-select"
+              className={styles.select}
+              onChange={handlePluginChange}
+            >
+              <option value="">--Select plugin--</option>
+              {fileData.plugins.map((plugin) => (
+                <option key={plugin.hash} value={plugin.hash}>
+                  {plugin.file_path}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
      </div>
    );
  }
--- a/components/AddModDialog.tsx
+++ b/components/AddModDialog.tsx
@@ -1,8 +1,12 @@
 import { createPortal } from "react-dom";
-import React, { useState, useRef } from "react";
+import React, { useCallback, useState, useRef } from "react";
+import { useDispatch } from "react-redux";
+import useSWRImmutable from "swr/immutable";

 import AddModData from "./AddModData";
 import SearchBar from "./SearchBar";
+import { jsonFetcher } from "../lib/api";
+import { updateFetchedPlugin, PluginsByHashWithMods } from "../slices/plugins";
 import styles from "../styles/AddModDialog.module.css";

 type Props = {
@@ -11,16 +15,25 @@ type Props = {

 const AddModDialog: React.FC<Props> = ({ counts }) => {
  const [selectedMod, setSelectedMod] = useState<number | null>(null);
+  const [selectedPlugin, setSelectedPlugin] = useState<string | null>(null);
  const [dialogShown, setDialogShown] = useState(false);
  const searchInput = useRef<HTMLInputElement | null>(null);
+  const dispatch = useDispatch();

-  const onAddModButtonClick = async () => {
+  const { data, error } = useSWRImmutable(
+    selectedPlugin
+      ? `https://plugins.modmapper.com/${selectedPlugin}.json`
+      : null,
+    (_) => jsonFetcher<PluginsByHashWithMods>(_)
+  );
+
+  const onAddModButtonClick = useCallback(async () => {
    setSelectedMod(null);
    setDialogShown(true);
    requestAnimationFrame(() => {
      if (searchInput.current) searchInput.current.focus();
    });
-  };
+  }, [setSelectedMod, setDialogShown]);

  return (
    <>
@@ -41,7 +54,12 @@ const AddModDialog: React.FC<Props> = ({ counts }) => {
              inputRef={searchInput}
            />
            {selectedMod && (
-              <AddModData selectedMod={selectedMod} counts={counts} />
+              <AddModData
+                selectedMod={selectedMod}
+                selectedPlugin={selectedPlugin}
+                setSelectedPlugin={setSelectedPlugin}
+                counts={counts}
+              />
            )}
            <menu>
              <button
@@ -55,10 +73,11 @@ const AddModDialog: React.FC<Props> = ({ counts }) => {
              </button>
              <button
                onClick={() => {
-                  console.log(`Adding mod ${selectedMod}`);
+                  console.log(`Adding mod ${selectedMod} ${selectedPlugin}`);
+                  if (data) dispatch(updateFetchedPlugin(data));
                  setDialogShown(false);
                }}
-                disabled={!selectedMod}
+                disabled={!selectedMod || !selectedPlugin || !data}
              >
                Add
              </button>
--- a/components/CellData.tsx
+++ b/components/CellData.tsx
@@ -4,7 +4,7 @@ import useSWRImmutable from "swr/immutable";

 import styles from "../styles/CellData.module.css";
 import ModList from "./ModList";
-import PluginList from "./PluginsList";
+import PluginList from "./ParsedPluginsList";
 import { jsonFetcher } from "../lib/api";

 export interface Mod {
--- a/components/DataDirPicker.tsx
+++ b/components/DataDirPicker.tsx
@@ -12,7 +12,7 @@ type Props = {};
 const DataDirPicker: React.FC<Props> = () => {
  const workerPool = useContext(WorkerPoolContext);
  const inputRef = useRef<HTMLInputElement>(null);
-  const plugins = useAppSelector((state) => state.plugins.plugins);
+  const plugins = useAppSelector((state) => state.plugins.parsedPlugins);
  const pluginsPending = useAppSelector((state) => state.plugins.pending);
  const [loading, setLoading] = useState<boolean>(false);
  const [uploadNoticeShown, setUploadNoticeShown] = useState(false);
--- a/components/FetchedPluginsList.tsx
+++ b/components/FetchedPluginsList.tsx
@@ -0,0 +1,68 @@
+import Link from "next/link";
+import React from "react";
+
+import { useAppSelector, useAppDispatch } from "../lib/hooks";
+import {
+  disableAllFetchedPlugins,
+  enableAllFetchedPlugins,
+  toggleFetchedPlugin,
+} from "../slices/plugins";
+import styles from "../styles/FetchedPluginList.module.css";
+
+type Props = {
+  selectedCell?: { x: number; y: number };
+};
+
+const FetchedPluginsList: React.FC<Props> = ({ selectedCell }) => {
+  const dispatch = useAppDispatch();
+  const plugins = useAppSelector((state) =>
+    selectedCell
+      ? state.plugins.fetchedPlugins.filter((plugin) =>
+          plugin.cells.some(
+            (cell) => cell.x === selectedCell.x && cell.y === selectedCell.y
+            // TODO: support other worlds
+          )
+        )
+      : state.plugins.fetchedPlugins
+  );
+
+  return (
+    <>
+      {plugins.length > 0 && <h2>Added Plugins ({plugins.length})</h2>}
+      {!selectedCell && plugins.length > 0 && (
+        <div className={styles.buttons}>
+          <button onClick={() => dispatch(enableAllFetchedPlugins())}>
+            Enable all
+          </button>
+          <button onClick={() => dispatch(disableAllFetchedPlugins())}>
+            Disable all
+          </button>
+        </div>
+      )}
+      <ol
+        className={`${styles["plugin-list"]} ${
+          plugins.length > 0 ? styles["bottom-spacing"] : ""
+        }`}
+      >
+        {plugins.map((plugin) => (
+          <li key={plugin.hash} title={plugin.plugins[0].file_name}>
+            <input
+              id={plugin.hash}
+              type="checkbox"
+              checked={plugin.enabled ?? false}
+              value={plugin.enabled ? "on" : "off"}
+              onChange={() => dispatch(toggleFetchedPlugin(plugin.hash))}
+            />
+            <label htmlFor={plugin.hash} className={styles["plugin-label"]}>
+              <Link href={`/?plugin=${plugin.hash}`}>
+                <a>{plugin.plugins[0].file_name}</a>
+              </Link>
+            </label>
+          </li>
+        ))}
+      </ol>
+    </>
+  );
+};
+
+export default FetchedPluginsList;
--- a/components/Map.tsx
+++ b/components/Map.tsx
@@ -5,7 +5,7 @@ import mapboxgl from "mapbox-gl";
 import useSWRImmutable from "swr/immutable";

 import { useAppDispatch, useAppSelector } from "../lib/hooks";
-import { setFetchedPlugin, PluginFile } from "../slices/plugins";
+import { setSelectedFetchedPlugin, PluginFile } from "../slices/plugins";
 import styles from "../styles/Map.module.css";
 import Sidebar from "./Sidebar";
 import ToggleLayersControl from "./ToggleLayersControl";
@@ -55,9 +55,11 @@ const Map: React.FC = () => {
  const [sidebarOpen, setSidebarOpen] = useState(true);

  const dispatch = useAppDispatch();
-  const plugins = useAppSelector((state) => state.plugins.plugins);
+  const plugins = useAppSelector((state) => state.plugins.parsedPlugins);
  const pluginsPending = useAppSelector((state) => state.plugins.pending);
-  const fetchedPlugin = useAppSelector((state) => state.plugins.fetchedPlugin);
+  const selectedFetchedPlugin = useAppSelector(
+    (state) => state.plugins.selectedFetchedPlugin
+  );

  const { data: cellsData, error: cellsError } = useSWRImmutable(
    "https://cells.modmapper.com/edits.json",
@@ -243,7 +245,7 @@ const Map: React.FC = () => {

  const clearSelectedCells = useCallback(() => {
    setSelectedCells(null);
-    dispatch(setFetchedPlugin(undefined));
+    dispatch(setSelectedFetchedPlugin(undefined));
    if (map.current) {
      map.current.removeFeatureState({ source: "selected-cells-source" });
      map.current.removeFeatureState({ source: "conflicted-cell-source" });
@@ -371,12 +373,12 @@ const Map: React.FC = () => {
    if (
      router.query.plugin &&
      typeof router.query.plugin === "string" &&
-      fetchedPlugin &&
-      fetchedPlugin.cells
+      selectedFetchedPlugin &&
+      selectedFetchedPlugin.cells
    ) {
      const cells = [];
      const cellSet = new Set<number>();
-      for (const cell of fetchedPlugin.cells) {
+      for (const cell of selectedFetchedPlugin.cells) {
        if (
          cell.x !== undefined &&
          cell.y !== undefined &&
@@ -388,7 +390,7 @@ const Map: React.FC = () => {
      }
      selectCells(cells);
    }
-  }, [heatmapLoaded, fetchedPlugin, selectCells, router.query.plugin]);
+  }, [heatmapLoaded, selectedFetchedPlugin, selectCells, router.query.plugin]);

  useEffect(() => {
    if (!heatmapLoaded) return; // wait for all map layers to load
--- a/components/ModData.tsx
+++ b/components/ModData.tsx
@@ -12,6 +12,43 @@ export interface CellCoord {
  y: number;
 }

+export interface ModFile {
+  name: string;
+  version: string;
+  category: string;
+  nexus_file_id: number;
+}
+
+export interface FilePlugin {
+  hash: number;
+  file_path: string;
+}
+
+export interface FileCell {
+  x: number;
+  y: number;
+}
+
+export interface File {
+  id: number;
+  name: string;
+  file_name: string;
+  nexus_file_id: number;
+  mod_id: number;
+  category: string;
+  version: string;
+  mod_version: string;
+  size: number;
+  uploaded_at: string;
+  created_at: string;
+  downloaded_at: string;
+  has_plugin: boolean;
+  unable_to_extract_plugins: boolean;
+  cells: FileCell[];
+  plugins: FilePlugin[];
+  plugin_count: number;
+}
+
 export interface Mod {
  id: number;
  name: string;
@@ -30,6 +67,7 @@ export interface Mod {
  first_upload_at: string;
  last_updated_files_at: string;
  cells: CellCoord[];
+  files: ModFile[];
 }

 export const NEXUS_MODS_URL = "https://www.nexusmods.com/skyrimspecialedition";
--- a/components/ParsedPluginsList.tsx
+++ b/components/ParsedPluginsList.tsx
@@ -4,21 +4,21 @@ import React from "react";
 import { useAppSelector, useAppDispatch } from "../lib/hooks";
 import { excludedPlugins } from "../lib/plugins";
 import {
-  enableAllPlugins,
-  disableAllPlugins,
-  togglePlugin,
+  enableAllParsedPlugins,
+  disableAllParsedPlugins,
+  toggleParsedPlugin,
 } from "../slices/plugins";
-import styles from "../styles/PluginList.module.css";
+import styles from "../styles/ParsedPluginList.module.css";

 type Props = {
  selectedCell?: { x: number; y: number };
 };

-const PluginsList: React.FC<Props> = ({ selectedCell }) => {
+const ParsedPluginsList: React.FC<Props> = ({ selectedCell }) => {
  const dispatch = useAppDispatch();
  const plugins = useAppSelector((state) =>
    selectedCell
-      ? state.plugins.plugins.filter((plugin) =>
+      ? state.plugins.parsedPlugins.filter((plugin) =>
          plugin.parsed?.cells.some(
            (cell) =>
              cell.x === selectedCell.x &&
@@ -28,7 +28,7 @@ const PluginsList: React.FC<Props> = ({ selectedCell }) => {
              plugin.parsed?.header.masters[0] === "Skyrim.esm"
          )
        )
-      : state.plugins.plugins
+      : state.plugins.parsedPlugins
  );
  const pluginsPending = useAppSelector((state) => state.plugins.pending);

@@ -37,10 +37,10 @@ const PluginsList: React.FC<Props> = ({ selectedCell }) => {
      {plugins.length > 0 && <h2>Loaded Plugins ({plugins.length})</h2>}
      {!selectedCell && plugins.length > 0 && (
        <div className={styles.buttons}>
-          <button onClick={() => dispatch(enableAllPlugins())}>
+          <button onClick={() => dispatch(enableAllParsedPlugins())}>
            Enable all
          </button>
-          <button onClick={() => dispatch(disableAllPlugins())}>
+          <button onClick={() => dispatch(disableAllParsedPlugins())}>
            Disable all
          </button>
        </div>
@@ -60,7 +60,7 @@ const PluginsList: React.FC<Props> = ({ selectedCell }) => {
              }
              checked={plugin.enabled ?? false}
              value={plugin.enabled ? "on" : "off"}
-              onChange={() => dispatch(togglePlugin(plugin.filename))}
+              onChange={() => dispatch(toggleParsedPlugin(plugin.filename))}
            />
            <label htmlFor={plugin.filename} className={styles["plugin-label"]}>
              {excludedPlugins.includes(plugin.filename) ? (
@@ -87,4 +87,4 @@ const PluginsList: React.FC<Props> = ({ selectedCell }) => {
  );
 };

-export default PluginsList;
+export default ParsedPluginsList;
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -11,7 +11,8 @@ import ModData from "./ModData";
 import PluginDetail from "./PluginDetail";
 import DataDirPicker from "./DataDirPicker";
 import PluginTxtEditor from "./PluginTxtEditor";
-import PluginsList from "./PluginsList";
+import ParsedPluginsList from "./ParsedPluginsList";
+import FetchedPluginsList from "./FetchedPluginsList";
 import styles from "../styles/Sidebar.module.css";

 type Props = {
@@ -154,7 +155,8 @@ const Sidebar: React.FC<Props> = ({
            </p>
            <DataDirPicker />
            <PluginTxtEditor />
-            <PluginsList />
+            <ParsedPluginsList />
+            <FetchedPluginsList />
            <AddModDialog counts={counts} />
            {renderLastModified(lastModified)}
          </div>