Add segmentation to reports list to fix it (#3772)

Author: Prospector

apps/frontend/src/components/ui/report/ReportsList.vue

@@ -18,6 +18,7 @@
 <script setup>
 import ReportInfo from "~/components/ui/report/ReportInfo.vue";
 import { addReportMessage } from "~/helpers/threads.js";
+import { asEncodedJsonArray, fetchSegmented } from "~/utils/fetch-helpers.ts";
 
 defineProps({
   moderation: {
@@ -53,13 +54,13 @@ const threadIds = [
 
 const [{ data: users }, { data: versions }, { data: threads }] = await Promise.all([
   await useAsyncData(`users?ids=${JSON.stringify(userIds)}`, () =>
-    useBaseFetch(`users?ids=${encodeURIComponent(JSON.stringify(userIds))}`),
+    fetchSegmented(userIds, (ids) => `users?ids=${asEncodedJsonArray(ids)}`),
   ),
   await useAsyncData(`versions?ids=${JSON.stringify(versionIds)}`, () =>
-    useBaseFetch(`versions?ids=${encodeURIComponent(JSON.stringify(versionIds))}`),
+    fetchSegmented(versionIds, (ids) => `versions?ids=${asEncodedJsonArray(ids)}`),
   ),
   await useAsyncData(`threads?ids=${JSON.stringify(threadIds)}`, () =>
-    useBaseFetch(`threads?ids=${encodeURIComponent(JSON.stringify(threadIds))}`),
+    fetchSegmented(threadIds, (ids) => `threads?ids=${asEncodedJsonArray(ids)}`),
   ),
 ]);
 
@@ -70,7 +71,7 @@ const versionProjects = versions.value.map((version) => version.project_id);
 const projectIds = [...new Set(reportedProjects.concat(versionProjects))];
 
 const { data: projects } = await useAsyncData(`projects?ids=${JSON.stringify(projectIds)}`, () =>
-  useBaseFetch(`projects?ids=${encodeURIComponent(JSON.stringify(projectIds))}`),
+  fetchSegmented(projectIds, (ids) => `projects?ids=${asEncodedJsonArray(ids)}`),
 );
 
 reports.value = rawReports.map((report) => {

apps/frontend/src/pages/moderation/review.vue

@@ -115,6 +115,7 @@ import {
 import Avatar from "~/components/ui/Avatar.vue";
 import Badge from "~/components/ui/Badge.vue";
 import { formatProjectType } from "~/plugins/shorthands.js";
+import { asEncodedJsonArray, fetchSegmented } from "~/utils/fetch-helpers.ts";
 
 useHead({
   title: "Review projects - Modrinth",
@@ -170,28 +171,6 @@ const projectTypes = computed(() => {
   return [...set];
 });
 
-function segmentData(data, segmentSize = 800) {
-  return data.reduce((acc, curr, index) => {
-    const segment = Math.floor(index / segmentSize);
-
-    if (!acc[segment]) {
-      acc[segment] = [];
-    }
-    acc[segment].push(curr);
-    return acc;
-  }, []);
-}
-
-function fetchSegmented(data, createUrl, options = {}) {
-  return Promise.all(segmentData(data).map((ids) => useBaseFetch(createUrl(ids), options))).then(
-    (results) => results.flat(),
-  );
-}
-
-function asEncodedJsonArray(data) {
-  return encodeURIComponent(JSON.stringify(data));
-}
-
 if (projects.value) {
   const teamIds = projects.value.map((x) => x.team_id);
   const orgIds = projects.value.filter((x) => x.organization).map((x) => x.organization);

apps/frontend/src/utils/fetch-helpers.ts

@@ -0,0 +1,26 @@
+function segmentData<T>(data: T[], segmentSize: number): T[][] {
+  return data.reduce((acc: T[][], curr, index) => {
+    const segment = Math.floor(index / segmentSize);
+
+    if (!acc[segment]) {
+      acc[segment] = [];
+    }
+    acc[segment].push(curr);
+    return acc;
+  }, []);
+}
+
+export function fetchSegmented<T>(
+  data: T[],
+  createUrl: (ids: T[]) => string,
+  options = {},
+  segmentSize = 800,
+): Promise<any> {
+  return Promise.all(
+    segmentData(data, segmentSize).map((ids) => useBaseFetch(createUrl(ids), options)),
+  ).then((results) => results.flat());
+}
+
+export function asEncodedJsonArray<T>(data: T[]): string {
+  return encodeURIComponent(JSON.stringify(data));
+}