Feature: History chats calls implementation (#154)

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

Author: Adadie

app/(tabs)/articles.tsx

@@ -6,18 +6,7 @@ const Articles = () => {
   return (
  <>
  <Article/>
- </>
-
-
- 
-    
-    // <Article/>
-    // <SeeAllArticles/>
-    // <ArticlesDetails/>
-    // <BookMarkedArticle/>
-    
-      
-    
+ </>  
   );
 };
 

app/(tabs)/profile.tsx

@@ -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",
@@ -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",
@@ -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"

app/Appointments/voice-call/writeReview.tsx

@@ -264,4 +264,10 @@ const styles = StyleSheet.create({
     width: '100%',
     minHeight: 100,
   },
+  doctorImage: {
+    width: 120,  
+    height: 120, 
+    borderRadius: 60, 
+    marginBottom: 10,
+  },
 });

app/Doctors/searchDoctor.tsx

@@ -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>

app/articles/ArticlesDetails.tsx

@@ -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;
@@ -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>
     );
   }

app/articles/ArticlesPage.tsx

@@ -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;
@@ -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>
     );
   }

app/articles/BookMarkedArticle.tsx

@@ -10,7 +10,7 @@ import {
   ScrollView,
   TouchableOpacity,
 } from "react-native";
-
+import { UIActivityIndicator } from "react-native-indicators";
 interface Article {
   id: number;
   title: string;
@@ -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} />

app/articles/SeeAllArticles.tsx

@@ -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;

app/chat-history/VideoCall.tsx

@@ -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;

app/chat-history/VideoRecord.tsx

@@ -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 () => {
@@ -40,9 +42,7 @@ const VideoRecord: React.FC = () => {
     fetchDuration();
   }, []);
 
-  if (!doctor) {
-    return null;
-  }
+ 
 
   const handlePress = () => {
     router.push("/chat-history/PlayRecord");
@@ -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);
@@ -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}>
@@ -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