Fix moderation-side issues (#3345)

* Fix moderation-side issues by segmenting requests in review page and handling missing users in report page

* increase to 100

* 450 limit

* fine! take 1000!

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

@@ -19,13 +19,21 @@
       </nuxt-link>
     </div>
     <div v-else-if="report.item_type === 'user'" class="item-info">
-      <nuxt-link :to="`/user/${report.user.username}`" class="iconified-stacked-link">
+      <nuxt-link
+        v-if="report.user"
+        :to="`/user/${report.user.username}`"
+        class="iconified-stacked-link"
+      >
         <Avatar :src="report.user.avatar_url" circle size="xs" no-shadow :raised="raised" />
         <div class="stacked">
           <span class="title">{{ report.user.username }}</span>
           <span>User</span>
         </div>
       </nuxt-link>
+      <div v-else class="item-info">
+        <div class="backed-svg" :class="{ raised: raised }"><UnknownIcon /></div>
+        <span>Reported user not found: <CopyCode :text="report.item_id" /> </span>
+      </div>
     </div>
     <div v-else-if="report.item_type === 'version'" class="item-info">
       <nuxt-link
@@ -50,7 +58,7 @@
     </div>
     <div v-else class="item-info">
       <div class="backed-svg" :class="{ raised: raised }"><UnknownIcon /></div>
-      <span>Unknown report type</span>
+      <span>Unknown report type: {{ report.item_type }}</span>
     </div>
     <div class="report-type">
       <Badge v-if="report.closed" type="closed" />

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

@@ -164,17 +164,45 @@ const projectTypes = computed(() => {
   return [...set];
 });
 
+function segmentData(data, segmentSize = 900) {
+  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 organizationIds = projects.value.filter((x) => x.organization).map((x) => x.organization);
+  const orgIds = projects.value.filter((x) => x.organization).map((x) => x.organization);
 
-  const url = `teams?ids=${encodeURIComponent(JSON.stringify(teamIds))}`;
+  const [{ data: teams }, { data: orgs }] = await Promise.all([
-  const orgUrl = `organizations?ids=${encodeURIComponent(JSON.stringify(organizationIds))}`;
+    useAsyncData(`teams?ids=${asEncodedJsonArray(teamIds)}`, () =>
-  const { data: result } = await useAsyncData(url, () => useBaseFetch(url));
+      fetchSegmented(teamIds, (ids) => `teams?ids=${asEncodedJsonArray(ids)}`),
-  const { data: orgs } = await useAsyncData(orgUrl, () => useBaseFetch(orgUrl, { apiVersion: 3 }));
+    ),
+    useAsyncData(`organizations?ids=${asEncodedJsonArray(orgIds)}`, () =>
+      fetchSegmented(orgIds, (ids) => `organizations?ids=${asEncodedJsonArray(ids)}`, {
+        apiVersion: 3,
+      }),
+    ),
+  ]);
 
-  if (result.value) {
+  if (teams.value) {
-    members.value = result.value;
+    members.value = teams.value;
 
     projects.value = projects.value.map((project) => {
       project.owner = members.value