Currently there are two files EditSchedule and rectangle. I want the text to update appropriate when i drag the rectangle down. As in when the bottom edge of the rectangle goes down the end time increases. If the bottom edge goes up the end time decreases. Is this a correct implementation


import React, { useState } from "react";
import { View, StyleSheet, Text } from "react-native";
import moment from "moment";
import Timetable from "react-native-calendar-timetable";
import Rectangle from "../common/rectanglev2";
const CALENDAR_WIDTH = 807;
const CALENDAR_HEIGHT = 670;

const EditSchedule = () => {
    // Set up the date range for Monday to Friday of the current week
    const [from] = React.useState(moment().startOf('week').add(1, 'days').toDate());
    const [till] = React.useState(moment().startOf('week').add(5, 'days').toDate());
    const range = { from, till };
    const [events, setEvents] = useState({
        '0': { start: { hour: 8, minute: 0 }, end: { hour: 10, minute: 0 } },
        '1': { start: { hour: 8, minute: 0 }, end: { hour: 10, minute: 0 } },
        '2': { start: { hour: 8, minute: 0 }, end: { hour: 10, minute: 0 } },
        '3': { start: { hour: 8, minute: 0 }, end: { hour: 10, minute: 0 } },
        '4': { start: { hour: 8, minute: 0 }, end: { hour: 10, minute: 0 } },
    });

    // Set up the event data
    const [items] = React.useState([
        {
            title: 'Event 1',
            startDate: moment().startOf('week').add(1, 'days').hour(8).toDate(),
            endDate: moment().startOf('week').add(1, 'days').hour(10).toDate(),
        },
        {
            title: 'Event 2',
            startDate: moment().startOf('week').add(2, 'days').hour(8).toDate(),
            endDate: moment().startOf('week').add(2, 'days').hour(10).toDate(),
        },
        {
            title: 'Event 3',
            startDate: moment().startOf('week').add(3, 'days').hour(8).toDate(),
            endDate: moment().startOf('week').add(3, 'days').hour(10).toDate(),
        },
        {
            title: 'Event 4',
            startDate: moment().startOf('week').add(4, 'days').hour(8).toDate(),
            endDate: moment().startOf('week').add(4, 'days').hour(10).toDate(),
        },
        {
            title: 'Event 5',
            startDate: moment().startOf('week').add(5, 'days').hour(8).toDate(),
            endDate: moment().startOf('week').add(5, 'days').hour(10).toDate(),
        },
    ]);

    const CustomHeader = ({ date }) => (
        <View style={styles.headerContainer}>
            <Text style={styles.headerText}>{moment(date).format('ddd')}</Text>
        </View>
    );

    const calculateDayIndex = (date) => {
        return moment(date).isoWeekday();
    };

    const handleUpdateEndTime = (dayIndex, minutesChange) => {
        setEvents(prevEvents => {
            const currDay = prevEvents[dayIndex];
            const {hour, minute} = currDay.end;

            const date = new Date(2023, 0, 1, hour, minute);
            date.setMinutes(date.getMinutes() + minutesChange);
            return {
                ...prevEvents,
                [dayIndex]: {
                    ...currDay,
                    end: {
                        hour: date.getHours(),
                        minute: date.getMinutes()
                    }
                }
            }
        });
    };

    return (
        <View style={styles.container}>
            <View style={styles.outerCalendarContainer}>
                <Timetable
                    items={items}
                    range={range}
                    timeWidth={50}
                    hourHeight={60}
                    renderHeader={CustomHeader}
                    renderItem={props => {
                        const dayIndex = calculateDayIndex(props.item.startDate);
                        return (
                            <Rectangle 
                                {...props} 
                                dayIndex={dayIndex} 
                                daysTotal={5} 
                                index={props.index}
                                onUpdateEndTime={handleUpdateEndTime}
                                event={events[dayIndex - 1]} // Pass the event data
                            />
                        );
                    }}
                    is12Hour={true}
                    fromHour={8}
                    toHour={18}
                    style={styles.timetable}
                    columnWidth={700 / 5 - 1}
                    hideNowLine={true}
                />
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#ffffff',
        borderRadius: 20,
        shadowColor: "#000",
        shadowOffset: {
            width: 4,
            height: 0,
        },
        shadowOpacity: 0.15,
        shadowRadius: 5,
        elevation: 6,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    title: {
        fontSize: 14,
        fontWeight: 'bold',
        padding: 4,
    },
    headerText: {
        fontWeight: 'bold',
        color: '#000',
    },
    outerCalendarContainer: {
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        paddingTop: 50,
    },
    timetable: {
        container:{
            width: CALENDAR_WIDTH,
            height: 760,
            backgroundColor: 'white',
            borderRadius: 10,
            overflow: 'hidden',
            justifyContent: 'center',
            alignItems: 'center',
            paddingBottom: 40,
            borderColor:'#E0E0E0',
            borderWidth: 1,
        },
        lines:{
            borderLeftWidth: 0,
            borderRightWidth: 0,
            borderColor: '#E0E0E0', // light grey
        },
        headersContainer: {
            height:105,
            width: CALENDAR_WIDTH,
            backgroundColor: '#e6e9ed',
            justifyContent: 'center',
        },
        headerContainer: {
            backgroundColor: '#f1f2f5',
            marginLeft: 0,
            paddingTop: 40,
            height:87,
            borderRadius: 5,
            width:130
        }
    },
});

