Skip to content

Commit

Permalink
add load, file upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@doljko
doljko committed Apr 16, 2024
1 parent 1ef9e1e commit 960606a
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 34 deletions.
92 changes: 68 additions & 24 deletions src/features/Core/screens/ChatScreen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { useNavigation } from '@react-navigation/native';
import { useFleetbase } from 'hooks';
import React, { useCallback, useEffect, useState } from 'react';
import { FlatList, Text, TouchableOpacity, View } from 'react-native';
import { launchImageLibrary } from 'react-native-image-picker';
import { Actions, Bubble, GiftedChat, InputToolbar, Send } from 'react-native-gifted-chat';
import { tailwind } from 'tailwind';

Expand All @@ -15,22 +16,32 @@ const ChatScreen = ({ route }) => {
const [messages, setMessages] = useState([]);
const [text, setText] = useState();
const [users, setUsers] = useState([]);
const [channel, setChannel] = useState([]);
const [showUserList, setShowUserList] = useState(false);

const fetchUsers = async () => {
try {
const adapter = getUser.getAdapter();
const response = await adapter.get('users');
setUsers(response.users);
return response;
} catch (error) {
console.error('Error fetching users:', error);
return [];
}
};

const fetchChannels = async () => {
try {
const adapter = fleetbase.getAdapter();
const response = await adapter.get('chat-channels');
setChannel(response);
} catch (error) {
console.error('Error fetching channels:', error);
}
};

useEffect(() => {
fetchUsers();
fetchChannels();
}, []);

const toggleUserList = () => {
Expand All @@ -41,7 +52,6 @@ const ChatScreen = ({ route }) => {
try {
const adapter = fleetbase.getAdapter();
const res = await adapter.post(`chat-channels/${participantId}/add-participant`);
console.log('res:::', JSON.stringify(res));
setShowUserList(false);
} catch (error) {
console.error('Add participant:', error);
Expand All @@ -52,7 +62,6 @@ const ChatScreen = ({ route }) => {
try {
const adapter = fleetbase.getAdapter();
const res = await adapter.delete(`chat-channels/remove-participant/${participantId}`);
console.log('res:::', JSON.stringify(res));
} catch (error) {
console.error('Remove participant:', error);
}
Expand Down Expand Up @@ -101,7 +110,7 @@ const ChatScreen = ({ route }) => {
{...props}
wrapperStyle={{
right: {
backgroundColor: '#2e64e5',
backgroundColor: '#919498',
},
}}
textStyle={{
Expand All @@ -117,11 +126,47 @@ const ChatScreen = ({ route }) => {
return <FontAwesomeIcon name="angle-double-down" size={22} color="#333" />;
};

const uploadFile = async file => {
const formData = new FormData();
formData.append('file', {
uri: file.uri,
name: file.name,
type: file.type,
});

//todo
};

const chooseFile = () => {
const options = {
title: 'Select File',
storageOptions: {
skipBackup: true,
path: 'images',
},
};

launchImageLibrary(options, response => {
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else {
const file = {
uri: response.uri,
name: response.fileName,
type: response.type,
};
uploadFile(file);
}
});
};

const renderActions = () => (
<Actions
options={{
'Choose From Library': () => {
console.log('Choose From Library');
chooseFile();
},
Cancel: () => {
console.log('Cancel');
Expand All @@ -146,42 +191,41 @@ const ChatScreen = ({ route }) => {
};

return (
<View style={tailwind('w-full h-full bg-gray-200')}>
<View style={tailwind('flex flex-row ')}>
<View style={tailwind('w-full h-full bg-gray-800')}>
<View style={tailwind('flex flex-row')}>
<View style={tailwind('flex flex-row items-center')}>
<TouchableOpacity style={tailwind('p-2')} onPress={() => navigation.goBack()}>
<FontAwesomeIcon size={25} icon={faAngleLeft} style={tailwind('text-blue-500')} />
<FontAwesomeIcon size={25} icon={faAngleLeft} style={tailwind('text-gray-300')} />
</TouchableOpacity>
<View style={tailwind('flex flex-row items-center')}>
<Text style={tailwind('text-sm text-gray-600 w-72 text-center')}>
{itemData?.name || data.name}{' '}
<TouchableOpacity style={tailwind('rounded-full ')} onPress={() => navigation.navigate('ChannelScreen', { data: itemData })}>
<FontAwesomeIcon size={18} icon={faEdit} style={tailwind('text-blue-500 mt-1')} />
<Text style={tailwind('text-sm text-gray-300 w-72 text-center')}>
{itemData?.name || data.name}
{' '}
<TouchableOpacity style={tailwind('rounded-full')} onPress={() => navigation.navigate('ChannelScreen', { data: itemData })}>
<FontAwesomeIcon size={18} icon={faEdit} style={tailwind('text-gray-300 mt-1')} />
</TouchableOpacity>
</Text>
</View>

<View style={tailwind('flex flex-col items-center left-6')}>
<TouchableOpacity style={tailwind('rounded-full')} onPress={toggleUserList}>
<FontAwesomeIcon size={15} icon={faUser} style={tailwind('text-blue-500')} />
<FontAwesomeIcon size={15} icon={faUser} style={tailwind('text-gray-300')} />
</TouchableOpacity>
</View>
</View>

{showUserList && (
<View style={tailwind('flex-1 justify-center items-center inset-0 top-14')}>
<View style={tailwind('bg-white w-60 h-40 rounded-lg shadow-lg p-4 right-40')}>
<View style={tailwind('bg-gray-500 w-60 h-40 rounded-lg shadow-lg p-4 right-40')}>
<FlatList
data={users}
keyExtractor={item => item.id.toString()}
renderItem={({ item }) => (
<View style={tailwind('flex flex-row items-center py-2')}>
<TouchableOpacity onPress={() => addParticipant(item.id)} style={tailwind('flex flex-row items-center')}>
<View style={tailwind(item.status === 'active' ? 'bg-green-500 w-2 h-2 rounded-full mr-2' : 'bg-yellow-500 w-2 h-2 rounded-full mr-2')} />
<FontAwesomeIcon icon={faUser} size={15} color="#168AFF" style={tailwind('mr-2')} />
<Text style={tailwind('text-sm')}>{item.name}</Text>
</TouchableOpacity>
</View>
<TouchableOpacity onPress={() => addParticipant(item.id)} style={tailwind('flex flex-row items-center py-2')}>
<View style={tailwind(item.status === 'active' ? 'bg-green-500 w-2 h-2 rounded-full mr-2' : 'bg-yellow-500 w-2 h-2 rounded-full mr-2')} />
<FontAwesomeIcon icon={faUser} size={15} color="#fff" style={tailwind('mr-2')} />
<Text style={tailwind('text-sm')}>{item.name}</Text>
</TouchableOpacity>
)}
/>
</View>
Expand All @@ -191,14 +235,14 @@ const ChatScreen = ({ route }) => {
<View style={tailwind('flex-1 p-4')}>
<GiftedChat
messages={messages}
onSend={messages => onSend(messages)}
onSend={onSend}
user={{
_id: 1,
}}
renderBubble={renderBubble}
alwaysShowSend
scrollToBottom
renderInputToolbar={props => MessengerBarContainer(props)}
renderInputToolbar={MessengerBarContainer}
renderActions={renderActions}
scrollToBottomComponent={scrollToBottomComponent}
renderSend={renderSend}
Expand Down
38 changes: 30 additions & 8 deletions src/features/Core/screens/ChatsScreen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,19 @@ import { useNavigation } from '@react-navigation/native';
import { format } from 'date-fns';
import { useFleetbase, useMountedState } from 'hooks';
import React, { useEffect, useState } from 'react';
import { Text, TouchableOpacity, View, StyleSheet } from 'react-native';
import { ActivityIndicator, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import FastImage from 'react-native-fast-image';
import { tailwind } from 'tailwind';
import { SwipeListView } from 'react-native-swipe-list-view';
import Toast from 'react-native-toast-message';
import { tailwind } from 'tailwind';
import { HelperUtil } from 'utils';

const ChatsScreen = () => {
const navigation = useNavigation();
const isMounted = useMountedState();
const fleetbase = useFleetbase();
const [channel, setChannel] = useState([]);
const [channels, setChannels] = useState([]);
const [isLoading, setIsLoading] = useState(false);

useEffect(() => {
const unsubscribe = navigation.addListener('focus', () => {
Expand Down Expand Up @@ -51,13 +53,16 @@ const ChatsScreen = () => {
};

const fetchChannels = async () => {
setIsLoading(true);
try {
const adapter = fleetbase.getAdapter();
const response = await adapter.get('chat-channels');
setChannel(response);
setChannels(response);
setIsLoading(false);
return response;
} catch (error) {
console.error('Error fetching channels:', error);
setIsLoading(false);
return [];
}
};
Expand All @@ -75,8 +80,13 @@ const ChatsScreen = () => {
const handleDelete = async itemId => {
try {
const adapter = fleetbase.getAdapter();
await adapter.delete(`chat-channels/${itemId}`);
setChannel(channel.filter(item => item.id !== itemId));
await adapter.delete(`chat-channels/${itemId}`).then(res => {
Toast.show({
type: 'success',
text1: `Channel deleted`,
});
});
setChannels(channels.filter(item => item.id !== itemId));
} catch (error) {
console.error('Error deleting channel:', error);
}
Expand All @@ -101,7 +111,7 @@ const ChatsScreen = () => {
);

const renderHiddenItem = ({ item }) => (
<View style={tailwind(' w-full h-full p-2')}>
<View style={tailwind('w-full h-full p-2')}>
<TouchableOpacity onPress={() => handleDelete(item.id)} style={[styles.backRightBtn, styles.backRightBtnRight]}>
<Text style={tailwind('text-white font-semibold')}>Delete</Text>
</TouchableOpacity>
Expand All @@ -110,6 +120,11 @@ const ChatsScreen = () => {

return (
<View style={tailwind('w-full h-full bg-gray-800')}>
{isLoading && (
<View style={styles.loaderContainer}>
<ActivityIndicator size="large" color="#FFFFFF" />
</View>
)}
<View style={tailwind('p-4')}>
<View style={tailwind('flex flex-row items-center justify-center')}>
<TouchableOpacity style={tailwind('flex-1')} onPress={() => navigation.navigate('ChannelScreen')}>
Expand All @@ -119,7 +134,7 @@ const ChatsScreen = () => {
</TouchableOpacity>
</View>
</View>
<SwipeListView data={channel} renderItem={renderItem} renderHiddenItem={renderHiddenItem} rightOpenValue={-75} />
<SwipeListView data={channels} renderItem={renderItem} renderHiddenItem={renderHiddenItem} rightOpenValue={-75} />
</View>
);
};
Expand All @@ -142,4 +157,11 @@ const styles = StyleSheet.create({
marginRight: 12,
marginLeft: 6,
},
loaderContainer: {
position: 'absolute',
top: '50%',
left: '60%',
transform: [{ translateX: -50 }, { translateY: -50 }],
zIndex: 10,
},
});
7 changes: 5 additions & 2 deletions translations/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,12 @@
},
"ChannelScreen": {
"name": "Name",
"title":"Create channel",
"title": "Create channel",
"update": "Update",
"update-channel":"Update channel"
"update-channel": "Update channel"
},
"ChatsScreen": {
"delete": "Delete"
}
},
"Exceptions": {
Expand Down

0 comments on commit 960606a

Please sign in to comment.