diff --git a/native/navigation/community-drawer-content.react.js b/native/navigation/community-drawer-content.react.js index 568ff30f5..843c7ece8 100644 --- a/native/navigation/community-drawer-content.react.js +++ b/native/navigation/community-drawer-content.react.js @@ -1,199 +1,195 @@ // @flow import { useDrawerStatus } from '@react-navigation/drawer'; import { useNavigation } from '@react-navigation/native'; import * as React from 'react'; import { FlatList, Platform, View, Text, TouchableOpacity } from 'react-native'; import { SafeAreaView } from 'react-native-safe-area-context'; import { useSelector } from 'react-redux'; import { fetchPrimaryInviteLinkActionTypes, fetchPrimaryInviteLinks, } from 'lib/actions/link-actions.js'; import { childThreadInfos, communityThreadSelector, } from 'lib/selectors/thread-selectors.js'; import { useDispatchActionPromise, useServerCall, } from 'lib/utils/action-utils.js'; import { createRecursiveDrawerItemsData, appendSuffix, } from 'lib/utils/drawer-utils.react.js'; import { useResolvedThreadInfos } from 'lib/utils/entity-helpers.js'; import CommunityDrawerItemCommunity from './community-drawer-item-community.react.js'; import { CommunityCreationRouteName } from './route-names.js'; import { useNavigateToThread } from '../chat/message-list-types.js'; import SWMansionIcon from '../components/swmansion-icon.react.js'; import { useStyles } from '../themes/colors.js'; const maxDepth = 2; const safeAreaEdges = Platform.select({ ios: ['top'], default: ['top', 'bottom'], }); function CommunityDrawerContent(): React.Node { const communities = useSelector(communityThreadSelector); const resolvedCommunities = useResolvedThreadInfos(communities); const communitiesSuffixed = React.useMemo( () => appendSuffix(resolvedCommunities), [resolvedCommunities], ); const styles = useStyles(unboundStyles); const callFetchPrimaryLinks = useServerCall(fetchPrimaryInviteLinks); const dispatchActionPromise = useDispatchActionPromise(); const drawerStatus = useDrawerStatus(); React.useEffect(() => { (async () => { if (drawerStatus !== 'open') { return; } await dispatchActionPromise( fetchPrimaryInviteLinkActionTypes, callFetchPrimaryLinks(), ); })(); }, [callFetchPrimaryLinks, dispatchActionPromise, drawerStatus]); const [openCommunity, setOpenCommunity] = React.useState( communitiesSuffixed.length === 1 ? communitiesSuffixed[0].id : null, ); const navigateToThread = useNavigateToThread(); const childThreadInfosMap = useSelector(childThreadInfos); const setOpenCommunityOrClose = React.useCallback((index: string) => { setOpenCommunity(open => (open === index ? null : index)); }, []); const renderItem = React.useCallback( ({ item }) => ( ), [navigateToThread, openCommunity, setOpenCommunityOrClose], ); const labelStylesObj = useStyles(labelUnboundStyles); const labelStyles = React.useMemo( () => [ labelStylesObj.level0Label, labelStylesObj.level1Label, labelStylesObj.level2Label, ], [labelStylesObj], ); const drawerItemsData = React.useMemo( () => createRecursiveDrawerItemsData( childThreadInfosMap, communitiesSuffixed, labelStyles, maxDepth, ), [childThreadInfosMap, communitiesSuffixed, labelStyles], ); const { navigate } = useNavigation(); const onPressCommunityCreation = React.useCallback(() => { navigate(CommunityCreationRouteName); }, [navigate]); - const isCommunityCreationButtonEnabled = false; - let communityCreationButton; - if (isCommunityCreationButtonEnabled) { - communityCreationButton = ( - - - - - - Create community + const communityCreationButton = ( + + + + - - ); - } + Create community + + + ); return ( {communityCreationButton} ); } const unboundStyles = { drawerContent: { flex: 1, paddingRight: 8, paddingTop: 8, paddingBottom: 8, }, communityCreationContainer: { flexDirection: 'row', padding: 24, alignItems: 'center', borderTopWidth: 1, borderColor: 'panelSeparator', }, communityCreationText: { color: 'panelForegroundLabel', fontSize: 16, lineHeight: 24, fontWeight: '500', }, communityCreationIconContainer: { height: 28, width: 28, justifyContent: 'center', alignItems: 'center', borderRadius: 16, marginRight: 12, backgroundColor: 'panelSecondaryForeground', }, communityCreationIcon: { color: 'panelForegroundLabel', }, }; const labelUnboundStyles = { level0Label: { color: 'drawerItemLabelLevel0', fontSize: 16, lineHeight: 24, fontWeight: '500', }, level1Label: { color: 'drawerItemLabelLevel1', fontSize: 14, lineHeight: 22, fontWeight: '500', }, level2Label: { color: 'drawerItemLabelLevel2', fontSize: 14, lineHeight: 22, fontWeight: '400', }, }; const MemoizedCommunityDrawerContent: React.ComponentType<{}> = React.memo( CommunityDrawerContent, ); export default MemoizedCommunityDrawerContent; diff --git a/web/sidebar/community-picker.react.js b/web/sidebar/community-picker.react.js index fe0b886dc..70f5d3ced 100644 --- a/web/sidebar/community-picker.react.js +++ b/web/sidebar/community-picker.react.js @@ -1,131 +1,127 @@ // @flow import classNames from 'classnames'; import * as React from 'react'; import { useDispatch } from 'react-redux'; import { clearCalendarCommunityFilter, clearChatCommunityFilter, } from 'lib/actions/community-actions.js'; import { useModalContext } from 'lib/components/modal-provider.react.js'; import SWMansionIcon from 'lib/components/SWMansionIcon.react.js'; import { unreadCount } from 'lib/selectors/thread-selectors.js'; import CommunityCreationModal from './community-creation/community-creation-modal.react.js'; import CommunityDrawer from './community-drawer.react.js'; import css from './community-picker.css'; import { updateNavInfoActionType } from '../redux/action-types.js'; import { useSelector } from '../redux/redux-utils.js'; function CommunityPicker(): React.Node { const dispatch = useDispatch(); const modalContext = useModalContext(); const openAccountSettings = React.useCallback( (event: SyntheticEvent) => { event.preventDefault(); dispatch({ type: updateNavInfoActionType, payload: { tab: 'settings', settingsSection: 'account' }, }); }, [dispatch], ); const isCalendarOpen = useSelector(state => state.navInfo.tab === 'calendar'); const onPressInbox = React.useCallback( (event: SyntheticEvent) => { event.preventDefault(); if (isCalendarOpen) { dispatch({ type: clearCalendarCommunityFilter, }); } else { dispatch({ type: updateNavInfoActionType, payload: { tab: 'chat' }, }); dispatch({ type: clearChatCommunityFilter, }); } }, [dispatch, isCalendarOpen], ); const inboxButtonTitle = isCalendarOpen ? 'All communities' : 'Inbox'; const isInboxOpen = useSelector( state => state.navInfo.tab === 'chat' || state.navInfo.tab === 'calendar', ); const isSettingsOpen = useSelector(state => state.navInfo.tab === 'settings'); const sideLineInbox = classNames({ [css.sideLine]: true, [css.sideLineActive]: isInboxOpen, }); const sideLineSettings = classNames({ [css.sideLine]: true, [css.sideLineActive]: isSettingsOpen, }); const onPressCommunityCreationButton = React.useCallback(() => { modalContext.pushModal(); }, [modalContext]); - const isCommunityCreationButtonEnabled = false; - let communityCreationButton; - if (isCommunityCreationButtonEnabled) { - communityCreationButton = ( - -
-
- -
-
Create community
-
- ); - } + const communityCreationButton = ( + +
+
+ +
+
Create community
+
+ ); const boundUnreadCount = useSelector(unreadCount); let chatBadge = null; if (boundUnreadCount > 0 && !isCalendarOpen) { if (boundUnreadCount < 100) { chatBadge = {boundUnreadCount}; } else { const classes = classNames(css.chatBadge, css.chatBadgePlus); chatBadge = 99+; } } return (
{inboxButtonTitle}
{communityCreationButton}
); } export default CommunityPicker;