Agenda: Generic AgendaEntry items

[JacobJaffe]

Hello! First, thanks for this library. This is an awesome set of tools.

This PR attempts to solve two issues with the current Agenda:

1. The component is not generic. Specifically, AgendaEntry is not generic, nor the functions that use it, such as renderItem
2. The Agenda has a bug with using indexes as the keys. This is causing rendering issues because data is falsely considered to be stable across renders. The result is that, while updating the data list of the underlying FlatList (either through calendar navigation, or items updating. Anything that touches state.reservations), items are duplicated and / or not shown. (this is documented at https://github.com/wix/react-native-calendars/issues/1791#issue-1138143626)

This is a backwards compatible solution to both of these. The types of the functions will now be inferred from the data type, and the key extractor can now be specified. (FWIW, I'm pretty sure the default prop of the index -> string extractor isn't needed. This is the default the flatlist would use anyways, and is bug prone. However, I've left it to keep this PR backwards compatible).

This should also: close #1792 -- this attempts to add a fix to issue (2) above. close #1683 -- this attempts to add a fix to issue (1) above. close #1791

#1777 doesn't have much info, but it looks like this will solve that too.

Please let me know if this needs any updates, or any other suggestions.

UPDATE:

this now only covers (1). Thanks for fixing (2) separately!

[Inbal-Tish]

@JacobJaffe Thank you for the PR. Please remove formatting so I can review only the relevant code changes. Also, I'll add the fix for the Agenda keyExtractor and allow passing one (#1795), so please focus your PR on the generic type and I'll review it with priority. Thank you again!

[vlkpa]

It would be great to merge this. We want to use custom data in entries and this is easy way how to do it.

[1ErikaMarques]

That would be very helpful, I'm planning to add custom data to the items, but it is impossible at the moment.

[JacobJaffe]

Hi @Inbal-Tish , I've updated this PR. I rebased it today, and updated it to the changes that have occurred since it originally was posted.

Here's an example of what this will look like, also. In this screenshot, you can see how the inline renderItem is correctly inferring the generic AgendaEntry defined by items

example/src/screens/agenda.tsx:

Want type safety now, before this lands?

Here's how I'm currently doing this. I wrap the Agenda in an opinionated abstraction that types for the data type I use in my app:

Something like this:

import { Agenda, AgendaSchedule } from "react-native-calendars";

type CustomAgendaItem = { ... }; // Your data type!

export const CustomAgenda: React.FC<
  {
    items: CustomAgendaItem[];
    onPressItem?: (item: CustomAgendaItem) => void;
  } & 
  // Expose a subset of the Agenda props, whichever ones you need.
  Pick<
    React.ComponentProps<typeof Agenda>,
    "onCalendarToggled" | "refreshing" | "onRefresh"
  >
> = ({ items, onPressItem, ...agendaProps }) => {
  return (
    <Agenda
      {...agendaProps}
      items={items as unknown as AgendaSchedule}
      renderItem={(item, isFirst) => (
        <AgendaItem
          isFirst={isFirst}
          item={item as unknown as CustomAgendaItem}
          onPress={
            onPressItem
              ? () => onPressItem(item as unknown as CustomAgendaItem)
              : undefined
          }
        />
      )}
    />
  );
};

...

const AgendaItem: React.FC<{
  item: CustomAgendaItem;
  onPress?: () => void;
  isFirst?: boolean;
}> = ({ item, onPress, isFirst }) => {
   ...
};

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Tobertet]

@Inbal-Tish Can you, or anyone in wix, please review this PR?

[LazyAfternoons]

Any news on this?

[thaynarbo]

Is anyone taking a look at it?

[ddedic]

+1

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.