Skip to content

Commit

Permalink
Feat: chat history implemented
Browse files Browse the repository at this point in the history
  • Loading branch information
@Latiah @911samuel
Latiah authored and 911samuel committed Jul 23, 2024
1 parent 1780d55 commit 7a4f0dc
Show file tree
Hide file tree
Showing 8 changed files with 271 additions and 211 deletions.
38 changes: 25 additions & 13 deletions app/Appointments/voice-call/writeReview.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import React, { useState, useEffect } from "react";
import { View, Text, TouchableOpacity, Image, TextInput, StyleSheet, Modal, ScrollView, SafeAreaView, Pressable } from "react-native";
import { router } from "expo-router";
import { router, useLocalSearchParams } from "expo-router";
import { useFonts } from 'expo-font';
import FiveStarRating from "../doctorcard/star";
import { supabase } from "@/app/supabase";

interface CustomCheckBoxProps {
selected: boolean;
Expand All @@ -21,25 +22,30 @@ export default function Writereview() {
const [isModalVisible, setIsModalVisible] = useState(false);
const [isoption, setIsoption] = useState("");
const [text, setText] = useState('');
const [fontLoaded] = useFonts({
'UrbanistBold': require('../../../assets/fonts/Urbanist-Bold.ttf'),
'UrbanistRegular': require("../../../assets/fonts/Urbanist-Regular.ttf"),
'Urbanist-SemiBold': require("../../../assets/fonts/Urbanist-SemiBold.ttf"),
'UrbanistMedium': require("../../../assets/fonts/Urbanist-Medium.ttf")
});
const [name, setName]=useState("");
const [image, setImage]=useState("");
const {appointmentId}=useLocalSearchParams();

const handleChangeText = (value: string) => {
setText(value);
};

const isSubmitEnabled = text.trim().length > 0 && isoption.length > 0;

if (!fontLoaded) {
return null;
}


const Options = ["Yes", "No"];

useEffect(()=>{
const fetchDoctor=async()=>{
const {data, error}=await supabase.from("doctor").select("*").eq("id",appointmentId).single();
if(data){
setName(data.name);
console.log(data.name);
setImage(data.image)
}
if (error) throw error}
fetchDoctor()},[])
return (
<>
<Modal
Expand Down Expand Up @@ -71,10 +77,10 @@ export default function Writereview() {
<Text className="text-[#212121] font-UrbanistBold text-[24px] pl-5">Write a Review</Text>
</View>
<View className="w-[370px] flex justify-center items-center gap-5 mb-2">
<Image source={require("../../../assets/doctors/Ellipse.png")} />
<Image source={{uri:image}} style={styles.doctorImage}/>
<View>
<Text className="text-[#212121] font-UrbanistBold text-[20px] text-center">How was your experience </Text>
<Text className="text-[#212121] font-UrbanistBold text-[20px] text-center">with Dr. Drake Boeson?</Text>
<Text className="text-[#212121] font-UrbanistBold text-[20px] text-center">with {name}?</Text>
</View>
<View className=" w-[350px] flex flex-row justify-center pb-3">
<SafeAreaView>
Expand All @@ -92,7 +98,7 @@ export default function Writereview() {
placeholder="Your review here..."
style={styles.textInput}
/>
<Text className="text-[#212121] font-UrbanistBold text-[20px] pb-5 pt-3">Would you recommend Dr. Drake Boeson to your friends?</Text>
<Text className="text-[#212121] font-UrbanistBold text-[20px] pb-5 pt-3">Would you recommend {name} to your friends?</Text>
<View className="flex flex-row items-center pl-2 justify-between w-[130px]">
{Options.map((option, index) => (
<View key={index} className="flex flex-row items-center justify-center gap-2">
Expand Down Expand Up @@ -184,4 +190,10 @@ const styles = StyleSheet.create({
width: '100%',
minHeight: 100,
},
doctorImage: {
width: 120,
height: 120,
borderRadius: 60,
marginBottom: 10,
},
});
73 changes: 27 additions & 46 deletions app/chat-history/VideoCall.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,64 +1,45 @@
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").eq("status", "Completed")
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
Loading

0 comments on commit 7a4f0dc

Please sign in to comment.