Skip to content

Commit

Permalink
Feature: History chats calls implementation (#154)
Browse files Browse the repository at this point in the history
What does this PR do?
Display Message chat history screen for appointments that happened
between a patient and a doctor. It also shows completed appointments

Description of Task to be completed?

Fetch booked appointment details from the database
Track appointment booked with the current time to mark it as booked if
it is passed that time

How should this be manually tested?
Log in and go to history you can switch between messages where you will
find what was discussed in chats you had with a doctor.
Navigate to the appointment screens and click on completed appointment
to see the appointments which are passed the current time as they are
considered completed you can also leave a review when the appointment
has been completed by clicking on the leave review button

Any background context you want to provide?
N/A
  • Loading branch information
Adadie authored Jul 25, 2024
2 parents 480a2ad + a525f4e commit 1b50ac5
Show file tree
Hide file tree
Showing 17 changed files with 269 additions and 341 deletions.
13 changes: 1 addition & 12 deletions app/(tabs)/articles.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,7 @@ const Articles = () => {
return (
<>
<Article/>
</>




// <Article/>
// <SeeAllArticles/>
// <ArticlesDetails/>
// <BookMarkedArticle/>



</>
);
};

Expand Down
18 changes: 9 additions & 9 deletions app/(tabs)/profile.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ const Profile = () => {
nextTo: "notification",
leftIcon: icons.notification,
},
{ text: t("profile.payment"), nextTo: "payment", leftIcon: icons.wallet },
// { text: t("profile.payment"), nextTo: "payment", leftIcon: icons.wallet },
{
text: t("profile.security"),
nextTo: "security",
Expand All @@ -101,12 +101,12 @@ const Profile = () => {
nextTo: "language",
leftIcon: icons.language,
},
{
text: t("profile.dark_mode"),
nextTo: "mode",
leftIcon: icons.eye,
mode: true,
},
// {
// text: t("profile.dark_mode"),
// nextTo: "mode",
// leftIcon: icons.eye,
// mode: true,
// },
{
text: t("profile.help_center"),
nextTo: "help",
Expand Down Expand Up @@ -192,9 +192,9 @@ const Profile = () => {
{t("profile.title")}
</Text>
</View>
<Touchable>
{/* <Touchable>
<SvgXml xml={moreOutlinedIcon} className="self-end" />
</Touchable>
</Touchable> */}
</View>
<ScrollView
className="flex-1 p-6"
Expand Down
6 changes: 6 additions & 0 deletions app/Appointments/voice-call/writeReview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -264,4 +264,10 @@ const styles = StyleSheet.create({
width: '100%',
minHeight: 100,
},
doctorImage: {
width: 120,
height: 120,
borderRadius: 60,
marginBottom: 10,
},
});
30 changes: 4 additions & 26 deletions app/Doctors/searchDoctor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,44 +8,22 @@ import { View, Image, Animated,
Easing
} from "react-native";
import { SearchInput } from "../../components/searchinput2";
import { UIActivityIndicator } from "react-native-indicators";

export default function searchDoctor() {

const [selectedCategory, setSelectedCategory] = useState("all");
const [searchQuery, setSearchQuery] = useState("");
const [selectedRating, setSelectedRating] = useState(0);
const rotateValue = new Animated.Value(0);
const rotate = rotateValue.interpolate({
inputRange: [0, 1],
outputRange: ["0deg", "360deg"],
});
const [loading, setLoading]=useState(true);

const spin = () => {
rotateValue.setValue(0);
Animated.timing(rotateValue, {
toValue: 1,
duration: 2500,
easing: Easing.linear,
useNativeDriver: true,
}).start(() => {
setTimeout(() => {
}, 2000);
});
};
useEffect(() => {

spin();

}
)


return (
<View className="flex-1 bg-white px-4 py-5">
<View className="flex-1 justify-center items-center">
<View>
<Animated.View style={{ transform: [{ rotate }] }}>
<Image source={require("../../assets/doctors/loading.png")} />
</Animated.View>
<UIActivityIndicator color={"#246BFD"} size={32} />
</View>
</View>
</View>
Expand Down
8 changes: 2 additions & 6 deletions app/articles/ArticlesDetails.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
Share,
} from "react-native";
import { supabase } from "../supabase";

import { UIActivityIndicator } from "react-native-indicators";
interface Article {
id: string;
title: string;
Expand Down Expand Up @@ -209,11 +209,7 @@ export default function ArticlesDetails() {
if (loading) {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text
style={{ fontSize: 20, fontFamily: "UrbanistBold", color: "#212121" }}
>
Loading...
</Text>
<UIActivityIndicator color={"#246BFD"} size={32} />
</View>
);
}
Expand Down
4 changes: 2 additions & 2 deletions app/articles/ArticlesPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { router, useLocalSearchParams, useNavigation } from "expo-router";
import FieldComponent from "@/components/FieldComponent";
import ArticleCard from "@/components/cards/ArticleCard";
import { supabase } from "../supabase";

import { UIActivityIndicator } from "react-native-indicators";
interface Article {
id: number;
title: string;
Expand Down Expand Up @@ -76,7 +76,7 @@ export default function Article() {
if (loading) {
return (
<View style={styles.loadingContainer}>
<Text style={styles.loadingText}>Loading...</Text>
<UIActivityIndicator color={"#246BFD"} size={32} />
</View>
);
}
Expand Down
4 changes: 2 additions & 2 deletions app/articles/BookMarkedArticle.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
ScrollView,
TouchableOpacity,
} from "react-native";

import { UIActivityIndicator } from "react-native-indicators";
interface Article {
id: number;
title: string;
Expand Down Expand Up @@ -133,7 +133,7 @@ export default function BookMarkedArticle() {

<ScrollView showsVerticalScrollIndicator={false}>
{loading ? (
<Text>Loading...</Text>
<UIActivityIndicator color={"#246BFD"} size={32} />
) : (
bookmarkedArticles.map((article, index) => (
<ArticleCard key={index} article={article} />
Expand Down
1 change: 0 additions & 1 deletion app/articles/SeeAllArticles.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { router, useNavigation } from "expo-router";
import FieldComponent from "@/components/FieldComponent";
import ArticleCard from "@/components/cards/ArticleCard";
import { supabase } from "../supabase";

interface Article {
id: number;
title: string;
Expand Down
117 changes: 49 additions & 68 deletions app/chat-history/VideoCall.tsx
Original file line number Diff line number Diff line change
@@ -1,70 +1,51 @@
import React 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 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 { supabase } from "../supabase";
// const VideoCall = () => {
// const router = useRouter();
// const [appointment, setAppointment]=useState<any[]>([]);

const VideoCall = () => {
const router = useRouter();
// 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: {appointmentId},
// });
// };
// return (
// <View style={{ backgroundColor: "white" }}>
// <ScrollView style={{ backgroundColor: "#FAFAFA", paddingBottom: 6 }}>
// {appointment.map((appointments, index) => (
// <DoctorVideo
// key={index}
// 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}
// />
// ))}
// </ScrollView>
// </View>
// );
// };

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) => {
router.push({
pathname: "/chat-history/VideoRecord",
params: { doctor: JSON.stringify(doctor) },
});
};

return (
<View style={{ backgroundColor: "white" }}>
<ScrollView style={{ backgroundColor: "#FAFAFA", paddingBottom: 6 }}>
{docCards.map((doctor, index) => (
<DoctorVideo
key={index}
onPress={() => handlePress(doctor)}
doctorName={doctor.name}
doctorImage={doctor.images}
callType="Video Call"
callDay={doctor.callDay}
callTime={doctor.callTime}
isVideoCallScreen={false}
/>
))}
</ScrollView>
</View>
);
};

export default VideoCall;
// export default VideoCall;
47 changes: 31 additions & 16 deletions app/chat-history/VideoRecord.tsx
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 1b50ac5

Please sign in to comment.