diff --git a/app/soapbox/features/groups/components/discover/popular-groups.tsx b/app/soapbox/features/groups/components/discover/popular-groups.tsx index 8ac7d7387..5b30905f2 100644 --- a/app/soapbox/features/groups/components/discover/popular-groups.tsx +++ b/app/soapbox/features/groups/components/discover/popular-groups.tsx @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import { FormattedMessage } from 'react-intl'; import { Carousel, Stack, Text } from 'soapbox/components/ui'; import PlaceholderGroupDiscover from 'soapbox/features/placeholder/components/placeholder-group-discover'; @@ -7,46 +8,59 @@ import { usePopularGroups } from 'soapbox/queries/groups'; import Group from './group'; const PopularGroups = () => { - const { groups, isFetching } = usePopularGroups(); + const { groups, isFetching, isFetched, isError } = usePopularGroups(); + const isEmpty = (isFetched && groups.length === 0) || isError; const [groupCover, setGroupCover] = useState(null); return ( - Popular Groups + - - {({ width }: { width: number }) => ( - <> - {isFetching ? ( - new Array(20).fill(0).map((_, idx) => ( -
- -
- )) - ) : ( - groups.map((group) => ( - - )) - )} - - )} -
+ {isEmpty ? ( + + + + ) : ( + + {({ width }: { width: number }) => ( + <> + {isFetching ? ( + new Array(20).fill(0).map((_, idx) => ( +
+ +
+ )) + ) : ( + groups.map((group) => ( + + )) + )} + + )} +
+ )}
); }; diff --git a/app/soapbox/features/groups/components/discover/search/blankslate.tsx b/app/soapbox/features/groups/components/discover/search/blankslate.tsx new file mode 100644 index 000000000..efc179bd4 --- /dev/null +++ b/app/soapbox/features/groups/components/discover/search/blankslate.tsx @@ -0,0 +1,20 @@ +import React from 'react'; + +import { Stack, Text } from 'soapbox/components/ui'; + +interface Props { + title: React.ReactNode | string + subtitle: React.ReactNode | string +} + +export default ({ title, subtitle }: Props) => ( + + + {title} + + + + {subtitle} + + +); \ No newline at end of file diff --git a/app/soapbox/features/groups/components/discover/search/no-results-blankslate.tsx b/app/soapbox/features/groups/components/discover/search/no-results-blankslate.tsx deleted file mode 100644 index 171348846..000000000 --- a/app/soapbox/features/groups/components/discover/search/no-results-blankslate.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import { FormattedMessage } from 'react-intl'; - -import { Stack, Text } from 'soapbox/components/ui'; - -export default () => ( - - - - - - - - - -); \ No newline at end of file diff --git a/app/soapbox/features/groups/components/discover/search/search.tsx b/app/soapbox/features/groups/components/discover/search/search.tsx index 083dab8d5..ef8605435 100644 --- a/app/soapbox/features/groups/components/discover/search/search.tsx +++ b/app/soapbox/features/groups/components/discover/search/search.tsx @@ -1,4 +1,5 @@ import React, { useEffect } from 'react'; +import { FormattedMessage } from 'react-intl'; import { Stack } from 'soapbox/components/ui'; import PlaceholderGroupSearch from 'soapbox/features/placeholder/components/placeholder-group-search'; @@ -6,7 +7,7 @@ import { useDebounce, useOwnAccount } from 'soapbox/hooks'; import { useGroupSearch } from 'soapbox/queries/groups/search'; import { saveGroupSearch } from 'soapbox/utils/groups'; -import NoResultsBlankslate from './no-results-blankslate'; +import Blankslate from './blankslate'; import RecentSearches from './recent-searches'; import Results from './results'; @@ -25,7 +26,7 @@ export default (props: Props) => { const debouncedValueToSave = debounce(searchValue as string, 1000); const groupSearchResult = useGroupSearch(debouncedValue); - const { groups, isFetching, isFetched } = groupSearchResult; + const { groups, isFetching, isFetched, isError } = groupSearchResult; const hasSearchResults = isFetched && groups.length > 0; const hasNoSearchResults = isFetched && groups.length === 0; @@ -46,8 +47,42 @@ export default (props: Props) => { ); } + if (isError) { + return ( + + } + subtitle={ + + } + /> + ); + } + if (hasNoSearchResults) { - return ; + return ( + + } + subtitle={ + + } + /> + ); } if (hasSearchResults) { diff --git a/app/soapbox/features/groups/components/discover/suggested-groups.tsx b/app/soapbox/features/groups/components/discover/suggested-groups.tsx index bf441a0ae..5c70b6b16 100644 --- a/app/soapbox/features/groups/components/discover/suggested-groups.tsx +++ b/app/soapbox/features/groups/components/discover/suggested-groups.tsx @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import { FormattedMessage } from 'react-intl'; import { Carousel, Stack, Text } from 'soapbox/components/ui'; import PlaceholderGroupDiscover from 'soapbox/features/placeholder/components/placeholder-group-discover'; @@ -7,46 +8,59 @@ import { useSuggestedGroups } from 'soapbox/queries/groups'; import Group from './group'; const SuggestedGroups = () => { - const { groups, isFetching } = useSuggestedGroups(); + const { groups, isFetching, isFetched, isError } = useSuggestedGroups(); + const isEmpty = (isFetched && groups.length === 0) || isError; const [groupCover, setGroupCover] = useState(null); return ( - Suggested For You + - - {({ width }: { width: number }) => ( - <> - {isFetching ? ( - new Array(20).fill(0).map((_, idx) => ( -
- -
- )) - ) : ( - groups.map((group) => ( - - )) - )} - - )} -
+ {isEmpty ? ( + + + + ) : ( + + {({ width }: { width: number }) => ( + <> + {isFetching ? ( + new Array(20).fill(0).map((_, idx) => ( +
+ +
+ )) + ) : ( + groups.map((group) => ( + + )) + )} + + )} +
+ )}
); }; diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json index 782234a37..a6e6a4ba0 100644 --- a/app/soapbox/locales/en.json +++ b/app/soapbox/locales/en.json @@ -803,6 +803,8 @@ "group.user_subheading": "Users", "groups.discover.search.no_results.subtitle": "Try searching for another group.", "groups.discover.search.no_results.title": "No matches found", + "groups.discover.search.error.subtitle": "Please try again later.", + "groups.discover.search.error.title": "An error occurred", "groups.discover.search.placeholder": "Search", "groups.discover.search.recent_searches.blankslate.subtitle": "Search group names, topics or keywords", "groups.discover.search.recent_searches.blankslate.title": "No recent searches", @@ -810,6 +812,10 @@ "groups.discover.search.recent_searches.title": "Recent searches", "groups.discover.search.results.groups": "Groups", "groups.discover.search.results.member_count": "{members, plural, one {member} other {members}}", + "groups.discover.popular.title": "Popular Groups", + "groups.discover.popular.empty": "Unable to fetch popular groups at this time. Please check back later.", + "groups.discover.suggested.title": "Suggested For You", + "groups.discover.suggested.empty": "Unable to fetch suggested groups at this time. Please check back later.", "groups.empty.subtitle": "Start discovering groups to join or create your own.", "groups.empty.title": "No Groups yet", "hashtag.column_header.tag_mode.all": "and {additional}",