81 lines
2.4 KiB
TypeScript
81 lines
2.4 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
|
import Link from "next/link";
|
|
import React from "react";
|
|
|
|
import { useAppSelector, useAppDispatch } from "../lib/hooks";
|
|
import {
|
|
disableAllFetchedPlugins,
|
|
enableAllFetchedPlugins,
|
|
toggleFetchedPlugin,
|
|
removeFetchedPlugin,
|
|
} from "../slices/plugins";
|
|
import styles from "../styles/FetchedPluginsList.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}
|
|
className={styles["plugin-row"]}
|
|
>
|
|
<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>
|
|
<button
|
|
onClick={() => dispatch(removeFetchedPlugin(plugin.hash))}
|
|
className={styles["plugin-remove"]}
|
|
>
|
|
<img src="/img/close.svg" width={18} height={18} alt="close" />
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default FetchedPluginsList;
|