✨ Make repositories page work more like the queue page

bluesky-social · Dec 4, 2024 · 34c7387 · 34c7387
1 parent 63d4f89
commit 34c7387
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 46 deletions.
diff --git a/app/repositories/page-content.tsx b/app/repositories/page-content.tsx
@@ -1,12 +1,13 @@
 import { SectionHeader } from '../../components/SectionHeader'
 import { RepositoriesTable } from '@/repositories/RepositoriesTable'
-import { useSearchParams } from 'next/navigation'
+import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import { useInfiniteQuery } from '@tanstack/react-query'
 import { useTitle } from 'react-use'
 import {
   Agent,
   ToolsOzoneModerationDefs,
   ComAtprotoAdminSearchAccounts,
+  ToolsOzoneModerationEmitEvent,
 } from '@atproto/api'
 import { useLabelerAgent } from '@/shell/ConfigurationContext'
 import { ActionButton } from '@/common/buttons'
@@ -16,6 +17,9 @@ import { toast } from 'react-toastify'
 import { ConfirmationModal } from '@/common/modals/confirmation'
 import { WorkspacePanel } from '@/workspace/Panel'
 import { useWorkspaceOpener } from '@/common/useWorkspaceOpener'
+import { chunkArray } from '@/lib/util'
+import { ModActionPanelQuick } from 'app/actions/ModActionPanel/QuickAction'
+import { useEmitEvent } from '@/mod-event/helpers/emitEvent'
 
 const isEmailSearch = (q: string) => q.startsWith('email:')
 const isSignatureSearch = (q: string) => q.startsWith('sig:')
@@ -91,17 +95,17 @@ const getRepos =
     })
 
     if (!excludeRepo) {
-      await Promise.allSettled(
-        data.accounts.map(async (account) => {
-          const { data } = await labelerAgent.tools.ozone.moderation.getRepo(
-            {
-              did: account.did,
-            },
-            options,
-          )
-          repos[account.did] = { ...repos[account.did], ...data }
-        }),
-      )
+      for (const accounts of chunkArray(data.accounts, 100)) {
+        const { data } = await labelerAgent.tools.ozone.moderation.getRepos(
+          { dids: accounts.map(({ did }) => did) },
+          options,
+        )
+        for (const repo of data.repos) {
+          if (ToolsOzoneModerationDefs.isRepoViewDetail(repo)) {
+            repos[repo.did] = { ...repos[repo.did], ...repo }
+          }
+        }
+      }
     }
 
     return { repos: Object.values(repos), cursor: data.cursor }
