From 6e5514928168a37646f86d0dbc00f47d0271452f Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Mon, 12 Dec 2022 09:56:19 -0600 Subject: [PATCH 1/2] Fix duplicate 'end of feed' issue --- src/view/screens/Profile.tsx | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx index 1a52ded844..2425579aa8 100644 --- a/src/view/screens/Profile.tsx +++ b/src/view/screens/Profile.tsx @@ -100,13 +100,15 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => { let items: any[] = [] if (uiState) { if (uiState.isInitialLoading) { - items.push(LOADING_ITEM) + items = items.concat([LOADING_ITEM]) renderItem = () => } else if (uiState.currentView.hasError) { - items.push({ - _reactKey: '__error__', - error: uiState.currentView.error, - }) + items = items.concat([ + { + _reactKey: '__error__', + error: uiState.currentView.error, + }, + ]) renderItem = (item: any) => ( { items = uiState.feed.feed.slice() } if (!uiState.feed.hasMore) { - items.push(END_ITEM) + items = items.concat([END_ITEM]) } renderItem = (item: any) => { if (item === END_ITEM) { @@ -138,7 +140,7 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => { return } } else if (uiState.feed.isEmpty) { - items.push(EMPTY_ITEM) + items = items.concat([EMPTY_ITEM]) if (uiState.profile.isScene) { renderItem = () => ( { ) } } else if (uiState.memberships.isEmpty) { - items.push(EMPTY_ITEM) + items = items.concat([EMPTY_ITEM]) renderItem = () => ( { ) } } else if (uiState.members.isEmpty) { - items.push(EMPTY_ITEM) + items = items.concat([EMPTY_ITEM]) renderItem = () => ( { ) } } else { - items.push(EMPTY_ITEM) + items = items.concat([EMPTY_ITEM]) renderItem = () => TODO } } From 68dd96128a0f8326ff1efd5ba10c6b8ada76b31b Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Mon, 12 Dec 2022 10:48:36 -0600 Subject: [PATCH 2/2] More aesthetic and perf improvements to the menu drawer --- src/view/shell/mobile/Menu.tsx | 118 +++++++++++++++++++------------- src/view/shell/mobile/index.tsx | 15 ++-- 2 files changed, 79 insertions(+), 54 deletions(-) diff --git a/src/view/shell/mobile/Menu.tsx b/src/view/shell/mobile/Menu.tsx index 173f9563c3..793b052768 100644 --- a/src/view/shell/mobile/Menu.tsx +++ b/src/view/shell/mobile/Menu.tsx @@ -32,7 +32,8 @@ export const Menu = ({ useEffect(() => { if (visible) { // trigger a refresh in case memberships have changed recently - store.me.refreshMemberships() + // TODO this impacts performance, need to find the right time to do this + // store.me.refreshMemberships() } }, [store, visible]) @@ -97,34 +98,37 @@ export const Menu = ({ return ( + onNavigate(`/profile/${store.me.handle}`)} + style={styles.profileCard}> + + + + {store.me.displayName} + + {store.me.handle} + + onNavigate('/search')}> } - size={21} + size={25} /> Search - - } - label={store.me.displayName || store.me.handle} - bold - url={`/profile/${store.me.handle}`} - /> } - size="24" + style={{color: colors.gray6} as StyleProp} + size="26" /> } label="Home" @@ -133,45 +137,24 @@ export const Menu = ({ } - size="24" + style={{color: colors.gray6} as StyleProp} + size="28" /> } label="Notifications" url="/notifications" count={store.me.notificationCount} /> - } - size="24" - strokeWidth={2} - /> - } - label="Settings" - url="/settings" - /> Scenes - } - size="24" - /> - } - label="Create a scene" - onPress={onPressCreateScene} - /> {store.me.memberships ? store.me.memberships.memberships.map((membership, i) => ( + + } + size="30" + /> + } + label="Create a scene" + onPress={onPressCreateScene} + /> + } + size="30" + strokeWidth={2} + /> + } + label="Settings" + url="/settings" + /> + Build version {VersionNumber.appVersion} ({VersionNumber.buildVersion} @@ -212,6 +218,24 @@ const styles = StyleSheet.create({ paddingHorizontal: 4, }, + profileCard: { + flexDirection: 'row', + alignItems: 'center', + margin: 10, + marginBottom: 6, + }, + profileCardDisplayName: { + marginLeft: 12, + fontSize: 24, + fontWeight: 'bold', + color: colors.gray7, + }, + profileCardHandle: { + marginLeft: 12, + fontSize: 18, + color: colors.gray6, + }, + searchBtn: { flexDirection: 'row', backgroundColor: colors.gray1, @@ -223,7 +247,7 @@ const styles = StyleSheet.create({ }, searchBtnLabel: { marginLeft: 8, - fontSize: 18, + fontSize: 19, color: colors.gray6, }, @@ -231,17 +255,17 @@ const styles = StyleSheet.create({ flexDirection: 'row', alignItems: 'center', paddingVertical: 8, - paddingHorizontal: 2, + paddingHorizontal: 6, }, menuItemIconWrapper: { - width: 30, - height: 30, + width: 36, + height: 36, alignItems: 'center', justifyContent: 'center', - marginRight: 10, + marginRight: 12, }, menuItemLabel: { - fontSize: 17, + fontSize: 19, color: colors.gray7, }, menuItemLabelBold: { diff --git a/src/view/shell/mobile/index.tsx b/src/view/shell/mobile/index.tsx index 1506b52e61..ef980066c7 100644 --- a/src/view/shell/mobile/index.tsx +++ b/src/view/shell/mobile/index.tsx @@ -245,18 +245,19 @@ export const MobileShell: React.FC = observer(() => { ? {transform: [{translateX: swipeTranslateX}]} : undefined let menuTranslateX + const menuDrawerWidth = winDim.width - 100 if (isMenuActive) { // menu is active, interpret swipes as closes - menuTranslateX = Animated.multiply(swipeGestureInterp, winDim.width * -1) + menuTranslateX = Animated.multiply(swipeGestureInterp, menuDrawerWidth * -1) } else if (!store.nav.tab.canGoBack) { // at back of history, interpret swipes as opens menuTranslateX = Animated.subtract( - winDim.width * -1, - Animated.multiply(swipeGestureInterp, winDim.width), + menuDrawerWidth * -1, + Animated.multiply(swipeGestureInterp, menuDrawerWidth), ) } else { // not at back of history, leave off screen - menuTranslateX = winDim.width * -1 + menuTranslateX = menuDrawerWidth * -1 } const menuSwipeTransform = { transform: [{translateX: menuTranslateX}], @@ -369,7 +370,7 @@ export const MobileShell: React.FC = observer(() => { }, )} - {menuSwipingDirection !== 0 ? ( + {isMenuActive || menuSwipingDirection !== 0 ? ( ) : undefined} @@ -500,14 +501,14 @@ const styles = StyleSheet.create({ left: 0, right: 0, backgroundColor: '#000', - opacity: 0.5, + opacity: 0.6, }, menuDrawer: { position: 'absolute', top: 0, bottom: 0, left: 0, - right: 0, + right: 100, }, topBarProtector: { position: 'absolute',