Skip to content
This repository has been archived by the owner on Apr 2, 2024. It is now read-only.

Commit

Permalink
Delete dropy & Unblock user
Browse files Browse the repository at this point in the history
  • Loading branch information
celian-rib committed Aug 24, 2022
1 parent a0b4eab commit 9b46d99
Show file tree
Hide file tree
Showing 12 changed files with 402 additions and 25 deletions.
8 changes: 4 additions & 4 deletions src/components/ChatHeader.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const ChatHeader = ({ conversation, otherUserConnected }) => {
const { showActionSheetWithOptions } = useActionSheet();

const openProfile = () => {
navigation.navigate('Profile', { userId: conversation.user.userId });
navigation.navigate('Profile', { userId: conversation.user.id });
};

const handleOptionsButtonPress = () => {
Expand All @@ -27,9 +27,9 @@ const ChatHeader = ({ conversation, otherUserConnected }) => {
title: conversation?.user?.displayName,
}, (buttonIndex) => {
if (buttonIndex === 0) {
reportUser(conversation?.user?.userId, sendAlert);
reportUser(conversation?.user?.id, sendAlert);
} else if (buttonIndex === 1) {
blockUser(conversation?.user?.userId, sendAlert, navigation);
blockUser(conversation?.user?.id, sendAlert, navigation);
}
});
};
Expand All @@ -47,7 +47,7 @@ const ChatHeader = ({ conversation, otherUserConnected }) => {

<TouchableOpacity style={styles.userInfosContainer} onPress={openProfile}>
<ProfileAvatar
userId={conversation?.user?.userId}
userId={conversation?.user?.id}
displayName={conversation?.user?.displayName}
displayNameSize={10}
size={40}
Expand Down
4 changes: 2 additions & 2 deletions src/components/ConversationItem.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const ConversationItem = ({

const navigation = useNavigation();
const openProfile = () => {
navigation.navigate('Profile', { userId: user.userId, conversation });
navigation.navigate('Profile', { userId: user.id, conversation });
};

return (
Expand All @@ -29,7 +29,7 @@ const ConversationItem = ({
<ProfileAvatar
showStatusDot={true}
isUserOnline={isOnline}
userId={user?.userId}
userId={user?.id}
displayName={user?.displayName}
/>
</TouchableOpacity>
Expand Down
1 change: 1 addition & 0 deletions src/components/FormToggle.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export default forwardRef(FormSelect);

const styles = StyleSheet.create({
container: {
height: 50,
marginBottom: 10,
alignItems: 'center',
flexDirection: 'row',
Expand Down
30 changes: 24 additions & 6 deletions src/components/ProfileScreenHeader.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import ProfileImage from './ProfileImage';
import TouchableTooltip from './TouchableTooltip';

export const MAX_HEADER_HEIGHT = responsiveHeight(45);
export const MIN_HEADER_HEIGHT = responsiveHeight(25);
export const MIN_HEADER_HEIGHT = responsiveHeight(24);

const ProfileScreenHeader = ({ externalUserId, user, scrollAnimValue, showControls = false, conversation }) => {

Expand All @@ -46,6 +46,12 @@ const ProfileScreenHeader = ({ externalUserId, user, scrollAnimValue, showContro
extrapolate: 'clamp',
});

const dropsOpacity = scrollAnimValue.interpolate({
inputRange: [0, MIN_HEADER_HEIGHT / 4, MIN_HEADER_HEIGHT / 2],
outputRange: [1, 1, 0],
extrapolate: 'clamp',
});

const handleOptionsButtonPress = () => {
showActionSheetWithOptions({
options: ['Report user', 'Block user', 'Cancel'],
Expand Down Expand Up @@ -88,20 +94,31 @@ const ProfileScreenHeader = ({ externalUserId, user, scrollAnimValue, showContro
<Feather name="arrow-left" size={30} color={Colors.white} />
</TouchableOpacity>
{showControls ? (
<View>
<View style={{ alignItems: 'center' }}>
<TouchableOpacity
onPress={() => navigation.navigate('Settings')}
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
>
<Feather name="settings" size={25} color={Colors.white} />
<Feather name="settings" size={24} color={Colors.white} />
</TouchableOpacity>

<Animated.View style={{ opacity: editOpacity }}>
<TouchableOpacity
onPress={() => navigation.navigate('ProfileEdit')}
style={{ position: 'absolute', top: '100%', marginTop: 25 }}
style={{ marginTop: 20 }}
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
>
<Feather name="edit" size={24} color={Colors.white} />
</TouchableOpacity>
</Animated.View>

<Animated.View style={{ opacity: dropsOpacity }}>
<TouchableOpacity
onPress={() => navigation.navigate('UserDropies')}
style={{ marginTop: 22 }}
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
>
<Feather name="edit" size={25} color={Colors.white} />
<MaterialCommunityIcons name="tooltip-image-outline" size={26} color={Colors.white} />
</TouchableOpacity>
</Animated.View>
</View>
Expand Down Expand Up @@ -190,9 +207,10 @@ const styles = StyleSheet.create({
overflow: 'hidden',
},
headerControlsContainer: {
marginTop: 10,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
alignItems: 'flex-start',
width: '100%',
paddingHorizontal: 20,
},
Expand Down
8 changes: 6 additions & 2 deletions src/hooks/useEffectForegroundOnly.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,20 @@ const useEffectForegroundOnly = (effect, deps) => {
const needRefresh = useRef(false);

useEffect(() => {
let effectReturn = () => {};
const subscription = AppState.addEventListener('change', nextAppState => {
appState.current = nextAppState;

if(nextAppState === 'active' && needRefresh.current) {
effect();
effectReturn = effect() ?? (() => {});
needRefresh.current = false;
}
});

return () => subscription.remove();
return () => {
effectReturn();
subscription.remove();
};
}, []);

useEffect(() => {
Expand Down
4 changes: 4 additions & 0 deletions src/navigation/Navigation.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ import DisplayDropyMediaScreen from '../screens/DisplayDropyMediaScreen';
import ProfileScreen from '../screens/ProfileScreen';
import SettingsScreen from '../screens/SettingScreen';
import ProfileEditScreen from '../screens/ProfileEditScreen';
import BlockedUsersScreen from '../screens/BlockedUsersScreen';
import UserDropiesScreen from '../screens/UserDropiesScreen';

const MainStack = createStackNavigator();

Expand Down Expand Up @@ -41,6 +43,8 @@ export default function Navigation() {
<MainStack.Screen name="Profile" component={ProfileScreen} />
<MainStack.Screen name="ProfileEdit" component={ProfileEditScreen} />
<MainStack.Screen name="Settings" component={SettingsScreen} />
<MainStack.Screen name="BlockedUsers" component={BlockedUsersScreen} />
<MainStack.Screen name="UserDropies" component={UserDropiesScreen} />
</MainStack.Navigator>
);
}
134 changes: 134 additions & 0 deletions src/screens/BlockedUsersScreen.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
import { Feather } from '@expo/vector-icons';
import React, { useEffect, useState } from 'react';
import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
TouchableOpacity,
View
} from 'react-native';
import { responsiveHeight, responsiveWidth } from 'react-native-responsive-dimensions';
import FadeInWrapper from '../components/FadeInWrapper';
import GoBackHeader from '../components/GoBackHeader';
import LoadingSpinner from '../components/LoadingSpinner';
import ProfileAvatar from '../components/ProfileAvatar';
import useOverlay from '../hooks/useOverlay';
import API from '../services/API';
import Styles, { Colors, Fonts } from '../styles/Styles';

const BlockedUsersScreen = ({ navigation }) => {

const { sendAlert } = useOverlay();

const [loading, setLoading] = useState(true);
const [blockedUsers, setBlockedUsers] = useState([]);

useEffect(() => {
loadBlockedUsers();
}, []);

const loadBlockedUsers = async () => {
try {
setLoading(true);
const response = await API.getBlockedUsers();
setBlockedUsers(response.data);
setLoading(false);
} catch (error) {
sendAlert({
title: 'Oh no...',
description: 'We couldn\'t load this...\nCheck your internet connection!',
});
console.error('Error while fetching blocked users', error?.response?.data || error);
navigation.goBack();
}
};

const unblockUser = async (userId) => {
const confirmed = await sendAlert({
title: 'Are you sure?',
description: 'This user will be unblocked!',
denyText: 'Cancel',
validateText: 'Unblock',
});

if (!confirmed) {
return;
}

try {
const response = await API.unblockUser(userId);
console.log('Delete API response', response);
setBlockedUsers(old => old.filter((user) => user.id !== userId));
} catch (error) {
sendAlert({
title: 'Oh no...',
description: 'We couldn\'t unblock this user...\nCheck your internet connection!',
});
console.error('Error while unblocking user', error?.response?.data || error);
navigation.goBack();
}
};

return (
<SafeAreaView style={styles.container}>
<StatusBar barStyle={'dark-content'} />
<GoBackHeader text="Blocked users" />
{loading ? (
<View style={{ height: responsiveHeight(80), ...Styles.center }}>
<LoadingSpinner />
</View>
) : (
<ScrollView contentContainerStyle={styles.scrollViewContent}>
{blockedUsers.length === 0 && (
<View style={{ height: responsiveHeight(80), ...Styles.center }}>
<Text style={{ ...Fonts.regular(13, Colors.darkGrey) }}>{'You don\'t have blocked anyone yet'}</Text>
</View>
)}
{blockedUsers.map((user, index) => (
<FadeInWrapper key={user.id} delay={index * 50}>
<View style={styles.userContainer}>
<ProfileAvatar userId={user.id} />
<View style={{ flex: 1, justifyContent: 'center', marginLeft: 10 }}>
<Text style={{ ...Fonts.bold(14, Colors.darkGrey) }}>{user.displayName}</Text>
<Text style={{ ...Fonts.regular(10, Colors.darkGrey), marginTop: 5 }}>@{user.username}</Text>
</View>
<TouchableOpacity onPress={() => unblockUser(user.id)}>
<Feather name="unlock" size={24} color={Colors.red} />
</TouchableOpacity>
</View>
</FadeInWrapper>
))}
</ScrollView>
)}
</SafeAreaView>
);
};

export default BlockedUsersScreen;



const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: Colors.white,
...Styles.safeAreaView,
},
scrollViewContent: {
width: responsiveWidth(100),
alignItems: 'center',
paddingBottom: 10,
},
userContainer: {
width: responsiveWidth(100),
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingHorizontal: 20,
paddingVertical: 10,
paddingRight: 30,
},
});
4 changes: 3 additions & 1 deletion src/screens/DisplayDropyMediaScreen.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,12 @@ import GoBackHeader from '../components/GoBackHeader';
import DropyMediaViewer from '../components/DropyMediaViewer';
import useOverlay from '../hooks/useOverlay';
import { blockUser, reportUser } from '../utils/profiles';
import useCurrentUser from '../hooks/useCurrentUser';

const DisplayDropyMediaScreen = ({ navigation, route }) => {
const { dropy, showBottoModal } = route.params || {};

const { user } = useCurrentUser();
const { sendAlert } = useOverlay();
const { showActionSheetWithOptions } = useActionSheet();

Expand Down Expand Up @@ -48,7 +50,7 @@ const DisplayDropyMediaScreen = ({ navigation, route }) => {
<StatusBar barStyle="light-content" />
<GoBackHeader
color={Colors.white}
onPressOptions={handleOptionsButtonPress}
onPressOptions={user.id === dropy.emitterId ? undefined : handleOptionsButtonPress}
/>
<DropyMediaViewer {...dropy} />
{showBottoModal && (
Expand Down
3 changes: 1 addition & 2 deletions src/screens/HomeScreen.js
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,6 @@ const HomeScreen = ({ navigation, route }) => {
useEffect(() => {

const unsubscribe = navigation.addListener('focus', () => {

console.log(shouldAnimateIcon.current);
if(shouldAnimateIcon.current === false) return;
shouldAnimateIcon.current = false;

Expand Down Expand Up @@ -140,6 +138,7 @@ const styles = StyleSheet.create({
},
backgroundGeolocIconContainer: {
...Styles.center,
...Styles.hardShadows,
position: 'absolute',
flexDirection: 'row',
height: ICON_OPENED_SIZE,
Expand Down
Loading

0 comments on commit 9b46d99

Please sign in to comment.