bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Onboarding: improve rendering of empty suggestions

Browse source
This commit is contained in:
Alex Gleason 2022-04-20 12:24:03 -05:00
parent 41ab4f0a44
commit 34b83c8ad3
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
1 changed files with 34 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
View file

@ -19,9 +19,39 @@ const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
dispatch(fetchSuggestions());
}, []);
if (suggestionsToRender.isEmpty()) {
return null;
}
const renderSuggestions = () => {
return (
<div className='sm:pt-4 sm:pb-10 flex flex-col divide-y divide-solid divide-gray-200'>
{suggestionsToRender.map((suggestion: ImmutableMap<string, any>) => (
<div key={suggestion.get('account')} className='py-2'>
<AccountContainer
// @ts-ignore: TS thinks `id` is passed to <Account>, but it isn't
id={suggestion.get('account')}
showProfileHoverCard={false}
/>
</div>
))}
</div>
);
};
const renderEmpty = () => {
return (
<div className='bg-primary-50 dark:bg-slate-700 my-2 rounded-lg text-center p-8'>
<Text>
<FormattedMessage id='empty_column.follow_recommendations' defaultMessage='Looks like no suggestions could be generated for you. You can try using search to look for people you might know or explore trending hashtags.' />
</Text>
</div>
);
};
const renderBody = () => {
if (suggestionsToRender.isEmpty()) {
return renderEmpty();
} else {
return renderSuggestions();
}
};
return (
<Card variant='rounded' size='xl'>
@ -39,17 +69,7 @@ const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
</Stack>
</div>
<div className='sm:pt-4 sm:pb-10 flex flex-col divide-y divide-solid divide-gray-200'>
{suggestionsToRender.map((suggestion: ImmutableMap<string, any>) => (
<div key={suggestion.get('account')} className='py-2'>
<AccountContainer
// @ts-ignore: TS thinks `id` is passed to <Account>, but it isn't
id={suggestion.get('account')}
showProfileHoverCard={false}
/>
</div>
))}
</div>
{renderBody()}
<div className='sm:w-2/3 md:w-1/2 mx-auto'>
<Stack>