ADAPT responses to fit into GiftedChat interfaces. ADD basic GiftedCh…

…at view

components/Chat.tsx

@@ -0,0 +1,14 @@
+import { useUserInfo } from "@hooks/useUserInfo";
+import React from "react";
+import { GiftedChat } from "react-native-gifted-chat";
+
+export interface Props {}
+
+const Chat: React.FC<Props> = ({}) => {
+  const { data, loading, getFullName } = useUserInfo();
+  const myUserId = data && data.user._id;
+
+  return <GiftedChat user={{ _id: myUserId || "0", name: getFullName() }} />;
+};
+
+export default Chat;

components/ListItem.tsx

@@ -9,7 +9,7 @@ export interface Props {
 }
 
 const renderItemIcon = (props: IconProps, fill?: string) => (
-  <Icon {...props} name="arrow-circle-right-outline" fill="#3366FF" />
+  <Icon {...props} name="arrow-circle-right-outline" fill="#FF3D71" />
 );
 
 const ListItem: React.FC<Props> = ({ item, index }) => {

hooks/useUserInfo.ts

@@ -7,7 +7,7 @@ export const useUserInfo = () => {
   const { data, loading } = useQuery<{ user: IUser }>(GET_USER_INFO);
 
   const getFullName = useCallback(() => {
-    return data && !loading && `${data?.user.firstName} ${data?.user.lastName}`;
+    return data ? `${data?.user.firstName} ${data?.user.lastName}` : "";
   }, [data]);
 
   return { data, loading, getFullName };

package.json

@@ -19,6 +19,7 @@
     "@absinthe/socket-apollo-link": "^0.2.1",
     "@apollo/client": "^3.2.5",
     "@eva-design/eva": "^2.0.0",
+    "@expo/react-native-action-sheet": "^3.8.0",
     "@react-native-community/masked-view": "0.1.10",
     "@react-navigation/native": "^5.8.0",
     "@react-navigation/stack": "^5.10.0",
@@ -33,8 +34,10 @@
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
+    "react-native-action-sheet": "^2.2.0",
     "react-native-dotenv": "^2.4.2",
     "react-native-gesture-handler": "~1.7.0",
+    "react-native-gifted-chat": "^0.16.3",
     "react-native-reanimated": "~1.13.0",
     "react-native-safe-area-context": "3.1.4",
     "react-native-screens": "~2.10.1",

queries/chatRoom.ts

@@ -4,11 +4,11 @@ export const GET_ROOM_MESSAGES = gql`
   query GET_ROOM_MESSAGES($id: ID!) {
     room(id: $id) {
       messages {
-        id
-        body
-        insertedAt
+        _id: id
+        text: body
+        createdAt: insertedAt
         user {
-          id
+          _id: id
           firstName
           lastName
         }

queries/user.ts

@@ -6,7 +6,7 @@ export const GET_USER_INFO = gql`
       firstName
       lastName
       email
-      id
+      _id: id
       role
     }
   }

resources/contexts/chatroom/useChatRoom.ts

@@ -24,7 +24,7 @@ export const internalReducer = (state: STATE, action: ChatroomActionTypes) => {
     case ACTION_TYPES.TOGGLE_SUBSCRIBED:
       return { ...state, subscribed: !state.subscribed };
     case ACTION_TYPES.UPDATE_MESSAGES:
-      return { ...state, messages: [...state.messages, payload.value] };
+      return { ...state, messages: [...state.messages, ...payload.value] };
     case ACTION_TYPES.CLEAR_ALL:
       return INIT_STATE;
     default:
@@ -71,12 +71,13 @@ export const useChatRoom = (
       },
     }) =>
       updateQuery?.((prev, _options) => {
-        Toast.show({
-          type: "info",
-          position: "bottom",
-          text1: "New message",
-          text2: "You've got new message in the last opened chat room",
-        });
+        !isChatOpen &&
+          Toast.show({
+            type: "info",
+            position: "bottom",
+            text1: "New message",
+            text2: "You've got new message in the last opened chat room",
+          });
         dispatch({
           type: ACTION_TYPES.UPDATE_MESSAGES,
           payload: { value: messageAdded },

screens/ChatRoom.tsx

@@ -1,33 +1,47 @@
 import { useChatroomState } from "@hooks/useChatroomState";
-import { SUBSCRIBE_MESSAGE_ADDED } from "@queries/chatRoom";
+import { useUserInfo } from "@hooks/useUserInfo";
 import { RouteProp } from "@react-navigation/native";
-import { ACTION_TYPES } from "@res/contexts/chatroom/types";
 import { HomeStackParams } from "@type/navigation";
 import { StatusBar } from "expo-status-bar";
 import React, { useEffect } from "react";
-import { StyleSheet, Text, View } from "react-native";
+import { StyleSheet, View } from "react-native";
+import { GiftedChat } from "react-native-gifted-chat";
 
 export interface Props {
   route: RouteProp<HomeStackParams, "ChatRoom">;
 }
 
 const ChatRoom: React.FC<Props> = ({ route }) => {
   const { params: roomObj } = route;
-  const state = useChatroomState();
-  const { loadMessages, checkAndLoad, setChatOpen } = state;
-  const { called, refetch, loading, data, error } = state.loadMessagesResult;
+  const Chatroom = useChatroomState();
+  const { data, loading, getFullName } = useUserInfo();
+  const { loadMessages, checkAndLoad, setChatOpen, state } = Chatroom;
+  const { messages } = state;
+  const { called } = Chatroom.loadMessagesResult;
+  const myUserId = data && data.user._id;
 
   useEffect(() => {
-    state.checkAndLoad(roomObj);
+    Chatroom.checkAndLoad(roomObj);
     setChatOpen(true);
     return () => {
       setChatOpen(false);
     };
   }, [loadMessages, called, checkAndLoad]);
 
+  const newMessages = messages.map((item) => ({
+    ...item,
+    user: {
+      ...item.user,
+      name: `${item.user.firstName} ${item.user.lastName}`,
+    },
+  }));
+
   return (
     <View style={styles.container}>
-      <Text>CHAT ROOM MOCK</Text>
+      <GiftedChat
+        messages={newMessages}
+        user={{ _id: myUserId || "0", name: getFullName() }}
+      />
       <StatusBar style="auto" />
     </View>
   );
@@ -36,9 +50,8 @@ const ChatRoom: React.FC<Props> = ({ route }) => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "#fff",
-    alignItems: "center",
-    justifyContent: "center",
+    width: "100%",
+    paddingTop: "25%",
   },
 });
 

types/models.ts

@@ -6,14 +6,14 @@ export interface IUserRoom {
 export interface IUser {
   email: string;
   firstName: string;
-  id: string;
+  _id: string;
   lastName: string;
   role: string;
 }
 
 export interface IMessage {
-  id: string;
-  body: string;
-  insertedAt: Date;
+  _id: string;
+  text: string;
+  createdAt: Date;
   user: Omit<IUser, "role" | "email">;
 }