78 lines
2.0 KiB
TypeScript
78 lines
2.0 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: [number, number];
|
||
|
|
};
|
||
|
|
|
||
|
|
const CellData: React.FC<Props> = ({ selectedCell }) => {
|
||
|
|
const { data, error } = useSWRImmutable(`https://cells.modmapper.com/${selectedCell[0]}/${selectedCell[1]}.json`, jsonFetcher);
|
||
|
|
|
||
|
|
if (error && error.status === 404) {
|
||
|
|
return <div>Cell has no mod edits.</div>;
|
||
|
|
} else if (error) {
|
||
|
|
console.log(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;
|