@openneuro/app 4.36.0-alpha.0 → 4.36.1

package/src/scripts/queries/users.ts

@@ -0,0 +1,247 @@
+import { useCallback, useEffect, useRef, useState } from "react"
+import { gql, useQuery } from "@apollo/client"
+import * as Sentry from "@sentry/react"
+import type { User } from "../types/user-types"
+
+// --- Fragments ---
+export const USER_FRAGMENT = gql`
+  fragment userFields on User {
+    id
+    name
+    admin
+    blocked
+    email
+    provider
+    lastSeen
+    created
+    avatar
+    github
+    institution
+    location
+    modified
+    orcid
+  }
+`
+
+// --- GET_USERS QUERY ---
+export const GET_USERS = gql`
+  query GetUsers(
+    $orderBy: [UserSortInput!]
+    $isAdmin: Boolean
+    $isBlocked: Boolean
+    $search: String
+    $limit: Int
+    $offset: Int
+  ) {
+    users(
+      orderBy: $orderBy
+      isAdmin: $isAdmin
+      isBlocked: $isBlocked
+      search: $search
+      limit: $limit
+      offset: $offset
+    ) {
+      users {
+        ...userFields
+      }
+      totalCount
+    }
+  }
+  ${USER_FRAGMENT}
+`
+
+export const SET_ADMIN_MUTATION = gql`
+  mutation SetAdmin($id: ID!, $admin: Boolean!) {
+    setAdmin(id: $id, admin: $admin) {
+      ...userFields
+    }
+  }
+  ${USER_FRAGMENT}
+`
+
+export const SET_BLOCKED_MUTATION = gql`
+  mutation SetBlocked($id: ID!, $blocked: Boolean!) {
+    setBlocked(id: $id, blocked: $blocked) {
+      ...userFields
+    }
+  }
+  ${USER_FRAGMENT}
+`
+
+// --- INTERFACES ---
+export interface GetUsersQueryResult {
+  users?: {
+    users: User[]
+    totalCount: number
+  }
+}
+
+export interface GetUsersQueryVariables {
+  orderBy?: { field: string; order: "ascending" | "descending" }[]
+  isAdmin?: boolean
+  isBlocked?: boolean
+  search?: string
+  limit?: number
+  offset?: number
+}
+
+export interface UseUsersOptions {
+  orderBy?: { field: string | null; order: "ascending" | "descending" }
+  isAdmin?: boolean | null
+  isBlocked?: boolean | null
+  search?: string | undefined
+  initialLimit?: number
+}
+
+// --- useUsers HOOK ---
+export const useUsers = (options: UseUsersOptions = {}) => {
+  const [currentLimit] = useState(options.initialLimit || 100)
+  const [offset, setOffset] = useState(0)
+
+  const filterSortSearchVariables = useRef({
+    orderBy: options.orderBy?.field
+      ? [{ field: options.orderBy.field, order: options.orderBy.order }]
+      : undefined,
+    search: options.search,
+    isAdmin: typeof options.isAdmin === "boolean" ? options.isAdmin : undefined,
+    isBlocked: typeof options.isBlocked === "boolean"
+      ? options.isBlocked
+      : undefined,
+  })
+
+  // Effect to update the ref when options change and reset offset
+  useEffect(() => {
+    filterSortSearchVariables.current = {
+      orderBy: options.orderBy?.field
+        ? [{ field: options.orderBy.field, order: options.orderBy.order }]
+        : undefined,
+      search: options.search,
+      isAdmin: typeof options.isAdmin === "boolean"
+        ? options.isAdmin
+        : undefined,
+      isBlocked: typeof options.isBlocked === "boolean"
+        ? options.isBlocked
+        : undefined,
+    }
+    // When filters/sort/search change, reset the offset to 0 to start a new list
+    setOffset(0)
+  }, [options.orderBy, options.search, options.isAdmin, options.isBlocked])
+
+  const { data, loading, error, fetchMore, refetch } = useQuery<
+    GetUsersQueryResult
+  >(GET_USERS, {
+    variables: {
+      ...filterSortSearchVariables.current,
+      limit: currentLimit,
+      offset: offset,
+    },
+    notifyOnNetworkStatusChange: true,
+    fetchPolicy: "cache-and-network",
+  })
+
+  const [allUsers, setAllUsers] = useState<User[]>([])
+
+  useEffect(() => {
+    if (data?.users?.users) {
+      if (offset === 0) {
+        setAllUsers(data.users.users)
+      } else {
+        setAllUsers((prevUsers) => {
+          const newUsers = data.users!.users
+          const uniqueNewUsers = newUsers.filter(
+            (newUser) =>
+              !prevUsers.some((existingUser) => existingUser.id === newUser.id),
+          )
+          return [...prevUsers, ...uniqueNewUsers]
+        })
+      }
+    }
+  }, [data?.users?.users, offset])
+
+  const totalCount = data?.users?.totalCount || 0
+  const hasMore = totalCount > allUsers.length || loading
+
+  const loadMore = useCallback(() => {
+    if (hasMore && !loading) {
+      const newOffset = allUsers.length
+      fetchMore({
+        variables: {
+          ...filterSortSearchVariables.current,
+          offset: newOffset,
+          limit: currentLimit,
+        },
+        updateQuery: (prev, { fetchMoreResult }) => {
+          if (!fetchMoreResult) return prev
+
+          const incomingUsers = fetchMoreResult.users.users
+          const currentUsers = prev.users?.users || []
+
+          const combinedUsers = currentUsers.concat(
+            incomingUsers.filter(
+              (newUser) =>
+                !currentUsers.some(
+                  (existingUser) => existingUser.id === newUser.id,
+                ),
+            ),
+          )
+
+          return {
+            users: {
+              ...prev.users,
+              users: combinedUsers,
+              totalCount: fetchMoreResult.users.totalCount,
+            },
+          }
+        },
+      })
+    }
+  }, [
+    allUsers.length,
+    hasMore,
+    loading,
+    fetchMore,
+    currentLimit,
+    filterSortSearchVariables,
+  ])
+
+  const refetchFullList = useCallback(
+    async (variablesToRefetch?: GetUsersQueryVariables) => {
+      setOffset(0)
+      await refetch({
+        ...filterSortSearchVariables.current,
+        ...variablesToRefetch,
+        offset: 0,
+        limit: currentLimit,
+      })
+    },
+    [refetch, filterSortSearchVariables, currentLimit],
+  )
+
+  const refetchCurrentPage = useCallback(async () => {
+    await refetch({
+      ...filterSortSearchVariables.current,
+      offset: 0,
+      limit: allUsers.length > 0 ? allUsers.length : currentLimit,
+    })
+  }, [refetch, filterSortSearchVariables, allUsers.length, currentLimit])
+
+  useEffect(() => {
+    if (error) {
+      Sentry.captureException(error)
+    }
+  }, [error])
+
+  return {
+    users: allUsers,
+    loading,
+    error,
+    refetchFullList,
+    refetchCurrentPage,
+    loadMore,
+    hasMore,
+    totalCount,
+    currentLimit,
+    currentOffset: allUsers.length,
+    filterSortSearchVariables: filterSortSearchVariables.current,
+  }
+}

