Finished chat demo

bambu-group-03 · Nov 9, 2023 · 665e800 · 665e800
1 parent c1ee5db
commit 665e800
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 48 deletions.
diff --git a/src/screens/chat/chat-body.tsx b/src/screens/chat/chat-body.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 
 import { Button, Image, Text, View } from '@/ui';
+import { ChatBase } from './chat-list-screen';
 
 const MY_PROFILE_PHOTO =
   'https://avatars.githubusercontent.com/u/40549839?s=400&u=f9968082a38e11cabaeec2033e3ffb3e18395eb6&v=4';
-const MY_FRIEND_PHOTO = 'https://avatars.githubusercontent.com/u/43934057?v=4';
 
-const ChatBody = () => {
+const ChatBody = ({ chatUser }: { chatUser: ChatBase }) => {
   return (
     <View>
       <View
@@ -36,12 +36,12 @@ const ChatBody = () => {
                   Your error message says permission denied, npm global installs
                   must be given root privileges.
                 </Text>
+                <Image
+                  source={chatUser.imageSource} //"https://images.unsplash.com/photo-1590031905470-a1a1feacbb0b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=3&amp;w=144&amp;h=144"
+                  className="order-2 h-6 w-6 rounded-full"
+                />
               </View>
             </View>
-            <Image
-              source={MY_FRIEND_PHOTO} //"https://images.unsplash.com/photo-1590031905470-a1a1feacbb0b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=3&amp;w=144&amp;h=144"
-              className="order-2 h-6 w-6 rounded-full"
-            />
           </View>
         </View>
         <View className="chat-message">
@@ -83,21 +83,22 @@ const ChatBody = () => {
                   Any updates on this issue? I'm getting the same error when
                   trying to install devtools. Thanks
                 </Text>
+
+                <Image
+                  source={chatUser.imageSource} //"https://images.unsplash.com/photo-1590031905470-a1a1feacbb0b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=3&amp;w=144&amp;h=144"
+                  className="order-2 h-6 w-6 rounded-full"
+                />
               </View>
             </View>
-            <Image
-              source={MY_FRIEND_PHOTO} //"https://images.unsplash.com/photo-1590031905470-a1a1feacbb0b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=3&amp;w=144&amp;h=144"
-              className="order-2 h-6 w-6 rounded-full"
-            />
           </View>
         </View>
         <View className="chat-message">
           <View className="flex items-end">
             <View className="order-2 mx-2 flex max-w-xs flex-col items-start space-y-2 text-xs">
               <View>
                 <Text className="inline-block rounded-lg rounded-bl-none bg-gray-300 px-4 py-2 text-gray-600">
-                  Thanks for your message David. I thought I'm alone with this
-                  issue. Please, ? the issue to support it :)
+                  Thanks for your message {chatUser.firstName}. I thought I'm
+                  alone with this issue. Please, ? the issue to support it :)
                 </Text>
               </View>
             </View>
@@ -121,12 +122,12 @@ const ChatBody = () => {
                   {/* {{}}/.npm-global/ then install the package globally without */}
                   using sudo
                 </Text>
+                <Image
+                  source={chatUser.imageSource} //"https://images.unsplash.com/photo-1590031905470-a1a1feacbb0b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=3&amp;w=144&amp;h=144"
+                  className="order-2 h-6 w-6 rounded-full"
+                />
               </View>
             </View>
-            <Image
-              source={MY_FRIEND_PHOTO} //"https://images.unsplash.com/photo-1590031905470-a1a1feacbb0b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=3&amp;w=144&amp;h=144"
-              className="order-2 h-6 w-6 rounded-full"
-            />
           </View>
         </View>
         <View className="chat-message">
@@ -159,12 +160,12 @@ const ChatBody = () => {
                   yes, I have a mac. I never had issues with root permission as
                   well, but this helped me to solve the problem
                 </Text>
+                <Image
+                  source={chatUser.imageSource} //"https://images.unsplash.com/photo-1590031905470-a1a1feacbb0b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=3&amp;w=144&amp;h=144"
+                  className="order-2 h-6 w-6 rounded-full"
+                />
               </View>
             </View>
-            <Image
-              source={MY_FRIEND_PHOTO} //"https://images.unsplash.com/photo-1590031905470-a1a1feacbb0b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=3&amp;w=144&amp;h=144"
-              className="order-2 h-6 w-6 rounded-full"
-            />
           </View>
         </View>
         <View className="chat-message">

diff --git a/src/screens/chat/chat-header.tsx b/src/screens/chat/chat-header.tsx
@@ -1,25 +1,28 @@
 import React from 'react';
 
 import { Image, Text, View } from '@/ui';
+import { ChatBase } from './chat-list-screen';
 
-const ChatHeader = () => {
-  const MY_PROFILE_PHOTO =
-    'https://avatars.githubusercontent.com/u/40549839?s=400&u=f9968082a38e11cabaeec2033e3ffb3e18395eb6&v=4';
+const ChatHeader = ({ chatUser }: { chatUser: ChatBase }) => {
+  // const profile_photo =
+  //   'https://avatars.githubchatUsercontent.com/u/40549839?s=400&u=f9968082a38e11cabaeec2033e3ffb3e18395eb6&v=4';
 
   return (
     <View className="flex justify-between border-b-2 border-gray-200 py-3 sm:items-center">
       <View className="relative flex items-center space-x-4">
         <View className="relative">
           <Image
-            source={MY_PROFILE_PHOTO} //{MY_PROFILE_PHOTO}//"https://images.unsplash.com/photo-1549078642-b2ba4bda0cdb?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=3&amp;w=144&amp;h=144"
+            source={chatUser.imageSource} //{chatUser.imageSource}//"https://images.unsplash.com/photo-1549078642-b2ba4bda0cdb?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=3&amp;w=144&amp;h=144"
             className="h-10 w-10 rounded-full sm:h-16 sm:w-16"
           />
         </View>
         <View className="flex flex-col leading-tight">
           <View className="mt-1 flex items-center text-2xl">
-            <Text className="mr-3 text-gray-700">Luis Paredes</Text>
+            <Text className="mr-3 text-gray-700">
+              {chatUser.firstName} {chatUser.lastName}
+            </Text>
           </View>
-          <Text className="text-lg text-gray-600">1/4 CEO Panda.inc</Text>
+          <Text className="text-lg text-gray-600">{chatUser.bio}</Text>
         </View>
       </View>
       {/* <View className="flex items-center space-x-2">

diff --git a/src/screens/chat/chat-list-body.tsx b/src/screens/chat/chat-list-body.tsx
@@ -1,24 +1,25 @@
 import React from 'react';
 import { Image, Text, TouchableOpacity, View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
 
 import type { ChatBase } from './chat-list-screen';
 
-const ChatListHeader = ({
-  chats,
-  onPress,
-}: {
-  chats: ChatBase[];
-  onPress: () => void;
-}) => {
+const ChatListHeader = ({ chats }: { chats: ChatBase[] }) => {
+  const { navigate } = useNavigation();
   return (
     <View style={styles.list}>
       {chats.map((chat: ChatBase) => (
         <View key={chat.id} style={styles.listItem}>
-          <TouchableOpacity className="group block shrink-0" onPress={onPress}>
+          <TouchableOpacity
+            className="group block shrink-0"
+            onPress={() => navigate('ChatScreen', { chat })}
+          >
             <View style={styles.itemContent}>
               <Image style={styles.avatar} source={{ uri: chat.imageSource }} />
               <View style={styles.textContainer}>
-                <Text style={styles.name}>{chat.name}</Text>
+                <Text style={styles.name}>
+                  {chat.firstName} {chat.lastName}
+                </Text>
                 <Text style={styles.last_message}>{chat.last_message}</Text>
               </View>
 

diff --git a/src/screens/chat/chat-list-screen.tsx b/src/screens/chat/chat-list-screen.tsx
@@ -1,4 +1,3 @@
-import { useNavigation } from '@react-navigation/native';
 import React from 'react';
 import { View } from 'react-native';
 
@@ -7,8 +6,10 @@ import ChatListHeader from './chat-list-header';
 
 export type ChatBase = {
   id: number;
-  name: string;
+  firstName: string;
+  lastName: string;
   email: string;
+  bio: string;
   last_message: string;
   imageSource: string;
   unread_messages: boolean;
@@ -18,41 +19,47 @@ const ChatListScreen = () => {
   const chats: ChatBase[] = [
     {
       id: 1,
-      name: 'Dani Vela',
+      firstName: 'Dani',
+      lastName: 'Vela',
       email: 'dani@windster.com',
+      bio: '1/4 CEO de panda.corp',
       last_message: 'Sos el rey del front',
       imageSource: 'https://avatars.githubusercontent.com/u/56934023?v=4',
       unread_messages: true,
     },
     {
       id: 2,
-      name: 'Edu Cusihuaman',
+      firstName: 'Edu',
+      lastName: 'Cusihuaman',
       email: 'edu@gmail.com',
+      bio: '1/4 CEO de panda.corp',
       last_message: 'Amigo sacamos 10 en el TP',
       imageSource: 'https://avatars.githubusercontent.com/u/43934057?v=4',
       unread_messages: false,
     },
     {
       id: 3,
-      name: 'Mafer',
+      firstName: 'Mafer',
+      lastName: '',
       email: 'mafer@gmail.com',
+      bio: '1/4 CEO de panda.corp',
       last_message: 'No me dejes en visto Luis',
       imageSource: 'https://avatars.githubusercontent.com/u/62344533?v=4',
       unread_messages: false,
     },
   ];
 
-  const { navigate } = useNavigation();
-
   return (
     <View style={styles.container}>
       {/* <View style={styles.card}> */}
 
       {/* Header */}
       <ChatListHeader />
 
+      {/* navigate('Snap', { id: item.id }) */}
+
       {/* List of chats */}
-      <ChatListBody chats={chats} onPress={() => navigate('ChatScreen')} />
+      <ChatListBody chats={chats} />
       {/* <ChatListBody chats={chats} onPress={() => console.log('Me undieron')} /> */}
 
       {/* <ChatScreen /> */}

diff --git a/src/screens/chat/chat-navigator.tsx b/src/screens/chat/chat-navigator.tsx
@@ -1,14 +1,15 @@
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import * as React from 'react';
 
-import { Chat } from '@/screens';
+import { Chat, ChatBase } from '@/screens';
 
 import ChatScreen from './chat-screen';
 
 export type ChatStackParamList = {
   ChatPrincipal: undefined;
-  // Snap: { id: number };
-  ChatScreen: undefined;
+  ChatScreen: {
+    chat: ChatBase;
+  };
 };
 
 const Stack = createNativeStackNavigator<ChatStackParamList>();

diff --git a/src/screens/chat/chat-screen.tsx b/src/screens/chat/chat-screen.tsx
@@ -8,13 +8,26 @@ import { View } from '@/ui';
 import ChatBody from './chat-body';
 import ChatHeader from './chat-header';
 import ChatInput from './chat-input';
+import { RouteProp, useRoute } from '@react-navigation/native';
+import { ChatBase } from './chat-list-screen';
+
+// export type ChatUser = {
+//   id: number;
+//   name: string;
+//   email: string;
+//   last_message: string;
+//   imageSource: string;
+//   unread_messages: boolean;
+// };
 
 const ChatScreen = () => {
+  const params: ChatBase = useRoute().params?.chat;
+
   return (
     <View className="p:2 flex h-screen flex-1 flex-col justify-between sm:p-6">
       <ScrollView>
-        <ChatHeader />
-        <ChatBody />
+        <ChatHeader chatUser={params} />
+        <ChatBody chatUser={params} />
       </ScrollView>
       <ChatInput />
     </View>