thallada/modmapper-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Notification message for add/remove mod

Browse Source 
Also changed how scrolling resets on pagination.

And tweaked pagination styling.
This commit is contained in:
Tyler Hallada 2022-08-28 23:43:44 -04:00
parent 10bc093300
commit 2bd5227287
7 changed files with 70 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/CellList.tsx
View File

@ -60,7 +60,7 @@ const CellList: React.FC<Props> = ({ cells }) => {
forcePage={page}
onPageChange={(event) => {
setPage(event.selected);
document.getElementById("sidebar")?.scrollTo(0, 0);
document.getElementById("exterior-cells")?.scrollIntoView();
}}
pageRangeDisplayed={3}
marginPagesDisplayed={2}
@ -76,7 +76,7 @@ const CellList: React.FC<Props> = ({ cells }) => {
return (
filteredCells && (
<>
<h2>Exterior Cells ({filteredCells.length})</h2>
<h2 id="exterior-cells">Exterior Cells ({filteredCells.length})</h2>
<div className={styles.filters}>
<hr />
<div className={styles["filter-row"]}>

4
components/FetchedPluginsList.tsx
View File

@ -30,7 +30,9 @@ const FetchedPluginsList: React.FC<Props> = ({ selectedCell }) => {
return (
<>
{plugins.length > 0 && <h2>Added Plugins ({plugins.length})</h2>}
{plugins.length > 0 && (
<h2 id="added-plugins">Added Plugins ({plugins.length})</h2>
)}
{!selectedCell && plugins.length > 0 && (
<div className={styles.buttons}>
<button onClick={() => dispatch(enableAllFetchedPlugins())}>

48
components/ModData.tsx
View File

@ -98,6 +98,8 @@ const ModData: React.FC<Props> = ({
onSelectFile,
onSelectPlugin,
}) => {
const [showAddRemovePluginNotification, setShowAddRemovePluginNotification] =
useState<boolean>(false);
const { data: modData, error: modError } = useSWRImmutable(
`https://mods.modmapper.com/${selectedMod}.json`,
(_) => jsonFetcher<Mod>(_)
@ -286,23 +288,37 @@ const ModData: React.FC<Props> = ({
</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(
<>
<div className={styles["plugin-actions"]}>
<Link href={`/?plugin=${pluginData.hash}`}>
<a className={styles["plugin-link"]}>View plugin</a>
</Link>
<button
className={styles.button}
onClick={() => {
if (fetchedPlugin) {
dispatch(removeFetchedPlugin(pluginData.hash));
} else {
dispatch(
updateFetchedPlugin({ ...pluginData, enabled: true })
)
}
>
{Boolean(fetchedPlugin) ? "Remove plugin" : "Add plugin"}
</button>
</div>
);
}
setShowAddRemovePluginNotification(true);
}}
>
{Boolean(fetchedPlugin) ? "Remove plugin" : "Add plugin"}
</button>
</div>
{showAddRemovePluginNotification && (
<span>
Plugin {Boolean(fetchedPlugin) ? "added" : "removed"}.{" "}
<Link href="/#added-plugins">
<a>View list</a>
</Link>
.
</span>
)}
</>
) : (
<div className={styles.spacer} />
)}

4
components/ModList.tsx
View File

@ -120,7 +120,7 @@ const ModList: React.FC<Props> = ({ mods, files, counts }) => {
forcePage={page}
onPageChange={(event) => {
setPage(event.selected);
document.getElementById("sidebar")?.scrollTo(0, 0);
document.getElementById("nexus-mods")?.scrollIntoView();
}}
pageRangeDisplayed={3}
marginPagesDisplayed={2}
@ -136,7 +136,7 @@ const ModList: React.FC<Props> = ({ mods, files, counts }) => {
return (
mods && (
<>
<h2>Nexus Mods ({modsWithCounts.length})</h2>
<h2 id="nexus-mods">Nexus Mods ({modsWithCounts.length})</h2>
<div className={styles.filters}>
<hr />
<div className={styles["filter-row"]}>

40
components/PluginDetail.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect } from "react";
import React, { useEffect, useState } from "react";
import useSWRImmutable from "swr/immutable";
import { useAppDispatch, useAppSelector } from "../lib/hooks";
@ -15,6 +15,7 @@ import type { CellCoord } from "./ModData";
import PluginData, { Plugin as PluginProps } from "./PluginData";
import styles from "../styles/PluginDetail.module.css";
import { jsonFetcher } from "../lib/api";
import Link from "next/link";
const buildPluginProps = (
data?: PluginsByHashWithMods | null,
@ -48,6 +49,9 @@ type Props = {
};
const PluginDetail: React.FC<Props> = ({ hash, counts }) => {
const [showAddRemovePluginNotification, setShowAddRemovePluginNotification] =
useState<boolean>(false);
const { data, error } = useSWRImmutable(
`https://plugins.modmapper.com/${hash}.json`,
(_) => jsonFetcher<PluginsByHashWithMods>(_)
@ -84,16 +88,30 @@ const PluginDetail: React.FC<Props> = ({ hash, counts }) => {
counts={counts}
/>
{data && (
<button
className={styles.button}
onClick={() =>
fetchedPlugin
? dispatch(removeFetchedPlugin(data.hash))
: dispatch(updateFetchedPlugin({ ...data, enabled: true }))
}
>
{Boolean(fetchedPlugin) ? "Remove plugin" : "Add plugin"}
</button>
<>
<button
className={styles.button}
onClick={() => {
if (fetchedPlugin) {
dispatch(removeFetchedPlugin(data.hash));
} else {
dispatch(updateFetchedPlugin({ ...data, enabled: true }));
}
setShowAddRemovePluginNotification(true);
}}
>
{Boolean(fetchedPlugin) ? "Remove plugin" : "Add plugin"}
</button>
{showAddRemovePluginNotification && (
<span>
Plugin {Boolean(fetchedPlugin) ? "added" : "removed"}.{" "}
<Link href="/#added-plugins">
<a>View list</a>
</Link>
.
</span>
)}
</>
)}
{data && <ModList mods={data.mods} files={data.files} counts={counts} />}
{parsedPlugin?.parseError && (

2
styles/CellList.module.css
View File

@ -56,7 +56,7 @@
padding: 0;
margin-top: 0;
width: 100%;
justify-content: center;
justify-content: space-between;
}
.pagination li {

2
styles/ModList.module.css
View File

@ -115,7 +115,7 @@
padding: 0;
margin-top: 0;
width: 100%;
justify-content: center;
justify-content: space-between;
}
.pagination li {