From f8c3dde2d853dbf0df64353a46cfe4daf86be071 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 8 Apr 2021 12:30:23 -0700 Subject: Added new button and resytles existing buttons --- src/components/common/BasicButton.tsx | 77 +++++++++++++++++++++++++++++++++ src/components/common/FriendsButton.tsx | 4 +- src/components/common/index.ts | 1 + src/components/profile/ProfileBody.tsx | 64 +++++++++++++++++++++------ src/components/profile/ToggleButton.tsx | 12 ++--- 5 files changed, 138 insertions(+), 20 deletions(-) create mode 100644 src/components/common/BasicButton.tsx diff --git a/src/components/common/BasicButton.tsx b/src/components/common/BasicButton.tsx new file mode 100644 index 00000000..0822c66e --- /dev/null +++ b/src/components/common/BasicButton.tsx @@ -0,0 +1,77 @@ +import React from 'react'; +import {StyleProp, StyleSheet, Text, View, ViewStyle} from 'react-native'; +import {TAGG_LIGHT_BLUE} from '../../constants'; +import {TouchableOpacity} from 'react-native-gesture-handler'; +import {normalize} from '../../utils'; + +interface BasicButtonProps { + title: string; + onPress: () => void; + solid?: boolean; + externalStyles?: Record>; +} +const BasicButton: React.FC = ({ + title, + onPress, + solid, + externalStyles, +}) => { + return ( + + + + {title} + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + height: '100%', + flexDirection: 'column', + justifyContent: 'space-around', + }, + genericButtonStyle: { + justifyContent: 'center', + alignItems: 'center', + borderRadius: 2, + padding: 0, + width: '100%', + height: '100%', + }, + solidButton: { + padding: 0, + backgroundColor: TAGG_LIGHT_BLUE, + }, + outlineButton: { + borderWidth: 1, + backgroundColor: 'white', + borderColor: TAGG_LIGHT_BLUE, + }, + solidButtonTitleColor: { + color: 'white', + }, + outlineButtonTitleColor: { + color: TAGG_LIGHT_BLUE, + }, + buttonTitle: { + fontSize: normalize(15), + fontWeight: '700', + letterSpacing: 1, + }, +}); + +export default BasicButton; diff --git a/src/components/common/FriendsButton.tsx b/src/components/common/FriendsButton.tsx index 46421bd1..1bb39e57 100644 --- a/src/components/common/FriendsButton.tsx +++ b/src/components/common/FriendsButton.tsx @@ -100,11 +100,11 @@ const styles = StyleSheet.create({ button: { justifyContent: 'center', alignItems: 'center', - width: SCREEN_WIDTH * 0.4, + width: SCREEN_WIDTH * 0.42, aspectRatio: 154 / 33, borderWidth: 2, borderColor: TAGG_LIGHT_BLUE, - borderRadius: 3, + borderRadius: 2, marginRight: '2%', marginLeft: '1%', }, diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 8499dbfa..b5fd0542 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -23,3 +23,4 @@ export {default as AcceptDeclineButtons} from './AcceptDeclineButtons'; export {default as FriendsButton} from './FriendsButton'; export {default as TaggSquareButton} from './TaggSquareButton'; export {default as GradientBorderButton} from './GradientBorderButton'; +export {default as BasicButton} from './BasicButton'; diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx index b49e71a3..3785cb16 100644 --- a/src/components/profile/ProfileBody.tsx +++ b/src/components/profile/ProfileBody.tsx @@ -9,11 +9,16 @@ import { updateUserXFriends, updateUserXProfileAllScreens, } from '../../store/actions'; +import {canViewProfile} from '../../utils/users'; import {NO_PROFILE} from '../../store/initialStates'; import {RootState} from '../../store/rootReducer'; import {ScreenType} from '../../types'; -import {getUserAsProfilePreviewType} from '../../utils'; -import {FriendsButton} from '../common'; +import { + getUserAsProfilePreviewType, + SCREEN_HEIGHT, + SCREEN_WIDTH, +} from '../../utils'; +import {FriendsButton, BasicButton} from '../common'; import ToggleButton from './ToggleButton'; interface ProfileBodyProps { @@ -60,6 +65,19 @@ const ProfileBody: React.FC = ({ dispatch(updateUserXProfileAllScreens(id, state)); }; + const canMessage = () => { + if ( + userXId && + !isBlocked && + (friendship_status === 'no_record' || friendship_status === 'friends') && + canViewProfile(state, userXId, screenType) + ) { + return true; + } else { + return false; + } + }; + return ( {`@${username}`} @@ -85,17 +103,33 @@ const ProfileBody: React.FC = ({ /> )} - {userXId && !isBlocked && ( - - - - )} + + {userXId && !isBlocked && ( + + + {canMessage() && ( + { + console.log('Navigate to the individual chat screen'); + }} + externalStyles={{ + container: { + width: SCREEN_WIDTH * 0.42, + aspectRatio: 154 / 33, + }, + }} + /> + )} + + )} + ); }; @@ -107,11 +141,15 @@ const styles = StyleSheet.create({ paddingTop: '3.5%', paddingBottom: '2%', }, + simpleRowContainer: {flexDirection: 'row'}, buttonsContainer: { flex: 1, paddingTop: '3.5%', paddingBottom: '2%', width: '50%', + height: SCREEN_HEIGHT * 0.1, + flexDirection: 'row', + justifyContent: 'space-between', }, container: { paddingVertical: '1%', diff --git a/src/components/profile/ToggleButton.tsx b/src/components/profile/ToggleButton.tsx index 236d811c..ad05c1c4 100644 --- a/src/components/profile/ToggleButton.tsx +++ b/src/components/profile/ToggleButton.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import {StyleSheet, Text} from 'react-native'; import {TouchableOpacity} from 'react-native-gesture-handler'; import {TAGG_LIGHT_BLUE} from '../../constants'; -import {getToggleButtonText, SCREEN_WIDTH} from '../../utils'; +import {getToggleButtonText, normalize, SCREEN_WIDTH} from '../../utils'; type ToggleButtonProps = { toggleState: boolean; @@ -34,15 +34,17 @@ const styles = StyleSheet.create({ button: { justifyContent: 'center', alignItems: 'center', - width: SCREEN_WIDTH * 0.4, + width: SCREEN_WIDTH * 0.42, height: SCREEN_WIDTH * 0.08, borderColor: TAGG_LIGHT_BLUE, - borderWidth: 3, - borderRadius: 5, + borderWidth: 1, + borderRadius: 2, marginRight: '2%', }, text: { - fontWeight: 'bold', + fontWeight: '700', + fontSize: normalize(15), + letterSpacing: 1, }, buttonColor: { backgroundColor: TAGG_LIGHT_BLUE, -- cgit v1.2.3-70-g09d2 From dd3222c55d12bd6150de5438d2662187196686de Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 8 Apr 2021 12:32:54 -0700 Subject: better --- src/components/profile/ProfileBody.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx index 3785cb16..9b19b866 100644 --- a/src/components/profile/ProfileBody.tsx +++ b/src/components/profile/ProfileBody.tsx @@ -78,6 +78,11 @@ const ProfileBody: React.FC = ({ } }; + const onPressMessage = () => { + // TODO: Add navigation to ChatScreen + console.log('Navigate to the individual chat screen'); + }; + return ( {`@${username}`} @@ -116,9 +121,7 @@ const ProfileBody: React.FC = ({ {canMessage() && ( { - console.log('Navigate to the individual chat screen'); - }} + onPress={onPressMessage} externalStyles={{ container: { width: SCREEN_WIDTH * 0.42, -- cgit v1.2.3-70-g09d2 From e70a8472259929cb28dadb40b57c593b68ab1983 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 8 Apr 2021 12:59:02 -0700 Subject: radius and border width changed --- src/components/common/AcceptDeclineButtons.tsx | 2 +- src/components/common/BasicButton.tsx | 4 ++-- src/components/common/FriendsButton.tsx | 2 +- src/components/profile/Friends.tsx | 4 ++-- src/components/profile/ToggleButton.tsx | 4 ++-- 5 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/common/AcceptDeclineButtons.tsx b/src/components/common/AcceptDeclineButtons.tsx index 167148f0..7bb62fd4 100644 --- a/src/components/common/AcceptDeclineButtons.tsx +++ b/src/components/common/AcceptDeclineButtons.tsx @@ -58,7 +58,7 @@ const styles = StyleSheet.create({ backgroundColor: TAGG_LIGHT_BLUE, }, rejectButton: { - borderWidth: 1, + borderWidth: 2, backgroundColor: 'white', borderColor: TAGG_LIGHT_BLUE, }, diff --git a/src/components/common/BasicButton.tsx b/src/components/common/BasicButton.tsx index 0822c66e..1fe29cd9 100644 --- a/src/components/common/BasicButton.tsx +++ b/src/components/common/BasicButton.tsx @@ -47,7 +47,7 @@ const styles = StyleSheet.create({ genericButtonStyle: { justifyContent: 'center', alignItems: 'center', - borderRadius: 2, + borderRadius: 3, padding: 0, width: '100%', height: '100%', @@ -57,7 +57,7 @@ const styles = StyleSheet.create({ backgroundColor: TAGG_LIGHT_BLUE, }, outlineButton: { - borderWidth: 1, + borderWidth: 2, backgroundColor: 'white', borderColor: TAGG_LIGHT_BLUE, }, diff --git a/src/components/common/FriendsButton.tsx b/src/components/common/FriendsButton.tsx index 1bb39e57..6ddad93f 100644 --- a/src/components/common/FriendsButton.tsx +++ b/src/components/common/FriendsButton.tsx @@ -104,7 +104,7 @@ const styles = StyleSheet.create({ aspectRatio: 154 / 33, borderWidth: 2, borderColor: TAGG_LIGHT_BLUE, - borderRadius: 2, + borderRadius: 3, marginRight: '2%', marginLeft: '1%', }, diff --git a/src/components/profile/Friends.tsx b/src/components/profile/Friends.tsx index c1dca755..b754b71a 100644 --- a/src/components/profile/Friends.tsx +++ b/src/components/profile/Friends.tsx @@ -191,7 +191,7 @@ const styles = StyleSheet.create({ height: '55%', borderColor: TAGG_LIGHT_BLUE, borderWidth: 2, - borderRadius: 2, + borderRadius: 3, padding: 0, backgroundColor: TAGG_LIGHT_BLUE, }, @@ -212,7 +212,7 @@ const styles = StyleSheet.create({ height: '55%', borderColor: TAGG_LIGHT_BLUE, borderWidth: 2, - borderRadius: 2, + borderRadius: 3, padding: 0, }, unfriendButtonTitle: { diff --git a/src/components/profile/ToggleButton.tsx b/src/components/profile/ToggleButton.tsx index ad05c1c4..4697d744 100644 --- a/src/components/profile/ToggleButton.tsx +++ b/src/components/profile/ToggleButton.tsx @@ -37,8 +37,8 @@ const styles = StyleSheet.create({ width: SCREEN_WIDTH * 0.42, height: SCREEN_WIDTH * 0.08, borderColor: TAGG_LIGHT_BLUE, - borderWidth: 1, - borderRadius: 2, + borderWidth: 2, + borderRadius: 3, marginRight: '2%', }, text: { -- cgit v1.2.3-70-g09d2 From 96ce07324b8b6fae3ced4da14d96a5ec5ca4ad6d Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 8 Apr 2021 13:18:56 -0700 Subject: To test nav [wip after merging utils for chat] --- src/components/profile/ProfileBody.tsx | 33 ++++++++++++++++++++++++++++----- 1 file changed, 28 insertions(+), 5 deletions(-) diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx index 9b19b866..1a8d1e1a 100644 --- a/src/components/profile/ProfileBody.tsx +++ b/src/components/profile/ProfileBody.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useContext} from 'react'; import {LayoutChangeEvent, Linking, StyleSheet, Text, View} from 'react-native'; import {normalize} from 'react-native-elements'; import {useDispatch, useSelector, useStore} from 'react-redux'; @@ -20,6 +20,9 @@ import { } from '../../utils'; import {FriendsButton, BasicButton} from '../common'; import ToggleButton from './ToggleButton'; +// import {ChatContext} from '../../App'; +// import {useNavigation} from '@react-navigation/core'; +// import AsyncStorage from '@react-native-community/async-storage'; interface ProfileBodyProps { onLayout: (event: LayoutChangeEvent) => void; @@ -53,6 +56,9 @@ const ProfileBody: React.FC = ({ const state: RootState = useStore().getState(); const dispatch = useDispatch(); + // const navigation = useNavigation(); + // const {chatClient, setChannel} = useContext(ChatContext); + const loggedInUserId = state.user.user.userId; const handleAcceptRequest = async () => { await dispatch(acceptFriendRequest({id, username, first_name, last_name})); @@ -69,7 +75,10 @@ const ProfileBody: React.FC = ({ if ( userXId && !isBlocked && - (friendship_status === 'no_record' || friendship_status === 'friends') && + (friendship_status === 'no_record' || + friendship_status === 'friends' || + (friendship_status === 'requested' && + friendship_requester_id === loggedInUserId)) && canViewProfile(state, userXId, screenType) ) { return true; @@ -78,9 +87,23 @@ const ProfileBody: React.FC = ({ } }; - const onPressMessage = () => { - // TODO: Add navigation to ChatScreen - console.log('Navigate to the individual chat screen'); + const onPressMessage = async () => { + // TODO: Use function from util to create the channel and then navigate to screen + // const channelName = username + ' and ' + state.user.user.username; + // const chatToken = await AsyncStorage.getItem('chatToken'); + // await chatClient.connectUser( + // { + // id: loggedInUserId, + // }, + // chatToken, + // ); + // const channel = chatClient.channel('messaging', { + // name: channelName, + // members: [loggedInUserId, String(userXId)], + // }); + // channel.create(); + // navigation.navigate('Chat'); + console.log('Navigate to ChatScreen'); }; return ( -- cgit v1.2.3-70-g09d2