feature:messaging appointment implementation (#135)

## Description
Implement the functionality for making appointments using messaging
chat. This includes capturing user details, selecting a doctor,
scheduling the appointment, and providing confirmation.

## Checklist

- [x] **Appointment Booking via Message Chat** 
- Implement the ability for users to book appointments using text
messages.
    - [x] Capture user details (name, contact info).
    - [x] Allow selection of doctor and appointment time.
    - [x] Confirm booking and send confirmation message.

## Additional Notes 
- Test the appointment booking functionality thoroughly text message.
- Follow best practices for coding standards and documentation.
- Ensure data security and privacy, especially for sensitive user
information.
## screenshoots of what i will be working on.

<img width="226" alt="Screenshot 2024-06-26 at 17 00 11"
src="https://github.com/atlp-rwanda/commanders-rn-medica/assets/86968559/a6edc780-b633-42d1-a81b-fd18eaf6c5c0">
<img width="223" alt="Screenshot 2024-06-26 at 17 00 32"
src="https://github.com/atlp-rwanda/commanders-rn-medica/assets/86968559/18bff641-a043-4ab3-be95-63ffa38b336b">


## Assignees
- @Emmyfrank

Author: Adadie

app/Appointments/details.tsx

@@ -4,7 +4,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { SvgXml } from "react-native-svg";
 import { back } from "@/assets/icons/userprofile/icons";
 import { NavigationHeader } from "@/components/NavigationHeader";
-import { router, useLocalSearchParams, useRouter } from "expo-router";
+import { router, useGlobalSearchParams, useLocalSearchParams, useRouter } from "expo-router";
 import Touchable from "@/components/common/touchable";
 import { heartFilledIcon } from "@/assets/icons/heart";
 import { videoIcon, videoIconWhite } from "@/assets/icons/video";
@@ -58,12 +58,15 @@ const pkgs = {
 };
 
 const VideoCallAppointment = ({ route }: any) => {
+
   const insets = useSafeAreaInsets();
 
   const { typecall } = useLocalSearchParams<{
     typecall: "Voice call" | "Messaging" | "Video call";
   }>();
 
+  const appointment = useSelector((state: RootState) => state.appointment.selectedAppointment);
+
   return (
     <View className={`flex-1 pt-[${insets.top}px] bg-white`}>
       <View className="px-6 mt-8">
@@ -89,20 +92,20 @@ const VideoCallAppointment = ({ route }: any) => {
           <View className="bg-white rounded-3xl p-4 mb-6" style={styles.card1}>
             <View className="flex-row justify-between w-full">
               <Image
-                source={require("../../assets/doctors/doctor2.png")}
+                source={{uri:appointment.doctor.image}}
                 className="w-28 h-28"
               />
               <View className="justify-evenly pl-1 w-[60%]">
                 <Text className="text-[18px] font-[UrbanistBold] text-greyscale-900">
-                  Dr. Maria Foose
+                 {appointment.doctor.name}
                 </Text>
                 <View className="border-t border-t-[#EEEEEE] w-full" />
                 <Text className="font-[UrbanistMedium] text-xs text-greyscale-800">
-                  Dermatologists
+                {appointment.doctor.role}
                 </Text>
-                <Text className="font-[UrbanistMedium] text-xs text-greyscale-800">
+                {/* <Text className="font-[UrbanistMedium] text-xs text-greyscale-800">
                   The Venus Hospital in Paris, France
-                </Text>
+                </Text> */}
               </View>
             </View>
           </View>
@@ -112,23 +115,23 @@ const VideoCallAppointment = ({ route }: any) => {
             Scheduled Appointment
           </Text>
           <Text className="text-[16px] font-UrbanistRegular text-greyscale-800 mb-3">
-            Today, December 22, 2022
+          {appointment.appointment_date}
           </Text>
           <Text className="text-[16px] font-UrbanistRegular text-greyscale-800 mb-3">
-            10:00 - 10:30 AM (30 minutes)
+          {appointment.appointment_time}
           </Text>
         </View>
         <View className="mb-5 mx-6">
           <Text className="text-[20px] font-UrbanistBold text-greyscale-900 mb-4">
             Patient Information
           </Text>
-          <Detail title={"Full Name"} text={"Andrew Ainsley"} />
-          <Detail title={"Gender"} text={"Male"} />
-          <Detail title={"Age"} text={"27"} />
+          <Detail title={"Full Name"} text={appointment.patient.full_name} />
+          <Detail title={"Gender"} text={appointment.patient.gender} />
+          <Detail title={"Age"} text={appointment.patient.date_of_birth} />
           <Detail
-            title={"Problem"}
+            title={""}
             text={
-              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. view more"
+              appointment.Reason_couse_toUpdated
             }
           />
         </View>

app/Appointments/doctorcard/cardss.tsx

@@ -1,11 +1,17 @@
+import { getAppointment } from "@/redux/reducers/appointment";
 import { router } from "expo-router";
 import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { useDispatch } from "react-redux";
 function Cardscomponent(props: any) {
+  const appointment = props.appointment;
+  
+  const dispatch = useDispatch();
   const handlePush = () => {
+    dispatch(getAppointment(appointment))
     if (props.action === "Upcoming") {
       router.push({
         pathname: "/Appointments/details/",
-        params: { typecall: props.typecall },
+        params: { typecall: props.typecall, appointment  },
       });
     }
   };
@@ -17,7 +23,7 @@ function Cardscomponent(props: any) {
       className="bg-white rounded-3xl px-4 py-4 w-full shadow-md mb-4"
     >
       <View className="flex-row justify-center items-center border-b-2 border-slate-100 pb-3">
-        <Image source={{uri:props.imager}} className="w-24 h-24 rounded-xl mr-3" />
+        <Image source={{uri:appointment.doctor.image}} className="w-24 h-24 rounded-xl mr-3" />
         <View className="flex-1">
           <Text className="text-xl font-UrbanistBold mb-3">{props.name}</Text>
           <View className="flex items-center flex-row mb-3">

app/Appointments/index.tsx

@@ -13,18 +13,23 @@ import {
 import { supabase } from "../supabase";
 import Cardcomponent from "./doctorcard/cards";
 import Cardscomponent from "./doctorcard/cardss";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "@/redux/store/store";
+import { getAppointments } from "@/redux/reducers/appointment";
 
 function Screen() {
   const [upcoming, setUpcoming] = useState(true);
   const [cancels, setCancels] = useState(false);
   const [complete, setComlpete] = useState(false);
   const [notupcome, setNotupcome] = useState(false);
   const [isModalVisible, setIsModalVisible] = useState(false);
-  const [appointmentData, setAppointmentData] = useState<any[]>([]);
   const { doctorId } = useLocalSearchParams<{ doctorId: string }>();
-  const [appointId, setAppointId] = useState({});
+  const appointments = useSelector(
+    (state: RootState) => state.appointment.appointments
+  );
   const [canceledData, setcanceledData] = useState<any[]>([]);
-
+  const [appointId, setAppointId] = useState({});
+  const dispatch = useDispatch();
   const handleUpcoming = () => {
     setCancels(false);
     setUpcoming(true);
@@ -55,27 +60,39 @@ function Screen() {
 
   const fetchAppointment = async () => {
     try {
-      const { data: userData, error: userError } = await supabase.auth.getUser();
+      const { data: userData, error: userError } =
+        await supabase.auth.getUser();
       if (userError) throw userError;
       const userId = userData?.user?.id;
       const { data, error } = await supabase
         .from("appointment")
-        .select(`
+        .select(
+          `
           *,
           doctor(
             id,
             name,
             role,
             image,
             hospital
-          )
-        `)
+          ),
+          patient(
+    id,
+    email,
+    phone,
+    full_name,
+    nickname,
+    date_of_birth,
+    gender
+  )
+        `
+        )
         .eq("patient_id", userId);
 
       if (error) {
         console.log("Error occurred while fetching appointments", error);
       } else {
-        setAppointmentData(data);
+        dispatch(getAppointments(data));
         if (data.length === 0) {
           setNotupcome(true);
           setUpcoming(false);
@@ -92,10 +109,10 @@ function Screen() {
     fetchAppointment();
   }, []);
 
-
   const cancelAppointment = async () => {
     try {
-      const { data: userData, error: userError } = await supabase.auth.getUser();
+      const { data: userData, error: userError } =
+        await supabase.auth.getUser();
       if (userError) throw userError;
       const userId = userData?.user?.id;
       const { data, error } = await supabase
@@ -117,14 +134,13 @@ function Screen() {
     cancelAppointment();
   }, []);
 
-
   const getPackageIcon = (typecall: any) => {
     switch (typecall) {
-      case 'Voice Call':
+      case "Voice Call":
         return require("../../assets/appointmentIcon/voice.png");
-      case 'Video Call':
+      case "Video Call":
         return require("../../assets/appointmentIcon/video.png");
-      case 'Messaging':
+      case "Messaging":
         return require("../../assets/appointmentIcon/message.png");
       default:
         return null;
@@ -136,14 +152,18 @@ function Screen() {
       appointmentId: appointment.id,
       appointment_date: appointment.appointment_date,
       appointment_time: appointment.appointment_time,
-      doctorId:appointment.doctor?.id,
-      doctorname:appointment.doctor.name,
-      doctimage:appointment.doctor.image,
-      typecall:appointment.package
+      doctorId: appointment.doctor?.id,
+      doctorname: appointment.doctor.name,
+      doctimage: appointment.doctor.image,
+      typecall: appointment.package,
     });
     setIsModalVisible(true);
   };
 
+  useEffect(() => {
+    fetchAppointment();
+  }, []);
+
   return (
     <>
       <View className="pb-6">
@@ -226,26 +246,27 @@ function Screen() {
         >
           {cancels && (
             <View style={styles.content}>
-            {canceledData.map((canceled,index)=>(
-              <Cardcomponent
-                 key={index}
-                 name={canceled.doctorname}
-                 imager={canceled.doctimage}
-                 typecall={canceled.package}
-                 action="Cancelled"
-                 date={canceled.appointment_date}
-                 time={canceled.appointment_time.slice(0, 5)}
-                 imagerr={getPackageIcon(canceled.package)}
-                 styles={styles.cancelStyles}
-              />
-            ))}
+              {canceledData.map((canceled, index) => (
+                <Cardcomponent
+                  key={index}
+                  name={canceled.doctorname}
+                  imager={canceled.doctimage}
+                  typecall={canceled.package}
+                  action="Cancelled"
+                  date={canceled.appointment_date}
+                  time={canceled.appointment_time.slice(0, 5)}
+                  imagerr={getPackageIcon(canceled.package)}
+                  styles={styles.cancelStyles}
+                />
+              ))}
             </View>
           )}
           {upcoming && (
             <View style={styles.content}>
-              {appointmentData.map((appointment: any, index: any) => (
+              {appointments.map((appointment: any, index: any) => (
                 <Cardscomponent
                   key={index}
+                  appointment={appointment}
                   name={appointment.doctor.name}
                   imager={appointment.doctor.image}
                   typecall={appointment.package}
@@ -262,8 +283,8 @@ function Screen() {
                       pathname: "/Appointments/reschedul",
                       params: {
                         appointmentId: appointment.id,
-                        appointmentdate:appointment.appointment_date,
-                        appointmentime:appointment.appointment_time,
+                        appointmentdate: appointment.appointment_date,
+                        appointmentime: appointment.appointment_time,
                       },
                     })
                   }
@@ -275,7 +296,9 @@ function Screen() {
 
           {notupcome && (
             <View style={styles.centerbar}>
-              <Image source={require("../../assets/appointmentIcon/first.png")} />
+              <Image
+                source={require("../../assets/appointmentIcon/first.png")}
+              />
               <Text style={styles.centerbartitle}>
                 You don't have an appointment yet
               </Text>
@@ -341,15 +364,14 @@ const styles = StyleSheet.create({
     flexGrow: 1,
     paddingBottom: 50,
     paddingTop: 20,
-    height:"80%"
+    height: "80%",
   },
   centerbar: {
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
     height: "76%",
     gap: 20,
-    
   },
   centerbartitle: {
     fontSize: 20,
@@ -442,4 +464,4 @@ const styles = StyleSheet.create({
   mode: {
     color: "#f75555",
   },
-});
+});