modmapper-web/components/PluginTxtEditor.tsx

89 lines
2.6 KiB
TypeScript

import { createPortal } from "react-dom";
import React, { useEffect, useState } from "react";
import { useAppSelector, useAppDispatch } from "../lib/hooks";
import { setPluginsTxt } from "../slices/pluginsTxt";
import { applyLoadOrder } from "../slices/plugins";
import styles from "../styles/PluginTxtEditor.module.css";
export const excludedPlugins = [
"Skyrim.esm",
"Update.esm",
"Dawnguard.esm",
"HearthFires.esm",
"Dragonborn.esm",
];
type Props = {};
const PluginsLoader: React.FC<Props> = () => {
const [editPluginsTxt, setEditPluginsTxt] = useState<string | null>(null);
const [pluginsTxtShown, setPluginsTxtShown] = useState(false);
const dispatch = useAppDispatch();
const pluginsTxt = useAppSelector((state) => state.pluginsTxt);
useEffect(() => {
setPluginsTxtShown(false);
console.log("going to apply!");
dispatch(applyLoadOrder());
}, [dispatch, pluginsTxt]);
const onPluginsTxtButtonClick = async () => {
setEditPluginsTxt(pluginsTxt);
setPluginsTxtShown(true);
};
return (
<>
<p>
Paste or drag-and-drop your <code>plugins.txt</code> below to sort and
enable the loaded plugins by your current load order.
</p>
<button onClick={onPluginsTxtButtonClick}>
{!pluginsTxt ? "Paste" : "Edit"} Skyrim plugins.txt file
</button>
{process.browser &&
createPortal(
<dialog open={pluginsTxtShown} className={styles.dialog}>
<h3>Paste plugins.txt</h3>
<p>
The plugins.txt file is typically found at{" "}
<code>
C:\Users\username\AppData\Local\Skyrim Special Edition
</code>
. You can also drag-and-drop the file anywhere on the window to
load the file.
</p>
<textarea
value={editPluginsTxt ?? undefined}
onChange={(e) => setEditPluginsTxt(e.target.value)}
/>
<menu>
<button
onClick={() => {
setEditPluginsTxt(null);
setPluginsTxtShown(false);
}}
>
Cancel
</button>
<button
onClick={() => {
dispatch(setPluginsTxt(editPluginsTxt ?? ""));
setPluginsTxtShown(false);
}}
>
Save
</button>
</menu>
</dialog>,
document.body
)}
{process.browser &&
createPortal(<div className={styles["drop-area"]} />, document.body)}
</>
);
};
export default PluginsLoader;