export default EditSchedule;



import React from 'react';
import Animated, { useAnimatedStyle, useSharedValue, runOnJS } from 'react-native-reanimated';
import { GestureDetector, Gesture } from 'react-native-gesture-handler';
import { View, Text } from 'react-native';

const Rectangle = ({ style, item, dayIndex, daysTotal, index, onUpdateEndTime, event }) => {
  const initialHeight = style.height;
  const animatedHeight = useSharedValue(initialHeight);
  const translateY = useSharedValue(0);

  const pinchGesture = Gesture.Pinch()
    .onUpdate((event) => {
      const newHeight = initialHeight * event.scale;
      animatedHeight.value = newHeight;
      
      // Calculate time change in minutes
      const heightDiff = newHeight - initialHeight;
      const minutesChange = Math.round(heightDiff);
      
      // Call the onUpdateEndTime function with the new end time
      runOnJS(onUpdateEndTime)(dayIndex, minutesChange);
    })

  const panGesture = Gesture.Pan()
    .onUpdate((event) => {
      translateY.value = event.translationY;
      console.log('Pan gesture detected:', event.translationY);
    })

  const composedGesture = Gesture.Race(pinchGesture, panGesture);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      height: animatedHeight.value,
      transform: [{ translateY: translateY.value }],
    };
  });
  const backgroundColors = ['#ffd2e9', '#ffe8cc', '#d4e8ff', '#ffdada', '#d5ffe0'];
  const leftBorderColors = ['#df4c98', '#c67c2d', '#366fce', '#e47070', '#51a965'  ];
  const backgroundColor = backgroundColors[dayIndex - 1];
  const leftBorderColor = leftBorderColors[dayIndex - 1];

  const formatTime = (hour, minute) => {
    return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
  };

  return (
    <GestureDetector gesture={composedGesture}>
      <Animated.View style={[
        {
          ...style,
          width: 80,
          backgroundColor: backgroundColor,
          elevation: 5,
          borderLeftWidth: 4,
          borderLeftColor: leftBorderColor,
        },
        animatedStyle,
      ]}
      >
        <Text>{item.title}</Text>
        {event && (
          <View>
            <Text>Start: {formatTime(event.start.hour, event.start.minute)}</Text>
            <Text>End: {formatTime(event.end.hour, event.end.minute)}</Text>
          </View>
        )}
      </Animated.View>
    </GestureDetector>
  );
};

export default Rectangle;