Feature: Implement Chat Room Scheduling and Messaging Feature using Stream.io

app.json

@@ -65,6 +65,11 @@
         {
           "photosPermission": "The app accesses your photos to let you share them with your friends."
         }
+      ], [
+        "expo-av",
+        {
+          "microphonePermission": "$(PRODUCT_NAME) would like to use your microphone for voice recording."
+        }
       ]
     ],
     "experiments": {

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

@@ -35,6 +35,11 @@ export default function EnterYourPin() {
     }
   }
   console.log("this is from lastpage",doctor_id,hour,packageTitle,packagePrice,problem)
+
+  function successBooking() {
+    router.push("(app)/Appointments/index");
+    modal.hide();
+  }
   async function handlePIN() {
 
     await bookAppointment()
@@ -95,13 +100,15 @@ export default function EnterYourPin() {
             <Button
               title="View Appointment"
               onPress={() => {
-                router.push("Appointments");
+                router.push("(app)/Appointments");
+                modal.hide();
+
               }}
             />
             <TouchableOpacity
               onPress={() => {
-                modal.hide();
                 router.push("ActionMenu");
+                modal.hide();
               }}
               style={{
                 backgroundColor:

app/(app)/ActionMenu/index.tsx

@@ -12,7 +12,6 @@ import {
 import React, { useContext, useEffect, useState } from "react";
 import { useFonts as useFontsExpo } from "expo-font";
 import { useNavigation } from "@react-navigation/native";
-import Line from "@/components/Line";
 import { router } from "expo-router";
 import { SvgXml } from "react-native-svg";
 import {
@@ -21,11 +20,6 @@ import {
 } from "@/assets/icons/Profile/Icons";
 import { ThemeContext } from "@/ctx/ThemeContext";
 import { blackHeart } from "@/components/UI/icons/blackHeart";
-import Chips from "@/components/UI/ChipsComponent";
-import {
-  fullSmallBlueStar,
-  fullSmallWhiteStar,
-} from "@/components/UI/icons/star";
 import { Session } from "@supabase/supabase-js";
 import { supabase } from "@/lib/supabase";
 import {
@@ -34,17 +28,15 @@ import {
   getPatientData,
 } from "@/utils/LoggedInUser";
 import { Doctor } from "@/constants/Types";
-import DoctorDetails from "./Booking/Doctor_details";
 import DoctorComponent from "@/components/DoctorComponent";
 import { star } from "@/assets/icons/star";
 import { whiteHeart } from "@/assets/icons/whiteHeart";
 import { blueheart } from '@/assets/icons/blueHeart';
 import NofoundComponent from "@/components/NofoundComponent";
-import { useAuth } from "@/ctx/AuthContext";
+import { AuthContext, useAuth } from "@/ctx/AuthContext";
 import RemovefavoritePopup from "@/components/RemovefavoriteIndexPopup";
 
 export default function Index() {
-  const [session, setSession] = useState<Session | null>(null);
   const [searchTerm, setSearchTerm] = useState<string>("");
   const [userData, setUserData] = useState<[]>([]);
   const [patientData, setPatientData] = useState(null);
@@ -54,7 +46,6 @@ export default function Index() {
   const { theme, changeTheme } = useContext(ThemeContext);
   const navigation = useNavigation();
   const [text, setText] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
   const [doctors, setDoctors] = useState<Doctor[]>([]);
   const [greeting, setGreeting] = useState("");
   const { authType, imageUrl: otherAuthImageUrl } = useAuth();
@@ -66,6 +57,7 @@ export default function Index() {
   const [favoriteDoctors, setFavoriteDoctors] = useState<number[]>([])
   const [loggeduser, setLoggedUser] = useState<string>()
   const [profile, setProfile] = useState<any>(null)
+  const { userId } = useContext(AuthContext);
 
   const [fontsLoaded] = useFontsExpo({
     "Urbanist-regular": require("@/assets/fonts/Urbanist-Regular.ttf"),
@@ -86,11 +78,11 @@ export default function Index() {
   }, []);
 
   useEffect(() => {
-    if (userData?.id) {
-      fetchPatientData(userData?.id, setPatientData);
-      getUserImageUrl("patients", userData, setImageUrl);
+    if (userId ) {
+      fetchPatientData(userId , setPatientData);
+      getUserImageUrl("patients", userId , setImageUrl);
     }
-  }, [userData]);
+  }, [userId]);
 
   useEffect(() => {
     if (imageUrl.length > 0) {
@@ -271,8 +263,8 @@ export default function Index() {
                   source={{
                     uri:authType && authType !== "apple"
                         ? otherAuthImageUrl
-                        : `${CDNURL + userData?.id + "/" + profilePhoto}`,
-                  }}
+                        : `${CDNURL + userId + "/" + profilePhoto}`,
+                      }}
                 />
               </View>
               <View
@@ -832,4 +824,4 @@ const styles = StyleSheet.create({
     color: "#246BFD",
     fontSize: 16,
   },
-});
+});

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

@@ -0,0 +1,52 @@
+import React, { useContext, useEffect, useState } from 'react'
+import { fetchPatientData } from '@/utils/LoggedInUser';
+import { AuthContext } from '@/ctx/AuthContext';
+import {
+    ChannelList
+  } from 'stream-chat-expo'
+import { useAppContext } from '@/ctx/ChatContext';
+import { PatientTypes } from '@/constants/Types';
+import { router, Stack, useRouter } from 'expo-router';
+
+const ChannelLists = (props: any) => {
+    const { channel, setChannel } = useAppContext();
+    const [patientData, setPatientData] = useState<PatientTypes[] | null>(null);
+    const { userId, email, isLoggedIn } = useContext(AuthContext);
+    const router = useRouter();
+
+    useEffect(() => {
+        if (userId) {
+          fetchPatientData(userId, setPatientData);
+        }
+    }, [userId]);
+    let filters = {}
+    if (patientData && patientData[0]) {
+      filters = {
+        members: {
+          '$in': [`${patientData[0]?.id}`],
+        },
+      };
+    }
+
+    const sort = {last_message_at: -1,};
+
+    const handleNavigateToChannel = (channel: any) => {
+      setChannel(channel);
+      router.push({
+        pathname: "(app)/Appointments/MessagingAppointment/ChannelScreen",
+        params: { id: channel?.id },
+      });
+    };
+
+  return (
+    <ChannelList
+    onSelect={(channel) => handleNavigateToChannel(channel)}
+    filters={filters}
+    sort={sort}
+  />
+  )
+}
+
+
+export default ChannelLists
+

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

@@ -0,0 +1,55 @@
+import { View, Text, Image } from 'react-native'
+import React from 'react'
+import {
+    Channel,
+    MessageList,
+    MessageInput,
+    useMessageContext,
+  } from 'stream-chat-expo'
+import { useAppContext, } from '@/ctx/ChatContext';
+import {Colors} from '@/constants/Colors';
+
+const MessageStyle = () => {
+  const { message, isMyMessage } = useMessageContext();
+
+  return (
+    <View style={{
+      alignSelf: isMyMessage ? 'flex-end' : 'flex-start',
+      borderRadius: 10,
+      maxWidth: '100%',
+      maxHeight: 200,
+
+    }}>
+      <Text  style={{
+      alignSelf: isMyMessage ? 'flex-end' : 'flex-start',
+      backgroundColor: isMyMessage ? Colors.main.primary._500 : '#ededed',
+      color:isMyMessage ? Colors.others.white : 'black',
+      padding: 10,
+      marginVertical : 10,
+      marginHorizontal: 0,
+      borderRadius: 10,
+      width: '100%',
+    }}>{message.text}</Text>
+ </View>
+  )
+}
+
+
+const ChannelScreen = () => {
+
+  const { channel } = useAppContext();
+  return (
+    <Channel channel={channel}
+    // MessageText={MessageStyle}
+    audioRecordingEnabled={true}
+    enforceUniqueReaction={true}
+    giphyEnabled={true}
+    >
+           <MessageList />
+           <MessageInput />
+    </Channel>
+
+  );
+};
+
+export default ChannelScreen