thallada/modmapper-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sort mod search results by unique downloads

Browse Source
This commit is contained in:
Tyler Hallada 2022-01-30 16:55:50 -05:00
parent 8bae1c03c8
commit 16a2ec3ac9
6 changed files with 75 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/CellData.tsx
View File

@ -48,7 +48,7 @@ const jsonFetcher = async (url: string): Promise<Cell | null> => {
type Props = {
selectedCell: { x: number; y: number };
counts: [number, number, number, number][];
counts: Record<number, [number, number, number]> | null;
};
const CellData: React.FC<Props> = ({ selectedCell, counts }) => {

10
components/CellModList.tsx
View File

@ -8,7 +8,7 @@ const NEXUS_MODS_URL = "https://www.nexusmods.com/skyrimspecialedition";
type Props = {
mods: Mod[];
counts: [number, number, number, number][];
counts: Record<number, [number, number, number]> | null;
};
type ModWithCounts = Mod & {
@ -19,12 +19,12 @@ type ModWithCounts = Mod & {
const CellModList: React.FC<Props> = ({ mods, counts }) => {
const modsWithCounts: ModWithCounts[] = mods.map((mod) => {
const modCounts = counts.find((count) => count[0] === mod.nexus_mod_id);
const modCounts = counts && counts[mod.nexus_mod_id];
return {
...mod,
total_downloads: modCounts ? modCounts[1] : 0,
unique_downloads: modCounts ? modCounts[2] : 0,
views: modCounts ? modCounts[3] : 0,
total_downloads: modCounts ? modCounts[0] : 0,
unique_downloads: modCounts ? modCounts[1] : 0,
views: modCounts ? modCounts[2] : 0,
};
});

35
components/Map.tsx
View File

@ -21,7 +21,11 @@ colorGradient.setGradient(
);
colorGradient.setMidpoint(360);
const LIVE_DOWNLOAD_COUNTS_URL =
"https://staticstats.nexusmods.com/live_download_counts/mods/1704.csv";
const jsonFetcher = (url: string) => fetch(url).then((res) => res.json());
const csvFetcher = (url: string) => fetch(url).then((res) => res.text());
const Map: React.FC = () => {
const router = useRouter();
@ -43,10 +47,19 @@ const Map: React.FC = () => {
} | null>(null);
const sidebarOpen = selectedCell !== null || router.query.mod !== undefined;
const { data, error } = useSWRImmutable(
const { data: cellsData, error: cellsError } = useSWRImmutable(
"https://cells.modmapper.com/edits.json",
jsonFetcher
);
// The live download counts are not really immutable, but I'd still rather load them once per session
const [counts, setCounts] = useState<Record<
number,
[number, number, number]
> | null>(null);
const { data: countsData, error: countsError } = useSWRImmutable(
LIVE_DOWNLOAD_COUNTS_URL,
csvFetcher
);
const selectMapCell = useCallback(
(cell: { x: number; y: number }) => {
@ -240,7 +253,7 @@ const Map: React.FC = () => {
}, [setMapLoaded]);
useEffect(() => {
if (!data || !router.isReady || !mapLoaded) return; // wait for map to initialize and data to load
if (!cellsData || !router.isReady || !mapLoaded) return; // wait for map to initialize and data to load
if (map.current.getSource("graticule")) return; // don't initialize twice
const zoom = map.current.getZoom();
@ -368,7 +381,7 @@ const Map: React.FC = () => {
x * cellSize + viewportNW.x,
y * cellSize + viewportNW.y + cellSize,
]);
const editCount = (data as Record<string, number>)[
const editCount = (cellsData as Record<string, number>)[
`${x - 57},${50 - y}`
];
grid.features.push({
@ -462,7 +475,18 @@ const Map: React.FC = () => {
});
setHeatmapLoaded(true);
}, [data, mapLoaded, router, setHeatmapLoaded]);
}, [cellsData, mapLoaded, router, setHeatmapLoaded]);
useEffect(() => {
if (countsData) {
const newCounts: Record<number, [number, number, number]> = {};
for (const line of countsData.split("\n")) {
const nums = line.split(",").map((count) => parseInt(count, 10));
newCounts[nums[0]] = [nums[1], nums[2], nums[3]];
}
setCounts(newCounts);
}
}, [setCounts, countsData]);
return (
<>
@ -477,11 +501,14 @@ const Map: React.FC = () => {
selectedCell={selectedCell}
clearSelectedCell={() => router.push({ query: {} })}
map={map}
counts={counts}
countsError={countsError}
/>
<ToggleLayersControl map={map} />
<SearchBar
map={map}
clearSelectedCell={() => router.push({ query: {} })}
counts={counts}
/>
</div>
</div>

10
components/ModData.tsx
View File

@ -45,7 +45,7 @@ const jsonFetcher = async (url: string): Promise<Mod | null> => {
type Props = {
selectedMod: number;
counts: [number, number, number, number][];
counts: Record<number, [number, number, number]> | null;
};
const ModData: React.FC<Props> = ({ selectedMod, counts }) => {
@ -65,10 +65,10 @@ const ModData: React.FC<Props> = ({ selectedMod, counts }) => {
return <div className={styles.status}>Mod could not be found.</div>;
let numberFmt = new Intl.NumberFormat("en-US");
const modCounts = counts.find((count) => count[0] === data.nexus_mod_id);
const total_downloads = modCounts ? modCounts[1] : 0;
const unique_downloads = modCounts ? modCounts[2] : 0;
const views = modCounts ? modCounts[3] : 0;
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 (

33
components/SearchBar.tsx
View File

@ -6,10 +6,12 @@ import useSWRImmutable from "swr/immutable";
import styles from "../styles/SearchBar.module.css";
import { join } from "path/posix";
import { countReset } from "console";
type Props = {
clearSelectedCell: () => void;
map: React.MutableRefObject<mapboxgl.Map>;
counts: Record<number, [number, number, number]> | null;
};
interface Mod {
@ -30,7 +32,7 @@ const jsonFetcher = async (url: string): Promise<Mod | null> => {
return res.json();
};
const SearchBar: React.FC<Props> = ({ clearSelectedCell, map }) => {
const SearchBar: React.FC<Props> = ({ clearSelectedCell, counts, map }) => {
const router = useRouter();
const searchEngine = useRef<MiniSearch<Mod> | null>(
@ -122,16 +124,25 @@ const SearchBar: React.FC<Props> = ({ clearSelectedCell, map }) => {
/>
{results.length > 0 && (
<ul className={styles["search-results"]}>
{results.map((result) => (
<li
key={result.id}
onClick={onChooseResult({ id: result.id, name: result.name })}
onTouchStart={() => setClickingResult(true)}
onMouseDown={() => setClickingResult(true)}
>
{result.name}
</li>
))}
{results
.sort((resultA, resultB) => {
if (counts) {
const countA = counts[resultA.id];
const countB = counts[resultB.id];
if (countA && countB) return countB[2] - countA[2];
}
return 0;
})
.map((result) => (
<li
key={result.id}
onClick={onChooseResult({ id: result.id, name: result.name })}
onTouchStart={() => setClickingResult(true)}
onMouseDown={() => setClickingResult(true)}
>
{result.name}
</li>
))}
</ul>
)}
</div>

35
components/Sidebar.tsx
View File

@ -7,10 +7,6 @@ import ModData from "./ModData";
import styles from "../styles/Sidebar.module.css";
import { render } from "react-dom";
const LIVE_DOWNLOAD_COUNTS_URL =
"https://staticstats.nexusmods.com/live_download_counts/mods/1704.csv";
const csvFetcher = (url: string) => fetch(url).then((res) => res.text());
interface Cell {
x: number;
y: number;
@ -21,27 +17,18 @@ type Props = {
selectedCell: { x: number; y: number } | null;
clearSelectedCell: () => void;
map: React.MutableRefObject<mapboxgl.Map | null>;
counts: Record<number, [number, number, number]> | null;
countsError: Error | null;
};
const Sidebar: React.FC<Props> = ({ selectedCell, clearSelectedCell, map }) => {
const Sidebar: React.FC<Props> = ({
selectedCell,
clearSelectedCell,
counts,
countsError,
map,
}) => {
const router = useRouter();
// The live download counts are not really immutable, but I'd still rather load them once per session
const { data, error } = useSWRImmutable(LIVE_DOWNLOAD_COUNTS_URL, csvFetcher);
const [counts, setCounts] = useState<
[number, number, number, number][] | null
>(null);
useEffect(() => {
if (data) {
setCounts(
data
.split("\n")
.map((line) =>
line.split(",").map((count) => parseInt(count, 10))
) as [number, number, number, number][]
);
}
}, [setCounts, data]);
const renderLoadError = (error: Error) => (
<div>{`Error loading live download counts: ${error.message}`}</div>
@ -50,14 +37,14 @@ const Sidebar: React.FC<Props> = ({ selectedCell, clearSelectedCell, map }) => {
const renderLoading = () => <div>Loading...</div>;
const renderCellData = (selectedCell: { x: number; y: number }) => {
if (error) return renderLoadError(error);
if (countsError) return renderLoadError(countsError);
if (!counts) return renderLoading();
return <CellData selectedCell={selectedCell} counts={counts} />;
};
const renderModData = (selectedMod: number) => {
if (error) return renderLoadError(error);
if (countsError) return renderLoadError(countsError);
if (!counts) return renderLoading();
return <ModData selectedMod={selectedMod} counts={counts} />;