fix: sort the events in each day cell by time (#2412)

* fix: sort the events in each day cell by time

* fix: reorder issue in calendar day

---------

Co-authored-by: nathan <nathan@appflowy.io>

frontend/appflowy_flutter/lib/plugins/database_view/calendar/application/calendar_bloc.dart

@@ -77,7 +77,6 @@ class CalendarBloc extends Bloc<CalendarEvent, CalendarState> {
             emit(
               state.copyWith(
                 allEvents: allEvents,
-                updateEvent: eventData,
               ),
             );
           },
@@ -380,7 +379,6 @@ class CalendarState with _$CalendarState {
     CalendarEventData<CalendarDayEvent>? createdEvent,
     CalendarEventData<CalendarDayEvent>? newEvent,
     required List<String> deleteEventIds,
-    CalendarEventData<CalendarDayEvent>? updateEvent,
     required Option<CalendarLayoutSettingsPB> settings,
     required DatabaseLoadingState loadingState,
     required Option<FlowyError> noneOrError,

frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/calendar_day.dart

@@ -48,14 +48,13 @@ class CalendarDayCard extends StatelessWidget {
     return ChangeNotifierProvider(
       create: (_) => _CardEnterNotifier(),
       builder: (context, child) {
-        List<GestureDetector> cards = _buildCards(context);
-
         Widget? multipleCards;
-        if (cards.isNotEmpty) {
+        if (events.isNotEmpty) {
           multipleCards = Flexible(
             child: ListView.separated(
-              itemBuilder: (BuildContext context, int index) => cards[index],
+              itemBuilder: (BuildContext context, int index) =>
-              itemCount: cards.length,
+                  _buildCard(context, events[index]),
+              itemCount: events.length,
               padding: const EdgeInsets.fromLTRB(8.0, 0, 8.0, 8.0),
               separatorBuilder: (BuildContext context, int index) =>
                   VSpace(GridSize.typeOptionSeparatorHeight),
@@ -97,8 +96,7 @@ class CalendarDayCard extends StatelessWidget {
     );
   }
 
-  List<GestureDetector> _buildCards(BuildContext context) {
+  GestureDetector _buildCard(BuildContext context, CalendarDayEvent event) {
-    final children = events.map((CalendarDayEvent event) {
     final cellBuilder = CardCellBuilder<String>(_rowCache.cellCache);
     final rowInfo = _rowCache.getRow(event.eventId);
 
@@ -203,8 +201,6 @@ class CalendarDayCard extends StatelessWidget {
         ),
       ),
     );
-    }).toList();
-    return children;
   }
 
   void _showRowDetailPage(CalendarDayEvent event, BuildContext context) {

frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/calendar_page.dart

@@ -72,19 +72,6 @@ class _CalendarPageState extends State<CalendarPage> {
                 );
               },
             ),
-            BlocListener<CalendarBloc, CalendarState>(
-              listenWhen: (p, c) => p.updateEvent != c.updateEvent,
-              listener: (context, state) {
-                if (state.updateEvent != null) {
-                  _eventController.removeWhere(
-                    (element) =>
-                        state.updateEvent!.event!.eventId ==
-                        element.event!.eventId,
-                  );
-                  _eventController.add(state.updateEvent!);
-                }
-              },
-            ),
             BlocListener<CalendarBloc, CalendarState>(
               listenWhen: (p, c) => p.createdEvent != c.createdEvent,
               listener: (context, state) {
@@ -196,7 +183,12 @@ class _CalendarPageState extends State<CalendarPage> {
     isInMonth,
   ) {
     final events = calenderEvents.map((value) => value.event!).toList();
-
+    // Sort the events by timestamp. Because the database view is not
+    // reserving the order of the events. Reserving the order of the rows/events
+    // is implemnted in the develop branch(WIP). Will be replaced with that.
+    events.sort(
+      (a, b) => a.event.timestamp.compareTo(b.event.timestamp),
+    );
     return CalendarDayCard(
       viewId: widget.view.id,
       isToday: isToday,

frontend/appflowy_flutter/lib/plugins/database_view/widgets/card/cells/card_cell.dart

@@ -12,6 +12,9 @@ typedef CellRenderHook<C, CustomCardData> = Widget? Function(
 );
 typedef RenderHookByFieldType<C> = Map<FieldType, CellRenderHook<dynamic, C>>;
 
+/// The [RowCardRenderHook] is used to customize the rendering of the
+///  card cell. Each cell has itw own field type. So the [renderHook]
+///  is a map of [FieldType] to [CellRenderHook].
 class RowCardRenderHook<CustomCardData> {
   final RenderHookByFieldType<CustomCardData> renderHook = {};
   RowCardRenderHook();
@@ -25,12 +28,14 @@ class RowCardRenderHook<CustomCardData> {
     renderHook[FieldType.MultiSelect] = hookFn;
   }
 
+  /// Add a render hook for the [FieldType.RichText]
   void addTextFieldHook(
     CellRenderHook<String, CustomCardData?> hook,
   ) {
     renderHook[FieldType.RichText] = _typeSafeHook<String>(hook);
   }
 
+  /// Add a render hook for the [FieldType.Date]
   void addDateFieldHook(
     CellRenderHook<DateCellDataPB, CustomCardData?> hook,
   ) {