Contributors with tags, randomized

src/core/apollo/generated/apollo-hooks.ts

@@ -10810,8 +10810,8 @@ export function refetchContributorsPageOrganizationsQuery(
 }
 
 export const ContributorsPageUsersDocument = gql`
-  query ContributorsPageUsers($first: Int!, $after: UUID, $filter: UserFilterInput) {
-    usersPaginated(first: $first, after: $after, filter: $filter) {
+  query ContributorsPageUsers($first: Int!, $after: UUID, $filter: UserFilterInput, $withTags: Boolean) {
+    usersPaginated(first: $first, after: $after, filter: $filter, withTags: $withTags) {
       ...UserContributorPaginated
     }
   }
@@ -10833,6 +10833,7 @@ export const ContributorsPageUsersDocument = gql`
  *      first: // value for 'first'
  *      after: // value for 'after'
  *      filter: // value for 'filter'
+ *      withTags: // value for 'withTags'
  *   },
  * });
  */

src/core/apollo/generated/graphql-schema.ts

@@ -4743,6 +4743,7 @@ export type QueryUsersPaginatedArgs = {
   filter?: InputMaybe<UserFilterInput>;
   first?: InputMaybe<Scalars['Int']>;
   last?: InputMaybe<Scalars['Int']>;
+  withTags?: InputMaybe<Scalars['Boolean']>;
 };
 
 export type QueryUsersWithAuthorizationCredentialArgs = {
@@ -16032,6 +16033,7 @@ export type ContributorsPageUsersQueryVariables = Exact<{
   first: Scalars['Int'];
   after?: InputMaybe<Scalars['UUID']>;
   filter?: InputMaybe<UserFilterInput>;
+  withTags?: InputMaybe<Scalars['Boolean']>;
 }>;
 
 export type ContributorsPageUsersQuery = {

src/core/utils/array.shuffle.ts

@@ -0,0 +1,8 @@
+export const arrayShuffle = <T>(array: T[]): T[] => {
+  const shuffledArray = array.slice(); // Create a copy of the array
+  for (let i = shuffledArray.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];
+  }
+  return shuffledArray;
+};

src/domain/community/contributor/ContributorsSearch/ContributorsSearchContainer.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
 import { ApolloError } from '@apollo/client';
 import { ContainerChildProps } from '../../../../core/container/container';
 import {
@@ -16,6 +16,7 @@ import {
   UserContributorFragment,
 } from '../../../../core/apollo/generated/graphql-schema';
 import usePaginatedQuery from '../../../shared/pagination/usePaginatedQuery';
+import { arrayShuffle } from '../../../../core/utils/array.shuffle';
 
 export interface PaginatedResult<T> {
   items: T[] | undefined;
@@ -60,14 +61,29 @@ const ContributorsSearchContainer: FC<ContributorsSearchContainerProps> = ({ sea
       skip: !isAuthenticated,
     },
     variables: {
+      withTags: true,
       filter: { firstName: searchTerms, lastName: searchTerms, email: searchTerms },
     },
     pageSize: pageSize,
     getPageInfo: result => result.usersPaginated.pageInfo,
   });
 
+  const randomizedUsers = useMemo(() => {
+    // if the length changed, shuffle only the new portion of the array
+    // to avoid re-rendering the entire list
+    const users = usersQueryResult.data?.usersPaginated.users;
+
+    if (!users) {
+      return [];
+    }
+
+    const randomizedNewUsers = arrayShuffle(users.slice(-pageSize));
+
+    return [...users.slice(0, users.length - pageSize), ...randomizedNewUsers];
+  }, [usersQueryResult.data?.usersPaginated.users?.length]);
+
   const users: PaginatedResult<UserContributorFragment> = {
-    items: usersQueryResult.data?.usersPaginated.users,
+    items: randomizedUsers,
     loading: usersQueryResult.loading,
     hasMore: usersQueryResult.hasMore,
     pageSize: usersQueryResult.pageSize,

src/domain/community/contributor/ContributorsSearch/ContributorsSearchQueries.graphql

@@ -4,8 +4,8 @@ query ContributorsPageOrganizations($first: Int!, $after: UUID, $status: Organiz
   }
 }
 
-query ContributorsPageUsers($first: Int!, $after: UUID, $filter: UserFilterInput) {
-  usersPaginated(first: $first, after: $after, filter: $filter) {
+query ContributorsPageUsers($first: Int!, $after: UUID, $filter: UserFilterInput, $withTags: Boolean) {
+  usersPaginated(first: $first, after: $after, filter: $filter, withTags: $withTags) {
     ...UserContributorPaginated
   }
 }

src/domain/community/user/ContributorsPage.tsx

@@ -20,6 +20,9 @@ export interface ContributorsPageProps {}
 const ContributorsPage: FC<ContributorsPageProps> = () => {
   const { t } = useTranslation();
 
+  // temporary disable the search (server #4545)
+  const [searchEnabled] = useState(false);
+
   const [searchTerms, setSearchTerms] = useState<string>('');
   const [searchTermsDebounced, setSearchTermsDebounced] = useState<string>('');
 
@@ -49,19 +52,21 @@ const ContributorsPage: FC<ContributorsPageProps> = () => {
       }
     >
       <PageContentColumn columns={12}>
-        <PageContentBlockSeamless disablePadding>
-          <OutlinedInput
-            value={searchTerms}
-            sx={{ width: '100%' }}
-            placeholder={t('components.searchableList.placeholder')}
-            onChange={onSearchHandler}
-            endAdornment={
-              <InputAdornment position="end">
-                <SearchIcon />
-              </InputAdornment>
-            }
-          />
-        </PageContentBlockSeamless>
+        {searchEnabled && (
+          <PageContentBlockSeamless disablePadding>
+            <OutlinedInput
+              value={searchTerms}
+              sx={{ width: '100%' }}
+              placeholder={t('components.searchableList.placeholder')}
+              onChange={onSearchHandler}
+              endAdornment={
+                <InputAdornment position="end">
+                  <SearchIcon />
+                </InputAdornment>
+              }
+            />
+          </PageContentBlockSeamless>
+        )}
         <ContributorsSearchContainer searchTerms={searchTermsDebounced} pageSize={ITEMS_PER_PAGE}>
           {({ users, organizations }) => {
             return (

src/domain/community/user/ContributorsView.tsx

@@ -24,7 +24,7 @@ import GridProvider from '../../../core/ui/grid/GridProvider';
 import { Identifiable } from '../../../core/utils/Identifiable';
 
 const USERS_GRAYED_OUT_IMAGE = '/contributors/users-grayed.png';
-export const ITEMS_PER_PAGE = 16;
+export const ITEMS_PER_PAGE = 32;
 
 const userToContributorCard = (user: UserContributorFragment): ContributorCardSquareProps => {
   return {