Feature write your review implemetation (#140)

**How does this pr do?**
In this practice, the patient should be able to see their appointment be
completed for some reason, like when the appointment passes or when the
time of the appointment is up. and they should be able to write a review
for the doctor.

**How can you review this pr?**
Visit your appointment After logging in to the appointment tab, you can
see an upcoming, completed and canceled appointment Choose the tab
called completed and see your appointment as completed. According to
your choice, you can go to book appointment again by clicking on the
book button again and to write a review by clicking on button called
leave review

Author: Adadie

app/(tabs)/index.tsx

@@ -15,7 +15,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { MenuIcons } from "../../assets/icons";
 import { heart } from "../../assets/icons/heart";
 import { notification } from "../../assets/icons/notification";
-import DoctorCard from "../../components/cards/doctorCard";
+import DoctorCard from "../../components/cards/doctCard";
 import CarouselComponent from "../../components/carousel";
 import { SearchInput } from "../../components/searchinput2";
 import { supabase } from "../supabase";

app/Appointments/doctorcard/cardss.tsx

@@ -23,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:appointment.doctor.image}} className="w-24 h-24 rounded-xl mr-3" />
+        <Image source={{uri:props.imager}} 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/doctorcard/star.tsx

@@ -1,5 +1,4 @@
-
-import React, { useState } from 'react';
+import React from 'react';
 import { View, TouchableOpacity, StyleSheet } from 'react-native';
 import Icon from 'react-native-vector-icons/FontAwesome';
 
@@ -16,20 +15,19 @@ const StarCheckbox: React.FC<StarCheckboxProps> = ({ checked, onPress }) => {
   );
 };
 
