modmapper-web/components/CellData.tsx

121 lines
3.4 KiB
TypeScript

import Head from "next/head";
import React from "react";
import useSWRImmutable from "swr/immutable";
import styles from "../styles/CellData.module.css";
import ModList from "./ModList";
import PluginList from "./ParsedPluginsList";
import { jsonFetcher } from "../lib/api";
export interface Mod {
id: number;
name: string;
nexus_mod_id: number;
author_name: string;
author_id: number;
category_name: string;
category_id: number;
description: string;
thumbnail_link: string;
game_id: number;
is_translation: boolean;
updated_at: string;
created_at: string;
last_update_at: string;
first_upload_at: string;
last_updated_files_at: string;
}
export interface Cell {
form_id: number;
x: number;
y: number;
is_persistent: boolean;
mods_count: number;
files_count: number;
plugins_count: number;
mods: Mod[];
}
type Props = {
selectedCell: { x: number; y: number };
counts: Record<number, [number, number, number]> | null;
};
const CellData: React.FC<Props> = ({ selectedCell, counts }) => {
const { data, error } = useSWRImmutable(
`https://cells.modmapper.com/${selectedCell.x}/${selectedCell.y}.json`,
(_) => jsonFetcher<Cell>(_)
);
if (error && error.status === 404) {
return <div>Cell has no mod edits.</div>;
} else if (error) {
return <div>{`Error loading cell data: ${error.message}`}</div>;
}
if (data === undefined) return <div>Loading...</div>;
if (data === null) return <div>Cell has no edits.</div>;
return (
selectedCell && (
<>
<Head>
<title key="title">{`Modmapper - Cell ${data.x}, ${data.y}`}</title>
<meta
key="description"
name="description"
content={`Map of Skyrim showing ${data.mods_count} mods that edit cell ${data.x}, ${data.y}`}
/>
<meta
key="og:title"
property="og:title"
content={`Modmapper - Cell ${data.x}, ${data.y}`}
/>
<meta
key="og:description"
property="og:description"
content={`Map of Skyrim showing ${data.mods_count} mods that edit cell ${data.x}, ${data.y}`}
/>
<meta
key="twitter:title"
name="twitter:title"
content={`Modmapper - Cell ${data.x}, ${data.y}`}
/>
<meta
key="twitter:description"
name="twitter:description"
content={`Map of Skyrim showing ${data.mods_count} mods that edit cell ${data.x}, ${data.y}`}
/>
<meta
key="og:url"
property="og:url"
content={`https://modmapper.com/?cell=${encodeURIComponent(
`${data.x},${data.y}`
)}`}
/>
</Head>
<ul className={styles["cell-data-list"]}>
<li>
<strong>Form ID:</strong>{" "}
<span>{data.form_id.toString(16).padStart(8, "0")}</span>
</li>
<li>
<strong>Mods that edit:</strong> <span>{data.mods_count}</span>
</li>
<li>
<strong>Files that edit:</strong> <span>{data.files_count}</span>
</li>
<li>
<strong>Plugins that edit:</strong>{" "}
<span>{data.plugins_count}</span>
</li>
</ul>
<PluginList selectedCell={selectedCell} />
<ModList mods={data.mods} counts={counts} />
</>
)
);
};
export default CellData;