package/src/scripts/routes.tsx

@@ -4,7 +4,7 @@ import { Navigate, Route, Routes } from "react-router-dom"
 // TODO - Re-enable code splitting these when we can
 import DatasetQuery from "./dataset/dataset-query"
 //import PreRefactorDatasetProps from './dataset/dataset-pre-refactor-container'
-
+import { isAdmin } from "./authentication/admin-user.jsx"
 import FaqPage from "./pages/faq/faq"
 import FrontPageContainer from "./pages/front-page/front-page"
 import Admin from "./pages/admin/admin"
@@ -19,10 +19,8 @@ import { DatasetMetadata } from "./pages/metadata/dataset-metadata"
 import { TermsPage } from "./pages/terms"
 import { ImageAttribution } from "./pages/image-attribution"
 import { UserQuery } from "./users/user-query"
-import LoggedIn from "../scripts/authentication/logged-in"
-import LoggedOut from "../scripts/authentication/logged-out"
-import FourOThreePage from "./errors/403page"
 import { OrcidLinkPage } from "./pages/orcid-link"
+import FourOThreePage from "./errors/403page"
 
 const AppRoutes: React.VoidFunctionComponent = () => (
   <Routes>
@@ -31,7 +29,10 @@ const AppRoutes: React.VoidFunctionComponent = () => (
     <Route path="/keygen" element={<APIKey />} />
     <Route path="/datasets/:datasetId/*" element={<DatasetQuery />} />
     <Route path="/search/*" element={<SearchRoutes />} />
-    <Route path="/admin/*" element={<Admin />} />
+    <Route
+      path="/admin/*"
+      element={isAdmin() ? <Admin /> : <FourOThreePage />}
+    />
     <Route path="/error/*" element={<ErrorRoute />} />
     <Route path="/pet" element={<PETRedirect />} />
     <Route path="/cite" element={<Citation />} />
@@ -43,16 +44,7 @@ const AppRoutes: React.VoidFunctionComponent = () => (
     <Route path="/orcid-link" element={<OrcidLinkPage />} />
     <Route
       path="/user/:orcid/*"
-      element={
-        <>
-          <LoggedIn>
-            <UserQuery />
-          </LoggedIn>
-          <LoggedOut>
-            <FourOThreePage />
-          </LoggedOut>
-        </>
-      }
+      element={<UserQuery />}
     />
     <Route
       path="/saved"

package/src/scripts/types/user-types.ts

@@ -8,12 +8,13 @@ export interface User {
   avatar?: string
   orcid?: string
   links?: string[]
-  githubSynced?: Date
   admin?: boolean
-  provider?: string
-  created?: Date
-  lastSeen?: Date
   blocked?: boolean
+  lastSeen?: string
+  created?: string
+  provider?: string
+  modified?: string
+  githubSynced?: Date
 }
 
 export interface UserRoutesProps {

package/src/scripts/users/__tests__/user-account-view.spec.tsx

@@ -24,8 +24,8 @@ const baseUser: User = {
   links: [],
   admin: false,
   provider: "orcid",
-  created: new Date("2025-05-20T14:50:32.424Z"),
-  lastSeen: new Date("2025-05-20T14:50:32.424Z"),
+  created: new Date("2025-05-20T14:50:32.424Z").toISOString(),
+  lastSeen: new Date("2025-05-20T14:50:32.424Z").toISOString(),
   blocked: false,
   githubSynced: null,
 }

package/src/scripts/users/user-card.tsx

@@ -21,12 +21,18 @@ export const UserCard: React.FC<UserCardProps> = ({ orcidUser }) => {
             {location}
           </li>
         )}
-        <li>
-          <i className="fas fa-envelope"></i>
-          <a href={"mailto:" + email} target="_blank" rel="noopener noreferrer">
-            {email}
-          </a>
-        </li>
+        {email && (
+          <li>
+            <i className="fas fa-envelope"></i>
+            <a
+              href={"mailto:" + email}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {email}
+            </a>
+          </li>
+        )}
         {orcid && (
           <li className={styles.orcid}>
             <i className="fab fa-orcid" aria-hidden="true"></i>

package/src/scripts/users/user-query.tsx

@@ -27,9 +27,6 @@ export const UserQuery: React.FC = () => {
     return <FourOFourPage />
   }
 
-  if (!profile || !profile.sub) {
-    return <FourOFourPage />
-  }
   // is admin or profile matches id from the user data being returned
   const isUser = (user?.id === profile?.sub) ? true : false
   const hasEdit = isAdminUser || (user?.id === profile?.sub) ? true : false