ft(video-call): Add video call functionalities

Author: Paccyfic

app/(app)/ActionMenu/Booking/Doctor_details.tsx

@@ -548,8 +548,10 @@ const visibleReviews =  reviews.slice(0, 1);
               )
 
             ) : (
-                 <Text style={[Typography.semiBold.large] }> No available reviews</Text>   
-        )}
+              <Text style={[Typography.semiBold.large, 
+               {color: theme === "dark" ? Colors.others.white : "#212121",}
+              ] }> No available reviews</Text>   
+     )}
             </View>
           </View>
         </View>

app/(app)/ActionMenu/Booking/Select-package.tsx

@@ -29,7 +29,6 @@ const SelectPackage = () => {
   const { Doctor_id, hour, date,patient_id } = useLocalSearchParams()
   const [selectedPackageTitle, setSelectedPackageTitle] = useState<{ title: string, price: string }>({ title: "Messaging", price: "Rwf20" })
   const [selectedDuration, setSelectedDuration] = useState<string>("1 hour")
-  console.log("this is new:", Doctor_id, hour, date)
   const handleNextPress = () => {
     if (!selectedPackageTitle||!selectedDuration) {
       Alert.alert("Please select both Duration and package")

app/(app)/ActionMenu/Booking/SelectPayment.tsx

@@ -23,7 +23,6 @@ export default function SelectPayment() {
 
   const modal = useModal()
   const flutterKey = process.env.EXPO_PUBLIC_FLUTTERWAVE_KEY ?? ""
-  console.log("this is packageprice from slect Payment:",packagePrice)
 
   interface RedirectParams {
 	status: "successful" | "cancelled";
@@ -138,7 +137,10 @@ const total:number=price*num
             ></View>
             <Button
               title="View Appointment"
-              onPress={successBooking}
+              onPress={()=> {
+                successBooking()
+                router.push("(app)/Appointments")
+              }}
             />
             <TouchableOpacity
               onPress={() => {

app/(app)/ActionMenu/Booking/reviewSummary.tsx

@@ -52,7 +52,6 @@ export default function Reviewsummary() {
     }
     fetchDoctordata()
   }, [doctor_id])
-  console.log("this is packagePrice:",packagePrice)
   let num:number=1;
   if (duration === "30 minutes") {
     num=1
@@ -423,4 +422,4 @@ const total:number=price*num
       </ScrollView>
     </>
   );
-}
+}

app/(app)/Appointments/MessagingAppointment/ChannelList.tsx

@@ -2,13 +2,14 @@ import React, { useContext, useEffect, useState } from 'react'
 import { fetchPatientData } from '@/utils/LoggedInUser';
 import { AuthContext } from '@/ctx/AuthContext';
 import {
-    ChannelList
-  } from 'stream-chat-expo'
+  ChannelList,
+  DefaultStreamChatGenerics
+} from 'stream-chat-expo'
 import { useAppContext } from '@/ctx/ChatContext';
 import { PatientTypes } from '@/constants/Types';
 import {useRouter } from 'expo-router';
-
-const ChannelLists = ({appointmentId}:{appointmentId:any}) => {
+import { ChannelSort } from 'stream-chat';
+const ChannelLists = ({appointmentId, loggedInUserId, doctorId}:{appointmentId:any, loggedInUserId:string, doctorId:any}) => {
     const { channel, setChannel } = useAppContext();
     const [patientData, setPatientData] = useState<PatientTypes[] | null>(null);
     const { userId, } = useContext(AuthContext);
@@ -28,14 +29,13 @@ const ChannelLists = ({appointmentId}:{appointmentId:any}) => {
       };
     }
 
-    const sort = {last_message_at: -1,};
-
+    const sort : ChannelSort<DefaultStreamChatGenerics> = { last_message_at: -1 }
     const handleNavigateToChannel = (channel: any) => {
       setChannel(channel);
       router.push({
         pathname: "(app)/Appointments/MessagingAppointment/ChannelScreen",
-        params: { id: channel?.id, appointmentId },
-      });
+        params: { chanelId: channel?.id, appointmentId, loggedInUserId, doctorId},
+            });
     };
 
   return (
@@ -50,5 +50,4 @@ const ChannelLists = ({appointmentId}:{appointmentId:any}) => {
 }
 
 
-export default ChannelLists
-
+export default ChannelLists

app/(app)/Appointments/MessagingAppointment/ChannelScreen.tsx

@@ -25,17 +25,31 @@ import { supabase } from "@/lib/supabase";
 import { useGlobalSearchParams } from "expo-router";
 import Typography from "@/constants/Typography";
 import { useModal } from "@/ctx/ModalContext";
+import { StreamChat } from "stream-chat";
 
 const ChannelScreen = () => {
   const { theme, changeTheme } = useContext(ThemeContext);
   const [isloading, setIsLoading] = useState(false);
   const ios = Platform.OS === "ios";
   const modal = useModal();
-  const {appointmentId} = useGlobalSearchParams();
+  const {chanelId,appointmentId, loggedInUserId, doctorId} = useGlobalSearchParams();
   const { channel } = useAppContext();
 
+  const API_KEY = process.env.EXPO_PUBLIC_STREAM_API_KEY;
+
+  const chatClient = StreamChat.getInstance(`${API_KEY}`);
+
+   const disableUser = async () => {
+    try{
+      await chatClient.channel('messaging', `${chanelId}`).removeMembers([`${loggedInUserId}`])
+    }catch(error){
+      console.log("user not deleted",error);
+    }
+  }
+
   const endAppointment = async() => {
     try {
+      disableUser();
       setIsLoading(true);
       const { error } = await supabase
         .from("appointment")
@@ -46,7 +60,10 @@ const ChannelScreen = () => {
         console.log(error);
       } else {
         setIsLoading(false);
-        handlemodal()
+        router.push({
+          pathname: "Appointments/MessagingAppointment/SessionEnded",
+          params: {id: doctorId}
+        })
       }
     } catch (error) {
       console.log(error);
@@ -58,65 +75,6 @@ const ChannelScreen = () => {
     router.push("/(app)/Appointments");
   }
 
-  async function handlemodal() {
-    modal.show({
-      children: (
-        <View
-          style={{
-            padding: 40,
-            alignItems: "center",
-            gap: 20,
-            borderRadius: 48,
-            backgroundColor:
-              theme === "light" ? Colors.others.white : Colors.dark._2,
-          }}
-        >
-          <Image source={require("@/assets/images/cancelimg.png")} />
-          <View
-            style={{
-              gap: 20,
-              backgroundColor:
-                theme === "light" ? Colors.others.white : Colors.dark._2,
-            }}
-          >
-            <Text
-              style={[
-                Typography.heading._4,
-                {
-                  color: Colors.main.primary._500,
-                  textAlign: "center",
-                },
-              ]}
-            >
-              Chat ended Successfully!
-            </Text>
-            <Text
-              style={[
-                Typography.regular.large,
-                {
-                  textAlign: "center",
-                  color:
-                    theme === "light"
-                      ? Colors.grayScale._900
-                      : Colors.others.white,
-                },
-              ]}
-            >
-              Thank you for using our service. Your chat has been ended
-              please go on and provide a review to the doctor.
-            </Text>
-            <TouchableOpacity style={styles.btn} onPress={handlebackhome}>
-              <Text
-                style={[Typography.bold.large, { color: Colors.others.white }]}
-              >
-                Ok
-              </Text>
-            </TouchableOpacity>
-          </View>
-        </View>
-      ),
-    });
-  }
   return (
     <View
     style={{

app/(app)/Appointments/MessagingAppointment/Home.tsx

@@ -21,10 +21,13 @@ export function Home() {
 
     const { userId } = useContext(AuthContext);
 
-    const {id, appointmentId} = useGlobalSearchParams()  
-    const doctorId = id;  
     const chatRoomId = "matadores-medica"+uuid.v4();
 
+    const [loggedInUserId , setLoggedInUserId] = useState<string>("");
+    const CDNURL =
+      "https://vbwbfflzxuhktdvpbspd.supabase.co/storage/v1/object/public/patients/";
+    const { doctorId, appointmentId } = useGlobalSearchParams();
+
     useEffect(() => {
         if (userId) {
             fetchPatientData(userId, setPatientData);
@@ -35,44 +38,40 @@ export function Home() {
 
   useEffect(() => {
     const setupClient = async () => {
-        try {
-            if (patientData && patientData[0]) {
-                const user = {
-                    id: patientData[0].id,
-                    name: `${patientData[0].first_name} ${patientData[0].last_name}`,
-                    image: "https://i.imgur.com/fR9Jz14.png",
-                };
-
-             await chatClient.connectUser(
-                    user,
-                    chatClient.devToken(user.id));
-                    setClientIsReady(true);
-                    setClient(chatClient);
+      try {
+        if (patientData && patientData[0]) {
+          setLoggedInUserId(patientData[0].id);
+          const user = {
+            id: patientData[0].id,
+            name: `${patientData[0].first_name} ${patientData[0].last_name}`,
+            image: `${CDNURL + patientData[0]?.image}`,
+          };
+          await chatClient.connectUser(user, chatClient.devToken(user.id));
 
-                    const channel = chatClient.channel("messaging", `${chatRoomId}`, {
-                    image: "https://vbwbfflzxuhktdvpbspd.supabase.co/storage/v1/object/public/doctors/adaptive_icon.png",
-                    name: "Medica Chat Room",
-                    members: [user?.id , `${doctorId}`],
-            });
-                    await channel.watch();
-                    setChannel(channel);
-            } else {
-                console.log("No patient data found");
-            }
-        } catch (error) {
-            console.error("An error occurred while connecting the user:", error);
+          setClientIsReady(true);
+          setClient(chatClient);
+          const channel = chatClient.channel("messaging", `${chatRoomId}`, {
+            image:
+              "https://vbwbfflzxuhktdvpbspd.supabase.co/storage/v1/object/public/doctors/adaptive_icon.png",
+            name: `${user?.name} in the chat`,
+            members: [user?.id, `${doctorId}`],
+          });
+          await channel.watch();
+          setChannel(channel);
+        } else {
+          console.log("No patient data found");
         }
+      } catch (error) {
+        console.error("An error occurred while connecting the user:", error);
+      }
     };
     if (!chatClient.userID) {
       setupClient();
     }
     // if(client){return async()=> await client.disconnectUser()}
   }, [patientData]);
 
-  return (
-    <ChannelLists appointmentId={appointmentId}/>
-  )
+  return <ChannelLists appointmentId={appointmentId} loggedInUserId={loggedInUserId} doctorId={doctorId}/>
 }
 
-export default Home;
-
+export default Home;