diff --git a/web/navigation-sidebar/community-list.css b/web/navigation-sidebar/community-list.css new file mode 100644 index 000000000..fc22775b1 --- /dev/null +++ b/web/navigation-sidebar/community-list.css @@ -0,0 +1,8 @@ +.container { + display: flex; + flex-direction: column; + row-gap: 18px; + padding: 16px 12px; + overflow-y: scroll; + flex: 1; +} diff --git a/web/navigation-sidebar/community-list.react.js b/web/navigation-sidebar/community-list.react.js new file mode 100644 index 000000000..e3582b182 --- /dev/null +++ b/web/navigation-sidebar/community-list.react.js @@ -0,0 +1,29 @@ +// @flow + +import * as React from 'react'; + +import { communityThreadSelector } from 'lib/selectors/thread-selectors.js'; +import { useAppendCommunitySuffix } from 'lib/utils/drawer-utils.react.js'; +import { useResolvedThreadInfos } from 'lib/utils/entity-helpers.js'; + +import CommunityListItem from './community-list-item.react.js'; +import css from './community-list.css'; +import { useSelector } from '../redux/redux-utils.js'; + +function CommunityList(): React.Node { + const communities = useSelector(communityThreadSelector); + const resolvedCommunities = useResolvedThreadInfos(communities); + const communitiesSuffixed = useAppendCommunitySuffix(resolvedCommunities); + + const communityList = React.useMemo( + () => + communitiesSuffixed.map(community => ( + + )), + [communitiesSuffixed], + ); + + return
{communityList}
; +} + +export default CommunityList;