@treely/strapi-slices 7.3.0 → 7.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treely/strapi-slices",
-  "version": "7.3.0",
+  "version": "7.4.1",
   "license": "MIT",
   "author": "Tree.ly FlexCo",
   "description": "@treely/strapi-slices is a open source library maintained by Tree.ly.",

package/src/components/EventCard/EventCard.test.tsx

@@ -36,7 +36,7 @@ describe('The EventCard component', () => {
 
     expect(screen.getByRole('link')).toHaveAttribute(
       'href',
-      defaultProps.event.button.url
+      defaultProps.event.button?.url
     );
 
     expect(screen.queryByText('Recommended')).not.toBeInTheDocument();
@@ -57,7 +57,7 @@ describe('The EventCard component', () => {
     const firstSpeakerImage = screen.getAllByRole('img')[2];
     expect(firstSpeakerImage).toHaveAttribute(
       'alt',
-      defaultProps.event.speakers[0].image.alt
+      defaultProps.event.speakers?.[0]?.image.alt
     );
 
     await waitFor(() => userEvent.hover(firstSpeakerImage));
@@ -66,7 +66,7 @@ describe('The EventCard component', () => {
     const secondSpeakerImage = screen.getAllByRole('img')[3];
     expect(secondSpeakerImage).toHaveAttribute(
       'alt',
-      defaultProps.event.speakers[1].image.alt
+      defaultProps.event.speakers?.[1]?.image.alt
     );
 
     await waitFor(() => userEvent.hover(secondSpeakerImage));

package/src/components/EventCard/EventCard.tsx

@@ -266,42 +266,46 @@ export const EventCard = ({ event }: EventCardProps): JSX.Element => {
           flexDir={mobile ? 'column-reverse' : 'row'}
           gap={mobile ? '4' : '0'}
         >
-          <Flex width={mobile ? 'full' : 'auto'}>
-            <StrapiLinkButton
-              key={event.button.id}
-              size="md"
-              variant={event.buttonVariant}
-              link={event.button}
-              rightIcon={<CaretRight size="10" />}
-              width="full"
-            />
-          </Flex>
-          <Flex flexDir="row" gap="2">
-            {event.speakers.map((speaker) => (
-              <Box key={speaker.id}>
-                <Box
-                  width={['10', null, null, '12']}
-                  height={['10', null, null, '12']}
-                  position="relative"
-                  borderRadius="2xl"
-                >
-                  <Tooltip label={speaker.name}>
-                    <Image
-                      src={strapiMediaUrl(speaker.image.img, 'medium')}
-                      alt={speaker.image.alt}
-                      fill
-                      style={{
-                        objectFit: speaker.image.objectFit || 'cover',
-                        borderRadius: 'var(--boemly-radii-md)',
-                        border:
-                          '1px solid, var(--whiteAlpha-700, rgba(255, 255, 255, 0.64))',
-                      }}
-                    />
-                  </Tooltip>
+          {event.button && (
+            <Flex width={mobile ? 'full' : 'auto'}>
+              <StrapiLinkButton
+                key={event.button.id}
+                size="md"
+                variant={event.buttonVariant}
+                link={event.button}
+                rightIcon={<CaretRight size="10" />}
+                width="full"
+              />
+            </Flex>
+          )}
+          {event.speakers && event.speakers.length > 0 && (
+            <Flex flexDir="row" gap="2">
+              {event.speakers.map((speaker) => (
+                <Box key={speaker.id}>
+                  <Box
+                    width={['10', null, null, '12']}
+                    height={['10', null, null, '12']}
+                    position="relative"
+                    borderRadius="2xl"
+                  >
+                    <Tooltip label={speaker.name}>
+                      <Image
+                        src={strapiMediaUrl(speaker.image.img, 'medium')}
+                        alt={speaker.image.alt}
+                        fill
+                        style={{
+                          objectFit: speaker.image.objectFit || 'cover',
+                          borderRadius: 'var(--boemly-radii-md)',
+                          border:
+                            '1px solid, var(--whiteAlpha-700, rgba(255, 255, 255, 0.64))',
+                        }}
+                      />
+                    </Tooltip>
+                  </Box>
                 </Box>
-              </Box>
-            ))}
-          </Flex>
+              ))}
+            </Flex>
+          )}
         </Flex>
       </Flex>
     </Box>

package/src/models/strapi/StrapiEvent.ts

@@ -19,10 +19,10 @@ export enum EventType {
 interface StrapiEvent {
   title: string;
   description: string;
-  button: StrapiLink;
+  button?: StrapiLink;
   buttonVariant?: 'outline' | 'ghost' | 'link' | 'solid' | 'outlineWhite';
   recommended?: boolean;
-  speakers: {
+  speakers?: {
     id: number;
     name: string;
     image: StrapiImage;

package/src/slices/Events/Events.stories.tsx

@@ -16,7 +16,7 @@ const Template: StoryFn<typeof Events> = (args) => <Events {...args} />;
 export const Minimal = Template.bind({});
 Minimal.args = {
   slice: {
-    upcomingTitle: 'Tree.ly Events',
+    upcomingTitle: 'Ready to Learn more about Forest Climate Protection?',
     upcomingDescription: 'Join us for these amazing events',
     pastTitle: 'Past Events',
     pastDescription: 'Check out our past events',
@@ -27,7 +27,7 @@ Minimal.args = {
 export const WithFilterSearch = Template.bind({});
 WithFilterSearch.args = {
   slice: {
-    upcomingTitle: 'Tree.ly Events',
+    upcomingTitle: 'Ready to Learn more about Forest Climate Protection?',
     upcomingDescription: 'Join us for these amazing events',
     pastTitle: 'Past Events',
     pastDescription: 'Check out our past events',

package/src/slices/Events/Events.test.tsx

@@ -58,6 +58,12 @@ describe('The Events slice', () => {
     jest.useFakeTimers().setSystemTime(NOW);
     getKeyCalls = [];
 
+    global.fetch = jest.fn().mockResolvedValue({
+      json: jest.fn().mockResolvedValue({
+        data: [upcomingEventMock, pastEventMock],
+      }),
+    });
+
     (useEvents as jest.Mock).mockImplementation(({ getKey }) => {
       const key = getKey(0, null);
       getKeyCalls.push(key.toString());
@@ -239,7 +245,7 @@ describe('The Events slice', () => {
           expect.arrayContaining([
             expect.stringContaining('filters[start][$gte]'),
             expect.stringContaining(
-              'filters[$and][0][eventTypes][eventType]=Conference'
+              'filters[$or][0][eventTypes][eventType]=Conference'
             ),
           ])
         );
@@ -274,7 +280,7 @@ describe('The Events slice', () => {
           expect.arrayContaining([
             expect.stringContaining('filters[start][$gte]'),
             expect.stringContaining(
-              'filters[$and][0][languages][language]=German'
+              'filters[$or][0][languages][language]=German'
             ),
           ])
         );

package/src/slices/Events/Events.tsx

@@ -57,12 +57,24 @@ const enum Sort {
   OLDEST_FIRST = 'oldest',
 }
 
+interface EventOption {
+  value: string;
+  label: string;
+}
+
 export const Events: React.FC<EventsProps> = ({ slice }: EventsProps) => {
   const { formatMessage, locale } = useContext(IntlContext);
   const [eventTypeFilter, setEventTypeFilter] = useState([] as string[]);
   const [languageFilter, setLanguageFilter] = useState([] as string[]);
   const [sort, setSort] = useState([Sort.NEWEST_FIRST] as string[]);
 
+  const [allEventTypeOptions, setAllEventTypeOptions] = useState<EventOption[]>(
+    []
+  );
+  const [allLanguageOptions, setAllLanguageOptions] = useState<EventOption[]>(
+    []
+  );
+
   const now = new Date().toISOString();
 
   const buildEventsUrl = (
@@ -86,12 +98,19 @@ export const Events: React.FC<EventsProps> = ({ slice }: EventsProps) => {
       url.searchParams.append('sort', 'start:desc');
     }
 
-    if (languageFilter.length || eventTypeFilter.length) {
-      [...languageFilter, ...eventTypeFilter].forEach((filter, i) => {
-        const filterKey =
-          i < languageFilter.length ? 'languages' : 'eventTypes';
+    if (eventTypeFilter.length) {
+      eventTypeFilter.forEach((filter, i) => {
+        url.searchParams.append(
+          `filters[$or][${i}][eventTypes][eventType]`,
+          filter
+        );
+      });
+    }
+
+    if (languageFilter.length) {
+      languageFilter.forEach((filter, i) => {
         url.searchParams.append(
-          `filters[$and][${i}][${filterKey}][${filterKey.slice(0, -1)}]`,
+          `filters[$or][${eventTypeFilter.length + i}][languages][language]`,
           filter
         );
       });
@@ -131,6 +150,7 @@ export const Events: React.FC<EventsProps> = ({ slice }: EventsProps) => {
       data?.flatMap((d: any) => d?.body?.data)?.filter((t: any) => !!t) || []
     );
   };
+
   // Process upcoming events
   const upcomingEvents = useMemo(() => {
     return processEvents(upcomingData);
@@ -141,40 +161,53 @@ export const Events: React.FC<EventsProps> = ({ slice }: EventsProps) => {
     return processEvents(pastData);
   }, [pastData]);
 
-  const combinedEvents = useMemo(() => {
-    return upcomingEvents.concat(pastEvents);
-  }, [upcomingEvents, pastEvents]);
-
-  const getOptions = (items: any[], key: string, selectedFilters: string[]) => {
-    const uniqueValues = new Set<string>();
-
-    const options = items
-      .flatMap((card) =>
-        card.attributes[key].map((item: any) => ({
-          value: item[key.slice(0, -1)],
-          label: item[key.slice(0, -1)],
-        }))
-      )
-      .filter((option) => {
-        if (uniqueValues.has(option.value)) return false;
-        uniqueValues.add(option.value);
-        return true;
-      });
+  // Function to fetch all possible options
+  const fetchAllOptions = useCallback(async () => {
+    const url = new URL(`/treely-events`, STRAPI_URI);
+    url.searchParams.append('locale', locale);
+    url.searchParams.append('populate', 'deep,6');
 
-    return options.concat(
-      selectedFilters
-        .filter((selected) => !uniqueValues.has(selected))
-        .map((selected) => ({ value: selected, label: selected }))
+    const response = await fetch(
+      `${STRAPI_URI}/api/treely-events${url.search}`
+    );
+    const data = await response.json();
+
+    const events = data?.data || [];
+
+    // Extract all event types
+    const allEventTypes = new Set<string>();
+    events.forEach((event: any) => {
+      if (event?.attributes?.eventTypes) {
+        event.attributes.eventTypes.forEach((item: any) => {
+          allEventTypes.add(item.eventType);
+        });
+      }
+    });
+
+    // Extract all languages
+    const allLanguages = new Set<string>();
+    events.forEach((event: any) => {
+      if (event?.attributes?.languages) {
+        event.attributes.languages.forEach((item: any) => {
+          allLanguages.add(item.language);
+        });
+      }
+    });
+
+    // Update state with all options
+    setAllEventTypeOptions(
+      Array.from(allEventTypes).map((value) => ({ value, label: value }))
     );
-  };
 
-  const eventTypeOptions = useMemo(() => {
-    return getOptions(combinedEvents, 'eventTypes', eventTypeFilter);
-  }, [combinedEvents]);
+    setAllLanguageOptions(
+      Array.from(allLanguages).map((value) => ({ value, label: value }))
+    );
+  }, [locale]);
 
-  const languageOptions = useMemo(() => {
-    return getOptions(combinedEvents, 'languages', languageFilter);
-  }, [combinedEvents]);
+  // Fetch all options when component mounts
+  useEffect(() => {
+    fetchAllOptions();
+  }, [fetchAllOptions]);
 
   const removeFilter = (
     filterType: keyof FiltersProps,
@@ -203,6 +236,8 @@ export const Events: React.FC<EventsProps> = ({ slice }: EventsProps) => {
             <DefaultSectionHeader
               title={slice.upcomingTitle}
               text={slice.upcomingDescription}
+              titleProps={{ maxW: '3xl' }}
+              textProps={{ maxW: '3xl' }}
             />
             <Spacer h="10" />
           </>
@@ -241,7 +276,7 @@ export const Events: React.FC<EventsProps> = ({ slice }: EventsProps) => {
                       searchPlaceholder={formatMessage({
                         id: 'sections.events.eventsFilter.searchPlaceholder',
                       })}
-                      options={eventTypeOptions}
+                      options={allEventTypeOptions}
                       value={eventTypeFilter ?? []}
                       onChange={(selected: string[]) => {
                         setEventTypeFilter(selected);
@@ -260,7 +295,7 @@ export const Events: React.FC<EventsProps> = ({ slice }: EventsProps) => {
                       searchPlaceholder={formatMessage({
                         id: 'sections.events.eventsFilter.searchPlaceholder',
                       })}
-                      options={languageOptions}
+                      options={allLanguageOptions}
                       value={languageFilter ?? []}
                       onChange={(selected: string[]) => {
                         setLanguageFilter(selected);
@@ -272,7 +307,7 @@ export const Events: React.FC<EventsProps> = ({ slice }: EventsProps) => {
                 {/* Filter Tags */}
                 <Box display="flex" flexWrap="wrap" minHeight="6" gap="2">
                   {eventTypeFilter.map((eventType) => {
-                    const event = eventTypeOptions.find(
+                    const event = allEventTypeOptions.find(
                       (option) => option.value === eventType
                     );
                     return (
@@ -287,7 +322,7 @@ export const Events: React.FC<EventsProps> = ({ slice }: EventsProps) => {
                   })}
 
                   {languageFilter.map((singleLanguage) => {
-                    const language = languageOptions.find(
+                    const language = allLanguageOptions.find(
                       (option) => option.value === singleLanguage
                     );
                     return (
@@ -355,11 +390,7 @@ export const Events: React.FC<EventsProps> = ({ slice }: EventsProps) => {
             placeItems="center"
           >
             {upcomingEvents.map((event: IStrapiData<StrapiEvent>) => (
-              <Box
-                key={event.id}
-                width="full"
-                height={['full', null, null, 'xl']}
-              >
+              <Box key={event.id} width="full" height="full">
                 <EventCard event={event.attributes} />
               </Box>
             ))}
@@ -387,6 +418,8 @@ export const Events: React.FC<EventsProps> = ({ slice }: EventsProps) => {
           <DefaultSectionHeader
             title={slice.pastTitle}
             text={slice.pastDescription}
+            titleProps={{ maxW: '3xl' }}
+            textProps={{ maxW: '3xl' }}
           />
 
           <Spacer h="10" />
@@ -409,11 +442,7 @@ export const Events: React.FC<EventsProps> = ({ slice }: EventsProps) => {
               mb={['10', null, null, '20']}
             >
               {pastEvents.map((event: IStrapiData<StrapiEvent>) => (
-                <Box
-                  key={event.id}
-                  height={['full', null, null, 'xl']}
-                  width="full"
-                >
+                <Box key={event.id} height="full" width="full">
                   <EventCard event={event.attributes} />
                 </Box>
               ))}