Sort mod search results by unique downloads

components/CellData.tsx

@@ -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 }) => {

components/CellModList.tsx

@@ -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,
+      total_downloads: modCounts ? modCounts[0] : 0,
-      unique_downloads: modCounts ? modCounts[2] : 0,
+      unique_downloads: modCounts ? modCounts[1] : 0,
-      views: modCounts ? modCounts[3] : 0,
+      views: modCounts ? modCounts[2] : 0,
     };
   });
 

components/Map.tsx

@@ -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>

components/ModData.tsx

@@ -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 modCounts = counts && counts[data.nexus_mod_id];
-  const total_downloads = modCounts ? modCounts[1] : 0;
+  const total_downloads = modCounts ? modCounts[0] : 0;
-  const unique_downloads = modCounts ? modCounts[2] : 0;
+  const unique_downloads = modCounts ? modCounts[1] : 0;
-  const views = modCounts ? modCounts[3] : 0;
+  const views = modCounts ? modCounts[2] : 0;
 
   if (selectedMod && data) {
     return (

components/SearchBar.tsx

@@ -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) => (
+          {results
-            <li
+            .sort((resultA, resultB) => {
-              key={result.id}
+              if (counts) {
-              onClick={onChooseResult({ id: result.id, name: result.name })}
+                const countA = counts[resultA.id];
-              onTouchStart={() => setClickingResult(true)}
+                const countB = counts[resultB.id];
-              onMouseDown={() => setClickingResult(true)}
+                if (countA && countB) return countB[2] - countA[2];
-            >
+              }
-              {result.name}
+              return 0;
-            </li>
+            })
-          ))}
+            .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>

components/Sidebar.tsx

@@ -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} />;