Ft- updating and cancel appointment (#131)

**#### What does this pr do ?**

This practice is about when a patient want to update or cancel his or
her appointment

### Required in this pr

1. First, login to your account and update your account in order to be
patient
2. Book any appointment if you have not already booked 

### How to view this pr 
After logging in, go to your appointment. You will see your appointment
booked; if not, go to the doctor to view her or his appointment and book
an appointment. so in the appointment, you see button fro cancel and
reschedule appointments, and then start to cancel or reschedule
according to your choice

### How to test this

1. If you finish canceling an appointment, you see it removed in
upcoming and it is going to cancelled
2. If you finish to reschedule appointment you will see the date and
time can be changed on appointment found in upcoming

Author: Adadie

app/Appointments/doctorcard/calendal.tsx

@@ -1,18 +1,17 @@
-
 import React, { useState } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet,Image } from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet, Image } from 'react-native';
 import { format, addMonths, subMonths, startOfMonth, endOfMonth, startOfWeek, endOfWeek, eachDayOfInterval, isSameDay } from 'date-fns';
 import { useFonts } from 'expo-font';
 
-const CalendarScreen: React.FC = () => {
+const CalendarScreen: React.FC<{ onDateChange: (date: string) => void }> = ({ onDateChange }) => {
   const [currentDate, setCurrentDate] = useState(new Date());
   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
-  const [fontLoaded]=useFonts({
-    'UrbanistBold':require('../../../assets/fonts/Urbanist-Bold.ttf'),
-    'UrbanistMedium':require("../../../assets/fonts/Urbanist-Medium.ttf"),
-    'Urbanist-SemiBold':require("../../../assets/fonts/Urbanist-SemiBold.ttf")
-   })
+  const [fontLoaded] = useFonts({
+    'UrbanistBold': require('../../../assets/fonts/Urbanist-Bold.ttf'),
+    'UrbanistMedium': require("../../../assets/fonts/Urbanist-Medium.ttf"),
+    'Urbanist-SemiBold': require("../../../assets/fonts/Urbanist-SemiBold.ttf")
+  });
 
   const handlePrevMonth = () => {
     setCurrentDate(prevDate => subMonths(prevDate, 1));
@@ -23,24 +22,25 @@ const CalendarScreen: React.FC = () => {
   };
 
   const handleDayPress = (day: Date) => {
-    setSelectedDate(prevSelectedDate =>
-      isSameDay(prevSelectedDate || new Date(), day) ? null : day
-    );
+    const newSelectedDate = isSameDay(selectedDate || new Date(), day) ? null : day;
+    setSelectedDate(newSelectedDate);
+    if (newSelectedDate) {
+      onDateChange(format(newSelectedDate, 'yyyy-MM-dd'));
+    }
   };
-  
 
   const renderHeader = () => {
     return (
       <View style={styles.header}>
         <Text style={styles.headerText}>{format(currentDate, 'MMMM yyyy')}</Text>
-         <View className='flex flex-row gap-1'>
-         <TouchableOpacity onPress={handlePrevMonth}>
-         <Image  source={require("../../../assets/appointmentIcon/Arcl1.png")}/>
-        </TouchableOpacity>
-        <TouchableOpacity onPress={handleNextMonth}>
-        <Image source={require("../../../assets/appointmentIcon/Arcal.png")}/>
-        </TouchableOpacity>
-         </View>
+        <View className='flex flex-row gap-1'>
+          <TouchableOpacity onPress={handlePrevMonth}>
+            <Image source={require("../../../assets/appointmentIcon/Arcl1.png")} />
+          </TouchableOpacity>
+          <TouchableOpacity onPress={handleNextMonth}>
+            <Image source={require("../../../assets/appointmentIcon/Arcal.png")} />
+          </TouchableOpacity>
+        </View>
       </View>
     );
   };
@@ -50,7 +50,7 @@ const CalendarScreen: React.FC = () => {
     return (
       <View style={styles.daysOfWeek}>
         {daysOfWeek.map(day => (
-          <Text key={day} className='font-UrbanistBold' style={styles.dayOfWeekText}>{day}</Text>
+          <Text key={day} style={styles.dayOfWeekText}>{day}</Text>
         ))}
       </View>
     );
@@ -69,10 +69,10 @@ const CalendarScreen: React.FC = () => {
             onPress={() => handleDayPress(day)}
             style={[
               styles.dayButton,
-              isSameDay(selectedDate || new Date(), day) && styles.selectedDayButton,
+              selectedDate && isSameDay(selectedDate, day) && styles.selectedDayButton,
             ]}
           >
-            <Text style={[styles.dayText, isSameDay(selectedDate || new Date(), day) && styles.selectedDayText]}>
+            <Text style={[styles.dayText, selectedDate && isSameDay(selectedDate, day) && styles.selectedDayText]}>
               {format(day, 'd')}
             </Text>
           </TouchableOpacity>
@@ -81,9 +81,10 @@ const CalendarScreen: React.FC = () => {
     );
   };
 
-  if(!fontLoaded){
-    return null
-    }
+  if (!fontLoaded) {
+    return null;
+  }
+
   return (
     <View style={styles.container}>
       {renderHeader()}
@@ -96,33 +97,33 @@ const CalendarScreen: React.FC = () => {
 const styles = StyleSheet.create({
   container: {
     padding: 20,
-    backgroundColor:'#d3dae7',
-    borderRadius:20,
-    display:'flex',
-    justifyContent:'center',
-    alignItems:'center'
+    backgroundColor: '#d3dae7',
+    borderRadius: 20,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
   },
   header: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    marginBottom:5,
-    width:315
+    marginBottom: 5,
+    width: 315
   },
-  navButton: {
-    fontSize: 16,
-    fontWeight: 'bold',
+  navButtons: {
+    flexDirection: 'row',
+    gap: 1,
   },
   headerText: {
     fontSize: 18,
-    fontFamily:'UrbanistBold'
+    fontFamily: 'UrbanistBold'
   },
   daysOfWeek: {
     flexDirection: 'row',
     flexWrap: 'wrap',
-    marginTop:10,
-    gap:16,
-    marginBottom:10
+    marginTop: 10,
+    gap: 16,
+    marginBottom: 10
   },
   dayOfWeekText: {
     width: 32,
@@ -131,8 +132,8 @@ const styles = StyleSheet.create({
   days: {
     flexDirection: 'row',
     flexWrap: 'wrap',
-    gap:16,
-    paddingLeft:5
+    gap: 16,
+    paddingLeft: 5
   },
   dayButton: {
     width: 32,
@@ -143,21 +144,19 @@ const styles = StyleSheet.create({
   },
   selectedDayButton: {
     backgroundColor: '#246bfd',
-    display:'flex',
-    justifyContent:'center',
-    alignItems:'center'
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
   },
   dayText: {
     width: 60,
     textAlign: 'center',
-    fontFamily:'UrbanistMedium',
-    color:'#424242'
+    fontFamily: 'UrbanistMedium',
+    color: '#424242'
   },
   selectedDayText: {
     color: 'white',
   },
 });
 
 export default CalendarScreen;
-
-

app/Appointments/doctorcard/cardss.tsx

@@ -9,7 +9,8 @@ function Cardscomponent(props: any) {
       });
     }
   };
-
+  
+  
   return (
     <View
       style={props.bacColor}