-const FiveStarRating: React.FC = () => {
-  const [selectedStars, setSelectedStars] = useState(0);
-
-  const handleStarPress = (index: number) => {
-    setSelectedStars(index + 1);
-  };
+interface FiveStarRatingProps {
+  selectedStars: number;
+  onStarPress: (index: number) => void;
+}
 
+const FiveStarRating: React.FC<FiveStarRatingProps> = ({ selectedStars, onStarPress }) => {
   return (
     <View style={styles.container}>
       {[0, 1, 2, 3, 4].map((index) => (
         <StarCheckbox
           key={index}
           checked={index < selectedStars}
-          onPress={() => handleStarPress(index)}
+          onPress={() => onStarPress(index)}
         />
       ))}
     </View>
@@ -48,4 +46,3 @@ const styles = StyleSheet.create({
 });
 
 export default FiveStarRating;
-

app/Appointments/index.tsx

@@ -29,6 +29,8 @@ function Screen() {
   );
   const [canceledData, setcanceledData] = useState<any[]>([]);
   const [appointId, setAppointId] = useState({});
+  const [completAppointment, setCompletedAppointment] = useState<any[]>([]);
+
   const dispatch = useDispatch();
   const handleUpcoming = () => {
     setCancels(false);
@@ -87,11 +89,14 @@ function Screen() {
   )
         `
         )
-        .eq("patient_id", userId);
+        .eq("patient_id", userId)
+        .eq("status", "Booked").order("appointment_date", { ascending: true }) 
+        .order("appointment_time", { ascending: true })
 
       if (error) {
         console.log("Error occurred while fetching appointments", error);
       } else {
+        console.log(data)
         dispatch(getAppointments(data));
         if (data.length === 0) {
           setNotupcome(true);
@@ -109,6 +114,9 @@ function Screen() {
     fetchAppointment();
   }, []);
 
+
+   
+
   const cancelAppointment = async () => {
     try {
       const { data: userData, error: userError } =
@@ -134,6 +142,43 @@ function Screen() {
     cancelAppointment();
   }, []);
 
+  const fetchCompletedAppointment=async()=>{
+    try{
+      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(`
+  *,
+  doctor(
+    id,
+    name,
+    role,
+    image,
+    hospital
+  )
+  `)
+  .eq("patient_id", userId)
+  .eq("status", "Completed").order("appointment_date", { ascending: false }) 
+  .order("appointment_time", { ascending: false })
+  
+  if(error){
+  console.log("Error occured while fetching appointments", error)
+  }else{
+    console.log(data)
+  setCompletedAppointment(data);
+  
+  }}  
+  catch(error){
+  console.log(error);
+  } 
+  }
+  useEffect(()=>{
+  
+  fetchCompletedAppointment();
+  },[])
+
   const getPackageIcon = (typecall: any) => {
     switch (typecall) {
       case "Voice Call":
@@ -261,6 +306,38 @@ function Screen() {
               ))}
             </View>
           )}
+
+         {complete && (
+            <View style={styles.content}>
+               {completAppointment.map((appointment:any, index:any) => (
+              <Cardscomponent
+                key={index}
+                name={appointment.doctor.name}
+                imager={appointment.doctor.image}
+                typecall={appointment.package}
+                action="Complete"
+                date={appointment.appointment_date}
+                time={appointment.appointment_time.slice(0,5)}
+                imagerr={getPackageIcon(appointment.package)}
+                styles={styles.completeStyles}
+                chance="Book Again"
+                cantchance="Leave a Review"
+                backcad="bg-white rounded-xl flex-row p-4 w-400 items-center gap-7"
+                fact={() => router.push({pathname:"/Appointments/voice-call/writeReview",
+                params:{
+                    appointmentId:appointment.doctor.id,
+                    doctorImage:appointment.doctor.image,
+                    role:appointment.doctor.role,
+                    hospital:appointment.doctor.hospital,
+                    name:appointment.doctor.name
+                }})}
+                cancle={()=>router.push({pathname:"/doctor-appointments/book-appointment",
+                  params:{doctorId:appointment.doctor.id, }})}
+              />
+              ))}
+            </View>
+          )}
+
           {upcoming && (
             <View style={styles.content}>
               {appointments.map((appointment: any, index: any) => (

app/Appointments/voice-call/writeReview.tsx

@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from "react";
 import { View, Text, TouchableOpacity, Image, TextInput, StyleSheet, Modal, ScrollView, SafeAreaView, Pressable } from "react-native";
-import { router } from "expo-router";
+import { router, useGlobalSearchParams } from "expo-router";
 import { useFonts } from 'expo-font';
 import FiveStarRating from "../doctorcard/star";
+import { supabase } from "../../supabase";
 
 interface CustomCheckBoxProps {
   selected: boolean;
@@ -21,25 +22,107 @@ export default function Writereview() {
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [isoption, setIsoption] = useState("");
   const [text, setText] = useState('');
+  const [selectedStars, setSelectedStars] = useState(0);
+  const [patientImageUrl, setPatientImageUrl] = useState("");
   const [fontLoaded] = useFonts({
     'UrbanistBold': require('../../../assets/fonts/Urbanist-Bold.ttf'),
     'UrbanistRegular': require("../../../assets/fonts/Urbanist-Regular.ttf"),
     'Urbanist-SemiBold': require("../../../assets/fonts/Urbanist-SemiBold.ttf"),
     'UrbanistMedium': require("../../../assets/fonts/Urbanist-Medium.ttf")
   });
 
+ 
+  useEffect(() => {
+    const fetchUserProfile = async () => {
+      const { data, error } = await supabase.auth.getUser();
+      if (error) {
+        console.log(error);
+        return;
+      }
+      const userId = data.user?.id;
+
+      const { data: patientData, error: errordata } = await supabase
+        .from("patient")
+        .select("profile_picture,full_name")
+        .eq("id", userId);
+
+      if (errordata) {
+        console.log(errordata);
+      } else {
+        const patient = patientData?.[0];
+        if (patient?.profile_picture) {
+          const { data: publicUrlData, error: publicUrlError } = await supabase
+            .storage
+            .from("files")
+            .createSignedUrl(`${patient.profile_picture}`, 63072000);
+
+          if (publicUrlError) {
+            console.error("Error fetching signed URL:", publicUrlError.message);
+            return;
+          }
+
+          setPatientImageUrl(publicUrlData.signedUrl || "");
+        }
+      }
+    };
+    fetchUserProfile();
+  }, []);
+
   const handleChangeText = (value: string) => {
     setText(value);
   };
 
+  const handleStarPress = (index: number) => {
+    setSelectedStars(index + 1);
+  };
   const isSubmitEnabled = text.trim().length > 0 && isoption.length > 0;
 
+  const Options = ["Yes", "No"];
+  const { appointmentId, doctorImage, role, hospital, name } = useGlobalSearchParams<{ appointmentId: string, doctorImage: string, role: string, hospital: string, name: string }>();
+
+  const writeReview = async () => {
+    const { data, error } = await supabase.auth.getUser();
+    if (error) {
+      console.log(error);
+      return;
+    }
+    const userId = data.user?.id;
+
+    const { data: patientData, error: errordata } = await supabase
+      .from("patient")
+      .select("profile_picture,full_name")
+      .eq("id", userId);
+
+    if (errordata) {
+      console.log(errordata);
+    } else {
+      const patient = patientData?.[0];
+
+      const { data: reviewData, error: reviewDataError } = await supabase
+        .from("reviews")
+        .insert({
+          doctorId: appointmentId,
+          stars: selectedStars,
+          content: text,
+          image: patientImageUrl,
+          role: role,
+          hospital: hospital,
+          name: patient?.full_name,
+          liked: "false",
+        })
+
+      if (reviewDataError) {
+        console.log(reviewDataError);
+      } else {
+        console.log(reviewData);
+        setIsModalVisible(true)
+      }
+    }
+  };
+
   if (!fontLoaded) {
     return null;
   }
-
-  const Options = ["Yes", "No"];
-
   return (
     <>
       <Modal
@@ -52,7 +135,7 @@ export default function Writereview() {
             <Image source={require("../../../assets/appointmentIcon/review.png")} />
             <Text className="text-[#246bfd] font-UrbanistBold text-[20px]">Review successful!</Text>
             <Text className="font-UrbanistRegular text-center  w-[300px] text-[16px]">Your review has been successfully submitted. thank you very much!</Text>
-            <TouchableOpacity onPress={() => { setIsModalVisible(false) }}
+            <TouchableOpacity onPress={() => router.push("/(tabs)/")}
               className='w-[276px] bg-blue-600 rounded-[100px] h-[58px] justify-center mt-5'
             >
               <Text className='text-white text-center font-UrbanistBold'>OK</Text>
@@ -62,7 +145,6 @@ export default function Writereview() {
       </Modal>
       <ScrollView contentContainerStyle={styles.scrollViewContent}>
         <View style={styles.container}>
-
           <View className="w-[370px]">
             <View className="w-[370px] flex flex-row items-center pb-10 pt-5">
               <TouchableOpacity onPress={() => router.back()}>
@@ -71,14 +153,14 @@ export default function Writereview() {
               <Text className="text-[#212121] font-UrbanistBold text-[24px] pl-5">Write a Review</Text>
             </View>
             <View className="w-[370px] flex justify-center items-center gap-5 mb-2">
-              <Image source={require("../../../assets/doctors/Ellipse.png")} />
+              <Image source={{ uri: doctorImage }} style={{ width: 100, height: 100, borderRadius: 50 }} />
               <View>
                 <Text className="text-[#212121] font-UrbanistBold text-[20px] text-center">How was your experience </Text>
-                <Text className="text-[#212121] font-UrbanistBold text-[20px] text-center">with Dr. Drake Boeson?</Text>
+                <Text className="text-[#212121] font-UrbanistBold text-[20px] text-center">with <Text>{name}</Text>?</Text>
               </View>
               <View className=" w-[350px] flex flex-row  justify-center pb-3">
                 <SafeAreaView>
-                  <FiveStarRating />
+                  <FiveStarRating selectedStars={selectedStars} onStarPress={handleStarPress} />
                 </SafeAreaView>
               </View>
             </View>
@@ -92,7 +174,7 @@ export default function Writereview() {
                 placeholder="Your review here..."
                 style={styles.textInput}
               />
-              <Text className="text-[#212121] font-UrbanistBold text-[20px] pb-5 pt-3">Would you recommend Dr. Drake Boeson to your friends?</Text>
+              <Text className="text-[#212121] font-UrbanistBold text-[20px] pb-5 pt-3">Would you recommend <Text>{name}</Text> to your friends?</Text>
               <View className="flex flex-row items-center pl-2 justify-between w-[130px]">
                 {Options.map((option, index) => (
                   <View key={index} className="flex flex-row items-center justify-center gap-2">
@@ -106,7 +188,6 @@ export default function Writereview() {
               </View>
             </View>
           </View>
-
           <View className="flex flex-row w-[370px] justify-between items-center  pt-3">
             <TouchableOpacity onPress={() => router.back()}>
               <View className=" rounded-3xl pb-3 pt-3 pl-14 pr-14  bg-slate-100 ">
@@ -117,7 +198,7 @@ export default function Writereview() {
             </TouchableOpacity>
             <View style={styles.container}>
               <Pressable
-                onPress={() => setIsModalVisible(true)}
+                onPress={() => writeReview()}
                 style={[
                   styles.button,
                   { backgroundColor: isSubmitEnabled ? '#246bfd' : '#3062cb' }
@@ -133,7 +214,6 @@ export default function Writereview() {
     </>
   )
 }
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,