import { format } from "date-fns"; import Head from "next/head"; import React, { useEffect } from "react"; import useSWRImmutable from "swr/immutable"; import CellList from "./CellList"; import styles from "../styles/ModData.module.css"; import { jsonFetcher } from "../lib/api"; export interface CellCoord { x: number; y: number; } export interface ModFile { name: string; version: string; category: string; nexus_file_id: number; } export interface FilePlugin { hash: number; file_path: string; } export interface FileCell { x: number; y: number; } export interface File { id: number; name: string; file_name: string; nexus_file_id: number; mod_id: number; category: string; version: string; mod_version: string; size: number; uploaded_at: string; created_at: string; downloaded_at: string; has_plugin: boolean; unable_to_extract_plugins: boolean; cells: FileCell[]; plugins: FilePlugin[]; plugin_count: 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; is_translation: boolean; updated_at: string; created_at: string; last_update_at: string; first_upload_at: string; last_updated_files_at: string; cells: CellCoord[]; files: ModFile[]; } export const NEXUS_MODS_URL = "https://www.nexusmods.com/skyrimspecialedition"; 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(_) ); useEffect(() => { if (data) setSelectedCells(data.cells); }, [data, setSelectedCells]); 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; if (selectedMod && data) { return ( <> {`Modmapper - ${data.name}`}

{data.name}

Category: {data.category_name} {data.is_translation && (translation)}

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;