OCT-1942 Projects search: client (#461)

golemfoundation · Oct 4, 2024 · 39b9d2b · 39b9d2b
2 parents e53152d + 54f6195
commit 39b9d2b
Show file tree

Hide file tree

Showing 35 changed files with 685 additions and 104 deletions.
diff --git a/client/src/api/calls/projects.ts b/client/src/api/calls/projects.ts
@@ -30,3 +30,20 @@ export type Projects = {
 export async function apiGetProjects(epoch: number): Promise<Projects> {
   return apiService.get(`${env.serverEndpoint}projects/epoch/${epoch}`).then(({ data }) => data);
 }
+
+export type ProjectsSearchResults = {
+  projectsDetails: {
+    address: string;
+    epoch: string;
+    name: string;
+  }[];
+};
+
+export async function apiGetProjectsSearch(
+  epochs: string,
+  searchPhrases: string,
+): Promise<ProjectsSearchResults> {
+  return apiService
+    .get(`${env.serverEndpoint}projects/details?epochs=${epochs}&searchPhrases=${searchPhrases}`)
+    .then(({ data }) => data);
+}
diff --git a/client/src/api/calls/userAllocations.ts b/client/src/api/calls/userAllocations.ts
@@ -1,7 +1,7 @@
 import env from 'env';
 import apiService from 'services/apiService';
 
-export type Response = {
+export type GetUserAllocationsResponse = {
   allocations: {
     address: string;
     // Funds allocated by user for the project in WEI
@@ -10,8 +10,25 @@ export type Response = {
   isManuallyEdited: boolean | null;
 };
 
-export async function apiGetUserAllocations(address: string, epoch: number): Promise<Response> {
+export async function apiGetUserAllocations(
+  address: string,
+  epoch: number,
+): Promise<GetUserAllocationsResponse> {
   return apiService
     .get(`${env.serverEndpoint}allocations/user/${address}/epoch/${epoch}`)
     .then(({ data }) => data);
 }
+
+export type AllocationsPerProjectResponse = {
+  address: string;
+  amount: string;
+}[];
+
+export async function apiGetAllocationsPerProject(
+  projectAddress: string,
+  epoch: number,
+): Promise<AllocationsPerProjectResponse> {
+  return apiService
+    .get(`${env.serverEndpoint}allocations/project/${projectAddress}/epoch/${epoch}`)
+    .then(({ data }) => data);
+}
diff --git a/client/src/api/queryKeys/index.ts b/client/src/api/queryKeys/index.ts
@@ -22,6 +22,7 @@ export const ROOTS: Root = {
   projectsEpoch: 'projectsEpoch',
   projectsIpfsResults: 'projectsIpfsResults',
   rewardsRate: 'rewardsRate',
+  searchResultsDetails: 'searchResultsDetails',
   upcomingBudget: 'upcomingBudget',
   uqScore: 'uqScore',
   userAllocationNonce: 'userAllocationNonce',
@@ -68,6 +69,8 @@ export const QUERY_KEYS: QueryKeys = {
   projectsMetadataAccumulateds: ['projectsMetadataAccumulateds'],
   projectsMetadataPerEpoches: ['projectsMetadataPerEpoches'],
   rewardsRate: epochNumber => [ROOTS.rewardsRate, epochNumber.toString()],
+  searchResults: ['searchResults'],
+  searchResultsDetails: (address, epoch) => [ROOTS.searchResultsDetails, address, epoch.toString()],
   syncStatus: ['syncStatus'],
   totalAddresses: ['totalAddresses'],
   totalWithdrawals: ['totalWithdrawals'],

diff --git a/client/src/api/queryKeys/types.ts b/client/src/api/queryKeys/types.ts
@@ -22,6 +22,7 @@ export type Root = {
   projectsEpoch: 'projectsEpoch';
   projectsIpfsResults: 'projectsIpfsResults';
   rewardsRate: 'rewardsRate';
+  searchResultsDetails: 'searchResultsDetails';
   upcomingBudget: 'upcomingBudget';
   uqScore: 'uqScore';
   userAllocationNonce: 'userAllocationNonce';
@@ -69,6 +70,11 @@ export type QueryKeys = {
   projectsMetadataAccumulateds: ['projectsMetadataAccumulateds'];
   projectsMetadataPerEpoches: ['projectsMetadataPerEpoches'];
   rewardsRate: (epochNumber: number) => [Root['rewardsRate'], string];
+  searchResults: ['searchResults'];
+  searchResultsDetails: (
+    address: string,
+    epoch: number,
+  ) => [Root['searchResultsDetails'], string, string];
   syncStatus: ['syncStatus'];
   totalAddresses: ['totalAddresses'];
   totalWithdrawals: ['totalWithdrawals'];

diff --git a/client/src/components/Projects/ProjectsList/ProjectsList.module.scss b/client/src/components/Projects/ProjectsList/ProjectsList.module.scss
@@ -1,17 +1,3 @@
-.noSearchResults {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex: 1;
-  color: $color-octant-grey5;
-  margin-bottom: 1.6rem;
-
-  .image {
-    width: 28rem;
-    margin-bottom: 3.2rem;
-  }
-}
-
 .list {
   display: flex;
   flex-wrap: wrap;

diff --git a/client/src/components/Projects/ProjectsList/ProjectsList.tsx b/client/src/components/Projects/ProjectsList/ProjectsList.tsx
@@ -1,17 +1,14 @@
 import cx from 'classnames';
-import React, { FC, memo, useMemo } from 'react';
+import React, { FC, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import ProjectsListItem from 'components/Projects/ProjectsListItem';
 import ProjectsListSkeletonItem from 'components/Projects/ProjectsListSkeletonItem';
 import Grid from 'components/shared/Grid';
-import { PROJECTS_ADDRESSES_RANDOMIZED_ORDER } from 'constants/localStorageKeys';
 import useEpochDurationLabel from 'hooks/helpers/useEpochDurationLabel';
+import useSortedProjects from 'hooks/helpers/useIdsInAllocation/useSortedProjects';
 import useProjectsEpoch from 'hooks/queries/useProjectsEpoch';
-import useProjectsIpfsWithRewards, {
-  ProjectIpfsWithRewards,
-} from 'hooks/queries/useProjectsIpfsWithRewards';
-import { ProjectsAddressesRandomizedOrder } from 'types/localStorage';
+import useProjectsIpfsWithRewards from 'hooks/queries/useProjectsIpfsWithRewards';
 
 import styles from './ProjectsList.module.scss';
 import ProjectsListProps from './types';
@@ -33,61 +30,7 @@ const ProjectsList: FC<ProjectsListProps> = ({
 
   const isLoading = isFetchingProjectsEpoch || isFetchingProjectsWithRewards;
 
-  const projectsIpfsWithRewardsSorted = useMemo((): ProjectIpfsWithRewards[] => {
-    switch (orderOption) {
-      case 'randomized': {
-        const projectsAddressesRandomizedOrder = JSON.parse(
-          localStorage.getItem(PROJECTS_ADDRESSES_RANDOMIZED_ORDER)!,
-        ) as ProjectsAddressesRandomizedOrder;
-
-        const { addressesRandomizedOrder } = projectsAddressesRandomizedOrder;
-
-        return projectsIpfsWithRewards.sort((a, b) => {
-          return (
-            addressesRandomizedOrder.indexOf(a.address) -
-            addressesRandomizedOrder.indexOf(b.address)
-          );
-        });
-      }
-      case 'alphabeticalAscending': {
-        const projectIpfsWithRewardsFiltered = projectsIpfsWithRewards.filter(
-          element => element.name !== undefined,
-        );
-        return projectIpfsWithRewardsFiltered.sort((a, b) => a.name!.localeCompare(b.name!));
-      }
-      case 'alphabeticalDescending': {
-        const projectIpfsWithRewardsFiltered = projectsIpfsWithRewards.filter(
-          element => element.name !== undefined,
-        );
-        return projectIpfsWithRewardsFiltered.sort((a, b) => b.name!.localeCompare(a.name!));
-      }
-      case 'donorsAscending': {
-        return projectsIpfsWithRewards.sort((a, b) => a.numberOfDonors - b.numberOfDonors);
-      }
-      case 'donorsDescending': {
-        return projectsIpfsWithRewards.sort((a, b) => b.numberOfDonors - a.numberOfDonors);
-      }
-      case 'totalsAscending': {
-        const projectIpfsWithRewardsFiltered = projectsIpfsWithRewards.filter(
-          element => element.totalValueOfAllocations !== undefined,
-        );
-        return projectIpfsWithRewardsFiltered.sort((a, b) =>
-          Number(a.totalValueOfAllocations! - b.totalValueOfAllocations!),
-        );
-      }
-      case 'totalsDescending': {
-        const projectIpfsWithRewardsFiltered = projectsIpfsWithRewards.filter(
-          element => element.totalValueOfAllocations !== undefined,
-        );
-        return projectIpfsWithRewardsFiltered.sort((a, b) =>
-          Number(b.totalValueOfAllocations! - a.totalValueOfAllocations!),
-        );
-      }
-      default: {
-        return projectsIpfsWithRewards;
-      }
-    }
-  }, [projectsIpfsWithRewards, orderOption]);
+  const projectsIpfsWithRewardsSorted = useSortedProjects(projectsIpfsWithRewards, orderOption);
 
   return (
     <div
@@ -121,7 +64,6 @@ const ProjectsList: FC<ProjectsListProps> = ({
           ? projectsIpfsWithRewardsSorted.map((projectIpfsWithRewards, index) => (
               <ProjectsListItem
                 key={projectIpfsWithRewards.address}
-                className={styles.element}
                 dataTest={
                   epoch
                     ? `ProjectsView__ProjectsListItem--archive--${index}`

diff --git a/client/src/components/Projects/ProjectsListItem/ProjectsListItem.module.scss b/client/src/components/Projects/ProjectsListItem/ProjectsListItem.module.scss
@@ -34,12 +34,26 @@
     right: 0.8rem;
   }
 
-  .imageProfile {
-    border-radius: 50%;
-    width: 4rem;
-    height: 4rem;
+  .imageProfileWrapper {
+    position: relative;
+
+    .imageProfile {
+      border-radius: 50%;
+      width: 4rem;
+      height: 4rem;
+    }
+
+    .tinyLabel {
+      position: absolute;
+      top: 0;
+      right: 0;
+      white-space: nowrap;
+      background: $color-white;
+      text-transform: none;
+    }
   }
 
+
   .body {
     padding: 0 $projectItemPadding;
     text-align: left;

diff --git a/client/src/components/Projects/ProjectsListItem/ProjectsListItem.tsx b/client/src/components/Projects/ProjectsListItem/ProjectsListItem.tsx
@@ -8,6 +8,7 @@ import RewardsWithoutThreshold from 'components/shared/RewardsWithoutThreshold';
 import RewardsWithThreshold from 'components/shared/RewardsWithThreshold';
 import Description from 'components/ui/Description';
 import Img from 'components/ui/Img';
+import TinyLabel from 'components/ui/TinyLabel';
 import { WINDOW_PROJECTS_SCROLL_Y } from 'constants/window';
 import env from 'env';
 import useIdsInAllocation from 'hooks/helpers/useIdsInAllocation';
@@ -26,6 +27,7 @@ const ProjectsListItem: FC<ProjectsListItemProps> = ({
   dataTest,
   epoch,
   projectIpfsWithRewards,
+  searchResultsLabel,
 }) => {
   const { ipfsGateways } = env;
   const { address, isLoadingError, profileImageSmall, name, introDescription } =
@@ -99,13 +101,20 @@ const ProjectsListItem: FC<ProjectsListItemProps> = ({
       ) : (
         <Fragment>
           <div className={styles.header}>
-            <Img
-              className={styles.imageProfile}
-              dataTest={
-                epoch ? 'ProjectsListItem__imageProfile--archive' : 'ProjectsListItem__imageProfile'
-              }
-              sources={ipfsGateways.split(',').map(element => `${element}${profileImageSmall}`)}
-            />
+            <div className={styles.imageProfileWrapper}>
+              <Img
+                className={styles.imageProfile}
+                dataTest={
+                  epoch
+                    ? 'ProjectsListItem__imageProfile--archive'
+                    : 'ProjectsListItem__imageProfile'
+                }
+                sources={ipfsGateways.split(',').map(element => `${element}${profileImageSmall}`)}
+              />
+              {searchResultsLabel && (
+                <TinyLabel className={styles.tinyLabel} text={searchResultsLabel} />
+              )}
+            </div>
             {isAddToAllocateButtonVisible && (
               <ButtonAddToAllocate
                 className={styles.button}

diff --git a/client/src/components/Projects/ProjectsListItem/types.ts b/client/src/components/Projects/ProjectsListItem/types.ts
@@ -5,4 +5,5 @@ export default interface ProjectsListItemProps {
   dataTest?: string;
   epoch?: number;
   projectIpfsWithRewards: ProjectIpfsWithRewards;
+  searchResultsLabel?: string;
 }
diff --git a/client/src/components/Projects/ProjectsSearchResults/ProjectsSearchResults.module.scss b/client/src/components/Projects/ProjectsSearchResults/ProjectsSearchResults.module.scss
@@ -0,0 +1,22 @@
+$elementMargin: 1.6rem;
+
+.noSearchResults {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  color: $color-octant-grey5;
+  margin: 1.6rem 0;
+
+  .image {
+    width: 28rem;
+    margin-bottom: 3.2rem;
+  }
+}
+
+.list {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  justify-content: space-between;
+}
diff --git a/client/src/components/Projects/ProjectsSearchResults/ProjectsSearchResults.tsx b/client/src/components/Projects/ProjectsSearchResults/ProjectsSearchResults.tsx
@@ -0,0 +1,75 @@
+import React, { FC, memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import ProjectsListItem from 'components/Projects/ProjectsListItem';
+import ProjectsListSkeletonItem from 'components/Projects/ProjectsListSkeletonItem';
+import Grid from 'components/shared/Grid';
+import Img from 'components/ui/Img';
+import useSortedProjects from 'hooks/helpers/useIdsInAllocation/useSortedProjects';
+import useCurrentEpoch from 'hooks/queries/useCurrentEpoch';
+import useIsDecisionWindowOpen from 'hooks/queries/useIsDecisionWindowOpen';
+
+import styles from './ProjectsSearchResults.module.scss';
+import ProjectsSearchResultsProps from './types';
+
+const ProjectsSearchResults: FC<ProjectsSearchResultsProps> = ({
+  orderOption,
+  projectsIpfsWithRewardsAndEpochs,
+  isLoading,
+}) => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'components.dedicated.projectsSearchResults',
+  });
+
+  const { data: currentEpoch } = useCurrentEpoch();
+  const { data: isDecisionWindowOpen } = useIsDecisionWindowOpen();
+
+  const projectsIpfsWithRewardsSorted = useSortedProjects(
+    projectsIpfsWithRewardsAndEpochs,
+    orderOption,
+  );
+
+  return (
+    <div className={styles.list}>
+      {projectsIpfsWithRewardsAndEpochs.length === 0 && !isLoading && (
+        <div className={styles.noSearchResults}>
+          <Img
+            className={styles.image}
+            dataTest="ProjectsList__noSearchResults__Img"
+            src="images/swept.webp"
+          />
+          {t('noSearchResults')}
+        </div>
+      )}
+      <Grid>
+        {projectsIpfsWithRewardsAndEpochs.length > 0 &&
+          !isLoading &&
+          projectsIpfsWithRewardsSorted.map((projectIpfsWithRewards, index) => (
+            <ProjectsListItem
+              key={`${projectIpfsWithRewards.address}--${projectIpfsWithRewards.epoch}`}
+              dataTest={
+                projectIpfsWithRewards.epoch
+                  ? `ProjectsView__ProjectsListItem--archive--${index}`
+                  : `ProjectsView__ProjectsListItem--${index}`
+              }
+              epoch={projectIpfsWithRewards.epoch}
+              projectIpfsWithRewards={projectIpfsWithRewards}
+              searchResultsLabel={
+                isDecisionWindowOpen && currentEpoch === projectIpfsWithRewards.epoch
+                  ? ''
+                  : t('searchResultsLabel', { epochNumber: projectIpfsWithRewards.epoch })
+              }
+            />
+          ))}
+        {projectsIpfsWithRewardsAndEpochs.length === 0 &&
+          isLoading &&
+          [...Array(5).keys()].map((_, index) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <ProjectsListSkeletonItem key={index} className={styles.element} />
+          ))}
+      </Grid>
+    </div>
+  );
+};
+
+export default memo(ProjectsSearchResults);
diff --git a/client/src/components/Projects/ProjectsSearchResults/index.tsx b/client/src/components/Projects/ProjectsSearchResults/index.tsx
@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
+export { default } from './ProjectsSearchResults';
diff --git a/client/src/components/Projects/ProjectsSearchResults/types.ts b/client/src/components/Projects/ProjectsSearchResults/types.ts
@@ -0,0 +1,8 @@
+import { ProjectsIpfsWithRewardsAndEpochs } from 'hooks/queries/useSearchedProjectsDetails';
+import { OrderOption } from 'views/ProjectsView/types';
+
+export default interface ProjectsSearchResultsProps {
+  isLoading: boolean;
+  orderOption: OrderOption;
+  projectsIpfsWithRewardsAndEpochs: ProjectsIpfsWithRewardsAndEpochs[];
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// eslint-disable-next-line no-restricted-exports
		export { default } from './ProjectsSearchResults';