@treely/strapi-slices 7.16.2 → 8.0.0

package/src/slices/Events/Events.tsx

@@ -1,477 +0,0 @@
-import {
-  DefaultSectionContainer,
-  Wrapper,
-  Spacer,
-  DefaultSectionHeader,
-  SimpleGrid,
-  Box,
-  Button,
-  Flex,
-  Center,
-  Text,
-  BoemlyTag,
-  Select,
-} from 'boemly';
-
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-import EventCard from '../../components/EventCard';
-import { SWRInfiniteKeyLoader } from 'swr/infinite';
-import useEvents from '../../models/hooks/useEvents';
-import {
-  STRAPI_DEFAULT_POPULATE_DEPTH,
-  STRAPI_URI,
-} from '../../constants/strapi';
-import { IntlContext } from '../../components/ContextProvider';
-import { mutate } from 'swr/_internal';
-import { EventType } from '@testing-library/react';
-import StrapiEvent from '../../models/strapi/StrapiEvent';
-import IStrapiData from '../../models/strapi/IStrapiData';
-
-const UPCOMING_BATCH_SIZE = 6;
-const PAST_BATCH_SIZE = 2;
-
-interface FiltersProps {
-  eventTypes: EventType[];
-  languages: {
-    id: number;
-    language: string;
-    countryCode: string;
-  }[];
-}
-
-export interface EventsProps {
-  slice: {
-    upcomingTitle?: string;
-    upcomingDescription?: string;
-    pastTitle: string;
-    pastDescription?: string;
-    filterSearch?: boolean;
-  };
-}
-
-const enum Sort {
-  NEWEST_FIRST = 'newest',
-  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 = (
-    index: any,
-    batchSize: number,
-    startFilter: string
-  ) => {
-    const url = new URL(`/treely-events`, STRAPI_URI);
-    url.searchParams.append(
-      'pagination[start]',
-      (index * batchSize).toString()
-    );
-    url.searchParams.append('pagination[limit]', batchSize.toString());
-    url.searchParams.append(startFilter, now);
-    url.searchParams.append('locale', locale);
-    url.searchParams.append('pLevel', STRAPI_DEFAULT_POPULATE_DEPTH);
-
-    if (sort[0] === Sort.OLDEST_FIRST) {
-      url.searchParams.append('sort', 'start:asc');
-    } else {
-      url.searchParams.append('sort', 'start:desc');
-    }
-
-    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[$or][${eventTypeFilter.length + i}][languages][language]`,
-          filter
-        );
-      });
-    }
-    return `/treely-events` + url.search;
-  };
-
-  const getUpcomingKey: SWRInfiniteKeyLoader = useCallback(
-    (index) =>
-      buildEventsUrl(index, UPCOMING_BATCH_SIZE, 'filters[start][$gte]'),
-    [eventTypeFilter, languageFilter, sort]
-  );
-
-  const getPastKey: SWRInfiniteKeyLoader = useCallback(
-    (index) => buildEventsUrl(index, PAST_BATCH_SIZE, 'filters[start][$lt]'),
-    [eventTypeFilter, languageFilter, sort]
-  );
-
-  const {
-    data: upcomingData,
-    isLoading: isLoadingUpcoming,
-    isLoadingMore: isLoadingMoreUpcoming,
-    canLoadMore: canLoadMoreUpcoming,
-    loadMore: loadMoreUpcoming,
-  } = useEvents({ getKey: getUpcomingKey, batchSize: UPCOMING_BATCH_SIZE });
-
-  const {
-    data: pastData,
-    isLoading: isLoadingPast,
-    isLoadingMore: isLoadingMorePast,
-    canLoadMore: canLoadMorePast,
-    loadMore: loadMorePast,
-  } = useEvents({ getKey: getPastKey, batchSize: PAST_BATCH_SIZE });
-
-  const processEvents = (data: any) => {
-    return (
-      data?.flatMap((d: any) => d?.body?.data)?.filter((t: any) => !!t) || []
-    );
-  };
-
-  // Process upcoming events
-  const upcomingEvents = useMemo(() => {
-    return processEvents(upcomingData);
-  }, [upcomingData]);
-
-  // Process past events
-  const pastEvents = useMemo(() => {
-    return processEvents(pastData);
-  }, [pastData]);
-
-  // 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('pLevel', STRAPI_DEFAULT_POPULATE_DEPTH);
-
-    const response = await fetch(
-      `${STRAPI_URI}/api/treely-events${url.search}`,
-      {
-        headers: {
-          'Strapi-Response-Format': 'v4',
-        },
-      }
-    );
-    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 }))
-    );
-
-    setAllLanguageOptions(
-      Array.from(allLanguages).map((value) => ({ value, label: value }))
-    );
-  }, [locale]);
-
-  // Fetch all options when component mounts
-  useEffect(() => {
-    fetchAllOptions();
-  }, [fetchAllOptions]);
-
-  const removeFilter = (
-    filterType: keyof FiltersProps,
-    valueToRemove: string
-  ) => {
-    if (filterType === 'eventTypes') {
-      setEventTypeFilter((prev) =>
-        prev.filter((item) => item !== valueToRemove)
-      );
-    } else if (filterType === 'languages') {
-      setLanguageFilter((prev) =>
-        prev.filter((item) => item !== valueToRemove)
-      );
-    }
-  };
-
-  useEffect(() => {
-    mutate(getUpcomingKey);
-  }, [eventTypeFilter, languageFilter, sort]);
-
-  return (
-    <DefaultSectionContainer>
-      <Wrapper>
-        {slice.upcomingTitle ? (
-          <>
-            <DefaultSectionHeader
-              title={slice.upcomingTitle}
-              text={slice.upcomingDescription}
-              titleProps={{ maxW: '3xl' }}
-              textProps={{ maxW: '3xl' }}
-            />
-            <Spacer h="10" />
-          </>
-        ) : (
-          <></>
-        )}
-        {slice.filterSearch && (upcomingEvents || pastEvents) ? (
-          <>
-            <Flex
-              justifyContent="space-between"
-              direction={['column-reverse', null, null, 'row']}
-              alignItems="baseline"
-              gap="4"
-            >
-              <Flex
-                direction="column"
-                width="full"
-                justifyContent="start"
-                gap="4"
-              >
-                {/* Filter section */}
-                <Flex
-                  direction={['column', null, null, 'row']}
-                  gap="4"
-                  justifyContent="start"
-                >
-                  <Box position="relative" width={['full', null, null, '56']}>
-                    <Select
-                      isMultiple={true}
-                      isSearchable={true}
-                      id="eventTypeFilter"
-                      size="md"
-                      placeholder={formatMessage({
-                        id: 'sections.events.eventsFilter.eventType',
-                      })}
-                      searchPlaceholder={formatMessage({
-                        id: 'sections.events.eventsFilter.searchPlaceholder',
-                      })}
-                      options={allEventTypeOptions}
-                      value={eventTypeFilter ?? []}
-                      onChange={(selected: string[]) => {
-                        setEventTypeFilter(selected);
-                      }}
-                    />
-                  </Box>
-                  <Box position="relative" width={['full', null, null, '56']}>
-                    <Select
-                      isMultiple={true}
-                      isSearchable={true}
-                      id="languageFilter"
-                      size="md"
-                      placeholder={formatMessage({
-                        id: 'sections.events.eventsFilter.language',
-                      })}
-                      searchPlaceholder={formatMessage({
-                        id: 'sections.events.eventsFilter.searchPlaceholder',
-                      })}
-                      options={allLanguageOptions}
-                      value={languageFilter ?? []}
-                      onChange={(selected: string[]) => {
-                        setLanguageFilter(selected);
-                      }}
-                    />
-                  </Box>
-                </Flex>
-
-                {/* Filter Tags */}
-                <Box display="flex" flexWrap="wrap" minHeight="6" gap="2">
-                  {eventTypeFilter.map((eventType) => {
-                    const event = allEventTypeOptions.find(
-                      (option) => option.value === eventType
-                    );
-                    return (
-                      <BoemlyTag
-                        key={eventType}
-                        isClosable={true}
-                        onClose={() => removeFilter('eventTypes', eventType)}
-                      >
-                        {event?.label}
-                      </BoemlyTag>
-                    );
-                  })}
-
-                  {languageFilter.map((singleLanguage) => {
-                    const language = allLanguageOptions.find(
-                      (option) => option.value === singleLanguage
-                    );
-                    return (
-                      <BoemlyTag
-                        key={singleLanguage}
-                        isClosable={true}
-                        onClose={() =>
-                          removeFilter('languages', singleLanguage)
-                        }
-                      >
-                        {language?.label}
-                      </BoemlyTag>
-                    );
-                  })}
-                </Box>
-              </Flex>
-              {/* Sort Section */}
-              <Box display="flex" gap="1px" width="52" alignItems="center">
-                <Text size="smLowNormal" color="black" width="20">
-                  Sort by:
-                </Text>
-                <Select
-                  isMultiple={false}
-                  borderColor="white"
-                  value={[sort[0]]}
-                  placeholder={sort[0]}
-                  onChange={(selected: string[]) => setSort(selected)}
-                  options={[
-                    {
-                      label: formatMessage({
-                        id: `sections.events.eventsFilter.sortBy.${Sort.NEWEST_FIRST}`,
-                      }),
-                      value: Sort.NEWEST_FIRST,
-                    },
-                    {
-                      label: formatMessage({
-                        id: `sections.events.eventsFilter.sortBy.${Sort.OLDEST_FIRST}`,
-                      }),
-                      value: Sort.OLDEST_FIRST,
-                    },
-                  ]}
-                />
-              </Box>
-            </Flex>
-
-            <Spacer h={['8', null, null, '16']} />
-          </>
-        ) : (
-          <></>
-        )}
-
-        {(!upcomingEvents || upcomingEvents.length === 0) &&
-        !isLoadingUpcoming ? (
-          <Center>
-            {formatMessage({ id: 'sections.events.noUpcomingEvents' })}
-          </Center>
-        ) : (
-          // List of upcoming events
-          <SimpleGrid
-            columns={[1, null, null, null, null, 2]}
-            spacingX="6"
-            gap="6"
-            flexShrink="0"
-            mb={['10', null, null, '20']}
-            placeItems="center"
-          >
-            {upcomingEvents.map((event: IStrapiData<StrapiEvent>) => (
-              <Box key={event.id} width="full" height="full">
-                <EventCard event={event.attributes} />
-              </Box>
-            ))}
-          </SimpleGrid>
-        )}
-        <Flex justifyContent="center">
-          {!isLoadingUpcoming && canLoadMoreUpcoming && (
-            <Button
-              onClick={() => {
-                loadMoreUpcoming();
-              }}
-              variant="solid"
-              isLoading={isLoadingMoreUpcoming}
-            >
-              {formatMessage({ id: 'sections.events.loadMore' })}
-            </Button>
-          )}
-        </Flex>
-      </Wrapper>
-
-      <Spacer h={['10', null, null, '28']} />
-
-      <Box background="primary.50" pt={['8', null, null, '24']}>
-        <Wrapper>
-          <DefaultSectionHeader
-            title={slice.pastTitle}
-            text={slice.pastDescription}
-            titleProps={{ maxW: '3xl' }}
-            textProps={{ maxW: '3xl' }}
-          />
-
-          <Spacer h="10" />
-
-          {(!pastEvents || pastEvents.length === 0) && !isLoadingPast ? (
-            <>
-              <Center>
-                {formatMessage({ id: 'sections.events.noPastEvents' })}
-              </Center>
-              <Spacer h="24" />
-            </>
-          ) : (
-            // List of past events
-            <SimpleGrid
-              columns={[1, null, null, null, null, 2]}
-              spacingX="6"
-              gap="6"
-              flexShrink="0"
-              placeItems="center"
-              mb={['10', null, null, '20']}
-            >
-              {pastEvents.map((event: IStrapiData<StrapiEvent>) => (
-                <Box key={event.id} height="full" width="full">
-                  <EventCard event={event.attributes} />
-                </Box>
-              ))}
-            </SimpleGrid>
-          )}
-          <Flex justifyContent="center">
-            {!isLoadingPast && canLoadMorePast && (
-              <Button
-                mb="20"
-                onClick={() => {
-                  loadMorePast();
-                }}
-                variant="solid"
-                isLoading={isLoadingMorePast}
-              >
-                {formatMessage({ id: 'sections.events.loadMore' })}
-              </Button>
-            )}
-          </Flex>
-        </Wrapper>
-      </Box>
-    </DefaultSectionContainer>
-  );
-};

package/src/slices/Events/index.ts

@@ -1,3 +0,0 @@
-import { Events } from './Events';
-
-export default Events;

package/src/slices/Events/messages.de.ts

@@ -1,14 +0,0 @@
-const messagesDe = {
-  'sections.events.loadMore': 'Mehr laden',
-  'sections.events.noUpcomingEvents':
-    'Keine bevorstehenden Veranstaltungen gefunden',
-  'sections.events.noPastEvents': 'Keine vergangenen Veranstaltungen gefunden',
-  'sections.eventsFilter.searchPlaceholder': 'Suchen',
-  'sections.events.eventsFilter.eventType': 'Event Type',
-  'sections.events.eventsFilter.language': 'Sprache',
-  'sections.events.eventsFilter.sortBy.title': 'Sortieren nach',
-  'sections.events.eventsFilter.sortBy.newest': 'Neueste zuerst',
-  'sections.events.eventsFilter.sortBy.oldest': 'Älteste zuerst',
-};
-
-export default messagesDe;

package/src/slices/Events/messages.en.ts

@@ -1,13 +0,0 @@
-const messagesDe = {
-  'sections.events.loadMore': 'Load more',
-  'sections.events.noUpcomingEvents': 'No upcoming events found',
-  'sections.events.noPastEvents': 'No past events found',
-  'sections.events.eventsFilter.searchPlaceholder': 'Search',
-  'sections.events.eventsFilter.eventType': 'Event Type',
-  'sections.events.eventsFilter.language': 'Language',
-  'sections.events.eventsFilter.sortBy.title': 'Sort by',
-  'sections.events.eventsFilter.sortBy.newest': 'Newest first',
-  'sections.events.eventsFilter.sortBy.oldest': 'Oldest first',
-};
-
-export default messagesDe;

package/src/slices/Facts/Facts.stories.tsx

@@ -1,98 +0,0 @@
-import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import Facts from '.';
-
-export default {
-  title: 'slices/Facts',
-  component: Facts,
-} as Meta<typeof Facts>;
-
-const Template: StoryFn<typeof Facts> = (args) => <Facts {...args} />;
-
-export const Minimal = Template.bind({});
-Minimal.args = {
-  slice: {
-    variant: 'gray',
-    facts: [
-      { key: 'Key 1', value: 'Value 1' },
-      { key: 'Key 2', value: 'Value 2' },
-      { key: 'Key 3', value: 'Value 3' },
-    ],
-  },
-};
-
-export const WithTitle = Template.bind({});
-WithTitle.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    subTitle: 'Sub title',
-    variant: 'gray',
-    facts: [
-      { key: 'Key 1', value: 'Value 1' },
-      { key: 'Key 2', value: 'Value 2' },
-      { key: 'Key 3', value: 'Value 3' },
-    ],
-  },
-};
-
-export const WithButton = Template.bind({});
-WithButton.args = {
-  slice: {
-    button: {
-      id: 1,
-      text: 'Button',
-      url: 'https://tree.ly',
-    },
-    variant: 'gray',
-    facts: [
-      { key: 'Key 1', value: 'Value 1' },
-      { key: 'Key 2', value: 'Value 2' },
-      { key: 'Key 3', value: 'Value 3' },
-      { key: 'Key 4', value: 'Value 4' },
-    ],
-  },
-};
-
-export const Green = Template.bind({});
-Green.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    subTitle: 'Sub title',
-    button: {
-      id: 1,
-      text: 'Button',
-      url: 'https://tree.ly',
-    },
-    variant: 'green',
-    facts: [
-      { key: 'Key 1', value: 'Value 1' },
-      { key: 'Key 2', value: 'Value 2' },
-      { key: 'Key 3', value: 'Value 3' },
-      { key: 'Key 4', value: 'Value 4' },
-    ],
-  },
-};
-
-export const White = Template.bind({});
-White.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    subTitle: 'Sub title',
-    variant: 'white',
-    button: {
-      id: 1,
-      text: 'Button',
-      url: 'https://tree.ly',
-    },
-    facts: [
-      { key: 'Key 1', value: 'Value 1' },
-      { key: 'Key 2', value: 'Value 2' },
-      { key: 'Key 3', value: 'Value 3' },
-      { key: 'Key 4', value: 'Value 4' },
-      { key: 'Key 5', value: 'Value 5' },
-    ],
-  },
-};

package/src/slices/Facts/Facts.test.tsx

@@ -1,100 +0,0 @@
-import React from 'react';
-import { render, screen } from '../../test/testUtils';
-import Facts from '.';
-import { FactsProps } from './Facts';
-
-const defaultProps: FactsProps = {
-  slice: {
-    variant: 'gray',
-    facts: [
-      { key: 'Fact 1', value: 'Value 1' },
-      { key: 'Fact 2', value: 'Value 2' },
-      { key: 'Fact 3', value: 'Value 3' },
-    ],
-  },
-};
-
-const setup = (props = {}) => {
-  const combinedProps = { ...defaultProps, ...props };
-  render(<Facts {...combinedProps} />);
-};
-
-describe('The Facts component', () => {
-  it('displays a link if there is a button in the slice', () => {
-    setup({
-      slice: { ...defaultProps.slice, button: { url: 'url', text: 'Link' } },
-    });
-
-    expect(screen.getByRole('link')).toBeInTheDocument();
-    expect(screen.getByText('Link')).toBeInTheDocument();
-  });
-
-  it('displays the chakra-button with css-e5zvm4 class if the slice.variant is gray', () => {
-    setup({
-      slice: { ...defaultProps.slice, button: { url: 'url', text: 'Link' } },
-    });
-
-    expect(screen.getByRole('link')).toHaveClass('chakra-button css-e5zvm4');
-  });
-
-  it('displays the chakra-button with css-y35h5g class if the slice.variant is green', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        variant: 'green',
-        button: { url: 'url', text: 'Link' },
-      },
-    });
-
-    expect(screen.getByRole('link')).toHaveClass('chakra-button css-y35h5g');
-  });
-
-  it('displays the title header when slice.title is defined', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        title: 'Test Title',
-        tagline: 'Test Tagline',
-        subTitle: 'Test Subtitle',
-      },
-    });
-
-    expect(screen.getByText('Test Title')).toBeInTheDocument();
-    expect(screen.getByText('Test Tagline')).toBeInTheDocument();
-    expect(screen.getByText('Test Subtitle')).toBeInTheDocument();
-  });
-
-  it('does not display the title header when slice.title is undefined', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        tagline: 'Test Tagline',
-        subTitle: 'Test Subtitle',
-      },
-    });
-
-    expect(screen.queryByText('Test Tagline')).toBeNull();
-  });
-
-  it('displays the facts', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-      },
-    });
-
-    expect(screen.getByText('Fact 1')).toBeInTheDocument();
-    expect(screen.getByText('Fact 2')).toBeInTheDocument();
-    expect(screen.getByText('Fact 3')).toBeInTheDocument();
-  });
-
-  it('does not display a link if the button in the slice is undefined', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-      },
-    });
-
-    expect(screen.queryByRole('button')).not.toBeInTheDocument();
-  });
-});