@@ -115,12 +119,13 @@ function useSearchResultsQuery(q: string) {
   const labelerAgent = useLabelerAgent()
   const getRepoPage = getRepos({ q, labelerAgent })
 
-  const { data, fetchNextPage, hasNextPage } = useInfiniteQuery({
-    queryKey: ['repositories', { q }],
-    queryFn: getRepoPage,
-    refetchOnWindowFocus: false,
-    getNextPageParam: (lastPage) => lastPage.cursor,
-  })
+  const { data, fetchNextPage, hasNextPage, isLoading, refetch } =
+    useInfiniteQuery({
+      queryKey: ['repositories', { q }],
+      queryFn: getRepoPage,
+      refetchOnWindowFocus: false,
+      getNextPageParam: (lastPage) => lastPage.cursor,
+    })
   const repos = data?.pages.flatMap((page) => page.repos) ?? []
 
   const confirmAddToWorkspace = async () => {
@@ -176,6 +181,8 @@ function useSearchResultsQuery(q: string) {
     repos,
     fetchNextPage,
     hasNextPage,
+    isLoading,
+    refetch,
     confirmAddToWorkspace,
     isConfirmationOpen,
     setIsConfirmationOpen,
@@ -185,13 +192,28 @@ function useSearchResultsQuery(q: string) {
 }
 
 export default function RepositoriesListPage() {
+  const emitEvent = useEmitEvent()
   const { toggleWorkspacePanel, isWorkspaceOpen } = useWorkspaceOpener()
-  const params = useSearchParams()
-  const q = params.get('term') ?? ''
+  const searchParams = useSearchParams()
+  const q = searchParams.get('term') ?? ''
+  const router = useRouter()
+  const pathname = usePathname()
+  const quickOpenParam = searchParams.get('quickOpen') ?? ''
+  const setQuickActionPanelSubject = (subject: string) => {
+    const newParams = new URLSearchParams(document.location.search)
+    if (!subject) {
+      newParams.delete('quickOpen')
+    } else {
+      newParams.set('quickOpen', subject)
+    }
+    router.push((pathname ?? '') + '?' + newParams.toString())
+  }
   const {
     repos,
+    refetch,
     fetchNextPage,
     hasNextPage,
+    isLoading,
     setIsConfirmationOpen,
     isAdding,
     setIsAdding,
@@ -264,12 +286,27 @@ export default function RepositoriesListPage() {
         showEmail={isEmailSearch(q) || isSignatureSearch(q)}
         onLoadMore={fetchNextPage}
         showLoadMore={!!hasNextPage}
+        isLoading={isLoading}
         showEmptySearch={!q?.length && !repos.length}
       />
       <WorkspacePanel
         open={isWorkspaceOpen}
         onClose={() => toggleWorkspacePanel()}
       />
+      <ModActionPanelQuick
+        open={!!quickOpenParam}
+        onClose={() => setQuickActionPanelSubject('')}
+        setSubject={setQuickActionPanelSubject}
+        subject={quickOpenParam} // select first subject if there are multiple
+        subjectOptions={
+          repos.length ? repos.map((repo) => repo.did) : [quickOpenParam]
+        }
+        isInitialLoading={isLoading}
+        onSubmit={async (vals: ToolsOzoneModerationEmitEvent.InputSchema) => {
+          await emitEvent(vals)
+          refetch()
+        }}
+      />
     </>
   )
 }
diff --git a/components/repositories/RepositoriesTable.tsx b/components/repositories/RepositoriesTable.tsx
@@ -1,19 +1,28 @@
-import Link from 'next/link'
 import { UserGroupIcon } from '@heroicons/react/20/solid'
 import { formatDistanceToNow } from 'date-fns'
 import { AppBskyActorProfile } from '@atproto/api'
 import { Repo } from '@/lib/types'
 import { LoadMoreButton } from '../common/LoadMoreButton'
 import { ReviewStateIcon } from '@/subject/ReviewStateMarker'
+import { SubjectOverview } from '@/reports/SubjectOverview'
+import { Loading } from '@/common/Loader'
 
 export function RepositoriesTable(props: {
   repos: Repo[]
   showLoadMore: boolean
   showEmail: boolean
+  isLoading: boolean
   showEmptySearch: boolean
   onLoadMore: () => void
 }) {
-  const { repos, showEmail, showLoadMore, onLoadMore, showEmptySearch } = props
+  const {
+    repos,
+    showEmail,
+    showLoadMore,
+    onLoadMore,
+    showEmptySearch,
+    isLoading,
+  } = props
   return (
     <div className="px-4 sm:px-6 lg:px-8">
       <div className="-mx-4 mt-8 overflow-hidden border border-gray-300 sm:-mx-6 md:mx-0 md:rounded-lg">
@@ -30,12 +39,18 @@ export function RepositoriesTable(props: {
               <tr>
                 <td colSpan={showEmail ? 5 : 4}>
                   <div className="flex flex-col items-center py-10">
-                    <UserGroupIcon className="h-10 w-10" />
-                    <p className="text-gray-500 dark:text-gray-50 text-base">
-                      {showEmptySearch
-                        ? `Please insert a full or partial handle in the search box above to see matching repositories`
-                        : `No repositories found!`}
-                    </p>
+                    {isLoading ? (
+                      <Loading />
+                    ) : (
+                      <>
+                        <UserGroupIcon className="h-10 w-10 dark:text-gray-200" />
+                        <p className="text-gray-500 dark:text-gray-50 text-base">
+                          {showEmptySearch
+                            ? `Please insert a full or partial handle in the search box above to see matching repositories`
+                            : `No repositories found!`}
+                        </p>
+                      </>
+                    )}
                   </div>
                 </td>
               </tr>
@@ -60,13 +75,20 @@ function RepoRow(props: { repo: Repo; showEmail: boolean }) {
   const { subjectStatus } = repo.moderation
   return (
     <tr {...others}>
-      <td className="w-full max-w-0 py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:w-auto sm:max-w-none sm:pl-6">
-        <Link
-          href={`/repositories/${repo.did}`}
-          className="text-indigo-600 hover:text-indigo-900 dark:text-teal-400 dark:hover:text-teal-600"
-        >
-          {repo.handle}
-        </Link>
+      <td className="w-full max-w-0 py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-200 sm:w-auto sm:max-w-none sm:pl-6">
+        <div className="flex flex-row items-center pb-1">
+          <SubjectOverview
+            subject={{ did: repo.did }}
+            subjectRepoHandle={repo.handle}
+            withTruncation={false}
+          />
+          {subjectStatus && (
+            <ReviewStateIcon
+              subjectStatus={subjectStatus}
+              className="ml-1 h-5 w-5 inline-block align-bottom"
+            />
+          )}
+        </div>
         <dl className="font-normal lg:hidden">
           <dt className="sr-only">Name</dt>
           <dd className="mt-1 truncate text-gray-700 dark:text-gray-100">
@@ -88,14 +110,6 @@ function RepoRow(props: { repo: Repo; showEmail: boolean }) {
           {formatDistanceToNow(indexedAt, { addSuffix: true })}
         </span>
       </td>
-      <td className="py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
-        {subjectStatus && (
-          <ReviewStateIcon
-            subjectStatus={subjectStatus}
-            className="h-5 w-5 inline-block align-bottom"
-          />
-        )}
-      </td>
     </tr>
   )
 }
@@ -129,9 +143,6 @@ function RepoRowHead({ showEmail = false }) {
       >
         Indexed
       </th>
-      <th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-6">
-        <span className="sr-only">Moderation</span>
-      </th>
     </tr>
   )
 }