aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/common/AcceptDeclineButtons.tsx2
-rw-r--r--src/components/common/BasicButton.tsx77
-rw-r--r--src/components/common/FriendsButton.tsx2
-rw-r--r--src/components/common/index.ts1
-rw-r--r--src/components/profile/Content.tsx11
-rw-r--r--src/components/profile/Friends.tsx4
-rw-r--r--src/components/profile/ProfileBody.tsx103
-rw-r--r--src/components/profile/ToggleButton.tsx12
8 files changed, 186 insertions, 26 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
new file mode 100644
index 00000000..1fe29cd9
--- /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<string, StyleProp<ViewStyle>>;
+}
+const BasicButton: React.FC<BasicButtonProps> = ({
+ title,
+ onPress,
+ solid,
+ externalStyles,
+}) => {
+ return (
+ <View style={[styles.container, externalStyles?.container]}>
+ <TouchableOpacity
+ style={[
+ styles.genericButtonStyle,
+ solid ? styles.solidButton : styles.outlineButton,
+ ]}
+ onPress={onPress}>
+ <Text
+ style={[
+ styles.buttonTitle,
+ solid
+ ? styles.solidButtonTitleColor
+ : styles.outlineButtonTitleColor,
+ ]}>
+ {title}
+ </Text>
+ </TouchableOpacity>
+ </View>
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ height: '100%',
+ flexDirection: 'column',
+ justifyContent: 'space-around',
+ },
+ genericButtonStyle: {
+ justifyContent: 'center',
+ alignItems: 'center',
+ borderRadius: 3,
+ padding: 0,
+ width: '100%',
+ height: '100%',
+ },
+ solidButton: {
+ padding: 0,
+ backgroundColor: TAGG_LIGHT_BLUE,
+ },
+ outlineButton: {
+ borderWidth: 2,
+ 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..6ddad93f 100644
--- a/src/components/common/FriendsButton.tsx
+++ b/src/components/common/FriendsButton.tsx
@@ -100,7 +100,7 @@ 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,
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/Content.tsx b/src/components/profile/Content.tsx
index 05098d14..0052b61d 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -1,4 +1,10 @@
-import React, {useCallback, useEffect, useRef, useState} from 'react';
+import React, {
+ useCallback,
+ useContext,
+ useEffect,
+ useRef,
+ useState,
+} from 'react';
import {LayoutChangeEvent, RefreshControl, StyleSheet} from 'react-native';
import Animated, {
useSharedValue,
@@ -31,6 +37,7 @@ import ProfileCutout from './ProfileCutout';
import ProfileHeader from './ProfileHeader';
import PublicProfile from './PublicProfile';
import {useScrollToTop} from '@react-navigation/native';
+import {ChatContext} from '../../App';
interface ContentProps {
userXId: string | undefined;
@@ -52,6 +59,8 @@ const Content: React.FC<ContentProps> = ({userXId, screenType}) => {
);
const state: RootState = useStore().getState();
+ const {chatClient} = useContext(ChatContext);
+
/*
* Used to imperatively scroll to the top when presenting the moment tutorial.
*/
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/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx
index b49e71a3..eebdb167 100644
--- a/src/components/profile/ProfileBody.tsx
+++ b/src/components/profile/ProfileBody.tsx
@@ -1,5 +1,12 @@
-import React from 'react';
-import {LayoutChangeEvent, Linking, StyleSheet, Text, View} from 'react-native';
+import React, {useContext} from 'react';
+import {
+ Alert,
+ LayoutChangeEvent,
+ Linking,
+ StyleSheet,
+ Text,
+ View,
+} from 'react-native';
import {normalize} from 'react-native-elements';
import {useDispatch, useSelector, useStore} from 'react-redux';
import {TAGG_DARK_BLUE, TOGGLE_BUTTON_TYPE} from '../../constants';
@@ -9,12 +16,20 @@ 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 {
+ connectChatAccount,
+ getUserAsProfilePreviewType,
+ SCREEN_HEIGHT,
+ SCREEN_WIDTH,
+} from '../../utils';
+import {FriendsButton, BasicButton} from '../common';
import ToggleButton from './ToggleButton';
+import {ChatContext} from '../../App';
+import {useNavigation} from '@react-navigation/core';
interface ProfileBodyProps {
onLayout: (event: LayoutChangeEvent) => void;
@@ -30,6 +45,9 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
userXId,
screenType,
}) => {
+ const dispatch = useDispatch();
+ const navigation = useNavigation();
+
const {profile = NO_PROFILE, user} = useSelector((state: RootState) =>
userXId ? state.userX[screenType][userXId] : state.user,
);
@@ -46,8 +64,10 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
profile,
);
+ const {chatClient, setChannel} = useContext(ChatContext);
+
const state: RootState = useStore().getState();
- const dispatch = useDispatch();
+ const loggedInUserId = state.user.user.userId;
const handleAcceptRequest = async () => {
await dispatch(acceptFriendRequest({id, username, first_name, last_name}));
@@ -60,6 +80,39 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
dispatch(updateUserXProfileAllScreens(id, state));
};
+ const canMessage = () => {
+ if (
+ userXId &&
+ !isBlocked &&
+ (friendship_status === 'no_record' ||
+ friendship_status === 'friends' ||
+ (friendship_status === 'requested' &&
+ friendship_requester_id === loggedInUserId)) &&
+ canViewProfile(state, userXId, screenType)
+ ) {
+ return true;
+ } else {
+ return false;
+ }
+ };
+
+ const onPressMessage = async () => {
+ let connected: boolean = !chatClient.user;
+ if (!connected) {
+ connected = await connectChatAccount(loggedInUserId, chatClient);
+ if (!connected) {
+ Alert.alert('Unable to connect chat');
+ }
+ } else {
+ const channel = chatClient.channel('messaging', {
+ members: [loggedInUserId, String(userXId)],
+ });
+ channel.create();
+ setChannel(channel);
+ navigation.navigate('Chat');
+ }
+ };
+
return (
<View onLayout={onLayout} style={styles.container}>
<Text style={styles.username}>{`@${username}`}</Text>
@@ -85,17 +138,31 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
/>
</View>
)}
- {userXId && !isBlocked && (
- <View style={styles.buttonsContainer}>
- <FriendsButton
- userXId={userXId}
- screenType={screenType}
- friendship_requester_id={friendship_requester_id}
- onAcceptRequest={handleAcceptRequest}
- onRejectRequest={handleDeclineFriendRequest}
- />
- </View>
- )}
+ <View style={styles.simpleRowContainer}>
+ {userXId && !isBlocked && (
+ <View style={styles.buttonsContainer}>
+ <FriendsButton
+ userXId={userXId}
+ screenType={screenType}
+ friendship_requester_id={friendship_requester_id}
+ onAcceptRequest={handleAcceptRequest}
+ onRejectRequest={handleDeclineFriendRequest}
+ />
+ {canMessage() && (
+ <BasicButton
+ title={'Message'}
+ onPress={onPressMessage}
+ externalStyles={{
+ container: {
+ width: SCREEN_WIDTH * 0.42,
+ aspectRatio: 154 / 33,
+ },
+ }}
+ />
+ )}
+ </View>
+ )}
+ </View>
</View>
);
};
@@ -107,11 +174,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..4697d744 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: 2,
+ borderRadius: 3,
marginRight: '2%',
},
text: {
- fontWeight: 'bold',
+ fontWeight: '700',
+ fontSize: normalize(15),
+ letterSpacing: 1,
},
buttonColor: {
backgroundColor: TAGG_LIGHT_BLUE,
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-12-06 19:37:16 +0000