restrict user to chat in the old chanel

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

@@ -23,6 +23,7 @@ import { supabase } from "@/lib/supabase";
 import HeaderComponent from "@/components/HeaderComponent";
 import ReviewerCardComponent from "@/components/ReviewerCardComponent";
 import { StatusBar } from "expo-status-bar";
+import { color } from "react-native-elements/dist/helpers";
 
 interface Doctor{
     id: number,
@@ -548,7 +549,9 @@ 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>

app/(app)/ActionMenu/Booking/Patient-details.tsx

@@ -193,7 +193,9 @@ const PatientDetails = () => {
             Write Your Problem
           </Text>
 
-          <TextArea text={text} onChangeText={setText} />
+          <TextArea 
+          text={text} 
+          onChangeText={setText} />
         </View>
 
         <View

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

@@ -29,7 +29,7 @@ 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";
@@ -78,7 +77,7 @@ const total:number=price*num
 
   }
   function successBooking() {
-    router.push("ActionMenu");;
+    router.push("ActionMenu");
     modal.hide();
   }
   const showSuccefulModal = () => {
@@ -138,7 +137,10 @@ const total:number=price*num
             ></View>
             <Button
               title="View Appointment"
-              onPress={successBooking}
+              onPress={()=> {
+                successBooking()
+                router.push("(app)/Appointments")
+              }}
             />
             <TouchableOpacity
               onPress={() => {
@@ -174,7 +176,6 @@ const total:number=price*num
   }
   const handleOnRedirect = (data: RedirectParams) => {
 
-    console.log("redire data:", data)
     if (data.status === "successful") {
       bookAppointment()
        showSuccefulModal()

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

@@ -52,7 +52,7 @@ export default function Reviewsummary() {
     }
     fetchDoctordata()
   }, [doctor_id])
-  console.log("this is packagePrice:",packagePrice)
+
   let num:number=1;
   if (duration === "30 minutes") {
     num=1

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

@@ -2,13 +2,16 @@ import React, { useContext, useEffect, useState } from 'react'
 import { fetchPatientData } from '@/utils/LoggedInUser';
 import { AuthContext } from '@/ctx/AuthContext';
 import {
-    ChannelList
+    ChannelList,
+    DefaultStreamChatGenerics
   } from 'stream-chat-expo'
 import { useAppContext } from '@/ctx/ChatContext';
 import { PatientTypes } from '@/constants/Types';
 import {useRouter } from 'expo-router';
+import { ChannelSort } from 'stream-chat';
 
-const ChannelLists = ({appointmentId}:{appointmentId:any}) => {
+
+const ChannelLists = ({appointmentId, loggedInUserId}:{appointmentId:any, loggedInUserId:string}) => {
     const { channel, setChannel } = useAppContext();
     const [patientData, setPatientData] = useState<PatientTypes[] | null>(null);
     const { userId, } = useContext(AuthContext);
@@ -28,13 +31,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},
       });
     };
 
@@ -45,7 +48,7 @@ const ChannelLists = ({appointmentId}:{appointmentId:any}) => {
       filters={filters}
       sort={sort} 
     />
-  
+
   )
 }
 

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

@@ -25,22 +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 { theme} = useContext(ThemeContext);
   const [isloading, setIsLoading] = useState(false);
   const ios = Platform.OS === "ios";
   const modal = useModal();
-  const {id,appointmentId} = useGlobalSearchParams();
+  const {chanelId,appointmentId, loggedInUserId} = 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 deleteChannel = async () => {
-  //   try{
-  //     await client.deleteChannels([id], {hard_delete: true});
-  //   }catch(error){}
-  // }
   const endAppointment = async() => {
     try {
+      disableUser();
       setIsLoading(true);
       const { error } = await supabase
         .from("appointment")
@@ -131,7 +140,6 @@ const ChannelScreen = () => {
   >
     <Channel
       channel={channel}
-      // MessageText={MessageStyle}
       audioRecordingEnabled={true}
       enforceUniqueReaction={true}
       giphyEnabled={true}

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

@@ -10,13 +10,13 @@ import uuid from "react-native-uuid";
 import { useGlobalSearchParams } from "expo-router";
 
 const API_KEY = process.env.EXPO_PUBLIC_STREAM_API_KEY;
-const SECRETE_KEY = process.env.EXPO_PUBLIC_STREAM_API_SECRET;
 
 export function Home() {
   const [clientIsReady, setClientIsReady] = useState<boolean>(false);
   const [patientData, setPatientData] = useState<PatientTypes[] | null>(null);
   const [client, setClient] = useState<StreamChat | null>(null);
   const { channel, setChannel } = useAppContext();
+  const [loggedInUserId , setLoggedInUserId] = useState<string>("");
   const { userId } = useContext(AuthContext);
   const CDNURL =
     "https://vbwbfflzxuhktdvpbspd.supabase.co/storage/v1/object/public/patients/";
@@ -35,6 +35,7 @@ export function Home() {
     const setupClient = async () => {
       try {
         if (patientData && patientData[0]) {
+          setLoggedInUserId(patientData[0].id);
           const user = {
             id: patientData[0].id,
             name: `${patientData[0].first_name} ${patientData[0].last_name}`,
@@ -66,7 +67,7 @@ export function Home() {
     // if(client){return async()=> await client.disconnectUser()}
   }, [patientData]);
 
-  return <ChannelLists appointmentId={appointmentId} />;
+  return <ChannelLists appointmentId={appointmentId} loggedInUserId={loggedInUserId }/>;
 }
 
 export default Home;

components/UI/Accordion.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { BlueDownIcon } from "@/assets/icons/Profile/Icons";
 import { Colors } from "@/constants/Colors";
 import Typography from "@/constants/Typography";

components/UI/DropDown.tsx

@@ -57,6 +57,7 @@ export default function DropDown({ data, leftIcon, rightIcon, search,defaultValu
           flexDirection: "row",
           paddingHorizontal: 20,
           gap: 20,
+          backgroundColor: theme === "light" ? Colors.grayScale._50 : Colors.dark._2,
         }}
         data={data}
         maxHeight={300}
@@ -94,7 +95,7 @@ export default function DropDown({ data, leftIcon, rightIcon, search,defaultValu
         )}
         itemTextStyle={{
           color:
-            theme === "light" ? Colors.grayScale._900 : Colors.others.white,
+            theme === "light" ? Colors.grayScale._900 : Colors.main.primary._500,
         }}
       />
     </>

components/UI/TextArea.tsx

@@ -23,6 +23,9 @@ export default function TextArea({ text,onChangeText }: Props) {
     >
       <TextInput
         placeholder="Describe how you are feeling here..."
+        placeholderTextColor={
+          theme === "light" ? Colors.grayScale._500 : Colors.grayScale._400
+        }
         style={[
           Typography.semiBold.medium,
           {

utils/LoggedInUser.ts

@@ -49,7 +49,6 @@ export async function getPatientData(supabase: any, userInfo: any): Promise<any>
           return;
         }
         patentInfo(data);
-        console.log(data)
       } catch (error) {
         console.error("Error while fetching data:", error);
         return;