Skip to content

Commit

Permalink
feat: chat, calls history implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
@Latiah
Latiah committed Jul 3, 2024
1 parent d9574fc commit aee3aac
Show file tree
Hide file tree
Showing 8 changed files with 173 additions and 148 deletions.
72 changes: 27 additions & 45 deletions app/chat-history/VideoCall.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,64 +1,46 @@
import React from "react";
import React, {useState, useEffect} from "react";
import { View, ScrollView } from "react-native";
import DoctorVideo from "@/components/cards/DoctorVideo";
import { useRouter } from "expo-router";
import { DoctorCard } from "./types"; // Import the types

import { DoctorCard } from "./types";
import { supabase } from "../supabase";
const VideoCall = () => {
const router = useRouter();
const [appointment, setAppointment]=useState<any[]>([]);

const docCards: DoctorCard[] = [
{
name: "Dr. Randy Wigham",
callDay: "Wednesday",
callTime: "1:00 PM",
images: require("../../assets/doctors/doc2.png"),
},
{
name: "Dr. Jenny Watson",
callDay: "Wednesday",
callTime: "1:00 PM",
images: require("../../assets/doctors/doc3.png"),
},
{
name: "Dr. Raul Zirkind",
callDay: "Wednesday",
callTime: "1:00 PM",
images: require("../../assets/doctors/doc1.png"),
},
{
name: "Dr. Elijah Baranick",
callDay: "Wednesday",
callTime: "1:00 PM",
images: require("../../assets/doctors/doc2.png"),
},
{
name: "Dr. Stephen Shute",
callDay: "Wednesday",
callTime: "1:00 PM",
images: require("../../assets/doctors/doc5.png"),
},
];

const handlePress = (doctor: DoctorCard) => {
useEffect(()=>{
const fetchAppointments=async()=>{
const {data, error}=await supabase.auth.getUser();
if(error) throw error;
const userId=data?.user?.id;
const {data:AppointmentData, error:Error}=await supabase.from("appointment").select("*, doctor(name,image)").eq("patient_id", userId).eq("package","Video Call")
if(Error) throw Error
if(AppointmentData){
setAppointment(AppointmentData);
}
}
fetchAppointments();
},[])

const handlePress = (appointmentId:any) => {
router.push({
pathname: "/chat-history/VideoRecord",
params: { doctor: JSON.stringify(doctor) },
params: {appointmentId},
});
};

return (
<View style={{ backgroundColor: "white" }}>
<ScrollView style={{ backgroundColor: "#FAFAFA", paddingBottom: 6 }}>
{docCards.map((doctor, index) => (
{appointment.map((appointments, index) => (
<DoctorVideo
key={index}
onPress={() => handlePress(doctor)}
doctorName={doctor.name}
doctorImage={doctor.images}
callType="Video Call"
callDay={doctor.callDay}
callTime={doctor.callTime}
onPress={() => handlePress(appointments.id)}
doctorName={appointments.doctor.name}
doctorImage={appointments.doctor.image}
callType={appointments.package}
callDay={appointments.appointment_date}
callTime={appointments.appointment_time.slice(0,5)}
isVideoCallScreen={false}
/>
))}
Expand Down
47 changes: 31 additions & 16 deletions app/chat-history/VideoRecord.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,20 +14,22 @@ import PlayButton from "@/components/cards/PlayButton";
import { useRouter, useLocalSearchParams } from "expo-router";
import { SvgXml } from "react-native-svg";
import AsyncStorage from "@react-native-async-storage/async-storage";

import { DoctorCard } from "./types";
import { moreTransparent } from "@/assets/icons/more";
import { back } from "@/assets/icons/userprofile/icons";
import { supabase } from "../supabase";

const VideoRecord: React.FC = () => {
const router = useRouter();
const { doctor: doctorString } = useLocalSearchParams();
const doctor: DoctorCard = doctorString
? JSON.parse(doctorString as string)
: null;



const {appointmentId}=useLocalSearchParams();
const [modalVisible, setModalVisible] = useState(false);
const [videoDuration, setVideoDuration] = useState<number>(0);
const[ name, setName]=useState("");
const[date, setDate]=useState("");
const[time, setTime]=useState("");
const[packageType, setPackage]=useState("");
const[image, setImage]=useState("");

useEffect(() => {
const fetchDuration = async () => {
Expand All @@ -40,9 +42,7 @@ const VideoRecord: React.FC = () => {
fetchDuration();
}, []);

if (!doctor) {
return null;
}


const handlePress = () => {
router.push("/chat-history/PlayRecord");
Expand All @@ -64,7 +64,7 @@ const VideoRecord: React.FC = () => {
setModalVisible(false);
};

const { name, images, callDay, callTime } = doctor;


const formatTime = (timeInSeconds: number) => {
const hours = Math.floor(timeInSeconds / 3600);
Expand All @@ -79,6 +79,21 @@ const VideoRecord: React.FC = () => {
return `${minutes}:${String(seconds).padStart(2, "0")} minutes`;
}
};
useEffect(()=>{
const fetchAppointments=async()=>{
const {data:AppointmentData, error:Error}=await supabase.from("appointment").select("*, doctor(name,image)").eq("id",appointmentId).single();
if(Error) throw Error
if(AppointmentData){
setName(AppointmentData.doctor.name);
setPackage(AppointmentData.package);
setImage(AppointmentData.doctor.image);
setTime(AppointmentData.appointment_time);
setDate(AppointmentData.appointment_date);

}
}
fetchAppointments();
},[appointmentId])

return (
<SafeAreaView style={areaView}>
Expand All @@ -89,12 +104,12 @@ const VideoRecord: React.FC = () => {
<SvgXml xml={moreTransparent} onPress={handleMorePress} />
</View>
<View style={{ rowGap: 28, backgroundColor: "#FAFAFA" }}>
<DoctorVideo
<DoctorVideo
doctorName={name}
doctorImage={images}
callType="Video Call"
callDay={callDay}
callTime={callTime}
doctorImage={image}
callType={packageType}
callDay={date}
callTime={time.slice(0, 5)}
isVideoCallScreen={true}
/>
<View
Expand Down
55 changes: 33 additions & 22 deletions app/chat-history/chatHistory.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
Modal,
Dimensions,
} from "react-native";
import { useState } from "react";
import { useState, useEffect } from "react";
import { NavigationHeader } from "@/components/NavigationHeader";
import { Icon } from "@/components/Icon";
import { SvgXml } from "react-native-svg";
Expand All @@ -23,39 +23,54 @@ import Chat from "@/components/chats/chat";
import Index from "./VideoCall";
import { MessagesType, messages } from "./data";
import VoiceCalls from "./voiceCalls";

import { supabase } from "../supabase";

export default function Chathistory() {
const y = Dimensions.get("screen").height;
const [selected, setSelected] = useState("Messages");
const [isModalVisible, setIsModalVisible] = useState(false);
const [visible, setVisible] = useState(false);
const [docName, setDocname] = useState("");
const [appointment, setAppointment]=useState<any[]>([]);
const handleDocName = (doc: string) => {
setDocname(doc);
setIsModalVisible(true);
};
const renderItems = ({ item }: { item: MessagesType }) => {

useEffect(()=>{
const fetchAppointments=async()=>{
const {data, error}=await supabase.auth.getUser();
if(error) throw error;
const userId=data?.user?.id;
const {data:AppointmentData, error:Error}=await supabase.from("appointment").select("*, doctor(name,image)").eq("patient_id", userId).eq("package","Messaging")
if(Error) throw Error
if(AppointmentData){
setAppointment(AppointmentData);
}
}
fetchAppointments();
},[])
const renderHistory = (appointment: any, index:number) => {
return (
<View className="flex flex-row w-1/1 justify-between items-center py-3 ">
<View key={index} className="flex flex-row w-1/1 justify-between items-center py-3 ">
<View className="flex-none w-[20%]">
<Image source={item.image} style={{ width: 58, height: 58 }} />
<Image source={{uri:appointment.doctor.image}} style={{ width: 58, height: 58 }} />
</View>
<TouchableOpacity
className="flex-auto w-[73%] pl-2"
onPress={() => handleDocName(item.name)}
onPress={() => handleDocName(appointment.doctor.name)}
>
<Text className="font-UrbanistBold text-[16px] pb-2">
{item.name}
{appointment.doctor.name}
</Text>
<Text className="font-UrbanistRegular text-grey">{item.message}</Text>
<Text className="font-UrbanistRegular text-grey">.....</Text>
</TouchableOpacity>
<View className="flex-auto w-[30%] justify-start">
<Text className="font-UrbanistRegular text-grey pb-2 text-right">
{item.date}
{appointment.appointment_date}
</Text>
<Text className="font-UrbanistRegular text-grey text-right">
{item.time}
{appointment.appointment_time.slice(0,5)}
</Text>
</View>
</View>
Expand Down Expand Up @@ -125,7 +140,7 @@ export default function Chathistory() {
</View>
</View>

<Chat
{/* <Chat
direction="end"
message="Hi, good afternoon Dr. Drake... 😁😁"
time="16:00 PM"
Expand Down Expand Up @@ -155,13 +170,13 @@ export default function Chathistory() {
Do you know anything doc?"
time="16:02 PM"
color="lightblue"
/>
/> */}
<View className={`w-[100%] flex items-end my-3`}>
<View
className={` rounded-xl p-4 w-3/4 flex justify-end gap-r-2`}
>
<View className={` w-[73%] flex-row gap-x-4 pb-3`}>
<Image
{/* <Image
source={require("../../assets/images/chat/leg.png")}
style={{ width: 100, height: 100 }}
resizeMode="contain"
Expand All @@ -170,7 +185,7 @@ export default function Chathistory() {
source={require("../../assets/images/chat/leg1.png")}
style={{ width: 100, height: 100 }}
resizeMode="contain"
/>
/> */}
</View>
{/* <View className="flex-row items-center gap-x-1 justify-end">
<Text className={`font-UrbanistRegular text-[10px]`}>16:03 PM</Text>
Expand Down Expand Up @@ -249,16 +264,12 @@ export default function Chathistory() {
</View>
<View className="w-[100%] border-b-[2px] border-[#EEEEEE] relative bottom-[2.6px] z-[-1]"></View>
</View>

{selected === "Messages" && (
<FlatList
data={messages}
renderItem={renderItems}
style={{ height: "82%" }}
showsVerticalScrollIndicator={false}
/>
<ScrollView style={{ height: "82%" }} showsVerticalScrollIndicator={false}>
{appointment.map((appointmentItem,index) => renderHistory(appointmentItem,index))}
</ScrollView>
)}

{selected==="Calls"&&<VoiceCalls/>}
{selected === "Videos" && <Index />}
</View>
</>
Expand Down
Loading

0 comments on commit aee3aac

Please sign in to comment.