-
+
+
- {selectedHubs.length > 0 && !hideSelectedItems && }
-
+
);
}
export function HubsSelected({
selectedHubs,
onChange,
-}: {
+}: Readonly<{
selectedHubs: Hub[];
onChange: (hubs: Hub[]) => void;
-}) {
+}>) {
return (
{selectedHubs.map((hub) => (
From 0a1d6ae0aeb26b6c2765ac9e241b32e643948ff6 Mon Sep 17 00:00:00 2001
From: Dan <39170265+chillenberger@users.noreply.github.com>
Date: Sat, 6 Sep 2025 14:31:15 -0600
Subject: [PATCH 10/12] partial refactor of useFeed, update feed.service
---
hooks/useFeed.ts | 85 ++++++++++++----------------------------
services/feed.service.ts | 11 +-----
2 files changed, 28 insertions(+), 68 deletions(-)
diff --git a/hooks/useFeed.ts b/hooks/useFeed.ts
index 4b1ef7574..2d8c054c6 100644
--- a/hooks/useFeed.ts
+++ b/hooks/useFeed.ts
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
import { FeedEntry } from '@/types/feed';
import { FeedService } from '@/services/feed.service';
import { useSession } from 'next-auth/react';
+import { isEqual, omit } from 'lodash';
export type FeedTab = 'following' | 'latest' | 'popular';
export type FundingTab = 'all' | 'open' | 'closed';
@@ -31,6 +32,18 @@ export const useFeed = (activeTab: FeedTab | FundingTab, options: UseFeedOptions
const [currentTab, setCurrentTab] = useState
(activeTab);
const [currentOptions, setCurrentOptions] = useState(options);
+ // Re-load the feed if any of the relevant options change
+ const omitCheckKeys = ['initialData']; // Keys to ignore when comparing options
+ useEffect(() => {
+ const filteredOptions = omit(options, omitCheckKeys);
+ const filteredCurrentOptions = omit(currentOptions, omitCheckKeys);
+
+ if (!isEqual(filteredOptions, filteredCurrentOptions)) {
+ setCurrentOptions(options);
+ loadFeed();
+ }
+ }, [options]);
+
// Only load the feed when the component mounts or when the session status changes
// We no longer reload when activeTab changes, as that will be handled by page navigation
useEffect(() => {
@@ -57,66 +70,16 @@ export const useFeed = (activeTab: FeedTab | FundingTab, options: UseFeedOptions
}
}, [status, activeTab]);
- const arraysEqual = (a?: (string | number)[], b?: (string | number)[]) => {
- if (a === b) return true;
- if (!a || !b) return false;
- if (a.length !== b.length) return false;
- return a.every((val, i) => val === b[i]);
- };
-
- // Check if options have changed
- useEffect(() => {
- // Compare relevant options (excluding initialData which shouldn't trigger a reload)
- const relevantOptionsChanged =
- options.hubSlug !== currentOptions.hubSlug ||
- options.contentType !== currentOptions.contentType ||
- options.source !== currentOptions.source ||
- options.endpoint !== currentOptions.endpoint ||
- options.fundraiseStatus !== currentOptions.fundraiseStatus ||
- options.createdBy !== currentOptions.createdBy ||
- options.ordering !== currentOptions.ordering ||
- !arraysEqual(options.hubIds, currentOptions.hubIds);
-
- if (relevantOptionsChanged) {
- setCurrentOptions(options);
- loadFeed();
- }
- }, [options]);
-
- const loadFeed = async () => {
- setIsLoading(true);
- try {
- const result = await FeedService.getFeed({
- page: 1,
- pageSize: 20,
- feedView: activeTab as FeedTab, // Only pass feedView if it's a FeedTab
- hubSlug: options.hubSlug,
- contentType: options.contentType,
- source: options.source,
- endpoint: options.endpoint,
- fundraiseStatus: options.fundraiseStatus,
- createdBy: options.createdBy,
- ordering: options.ordering,
- hubIds: options.hubIds,
- });
- setEntries(result.entries);
- setHasMore(result.hasMore);
- setPage(1);
- } catch (error) {
- console.error('Error loading feed:', error);
- } finally {
- setIsLoading(false);
+ // Load feed items for first or subsequent pages.
+ const loadFeed = async (pageNumber: number = 1) => {
+ if (pageNumber > 1 && (!hasMore || isLoading)) {
+ return;
}
- };
-
- const loadMore = async () => {
- if (!hasMore || isLoading) return;
setIsLoading(true);
try {
- const nextPage = page + 1;
const result = await FeedService.getFeed({
- page: nextPage,
+ page: pageNumber,
pageSize: 20,
feedView: activeTab as FeedTab, // Only pass feedView if it's a FeedTab
hubSlug: options.hubSlug,
@@ -128,11 +91,15 @@ export const useFeed = (activeTab: FeedTab | FundingTab, options: UseFeedOptions
ordering: options.ordering,
hubIds: options.hubIds,
});
- setEntries((prev) => [...prev, ...result.entries]);
+ if (pageNumber === 1) {
+ setEntries(result.entries);
+ } else {
+ setEntries((prev) => [...prev, ...result.entries]);
+ }
setHasMore(result.hasMore);
- setPage(nextPage);
+ setPage(pageNumber);
} catch (error) {
- console.error('Error loading more feed items:', error);
+ console.error('Error loading feed for page:', pageNumber, error);
} finally {
setIsLoading(false);
}
@@ -142,7 +109,7 @@ export const useFeed = (activeTab: FeedTab | FundingTab, options: UseFeedOptions
entries,
isLoading,
hasMore,
- loadMore,
+ loadMore: () => loadFeed(page + 1),
refresh: loadFeed,
};
};
diff --git a/services/feed.service.ts b/services/feed.service.ts
index 069ff3886..092d2e778 100644
--- a/services/feed.service.ts
+++ b/services/feed.service.ts
@@ -4,7 +4,7 @@ import { Bounty, BountyType, transformBounty } from '@/types/bounty';
import { transformUser, User } from '@/types/user';
import { transformAuthorProfile } from '@/types/authorProfile';
import { Fundraise, transformFundraise } from '@/types/funding';
-import { Topic } from '@/types/topic';
+import { Topic, transformTopic } from '@/types/topic';
type Endpoints = 'feed' | 'funding_feed' | 'grant_feed' | undefined;
@@ -268,14 +268,7 @@ export class FeedService {
try {
const response = await ApiClient.get(path);
- // Use transformTopic to normalize
- return response.map((raw) => ({
- id: raw.id,
- name: raw.name || '',
- slug: raw.slug || '',
- description: raw.description,
- imageUrl: raw.hub_image || undefined,
- }));
+ return response.map((raw) => transformTopic(raw));
} catch (error) {
console.error(`Error fetching ${endpoint} hubs`, error);
return [];
From ed1e637c367bac28a542ec52b1933b3bf89d4679 Mon Sep 17 00:00:00 2001
From: Dan <39170265+chillenberger@users.noreply.github.com>
Date: Tue, 9 Sep 2025 10:00:21 -0600
Subject: [PATCH 11/12] add most applications and most reviews filters, make
filter case consistent
---
app/fund/components/FundPageContent.tsx | 12 +++++++-----
1 file changed, 7 insertions(+), 5 deletions(-)
diff --git a/app/fund/components/FundPageContent.tsx b/app/fund/components/FundPageContent.tsx
index 04dcee124..b2cb631b1 100644
--- a/app/fund/components/FundPageContent.tsx
+++ b/app/fund/components/FundPageContent.tsx
@@ -136,22 +136,24 @@ export function FundPageContent({ marketplaceTab }: FundPageContentProps) {
// Available sort options
const grantSortOptions = [
{ value: '-unified_document__grants__amount', label: 'Amount' },
- { value: '-created_date', label: 'Created Date' },
+ { value: '-created_date', label: 'Created date' },
{ value: 'unified_document__grants__end_date', label: 'Expiring soon' },
+ { value: 'application_count', label: 'Most applications' },
];
const fundingProposalSortOption = [
{ value: '-unified_document__fundraises__goal_amount', label: 'Goal' },
- { value: 'amount_raised', label: 'Amount Raised' },
- { value: '-created_date', label: 'Created Date' },
+ { value: 'amount_raised', label: 'Amount raised' },
+ { value: '-created_date', label: 'Created date' },
{ value: 'unified_document__fundraises__end_date', label: 'Expiring soon' },
{ value: '-unified_document__hot_score', label: 'Popular' },
+ { value: 'review_count', label: 'Most reviews' },
];
const previouslyFundedSortOptions = [
{ value: '-unified_document__fundraises__goal_amount', label: 'Goal' },
- { value: 'amount_raised', label: 'Amount Raised' },
- { value: '-created_date', label: 'Created Date' },
+ { value: 'amount_raised', label: 'Amount raised' },
+ { value: '-created_date', label: 'Created date' },
];
const rightSidebar = marketplaceTab === 'grants' ? : ;
From b7e8eab765eaf77faef5cefad7a3c03f2fa28bcf Mon Sep 17 00:00:00 2001
From: Dan <39170265+chillenberger@users.noreply.github.com>
Date: Tue, 9 Sep 2025 17:51:15 -0600
Subject: [PATCH 12/12] clean up sorts and FundPageContent consts
---
app/fund/components/FundPageContent.tsx | 133 ++++++++++--------------
app/layouts/TopBar.tsx | 1 +
2 files changed, 56 insertions(+), 78 deletions(-)
diff --git a/app/fund/components/FundPageContent.tsx b/app/fund/components/FundPageContent.tsx
index b2cb631b1..3917f24e6 100644
--- a/app/fund/components/FundPageContent.tsx
+++ b/app/fund/components/FundPageContent.tsx
@@ -12,12 +12,61 @@ import { useState, useEffect } from 'react';
import SortDropdown, { SortOption } from '@/components/ui/SortDropdown';
import { HubsSelector, HubsSelected, Hub } from '@/components/Hub/HubSelector';
+const SORT_OPTIONS_MAP: Record = {
+ grants: [
+ { value: 'grants__amount', label: 'Amount' },
+ { value: 'newest', label: 'Created date' },
+ { value: 'end_date', label: 'Expiring soon' },
+ { value: 'application_count', label: 'Most applications' },
+ ],
+ 'needs-funding': [
+ { value: 'newest', label: 'Created date' },
+ { value: 'hot_score', label: 'Popular' },
+ { value: 'upvotes', label: 'Most upvoted' },
+ { value: 'amount_raised', label: 'Amount raised' },
+ { value: 'goal_amount', label: 'Goal' },
+ { value: 'end_date', label: 'Expiring soon' },
+ { value: 'review_count', label: 'Most reviews' },
+ ],
+ 'previously-funded': [
+ { value: 'goal_amount', label: 'Goal' },
+ { value: 'amount_raised', label: 'Amount raised' },
+ { value: 'newest', label: 'Created date' },
+ ],
+};
+
+const DEFAULT_SORT_MAP: Record = {
+ grants: 'end_date',
+ 'needs-funding': 'end_date',
+ 'previously-funded': 'newest',
+};
+
+// Needs replaced with getPageInfo from layouts/TopBar.tsx
+const PAGE_TITLE_MAP: Record = {
+ grants: 'Request for Proposals',
+ 'needs-funding': 'Proposals',
+ 'previously-funded': 'Previously Funded',
+};
+
+// Needs replaced with getPageInfo from layouts/TopBar.tsx
+const PAGE_SUBTITLE_MAP: Record = {
+ grants: 'Explore available funding opportunities',
+ 'needs-funding': 'Fund breakthrough research shaping tomorrow',
+ 'previously-funded': 'Browse research that has been successfully funded',
+};
+
+const HUB_TYPE_MAP: Record = {
+ grants: 'grant',
+ 'needs-funding': 'needs-funding',
+ 'previously-funded': 'bounty',
+};
+
interface FundPageContentProps {
marketplaceTab: MarketplaceTab;
}
export function FundPageContent({ marketplaceTab }: FundPageContentProps) {
- const [sort, setSort] = useState('-created_date');
+ const [sort, setSort] = useState(DEFAULT_SORT_MAP[marketplaceTab]);
const [selectedHubs, setSelectedHubs] = useState([]);
const [managedEntries, setManagedEntries] = useState([]);
@@ -45,56 +94,6 @@ export function FundPageContent({ marketplaceTab }: FundPageContentProps) {
refresh();
}, [sort, selectedHubs]);
- const getTitle = (tab: MarketplaceTab): string => {
- switch (tab) {
- case 'grants':
- return 'Request for Proposals';
- case 'needs-funding':
- return 'Proposals';
- case 'previously-funded':
- return 'Previously Funded';
- default:
- return '';
- }
- };
-
- const getSubtitle = (tab: MarketplaceTab): string => {
- switch (tab) {
- case 'grants':
- return 'Explore available funding opportunities';
- case 'needs-funding':
- return 'Fund breakthrough research shaping tomorrow';
- case 'previously-funded':
- return 'Browse research that has been successfully funded';
- default:
- return '';
- }
- };
-
- const getSortOptions = (tab: MarketplaceTab): SortOption[] => {
- switch (tab) {
- case 'grants':
- return grantSortOptions;
- case 'needs-funding':
- return fundingProposalSortOption;
- case 'previously-funded':
- return previouslyFundedSortOptions;
- }
- };
-
- const getHubType = (tab: MarketplaceTab): 'grant' | 'needs-funding' | 'bounty' | undefined => {
- switch (tab) {
- case 'grants':
- return 'grant';
- case 'needs-funding':
- return 'needs-funding';
- case 'previously-funded':
- return 'bounty';
- default:
- return undefined;
- }
- };
-
const handleHubsChange = (hubs: any[]) => {
setSelectedHubs(hubs);
};
@@ -107,14 +106,14 @@ export function FundPageContent({ marketplaceTab }: FundPageContentProps) {
setSort(opt.value)}
- options={getSortOptions(marketplaceTab)}
+ options={SORT_OPTIONS_MAP[marketplaceTab]}
/>