import { format } from "date-fns"; import Head from "next/head"; import React from "react"; import useSWRImmutable from "swr/immutable"; import ModCellList from "./ModCellList"; import styles from "../styles/ModData.module.css"; export interface CellCoord { x: number; y: number; } 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; cells: CellCoord[]; } const NEXUS_MODS_URL = "https://www.nexusmods.com/skyrimspecialedition"; const jsonFetcher = async (url: string): Promise => { 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 = { selectedMod: number; counts: Record | null; setSelectedCells: (cells: { x: number; y: number }[] | null) => void; }; const ModData: React.FC = ({ selectedMod, counts, setSelectedCells, }) => { const { data, error } = useSWRImmutable( `https://mods.modmapper.com/${selectedMod}.json`, jsonFetcher ); if (error && error.status === 404) { return

Mod could not be found.

; } else if (error) { return

{`Error loading mod data: ${error.message}`}

; } if (data === undefined) return

; if (data === null) return

Mod could not be found.

; let numberFmt = new Intl.NumberFormat("en-US"); const modCounts = counts && counts[data.nexus_mod_id]; const total_downloads = modCounts ? modCounts[0] : 0; const unique_downloads = modCounts ? modCounts[1] : 0; const views = modCounts ? modCounts[2] : 0; setSelectedCells(data.cells); if (selectedMod && data) { return ( <> {`Modmapper - ${data.name}`}

{data.name}

Category: {data.category_name}

Author: {data.author_name}

Uploaded:{" "} {format(new Date(data.first_upload_at), "d MMM y")}

Last Update:{" "} {format(new Date(data.last_update_at), "d MMM y")}

Total Downloads: {numberFmt.format(total_downloads)}

Unique Downloads:{" "} {numberFmt.format(unique_downloads)}

); } return null; }; export default ModData;