diff --git a/web/hooks/use-fold.ts b/web/hooks/use-fold.ts index 683b364a..e7eb737f 100644 --- a/web/hooks/use-fold.ts +++ b/web/hooks/use-fold.ts @@ -49,6 +49,7 @@ export const useFollowingFold = (fold: Fold, user: User | null | undefined) => { return following } +// Note: We cache FollowedFolds in localstorage to speed up the initial load export const useFollowedFolds = (user: User | null | undefined) => { const [followedFoldIds, setFollowedFoldIds] = useState( undefined diff --git a/web/pages/folds.tsx b/web/pages/folds.tsx index 9be5a56b..a47e0d6e 100644 --- a/web/pages/folds.tsx +++ b/web/pages/folds.tsx @@ -11,7 +11,7 @@ import { SiteLink } from '../components/site-link' import { TagsList } from '../components/tags-list' import { Title } from '../components/title' import { UserLink } from '../components/user-page' -import { useFolds } from '../hooks/use-fold' +import { useFolds, useFollowedFolds } from '../hooks/use-fold' import { useUser } from '../hooks/use-user' import { foldPath, listAllFolds } from '../lib/firebase/folds' import { getUser, User } from '../lib/firebase/users' @@ -43,8 +43,11 @@ export default function Folds(props: { const [curatorsDict, setCuratorsDict] = useState(props.curatorsDict) let folds = useFolds() ?? props.folds - folds = _.sortBy(folds, (fold) => -1 * fold.followCount) const user = useUser() + const followedFoldIds = useFollowedFolds(user) || [] + // First sort by follower count, then list followed folds first + folds = _.sortBy(folds, (fold) => -1 * fold.followCount) + folds = _.sortBy(folds, (fold) => !followedFoldIds.includes(fold.id)) useEffect(() => { // Load User object for curator of new Folds.