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

Merge branch 'add-loading-state-to-carousel' into 'develop'

Browse source 
Add disabled state when changing feed filter

See merge request soapbox-pub/soapbox-fe!1636
This commit is contained in:
Justin 2022-07-14 20:58:00 +00:00
commit 7482d37f5c
2 changed files with 23 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/soapbox/actions/timelines.ts
View file

@ -140,9 +140,15 @@ const parseTags = (tags: Record<string, any[]> = {}, mode: 'any' | 'all' | 'none
const replaceHomeTimeline = ( const replaceHomeTimeline = (
accountId: string | null, accountId: string | null,
{ maxId }: Record<string, any> = {}, { maxId }: Record<string, any> = {},
done?: () => void,
) => (dispatch: AppDispatch, _getState: () => RootState) => { ) => (dispatch: AppDispatch, _getState: () => RootState) => {
dispatch({ type: TIMELINE_REPLACE, accountId }); dispatch({ type: TIMELINE_REPLACE, accountId });
dispatch(expandHomeTimeline({ accountId, maxId }, () => dispatch(insertSuggestionsIntoTimeline()))); dispatch(expandHomeTimeline({ accountId, maxId }, () => {
dispatch(insertSuggestionsIntoTimeline());
if (done) {
done();
}
}));
}; };
const expandTimeline = (timelineId: string, path: string, params: Record<string, any> = {}, done = noOp) => const expandTimeline = (timelineId: string, path: string, params: Record<string, any> = {}, done = noOp) =>

21
app/soapbox/features/feed-filtering/feed-carousel.tsx
View file

@ -15,13 +15,24 @@ const CarouselItem = ({ avatar }: { avatar: any }) => {
const selectedAccountId = useAppSelector(state => state.timelines.get('home')?.feedAccountId); const selectedAccountId = useAppSelector(state => state.timelines.get('home')?.feedAccountId);
const isSelected = avatar.account_id === selectedAccountId; const isSelected = avatar.account_id === selectedAccountId;
const handleClick = () => const [isLoading, setLoading] = useState<boolean>(false);
isSelected
? dispatch(replaceHomeTimeline(null, { maxId: null })) const handleClick = () => {
: dispatch(replaceHomeTimeline(avatar.account_id, { maxId: null })); if (isLoading) {
return;
}
setLoading(true);
if (isSelected) {
dispatch(replaceHomeTimeline(null, { maxId: null }, () => setLoading(false)));
} else {
dispatch(replaceHomeTimeline(avatar.account_id, { maxId: null }, () => setLoading(false)));
}
};
return ( return (
<div onClick={handleClick} className='cursor-pointer' role='filter-feed-by-user'> <div aria-disabled={isLoading} onClick={handleClick} className='cursor-pointer' role='filter-feed-by-user'>
<Stack className='w-16 h-auto' space={3}> <Stack className='w-16 h-auto' space={3}>
<div className='block mx-auto relative w-14 h-14 rounded-full'> <div className='block mx-auto relative w-14 h-14 rounded-full'>
{isSelected && ( {isSelected && (