✨ Allow managing page size for event stream (#256)

bluesky-social · Dec 5, 2024 · a646d5a · a646d5a
1 parent c3cf1b2
commit a646d5a
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 1 deletion.
diff --git a/components/mod-event/EventList.tsx b/components/mod-event/EventList.tsx
@@ -130,6 +130,7 @@ export const ModEventList = (
 ) => {
   const {
     types,
+    limit,
     reportTypes,
     addedLabels,
     removedLabels,
@@ -267,6 +268,7 @@ export const ModEventList = (
       {showFiltersPanel && (
         <EventFilterPanel
           {...{
+            limit,
             types,
             reportTypes,
             addedLabels,

diff --git a/components/mod-event/FilterPanel.tsx b/components/mod-event/FilterPanel.tsx
@@ -15,8 +15,11 @@ import { useFilterMacroUpsertMutation } from './useFilterMacrosList'
 import { MacroList } from './MacroPicker'
 import { useState } from 'react'
 import { RepoFinder } from '@/repositories/Finder'
+import { Dropdown } from '@/common/Dropdown'
+import { ChevronDownIcon } from '@heroicons/react/24/solid'
 
 export const EventFilterPanel = ({
+  limit,
   types,
   reportTypes,
   addedLabels,
@@ -121,6 +124,7 @@ export const EventFilterPanel = ({
               }}
             />
           </div>
+
           <h5 className="text-gray-700 dark:text-gray-100 font-medium">
             Comment/Note
           </h5>
@@ -162,6 +166,24 @@ export const EventFilterPanel = ({
             </FormLabel>
           )}
 
+          <FormLabel label="Page Size" htmlFor="limit" className="flex-1 mt-2">
+            <Dropdown
+              className="inline-flex justify-center rounded-md border border-gray-300 dark:border-teal-500 bg-white dark:bg-slate-800 dark:text-gray-100 dark:focus:border-teal-500  dark px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 dark:hover:bg-slate-700"
+              items={[25, 50, 75, 100].map((size) => ({
+                id: `${size}`,
+                text: `${size} per page`,
+                onClick: () =>
+                  changeListFilter({ field: 'limit', value: size }),
+              }))}
+            >
+              {limit} per page
+              <ChevronDownIcon
+                className="ml-2 -mr-1 h-5 w-5 text-violet-200 hover:text-violet-100"
+                aria-hidden="true"
+              />
+            </Dropdown>
+          </FormLabel>
+
           <FormLabel
             label="Event Author DID"
             htmlFor="createdBy"

diff --git a/components/mod-event/useModEventList.tsx b/components/mod-event/useModEventList.tsx
@@ -63,6 +63,7 @@ const initialListState = {
   addedTags: '',
   removedTags: '',
   showContentPreview: false,
+  limit: 25,
 }
 
 const getReposAndRecordsForEvents = async (
@@ -156,6 +157,7 @@ type EventListFilterPayload =
   | { field: 'removedLabels'; value: string[] }
   | { field: 'addedTags'; value: string }
   | { field: 'removedTags'; value: string }
+  | { field: 'limit'; value: number }
 
 type EventListAction =
   | {
@@ -244,8 +246,10 @@ export const useModEventList = (
         addedTags,
         removedTags,
         reportTypes,
+        limit,
       } = listState
       const queryParams: ToolsOzoneModerationQueryEvents.QueryParams = {
+        limit,
         cursor: pageParam,
         includeAllUserRecords,
       }
@@ -332,7 +336,6 @@ export const useModEventList = (
       }
 
       const { data } = await labelerAgent.tools.ozone.moderation.queryEvents({
-        limit: 25,
         ...queryParams,
       })
       const { repos, records } = await getReposAndRecordsForEvents(