Skip to content

Commit d0a41ec

Browse files
AdadieAdadie
authored
Feature: Chat history and single chat view screens (#57)
#### What does this PR do? Add chat history screen and single chat view and a menu for doing operations on a chat like deleting, exporting chat. #### Description of Task to be completed? - [x] Create screen that shows list of people and chat history that shows all the conversations took place with specific time and date #### How should this be manually tested? Clone the repo and npm install after when you reach on the home screen go on the history tab you will find the chat history press the history you want to look out then click on more icon to turn on the pop up screen #### Any background context you want to provide? Use expo to start easily ### Screenshots ![Screenshot_20240518-091145](https://github.com/atlp-rwanda/commanders-rn-medica/assets/118519513/705affa8-d177-42ab-8637-00cb8bbdda84) ![Screenshot_20240518-091153](https://github.com/atlp-rwanda/commanders-rn-medica/assets/118519513/34291b9a-26b8-48e6-a670-e6f5c47f6b9a) ![Screenshot_20240518-091158](https://github.com/atlp-rwanda/commanders-rn-medica/assets/118519513/d9cc2f94-2a97-4c8a-88e0-4c91dd5ae1e8)
2 parents 5b2b549 + 782d6c7 commit d0a41ec

File tree

19 files changed

+285
-1
lines changed

19 files changed

+285
-1
lines changed

‎app/(tabs)/history.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { View, Text } from "react-native";
22
import React from "react";
3+
import Chathistory from "../chat-history/chatHistory";
34

45
const History = () => {
56
return (
67
<View>
7-
<Text>History</Text>
8+
<Chathistory/>
89
</View>
910
);
1011
};

‎app/chat-history/chatHistory.tsx‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
import { Text, View, ScrollView, Image, Pressable, FlatList, TouchableOpacity, Modal, Dimensions } from "react-native";
2+
import { useState } from "react";
3+
import { NavigationHeader } from "@/components/NavigationHeader";
4+
import { Icon } from "@/components/Icon";
5+
import { SvgXml } from "react-native-svg";
6+
import { searchDark } from "@/assets/icons/search";
7+
import { moreTransparent } from "@/assets/icons/more";
8+
import { messages, MessagesType } from "./data";
9+
import { back } from "@/assets/icons/userprofile/icons";
10+
import {doubleTick } from "@/assets/icons/doubletick";
11+
import { download } from "@/assets/icons/download";
12+
import { deleteBtn,deleteRed } from "@/assets/icons/delete";
13+
import Chat from "@/components/chats/chat";
14+
15+
16+
export default function Chathistory() {
17+
const y=Dimensions.get("screen").height;
18+
const [selected, setSelected] = useState("Messages");
19+
const [isModalVisible, setIsModalVisible] = useState(false);
20+
const [visible, setVisible] = useState(false);
21+
const [docName, setDocname] = useState('');
22+
const handleDocName = (doc: string) => {
23+
setDocname(doc);
24+
setIsModalVisible(true);
25+
}
26+
const renderItems = ({ item }: { item: MessagesType }) => {
27+
return (
28+
<View className="flex flex-row w-1/1 justify-between items-center py-3 ">
29+
<View className="flex-none w-[20%]">
30+
<Image source={item.image} style={{ width: 58, height: 58 }} />
31+
</View>
32+
<TouchableOpacity className="flex-auto w-[73%] pl-2" onPress={() => handleDocName(item.name)}>
33+
<Text className="font-UrbanistBold text-[16px] pb-2">{item.name}</Text>
34+
<Text className="font-UrbanistRegular text-grey">{item.message}</Text>
35+
</TouchableOpacity>
36+
<View className="flex-auto w-[30%] justify-start">
37+
<Text className="font-UrbanistRegular text-grey pb-2 text-right">{item.date}</Text>
38+
<Text className="font-UrbanistRegular text-grey text-right">{item.time}</Text>
39+
</View>
40+
</View>
41+
)
42+
}
43+
return (
44+
<>
45+
<Modal visible={isModalVisible} transparent={false}>
46+
<View className={`${visible? '': 'hidden'} absolute w-[100%] right-0 z-[0] top-[5px]`}>
47+
<View className="w-[100%]">
48+
<View className="w-[37%] relative top-[50px] left-[59%] p-4 right-0 bg-white rounded-xl">
49+
<TouchableOpacity className="flex-row gap-2 py-2">
50+
<SvgXml xml={deleteBtn} />
51+
<Text className="font-UrbanistSemiBold">Clear chat</Text>
52+
</TouchableOpacity>
53+
<View className="w-[85%] ml-3 pt-2 border-b-[1px] border-grey opacity-40"/>
54+
<TouchableOpacity className="flex-row gap-2 pb-2 pt-4 ">
55+
<SvgXml xml={download} />
56+
<Text className="font-UrbanistSemiBold" > Export chat</Text>
57+
</TouchableOpacity>
58+
<View className="w-[85%] ml-3 pb-2 border-b-[1px] border-grey opacity-40"/>
59+
<TouchableOpacity className="flex-row gap-2 pt-3" onPress={()=>{setVisible(false)}} >
60+
<SvgXml xml={deleteRed} stroke={'#F75555'} />
61+
<Text className="font-UrbanistSemiBold text-[#F75555]">Delete chat</Text>
62+
</TouchableOpacity>
63+
</View>
64+
</View>
65+
</View>
66+
<View className='w-1/1 pt-7 mx-4'>
67+
<View className='flex-row items-center justify-between pb-5'>
68+
<View className='flex-row items-center justify-center ml-0'>
69+
<TouchableOpacity onPress={() => setIsModalVisible(false)}>
70+
<SvgXml xml={back} />
71+
</TouchableOpacity>
72+
<Text className="text-[22px] px-2 font-UrbanistBold">{docName}</Text>
73+
</View>
74+
<View className='flex-row items-center justify-center gap-3 mx-1'>
75+
<SvgXml xml={searchDark} />
76+
<SvgXml xml={moreTransparent} onPress={() => setVisible(!visible)} />
77+
</View>
78+
</View>
79+
<ScrollView showsVerticalScrollIndicator={false} className="mb-5 z-[-1]">
80+
<View className="flex-row justify-center items-center my-3">
81+
<View className="w-1/3 bg-[#75757512] justify-center items-center rounded-xl">
82+
<Text className="text-[13px] p-1 text-[#757575] font-UrbanistSemiBold">Session started</Text>
83+
</View>
84+
</View>
85+
86+
<Chat direction="end"
87+
message="Hi, good afternoon Dr. Drake... 😁😁"
88+
time="16:00 PM"
89+
color="lightblue"
90+
/>
91+
<Chat direction="end"
92+
message="I'm Andrew, I have a problem with my immune system 😢"
93+
time="16:00 PM"
94+
color="lightblue"
95+
/>
96+
<Chat direction="start"
97+
message="Hello, good afternoon too Andrew 😁"
98+
time="16:01 PM"
99+
color="lightgrey"
100+
/>
101+
<Chat direction="start"
102+
message="Can you tell me the problem you are having? So that I can identify it."
103+
time="16:01 PM"
104+
color="lightgrey"
105+
/>
106+
<Chat direction="end"
107+
message="Recently I often feel unwell. I also sometimes experience pain in the legs, and I don't know why 😭😭
108+
Do you know anything doc?"
109+
time="16:02 PM"
110+
color="lightblue"
111+
/>
112+
<View className={`w-[100%] flex items-end my-3`}>
113+
<View className={` rounded-xl p-4 w-3/4 flex justify-end gap-r-2`}>
114+
<View className={` w-[73%] flex-row gap-x-4 pb-3`}>
115+
<Image source={require("../../assets/images/chat/leg.png")} style={{ width: 100, height: 100 }} resizeMode="contain" />
116+
<Image source={require("../../assets/images/chat/leg1.png")} style={{ width: 100, height: 100 }} resizeMode="contain" />
117+
</View>
118+
{/* <View className="flex-row items-center gap-x-1 justify-end">
119+
<Text className={`font-UrbanistRegular text-[10px]`}>16:03 PM</Text>
120+
<SvgXml xml={doubleTick} stroke={'black'} />
121+
</View> */}
122+
</View>
123+
</View>
124+
</ScrollView>
125+
126+
</View>
127+
128+
</Modal>
129+
<View className='w-1/1 pt-10 mx-4 '>
130+
<View className='flex-row items-center justify-between'>
131+
<View className='flex-row items-center justify-center'>
132+
<Image source={require("../../assets/images/chat/logo.png")} style={{ width: 28, height: 28 }} />
133+
<Text className="text-[24px] font-UrbanistBold px-4">History</Text>
134+
</View>
135+
<View className='flex-row items-center justify-center gap-3 mx-1'>
136+
<SvgXml xml={searchDark} />
137+
<SvgXml xml={moreTransparent} />
138+
</View>
139+
</View>
140+
<View className="my-4 w-1/1 justify-between mr-3">
141+
<View className="flex-row justify-between w-[100%]" >
142+
<Pressable className=" flex-initial items-center w-1/3" onPress={() => setSelected("Messages")}>
143+
<Text className={`font-UrbanistSemiBold text-[18px] ${selected === 'Messages' ? 'text-lightblue' : 'text-grey'} pb-2`}>Messages</Text>
144+
<View className={`w-[100%] h-[4px] bg-lightblue rounded-xl ${selected === 'Messages' ? '' : 'hidden'}`} />
145+
</Pressable>
146+
<Pressable className="flex-initial items-center w-1/3" onPress={() => setSelected("Calls")}>
147+
<Text className={`font-UrbanistSemiBold text-[18px] ${selected === 'Calls' ? 'text-lightblue' : 'text-grey'} pb-2`}>Voice Call</Text>
148+
<View className={`w-[100%] h-[4px] bg-lightblue rounded-xl ${selected === 'Calls' ? '' : 'hidden'}`} />
149+
</Pressable>
150+
<Pressable className="flex-initial items-center w-1/3">
151+
<Text className={`font-UrbanistSemiBold text-[18px] ${selected === 'Videos' ? 'text-lightblue' : 'text-grey'} pb-2`} onPress={() => setSelected("Videos")}>
152+
Video Call</Text>
153+
<View className={`w-[100%] h-[4px] bg-lightblue rounded-xl ${selected === 'Videos' ? '' : 'hidden'}`}></View>
154+
</Pressable>
155+
</View>
156+
<View className="w-[100%] border-b-[2px] border-[#EEEEEE] relative bottom-[2.6px] z-[-1]" ></View>
157+
</View>
158+
159+
<FlatList data={messages} renderItem={renderItems} style={{ height:'82%' }} showsVerticalScrollIndicator={false} />
160+
161+
</View>
162+
</>
163+
)
164+
}

‎app/chat-history/data.ts‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { ImageSourcePropType } from "react-native";
2+
3+
export type MessagesType={
4+
id: number;
5+
name: string;
6+
message: string;
7+
time: string;
8+
date: string;
9+
image: ImageSourcePropType;
10+
}
11+
12+
export const messages: Array<MessagesType> =
13+
[
14+
{
15+
id: 1,
16+
name: "Dr. Drake Boeson",
17+
message: "My pleasure. All the best ...",
18+
time: "10:00 AM",
19+
date: "Today",
20+
image: require("../../assets/images/chat/doc1.png"),
21+
},
22+
{
23+
id: 2,
24+
name: "Dr. Aidan Allende",
25+
message: "Your solution is great! 🔥",
26+
time: "18:00 PM",
27+
date: "Yesterday",
28+
image: require("../../assets/images/chat/doc2.png"),
29+
},
30+
{
31+
id: 3,
32+
name: "Dr. Salvatore Heredia",
33+
message: "Thanks for the help 🙏",
34+
time: "10:30 AM",
35+
date: "20/12/2022",
36+
image: require("../../assets/images/chat/doc3.png"),
37+
},
38+
{
39+
id: 4,
40+
name: "Dr. Delaney Mangino",
41+
message: "I have recovered, thank ...",
42+
time: "17:00 PM",
43+
date: "14/12/2022",
44+
image: require("../../assets/images/chat/doc4.png"),
45+
},
46+
{
47+
id: 5,
48+
name: "Dr. Beckett Calger",
49+
message: "I went there yesterday 😄",
50+
time: "09:30 AM",
51+
date: "26/11/2022",
52+
image: require("../../assets/images/chat/doc5.png"),
53+
},
54+
{
55+
id: 6,
56+
name: "Dr. Bernard Bliss",
57+
message: "IDK what else is there to do ...",
58+
time: "10:00 AM",
59+
date: "09/11/2022",
60+
image: require("../../assets/images/chat/doc6.png"),
61+
},
62+
{
63+
id: 7,
64+
name: "Dr. Jada Srnsky",
65+
message: "I advise you to take a break",
66+
time: "15:30 PM",
67+
date: "09/11/2022",
68+
image: require("../../assets/images/chat/doc7.png"),
69+
},
70+
71+
]

‎assets/icons/delete.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
2+
export const deleteBtn = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.7414 7.96191C15.7414 14.6445 16.7033 17.6651 10.2335 17.6651C3.76287 17.6651 4.74461 14.6445 4.74461 7.96191" stroke="#212121" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M16.9714 5.39975H3.5127" stroke="#212121" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M13.0965 5.39981C13.0965 5.39981 13.537 2.26172 10.2417 2.26172C6.9473 2.26172 7.38777 5.39981 7.38777 5.39981" stroke="#212121" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
3+
`
4+
export const deleteRed = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.7414 7.96191C15.7414 14.6445 16.7033 17.6651 10.2335 17.6651C3.76287 17.6651 4.74461 14.6445 4.74461 7.96191" stroke="#F75555" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M16.9714 5.39975H3.5127" stroke="#F75555" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M13.0965 5.39981C13.0965 5.39981 13.537 2.26172 10.2417 2.26172C6.9473 2.26172 7.38777 5.39981 7.38777 5.39981" stroke="#F75555" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
5+
`

‎assets/icons/doubletick.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const doubleTick= `<svg width="16" height="8" viewBox="0 0 16 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.106 0.164958C15.3831 0.407413 15.4112 0.828588 15.1687 1.10568L9.33538 7.77235C9.21574 7.90908 9.04547 7.99106 8.86397 7.99932C8.68247 8.00758 8.50546 7.9414 8.37389 7.8161L6.69564 6.21776L5.33538 7.77235C5.21574 7.90908 5.04547 7.99106 4.86397 7.99932C4.68247 8.00758 4.50546 7.9414 4.37389 7.8161L0.87389 4.48277C0.60727 4.22884 0.596977 3.80686 0.850902 3.54024C1.10483 3.27362 1.52681 3.26333 1.79343 3.51725L4.78987 6.371L5.72926 5.29741L4.87389 4.48277C4.60727 4.22884 4.59698 3.80686 4.8509 3.54024C5.10483 3.27362 5.52681 3.26333 5.79343 3.51725L8.78987 6.371L14.1653 0.227673C14.4077 -0.0494184 14.8289 -0.0774967 15.106 0.164958Z" fill="white"/><path d="M11.1687 1.10568C11.4112 0.828588 11.3831 0.407413 11.106 0.164958C10.8289 -0.0774967 10.4077 -0.0494184 10.1653 0.227673L7.83194 2.89434C7.58949 3.17143 7.61757 3.59261 7.89466 3.83506C8.17175 4.07752 8.59292 4.04944 8.83538 3.77235L11.1687 1.10568Z" fill="white"/></svg>`

‎assets/icons/download.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export const download=`<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.89909 12.3262V2.29199" stroke="#212121" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12.3297 9.88672L9.89973 12.3267L7.46973 9.88672" stroke="#212121" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
2+
<path d="M13.642 6.04883C16.6245 6.32383 17.7087 7.44049 17.7087 11.8822C17.7087 17.7988 15.7828 17.7988 10.0003 17.7988C4.21616 17.7988 2.29199 17.7988 2.29199 11.8822C2.29199 7.44049 3.37533 6.32383 6.35866 6.04883" stroke="#212121" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
3+
`

‎assets/icons/more.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@ export const more = `<svg width="29" height="28" viewBox="0 0 29 28" fill="none"
22
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.83301 13.9999C2.83301 7.55992 8.04801 2.33325 14.4997 2.33325C20.9397 2.33325 26.1663 7.55992 26.1663 13.9999C26.1663 20.4399 20.9397 25.6666 14.4997 25.6666C8.04801 25.6666 2.83301 20.4399 2.83301 13.9999ZM9.27301 15.3999C8.50301 15.3999 7.87301 14.7699 7.87301 13.9999C7.87301 13.2299 8.50301 12.6011 9.27301 12.6011C10.043 12.6011 10.6613 13.2299 10.6613 13.9999C10.6613 14.7699 10.043 15.3999 9.27301 15.3999ZM13.0997 13.9999C13.0997 14.7699 13.7297 15.3999 14.4997 15.3999C15.2697 15.3999 15.888 14.7699 15.888 13.9999C15.888 13.2299 15.2697 12.6011 14.4997 12.6011C13.7297 12.6011 13.0997 13.2299 13.0997 13.9999ZM18.3263 13.9999C18.3263 14.7699 18.9447 15.3999 19.7263 15.3999C20.4963 15.3999 21.1147 14.7699 21.1147 13.9999C21.1147 13.2299 20.4963 12.6011 19.7263 12.6011C18.9447 12.6011 18.3263 13.2299 18.3263 13.9999Z" fill="#246BFD"/>
33
</svg>`;
44

5+
export const moreTransparent=`<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
6+
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.0007 3.2085C19.96 3.2085 24.7923 8.03966 24.7923 14.0002C24.7923 19.9595 19.96 24.7918 14.0007 24.7918C8.04015 24.7918 3.20898 19.9595 3.20898 14.0002C3.20898 8.04083 8.04132 3.2085 14.0007 3.2085Z" stroke="#212121" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
7+
<path d="M18.5966 14.015H18.6071" stroke="#212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
8+
<path d="M13.9189 14.015H13.9294" stroke="#212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
9+
<path d="M9.24215 14.015H9.25265" stroke="#212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
10+
</svg>`
11+
512
export const moreOutlinedIcon = `<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
613
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.0007 3.20898C19.96 3.20898 24.7923 8.04015 24.7923 14.0007C24.7923 19.96 19.96 24.7923 14.0007 24.7923C8.04015 24.7923 3.20898 19.96 3.20898 14.0007C3.20898 8.04132 8.04132 3.20898 14.0007 3.20898Z" stroke="#212121" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
714
<path d="M18.5966 14.015H18.6071" stroke="#212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

‎assets/icons/search.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,8 @@ export const search = `<svg width="20" height="20" viewBox="0 0 20 20" fill="non
22
<circle cx="9.80589" cy="9.80541" r="7.49047" stroke="#BDBDBD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
33
<path d="M15.0156 15.4043L17.9523 18.3334" stroke="#BDBDBD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
44
</svg>`;
5+
6+
export const searchDark=`<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
7+
<circle cx="13.7279" cy="13.7279" r="10.4867" stroke="#212121" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
8+
<path d="M21.0215 21.5664L25.1328 25.6671" stroke="#212121" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
9+
</svg>`

‎assets/images/chat/doc1.png‎

27.2 KB
Loading

‎assets/images/chat/doc2.png‎

26.1 KB
Loading

0 commit comments

Comments
 (0)