From c6c65a0d48ca14d1c89eac8e172985728e91b4d4 Mon Sep 17 00:00:00 2001 From: Justin Date: Thu, 19 May 2022 12:29:28 -0400 Subject: [PATCH 1/3] Add infinite scroll to suggestions onboarding --- app/soapbox/actions/suggestions.js | Bin 3005 -> 3224 bytes app/soapbox/components/scrollable_list.tsx | 7 ++- app/soapbox/containers/soapbox.tsx | 2 +- .../steps/suggested-accounts-step.tsx | 46 +++++++++++++----- app/soapbox/reducers/suggestions.js | Bin 2313 -> 2401 bytes 5 files changed, 40 insertions(+), 15 deletions(-) diff --git a/app/soapbox/actions/suggestions.js b/app/soapbox/actions/suggestions.js index ede37ff303b3fcb6cb20423065821a408e37453a..c804c48555dc82b74b45ffc0ba8c1ef0c71ebea1 100644 GIT binary patch delta 307 zcmdlhK0|Us5uc7iwL*GoiBD!;cCkY3#-hh8lkc&!8Rex`lqlGOWP(c)OHws7^?*#z zJdJ4e;?nf=)Z&uN{Jdgy9R+oeLiJcpYp%%wtX`9|nC0rhTJ04;lwN63rh=7%x_)9o zrhb``KB``*!s=R}l4^y5#G=Gppc6FpN-|ROG&G7*iwl5uq-rYI+9_0XDS$yTP^3fw z$rzv;VG8w95=#<+?)by%;Q>(xwgBu2u=fx~>J_D?73-yC=A~%l06h+}0Yn3Za};cC VZK1vbdCHcpgau^G=JjlRtN`;SXOsW{ delta 77 zcmV-T0J8s>8NC;faoINa0eEXV*?tKUjzxWuLtP_FAW;3 diff --git a/app/soapbox/components/scrollable_list.tsx b/app/soapbox/components/scrollable_list.tsx index cc4b55867c..c2497547be 100644 --- a/app/soapbox/components/scrollable_list.tsx +++ b/app/soapbox/components/scrollable_list.tsx @@ -42,6 +42,8 @@ interface IScrollableList extends VirtuosoProps { onRefresh?: () => Promise, className?: string, itemClassName?: string, + style?: React.CSSProperties, + useWindowScroll?: boolean } /** Legacy ScrollableList with Virtuoso for backwards-compatibility */ @@ -63,6 +65,8 @@ const ScrollableList = React.forwardRef(({ placeholderCount = 0, initialTopMostItemIndex = 0, scrollerRef, + style = {}, + useWindowScroll = true, }, ref) => { const settings = useSettings(); const autoloadMore = settings.get('autoloadMore'); @@ -129,7 +133,7 @@ const ScrollableList = React.forwardRef(({ const renderFeed = (): JSX.Element => ( (({ isScrolling={isScrolling => isScrolling && onScroll && onScroll()} itemContent={renderItem} initialTopMostItemIndex={showLoading ? 0 : initialTopMostItemIndex} + style={style} context={{ listClassName: className, itemClassName, diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx index cde450e652..79329f3000 100644 --- a/app/soapbox/containers/soapbox.tsx +++ b/app/soapbox/containers/soapbox.tsx @@ -48,7 +48,7 @@ store.dispatch(checkOnboardingStatus() as any); /** Load initial data from the backend */ const loadInitial = () => { // @ts-ignore - return async(dispatch, getState) => { + return async (dispatch, getState) => { // Await for authenticated fetch await dispatch(fetchMe()); // Await for feature detection diff --git a/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx b/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx index d3972e1ab1..4421979cb7 100644 --- a/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx +++ b/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx @@ -1,8 +1,10 @@ import { Map as ImmutableMap } from 'immutable'; +import debounce from 'lodash/debounce'; import * as React from 'react'; import { FormattedMessage } from 'react-intl'; import { useDispatch } from 'react-redux'; +import ScrollableList from 'soapbox/components/scrollable_list'; import { Button, Card, CardBody, Stack, Text } from 'soapbox/components/ui'; import AccountContainer from 'soapbox/containers/account_container'; import { useAppSelector } from 'soapbox/hooks'; @@ -13,24 +15,42 @@ const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => { const dispatch = useDispatch(); const suggestions = useAppSelector((state) => state.suggestions.get('items')); - const suggestionsToRender = suggestions.slice(0, 5); + const hasMore = useAppSelector((state) => !!state.suggestions.get('next')); + const isLoading = useAppSelector((state) => state.suggestions.get('isLoading')); + + const handleLoadMore = debounce(() => { + if (isLoading) { + return null; + } + + return dispatch(fetchSuggestions()); + }, 300); React.useEffect(() => { - dispatch(fetchSuggestions()); + dispatch(fetchSuggestions({ limit: 20 })); }, []); const renderSuggestions = () => { return ( -
- {suggestionsToRender.map((suggestion: ImmutableMap) => ( -
- , but it isn't - id={suggestion.get('account')} - showProfileHoverCard={false} - /> -
- ))} +
+ + {suggestions.map((suggestion: ImmutableMap) => ( +
+ , but it isn't + id={suggestion.get('account')} + showProfileHoverCard={false} + /> +
+ ))} +
); }; @@ -46,7 +66,7 @@ const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => { }; const renderBody = () => { - if (suggestionsToRender.isEmpty()) { + if (suggestions.isEmpty()) { return renderEmpty(); } else { return renderSuggestions(); diff --git a/app/soapbox/reducers/suggestions.js b/app/soapbox/reducers/suggestions.js index ac00eecf11b843781a50256f87bda4ea08173930..03f782d3e7800acf8a817a770bf24d4d6aa2a334 100644 GIT binary patch delta 103 zcmeAadMLC(nTabewW7pIA+IziXR|!hCPp?L1(3+(i_DgjkFdzIC+FuSCzfbT7H4so x9LAy{p`cJ)l30?eSDad+p$<~14$-i=lH~>yuZ}`ua!F=>o*qbMb0GT;MgZw2B4Ypm delta 46 zcmV+}0MY;95{VM9BLcHA0y)v&RRT E0eHd?SO5S3 From 3fbe81040636c3b74426b8bb5eeffb0d574035f5 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 19 May 2022 11:52:36 -0500 Subject: [PATCH 2/3] Crom, I have never prayed to you before. I have no tongue for it. --- app/soapbox/containers/soapbox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx index 79329f3000..cde450e652 100644 --- a/app/soapbox/containers/soapbox.tsx +++ b/app/soapbox/containers/soapbox.tsx @@ -48,7 +48,7 @@ store.dispatch(checkOnboardingStatus() as any); /** Load initial data from the backend */ const loadInitial = () => { // @ts-ignore - return async (dispatch, getState) => { + return async(dispatch, getState) => { // Await for authenticated fetch await dispatch(fetchMe()); // Await for feature detection From cee7e3761fa3b2191338033135ec1af466f01056 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 19 May 2022 12:31:16 -0500 Subject: [PATCH 3/3] Fix suggestions test --- .../reducers/__tests__/suggestions-test.js | Bin 1114 -> 1132 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/app/soapbox/reducers/__tests__/suggestions-test.js b/app/soapbox/reducers/__tests__/suggestions-test.js index 7da0b7f75043dff04f6322d77a36c5b63bf94d77..01c1f1affefb310e798b0c4d9f2086c1c6952942 100644 GIT binary patch delta 29 lcmcb`@rGkV5hG7tYDI~aLSAW3jt