Feature: Chat

babel.config.js

@@ -2,6 +2,7 @@ module.exports = {
     presets: ['module:metro-react-native-babel-preset'],
     plugins: [
         '@babel/plugin-transform-async-generator-functions',
+        '@babel/plugin-transform-async-to-generator',
         'react-native-reanimated/plugin',
         'preval',
         [

ios/Podfile.lock

@@ -580,8 +580,6 @@ PODS:
     - React-Core
   - RNCMaskedView (0.1.11):
     - React
-  - RNCPicker (2.6.1):
-    - React-Core
   - RNCPushNotificationIOS (1.11.0):
     - React-Core
   - RNDateTimePicker (6.7.5):
@@ -739,7 +737,6 @@ DEPENDENCIES:
   - RNBootSplash (from `../node_modules/react-native-bootsplash`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
   - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
-  - "RNCPicker (from `../node_modules/@react-native-picker/picker`)"
   - "RNCPushNotificationIOS (from `../node_modules/@react-native-community/push-notification-ios`)"
   - "RNDateTimePicker (from `../node_modules/@react-native-community/datetimepicker`)"
   - RNDeviceInfo (from `../node_modules/react-native-device-info`)
@@ -903,8 +900,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-async-storage/async-storage"
   RNCMaskedView:
     :path: "../node_modules/@react-native-community/masked-view"
-  RNCPicker:
-    :path: "../node_modules/@react-native-picker/picker"
   RNCPushNotificationIOS:
     :path: "../node_modules/@react-native-community/push-notification-ios"
   RNDateTimePicker:
@@ -1014,7 +1009,6 @@ SPEC CHECKSUMS:
   RNBootSplash: 85f6b879c080e958afdb4c62ee04497b05fd7552
   RNCAsyncStorage: 687bb9e85dd3d45b966662440dcfc0cd962347e6
   RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489
-  RNCPicker: b18aaf30df596e9b1738e7c1f9ee55402a229dca
   RNCPushNotificationIOS: 64218f3c776c03d7408284a819b2abfda1834bc8
   RNDateTimePicker: 65e1d202799460b286ff5e741d8baf54695e8abd
   RNDeviceInfo: aad3c663b25752a52bf8fce93f2354001dd185aa

package.json

@@ -77,6 +77,7 @@
         "react-native-geolocation-service": "^5.3.0-beta.1",
         "react-native-gesture-handler": "^1.10.3",
         "react-native-get-random-values": "^1.9.0",
+        "react-native-gifted-chat": "^2.4.0",
         "react-native-google-places-autocomplete": "^2.2.0",
         "react-native-image-picker": "^4.4.0",
         "react-native-image-resizer": "^1.4.5",
@@ -86,7 +87,7 @@
         "react-native-maps": "^2.0.0-beta.14",
         "react-native-maps-directions": "^1.8.0",
         "react-native-mmkv-storage": "^0.9.0",
-        "react-native-modal": "^12.0.2",
+        "react-native-modal": "^13.0.1",
         "react-native-navigation-apps": "^1.0.27",
         "react-native-open-maps": "^0.4.0",
         "react-native-permissions": "^3.0.5",
@@ -104,14 +105,15 @@
         "react-native-webview": "^13.6.0",
         "react-native-youtube": "^2.0.2",
         "react-redux": "^7.2.5",
-        "socketcluster-client": "^16.0.4",
+        "socketcluster-client": "^17.1.1",
         "tailwind-rn": "^3.0.1",
         "tailwindcss": "^2.2.4",
         "uuid": "^9.0.0"
     },
     "devDependencies": {
         "@babel/core": "^7.20.0",
         "@babel/plugin-transform-async-generator-functions": "^7.22.15",
+        "@babel/plugin-transform-async-to-generator": "^7.24.1",
         "@babel/preset-env": "^7.20.0",
         "@babel/runtime": "^7.20.0",
         "@react-native/eslint-config": "^0.72.2",

src/features/Core/MainStack.js

@@ -9,6 +9,9 @@ import ProofScreen from 'shared/ProofScreen';
 import MainScreen from './screens/MainScreen';
 import SearchScreen from './screens/SearchScreen';
 import IssueScreen from './screens/IssueScreen';
+import ChatScreen from './screens/ChatScreen';
+import ChatsScreen from './screens/ChatsScreen';
+import ChannelScreen from './screens/ChannelScreen';
 
 const RootStack = createStackNavigator();
 
@@ -30,6 +33,9 @@ const MainStack = ({ route }) => {
                     <RootStack.Screen name="ProofScreen" component={ProofScreen} options={{ headerShown: false }} initialParams={route.params ?? {}} />
                     <RootStack.Screen name="SearchScreen" component={SearchScreen} options={{ headerShown: false }} initialParams={route.params ?? {}} />
                     <RootStack.Screen name="IssueScreen" component={IssueScreen} options={{ headerShown: false }} initialParams={route.params ?? {}} />
+                    <RootStack.Screen name="ChatScreen" component={ChatScreen} options={{ headerShown: false }} initialParams={route.params ?? {}} />
+                    <RootStack.Screen name="ChatsScreen" component={ChatsScreen} options={{ headerShown: false }} initialParams={route.params ?? {}} />
+                    <RootStack.Screen name="ChannelScreen" component={ChannelScreen} options={{ headerShown: false }} initialParams={route.params ?? {}} />
                 </RootStack.Group>
             </RootStack.Navigator>
         </SafeAreaProvider>

src/features/Core/screens/ChannelScreen.js

@@ -0,0 +1,95 @@
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
+import { useNavigation } from '@react-navigation/native';
+import { useFleetbase } from 'hooks';
+import React, { useEffect, useState } from 'react';
+import Toast from 'react-native-toast-message';
+import { ActivityIndicator, Keyboard, KeyboardAvoidingView, Pressable, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import tailwind from 'tailwind';
+import { getColorCode, logError, translate } from 'utils';
+
+const ChannelScreen = ({ route }) => {
+    const navigation = useNavigation();
+    const fleetbase = useFleetbase();
+    const [name, setName] = useState();
+    const [isLoading, setIsLoading] = useState(false);
+    const [channelId, setChannelId] = useState();
+
+    useEffect(() => {
+        if (route?.params) {
+            const { data } = route.params;
+            setChannelId(data?.id);
+            setName(data?.name);
+        }
+    }, [route]);
+
+    const saveChannel = () => {
+        setIsLoading(true);
+        const adapter = fleetbase.getAdapter();
+        const data = { name };
+        if (channelId) {
+            return adapter
+                .put(`chat-channels/${channelId}`, data)
+                .then(res => {
+                    navigation.navigate('ChatScreen', { channel: res });
+                })
+                .catch(logError)
+                .finally(() => setIsLoading(false));
+        } else {
+            return adapter
+                .post('chat-channels', { name })
+                .then(res => {
+                    navigation.navigate('ChatScreen', { channel: res });
+                    Toast.show({
+                        type: 'success',
+                        text1: `Channel created successfully`,
+                    });
+                })
+                .catch(logError)
+                .finally(() => setIsLoading(false));
+        }
+    };
+
+    return (
+        <View style={[tailwind('w-full h-full bg-gray-800')]}>
+            <Pressable onPress={Keyboard.dismiss} style={tailwind('w-full h-full relative')}>
+                <View style={tailwind('flex flex-row items-center justify-between p-4')}>
+                    <Text style={tailwind('text-xl text-gray-50 font-semibold')}>{channelId ? translate('Core.ChannelScreen.update-channel') : translate('Core.ChannelScreen.title')}</Text>
+                    <TouchableOpacity onPress={() => navigation.pop(2)} style={tailwind('mr-4')}>
+                        <View style={tailwind('rounded-full bg-gray-900 w-10 h-10 flex items-center justify-center')}>
+                            <FontAwesomeIcon icon={faTimes} style={tailwind('text-red-400')} />
+                        </View>
+                    </TouchableOpacity>
+                </View>
+                <View style={tailwind('flex w-full h-full')}>
+                    <KeyboardAvoidingView style={tailwind('p-4')}>
+                        <View style={tailwind('mb-4')}>
+                            <Text style={tailwind('font-semibold text-base text-gray-50 mb-2')}>
+                                {channelId ? translate('Core.ChannelScreen.update') : translate('Core.ChannelScreen.name')}
+                            </Text>
+                            <TextInput
+                                value={name}
+                                onChangeText={setName}
+                                keyboardType={'default'}
+                                placeholder={translate('Core.ChannelScreen.name')}
+                                placeholderTextColor={getColorCode('text-gray-600')}
+                                style={tailwind('form-input text-white')}
+                            />
+                        </View>
+
+                        <TouchableOpacity onPress={saveChannel} disabled={isLoading}>
+                            <View style={tailwind('btn bg-gray-900 border border-gray-700 mt-4')}>
+                                {isLoading && <ActivityIndicator color={getColorCode('text-gray-50')} style={tailwind('mr-2')} />}
+                                <Text style={tailwind('font-semibold text-lg text-gray-50 text-center')}>
+                                    {channelId ? translate('Core.ChannelScreen.update-channel') : translate('Core.ChannelScreen.title')}
+                                </Text>
+                            </View>
+                        </TouchableOpacity>
+                    </KeyboardAvoidingView>
+                </View>
+            </Pressable>
+        </View>
+    );
+};
+
+export default ChannelScreen;