92 lines
2.2 KiB
TypeScript
92 lines
2.2 KiB
TypeScript
import React from "react";
|
|
import useSWRImmutable from "swr/immutable";
|
|
|
|
import styles from "../styles/CellData.module.css";
|
|
import CellModList from "./CellModList";
|
|
|
|
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;
|
|
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[];
|
|
}
|
|
|
|
const jsonFetcher = async (url: string): Promise<Cell | null> => {
|
|
const res = await fetch(url);
|
|
|
|
if (!res.ok) {
|
|
if (res.status === 404) {
|
|
return null;
|
|
}
|
|
const error = new Error("An error occurred while fetching the data.");
|
|
throw error;
|
|
}
|
|
return res.json();
|
|
};
|
|
|
|
type Props = {
|
|
selectedCell: { x: number; y: number };
|
|
};
|
|
|
|
const CellData: React.FC<Props> = ({ selectedCell }) => {
|
|
const { data, error } = useSWRImmutable(
|
|
`https://cells.modmapper.com/${selectedCell.x}/${selectedCell.y}.json`,
|
|
jsonFetcher
|
|
);
|
|
|
|
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 && (
|
|
<>
|
|
<ul className={styles["cell-data-list"]}>
|
|
<li>
|
|
<strong>Form ID:</strong> <span>{data.form_id}</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>
|
|
<CellModList mods={data.mods} />
|
|
</>
|
|
)
|
|
);
|
|
};
|
|
|
|
export default CellData;
|