From a590dbd02cdf7ad30b2181cf6f2b0690a6cd5be4 Mon Sep 17 00:00:00 2001 From: Tyler Hallada Date: Mon, 14 Mar 2022 21:55:52 -0400 Subject: [PATCH] Add cell list to plugin detail page Also add mod counts in parenthesis. --- components/{ModCellList.tsx => CellList.tsx} | 4 +- components/CellModList.tsx | 2 +- components/Map.tsx | 7 ++- components/ModData.tsx | 4 +- components/PluginDetail.tsx | 65 +++++++++++++++----- components/PluginModList.tsx | 63 +++++++++---------- 6 files changed, 91 insertions(+), 54 deletions(-) rename components/{ModCellList.tsx => CellList.tsx} (93%) diff --git a/components/ModCellList.tsx b/components/CellList.tsx similarity index 93% rename from components/ModCellList.tsx rename to components/CellList.tsx index 0e7c33c..29cc352 100644 --- a/components/ModCellList.tsx +++ b/components/CellList.tsx @@ -10,7 +10,7 @@ type Props = { cells: CellCoord[]; }; -const ModCellList: React.FC = ({ cells }) => { +const CellList: React.FC = ({ cells }) => { return ( cells && ( <> @@ -44,4 +44,4 @@ const ModCellList: React.FC = ({ cells }) => { ); }; -export default ModCellList; +export default CellList; diff --git a/components/CellModList.tsx b/components/CellModList.tsx index 8a10bfa..5b35175 100644 --- a/components/CellModList.tsx +++ b/components/CellModList.tsx @@ -34,7 +34,7 @@ const CellModList: React.FC = ({ mods, counts }) => { return ( mods && ( <> -

Mods

+

Mods ({modsWithCounts.length})

    {modsWithCounts .sort((a, b) => b.unique_downloads - a.unique_downloads) diff --git a/components/Map.tsx b/components/Map.tsx index 5fe0e5c..28f115c 100644 --- a/components/Map.tsx +++ b/components/Map.tsx @@ -362,7 +362,12 @@ const Map: React.FC = () => { ]); useEffect(() => { - if (router.query.plugin && typeof router.query.plugin === "string" && fetchedPlugin && fetchedPlugin.cells) { + if ( + router.query.plugin && + typeof router.query.plugin === "string" && + fetchedPlugin && + fetchedPlugin.cells + ) { const cells = []; const cellSet = new Set(); for (const cell of fetchedPlugin.cells) { diff --git a/components/ModData.tsx b/components/ModData.tsx index 51921b5..0ae2810 100644 --- a/components/ModData.tsx +++ b/components/ModData.tsx @@ -3,7 +3,7 @@ import Head from "next/head"; import React from "react"; import useSWRImmutable from "swr/immutable"; -import ModCellList from "./ModCellList"; +import CellList from "./CellList"; import styles from "../styles/ModData.module.css"; export interface CellCoord { @@ -160,7 +160,7 @@ const ModData: React.FC = ({ Unique Downloads:{" "} {numberFmt.format(unique_downloads)} - + ); } diff --git a/components/PluginDetail.tsx b/components/PluginDetail.tsx index 86f47f1..ed4e095 100644 --- a/components/PluginDetail.tsx +++ b/components/PluginDetail.tsx @@ -2,12 +2,20 @@ import React, { useEffect } from "react"; import useSWRImmutable from "swr/immutable"; import { useAppDispatch, useAppSelector } from "../lib/hooks"; -import { setFetchedPlugin, PluginFile, PluginsByHashWithMods, Cell } from "../slices/plugins"; +import { + setFetchedPlugin, + PluginFile, + PluginsByHashWithMods, +} from "../slices/plugins"; import PluginModList from "./PluginModList"; +import CellList from "./CellList"; +import type { CellCoord } from "./ModData"; import PluginData, { Plugin as PluginProps } from "./PluginData"; import styles from "../styles/PluginData.module.css"; -const jsonFetcher = async (url: string): Promise => { +const jsonFetcher = async ( + url: string +): Promise => { const res = await fetch(url); if (!res.ok) { @@ -20,18 +28,34 @@ const jsonFetcher = async (url: string): Promise = return res.json(); }; -const buildPluginProps = (data?: PluginsByHashWithMods | null, plugin?: PluginFile): PluginProps => { +const buildPluginProps = ( + data?: PluginsByHashWithMods | null, + plugin?: PluginFile +): PluginProps => { const dataPlugin = data && data.plugins.length > 0 && data.plugins[0]; return { - hash: (plugin && plugin.hash) || (dataPlugin && dataPlugin.hash.toString(36)) || "", + hash: + (plugin && plugin.hash) || + (dataPlugin && dataPlugin.hash.toString(36)) || + "", size: plugin?.size || (dataPlugin && dataPlugin.size) || 0, - author: plugin?.parsed?.header.author || (dataPlugin && dataPlugin.author) || undefined, - description: plugin?.parsed?.header.description || (dataPlugin && dataPlugin.description) || undefined, - masters: plugin?.parsed?.header.masters || (dataPlugin && dataPlugin.masters) || [], + author: + plugin?.parsed?.header.author || + (dataPlugin && dataPlugin.author) || + undefined, + description: + plugin?.parsed?.header.description || + (dataPlugin && dataPlugin.description) || + undefined, + masters: + plugin?.parsed?.header.masters || + (dataPlugin && dataPlugin.masters) || + [], file_name: plugin?.filename || (dataPlugin && dataPlugin.file_name) || "", - cell_count: plugin?.parsed?.cells.length || (data && data.cells.length) || 0, - } -} + cell_count: + plugin?.parsed?.cells.length || (data && data.cells.length) || 0, + }; +}; type Props = { hash: string; @@ -53,7 +77,7 @@ const PluginDetail: React.FC = ({ hash, counts }) => { if (data) { dispatch(setFetchedPlugin(data)); } - }, [dispatch, data, fetchedPlugin]) + }, [dispatch, data, fetchedPlugin]); if (!plugin && error && error.status === 404) { return

    Plugin could not be found.

    ; @@ -67,11 +91,22 @@ const PluginDetail: React.FC = ({ hash, counts }) => { return ( <> - + {data && ( + + )} + + cell.x !== undefined && + cell.y !== undefined && + cell.world_form_id === 60 + ) as CellCoord[]) || + data?.cells || + [] + } /> - {data && } ); }; diff --git a/components/PluginModList.tsx b/components/PluginModList.tsx index 4964f8a..3ee5742 100644 --- a/components/PluginModList.tsx +++ b/components/PluginModList.tsx @@ -37,7 +37,7 @@ const PluginModList: React.FC = ({ mods, files, counts }) => { return ( mods && ( <> -

    Mods

    +

    Mods ({modsWithCounts.length})

      {modsWithCounts .sort((a, b) => b.unique_downloads - a.unique_downloads) @@ -96,42 +96,39 @@ const PluginModList: React.FC = ({ mods, files, counts }) => { {numberFmt.format(mod.unique_downloads)}
        - {files.filter(file => file.mod_id === mod.id).map(file => ( -
      • -
        - File:{" "} - {file.name} -
        - {file.mod_version && ( + {files + .filter((file) => file.mod_id === mod.id) + .map((file) => ( +
      • - Version:{" "} - {file.mod_version} + File: {file.name}
        - )} - {file.version && file.mod_version !== file.version && ( + {file.mod_version && ( +
        + Version: {file.mod_version} +
        + )} + {file.version && file.mod_version !== file.version && ( +
        + File Version: {file.version} +
        + )} + {file.category && ( +
        + Category: {file.category} +
        + )}
        - File Version:{" "} - {file.version} + Size: {formatBytes(file.size)}
        - )} - {file.category && ( -
        - Category:{" "} - {file.category} -
        - )} -
        - Size:{" "} - {formatBytes(file.size)} -
        - {file.uploaded_at && ( -
        - Uploaded:{" "} - {format(new Date(file.uploaded_at), "d MMM y")} -
        - )} -
        • - ))} + {file.uploaded_at && ( +
        + Uploaded:{" "} + {format(new Date(file.uploaded_at), "d MMM y")} +
        + )} + + ))}
      ))}