@selfcommunity/react-ui 0.7.50-events.55 → 0.7.50-events.56

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/lib/cjs/components/Events/Events.d.ts +11 -1
  2. package/lib/cjs/components/Events/Events.js +30 -26
  3. package/lib/cjs/components/Events/PastEventsFilter.d.ts +6 -0
  4. package/lib/cjs/components/Events/PastEventsFilter.js +30 -0
  5. package/lib/esm/components/Events/Events.d.ts +11 -1
  6. package/lib/esm/components/Events/Events.js +30 -27
  7. package/lib/esm/components/Events/PastEventsFilter.d.ts +6 -0
  8. package/lib/esm/components/Events/PastEventsFilter.js +27 -0
  9. package/lib/umd/react-ui.js +1 -1
  10. package/package.json +7 -7
package/lib/cjs/components/Events/Events.d.ts CHANGED
@@ -1,10 +1,20 @@
1
+ import { EndpointType } from '@selfcommunity/api-services';
2
+ import React from 'react';
1
3
  import { EventProps, EventSkeletonProps } from '../Event';
4
+ export declare const EventsChipRoot: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
5
+ ref?: React.Ref<HTMLDivElement>;
6
+ }, "avatar" | "label" | "style" | "className" | "tabIndex" | "color" | "children" | "sx" | "classes" | "variant" | "disabled" | "size" | "icon" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
2
7
  export interface EventsProps {
3
8
  /**
4
9
  * Overrides or extends the styles applied to the component.
5
10
  * @default null
6
11
  */
7
12
  className?: string;
13
+ /**
14
+ * Event API Endpoint
15
+ * @default Endpoints.SearchEvents
16
+ */
17
+ endpoint: EndpointType;
8
18
  /**
9
19
  * Feed API Query Params
10
20
  * @default [{'limit': 20, 'offset': 0}]
@@ -31,7 +41,7 @@ export interface EventsProps {
31
41
  */
32
42
  filters?: JSX.Element;
33
43
  /** If true, it means that the endpoint fetches all events available
34
- * @default false
44
+ * @default true
35
45
  */
36
46
  general?: boolean;
37
47
  /**
package/lib/cjs/components/Events/Events.js CHANGED
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.EventsChipRoot = void 0;
3
4
  const tslib_1 = require("tslib");
4
5
  const jsx_runtime_1 = require("react/jsx-runtime");
5
6
  const material_1 = require("@mui/material");
@@ -18,6 +19,7 @@ const CreateEventButton_1 = tslib_1.__importDefault(require("../CreateEventButto
18
19
  const Event_1 = tslib_1.__importStar(require("../Event"));
19
20
  const Skeleton_1 = tslib_1.__importDefault(require("../Events/Skeleton"));
20
21
  const constants_1 = require("./constants");
22
+ const PastEventsFilter_1 = tslib_1.__importDefault(require("./PastEventsFilter"));
21
23
  const classes = {
22
24
  root: `${constants_1.PREFIX}-root`,
23
25
  filters: `${constants_1.PREFIX}-filters`,
@@ -39,9 +41,10 @@ const Root = (0, styles_1.styled)(material_1.Box, {
39
41
  name: constants_1.PREFIX,
40
42
  slot: 'Root'
41
43
  })(() => ({}));
42
- const ChipRoot = (0, styles_1.styled)(material_1.Chip, {
44
+ exports.EventsChipRoot = (0, styles_1.styled)(material_1.Chip, {
43
45
  name: constants_1.PREFIX,
44
- slot: 'ChipRoot'
46
+ slot: 'EventsChipRoot',
47
+ shouldForwardProp: (prop) => prop !== 'showFollowed' && prop !== 'showPastEvents'
45
48
  })(() => ({}));
46
49
  /**
47
50
  * > API documentation for the Community-JS Events component. Learn about the available props and the CSS API.
@@ -76,19 +79,15 @@ function Events(inProps) {
76
79
  props: inProps,
77
80
  name: constants_1.PREFIX
78
81
  });
79
- // TODO:
80
- /**
81
- * Add as prop API Endpoint
82
- * endpoint: EndpointType;
83
- */
84
- const { endpointQueryParams = { limit: 8, offset: Pagination_1.DEFAULT_PAGINATION_OFFSET }, className, EventComponentProps = { elevation: 0, square: true }, EventSkeletonComponentProps = { elevation: 0, square: true }, showFilters = false, filters, general = true } = props, rest = tslib_1.__rest(props, ["endpointQueryParams", "className", "EventComponentProps", "EventSkeletonComponentProps", "showFilters", "filters", "general"]);
82
+ const { endpoint = api_services_1.Endpoints.SearchEvents, endpointQueryParams = { limit: 8, offset: Pagination_1.DEFAULT_PAGINATION_OFFSET }, className, EventComponentProps = { elevation: 0, square: true }, EventSkeletonComponentProps = { elevation: 0, square: true }, showFilters = false, filters, general = true } = props, rest = tslib_1.__rest(props, ["endpoint", "endpointQueryParams", "className", "EventComponentProps", "EventSkeletonComponentProps", "showFilters", "filters", "general"]);
85
83
  // STATE
86
84
  const [events, setEvents] = (0, react_1.useState)([]);
87
85
  const [loading, setLoading] = (0, react_1.useState)(true);
88
86
  const [next, setNext] = (0, react_1.useState)(null);
89
87
  const [search, setSearch] = (0, react_1.useState)('');
90
88
  const [dateSearch, setDateSearch] = (0, react_1.useState)(options[0].value);
91
- const [selected, setSelected] = (0, react_1.useState)(false);
89
+ const [showFollowed, setShowFollowed] = (0, react_1.useState)(false);
90
+ const [showPastEvents, setShowPastEvents] = (0, react_1.useState)(false);
92
91
  // CONTEXT
93
92
  const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
94
93
  const scPreferencesContext = (0, react_1.useContext)(react_core_1.SCPreferencesContext);
@@ -100,26 +99,31 @@ function Events(inProps) {
100
99
  const authUserId = scUserContext.user ? scUserContext.user.id : null;
101
100
  // HANDLERS
102
101
  const handleChipClick = () => {
103
- setSelected(!selected);
102
+ setShowFollowed(!showFollowed);
104
103
  };
105
104
  const handleDeleteClick = () => {
106
- setSelected(false);
105
+ setShowFollowed(false);
106
+ };
107
+ const handleChipPastClick = () => {
108
+ setShowPastEvents(!showPastEvents);
109
+ };
110
+ const handleDeletePastClick = () => {
111
+ setShowPastEvents(false);
107
112
  };
108
113
  /**
109
114
  * Fetches events list
110
115
  */
111
116
  const fetchEvents = () => {
112
- let eventService;
113
- if (general) {
114
- eventService = api_services_1.EventService.searchEvents(Object.assign(Object.assign(Object.assign(Object.assign({}, endpointQueryParams), (search !== '' && { search: search })), (dateSearch !== types_1.SCEventDateFilterType.ANY && { date_filter: dateSearch })), (selected && { follows: selected })));
115
- }
116
- else {
117
- eventService = api_services_1.EventService.getUserEvents(Object.assign(Object.assign(Object.assign({}, endpointQueryParams), { subscription_status: types_1.SCEventSubscriptionStatusType.GOING }), (search !== '' && { search: search })));
118
- }
119
- eventService
117
+ return api_services_1.http
118
+ .request({
119
+ url: endpoint.url({}),
120
+ method: endpoint.method,
121
+ params: Object.assign(Object.assign({}, endpointQueryParams), (general
122
+ ? Object.assign(Object.assign(Object.assign(Object.assign({}, (search !== '' && { search: search })), (dateSearch !== types_1.SCEventDateFilterType.ANY && { date_filter: dateSearch })), (showFollowed && { follows: showFollowed })), (showPastEvents && { past: showPastEvents })) : Object.assign(Object.assign({ subscription_status: types_1.SCEventSubscriptionStatusType.GOING }, (showPastEvents && { past: showPastEvents })), (search !== '' && { search: search }))))
123
+ })
120
124
  .then((res) => {
121
- setEvents(res.results);
122
- setNext(res.next);
125
+ setEvents(res.data.results);
126
+ setNext(res.data.next);
123
127
  setLoading(false);
124
128
  })
125
129
  .catch((error) => {
@@ -136,7 +140,7 @@ function Events(inProps) {
136
140
  else {
137
141
  fetchEvents();
138
142
  }
139
- }, [contentAvailability, authUserId, search, dateSearch, selected]);
143
+ }, [contentAvailability, authUserId, search, dateSearch, showFollowed, showPastEvents]);
140
144
  const handleNext = (0, react_1.useMemo)(() => () => {
141
145
  if (!next) {
142
146
  return;
@@ -180,19 +184,19 @@ function Events(inProps) {
180
184
  * Renders events list
181
185
  */
182
186
  const filteredEvents = (0, utils_1.sortByAttr)(getFilteredEvents(), 'order');
183
- const c = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showFilters && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, className: classes.filters, gap: 2 }, { children: filters ? (filters) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 4 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { size: 'small', fullWidth: true, value: search, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByName", defaultMessage: "ui.events.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: (0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }) }), (0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ size: 'small', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }), value: dateSearch, onChange: handleOnChangeTimeFrame, renderValue: (selected) => options.find((option) => option.value === selected).label }, { children: options.map((option) => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ value: option.value }, { children: [(0, jsx_runtime_1.jsx)(material_1.Radio, { checked: dateSearch === option.value, value: option.value, name: "radio-button-select", inputProps: { 'aria-label': option.label } }), option.label] }), option.value))) }))] })) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: (0, jsx_runtime_1.jsx)(ChipRoot
187
+ const c = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showFilters && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, className: classes.filters, gap: 2 }, { children: filters ? (filters) : !general ? ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(PastEventsFilter_1.default, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick }) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 4 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { size: 'small', fullWidth: true, value: search, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByName", defaultMessage: "ui.events.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: (0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }) }), (0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ disabled: showPastEvents, size: 'small', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }), value: dateSearch, onChange: handleOnChangeTimeFrame, renderValue: (selected) => options.find((option) => option.value === selected).label }, { children: options.map((option) => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ value: option.value }, { children: [(0, jsx_runtime_1.jsx)(material_1.Radio, { checked: dateSearch === option.value, value: option.value, name: "radio-button-select", inputProps: { 'aria-label': option.label } }), option.label] }), option.value))) }))] })) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(exports.EventsChipRoot
184
188
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
185
189
  // @ts-ignore
186
190
  , {
187
191
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
188
192
  // @ts-ignore
189
- color: selected ? 'secondary' : 'default',
193
+ color: showFollowed ? 'secondary' : 'default',
190
194
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
191
195
  // @ts-ignore
192
- variant: selected ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByFollowedInterest", defaultMessage: "ui.events.filterByFollowedInterest" }), onClick: handleChipClick,
196
+ variant: showFollowed ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByFollowedInterest", defaultMessage: "ui.events.filterByFollowedInterest" }), onClick: handleChipClick,
193
197
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
194
198
  // @ts-ignore
195
- selected: selected, deleteIcon: selected ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: selected ? handleDeleteClick : null }) }))] })) }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !events.length ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.noResults }, { children: (onlyStaffEnabled && !react_core_1.UserUtils.isStaff(scUserContext.user)) ||
199
+ showFollowed: showFollowed, deleteIcon: showFollowed ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showFollowed ? handleDeleteClick : null }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(PastEventsFilter_1.default, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick }) }))] })) }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !events.length ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.noResults }, { children: (onlyStaffEnabled && !react_core_1.UserUtils.isStaff(scUserContext.user)) ||
196
200
  (onlyStaffEnabled && react_core_1.UserUtils.isStaff(scUserContext.user) && general) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Event_1.EventSkeleton, Object.assign({}, EventSkeletonComponentProps)), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.noEvents.title", defaultMessage: "ui.events.noEvents.title" }) }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Event_1.EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { actions: (0, jsx_runtime_1.jsx)(CreateEventButton_1.default, {}) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.noEvents.title.onlyStaff", defaultMessage: "ui.events.noEvents.title.onlyStaff" }) }))] })) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.events }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [filteredEvents.map((event) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 8, md: 6, className: classes.item }, { children: (0, jsx_runtime_1.jsx)(Event_1.default, Object.assign({ event: event, eventId: event.id }, EventComponentProps)) }), event.id))), filteredEvents.length % 2 !== 0 && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 8, md: 6, className: classes.itemSkeleton }, { children: (0, jsx_runtime_1.jsx)(Event_1.EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { actions: (0, jsx_runtime_1.jsx)(CreateEventButton_1.default, Object.assign({ variant: "outlined", color: "primary", size: "small" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.skeleton.action.add", defaultMessage: "ui.events.skeleton.action.add" }) })) })) }), 'skeleton-item'))] }) })), Boolean(next) && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "secondary", variant: "text", onClick: handleNext, className: classes.showMore }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.button.seeMore", defaultMessage: "ui.events.button.seeMore" }) })))] })) })] }));
197
201
  /**
198
202
  * Renders root object (if content availability community option is false and user is anonymous, component is hidden)
package/lib/cjs/components/Events/PastEventsFilter.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ export interface PastEventsFilterProps {
2
+ showPastEvents: boolean;
3
+ handleClick: () => void;
4
+ handleDeleteClick?: () => void;
5
+ }
6
+ export default function PastEventsFilter(inProps: PastEventsFilterProps): JSX.Element;
package/lib/cjs/components/Events/PastEventsFilter.js ADDED
@@ -0,0 +1,30 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const jsx_runtime_1 = require("react/jsx-runtime");
4
+ const material_1 = require("@mui/material");
5
+ const react_intl_1 = require("react-intl");
6
+ const system_1 = require("@mui/system");
7
+ const constants_1 = require("./constants");
8
+ const Events_1 = require("./Events");
9
+ function PastEventsFilter(inProps) {
10
+ // PROPS
11
+ const props = (0, system_1.useThemeProps)({
12
+ props: inProps,
13
+ name: constants_1.PREFIX
14
+ });
15
+ const { showPastEvents, handleClick, handleDeleteClick } = props;
16
+ return ((0, jsx_runtime_1.jsx)(Events_1.EventsChipRoot
17
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
18
+ // @ts-ignore
19
+ , {
20
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
21
+ // @ts-ignore
22
+ color: showPastEvents ? 'secondary' : 'default',
23
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
24
+ // @ts-ignore
25
+ variant: showPastEvents ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByPastEvents", defaultMessage: "ui.events.filterByPastEvents" }), onClick: handleClick,
26
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
27
+ // @ts-ignore
28
+ showPastEvents: showPastEvents, deleteIcon: showPastEvents ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showPastEvents ? handleDeleteClick : undefined }));
29
+ }
30
+ exports.default = PastEventsFilter;
package/lib/esm/components/Events/Events.d.ts CHANGED
@@ -1,10 +1,20 @@
1
+ import { EndpointType } from '@selfcommunity/api-services';
2
+ import React from 'react';
1
3
  import { EventProps, EventSkeletonProps } from '../Event';
4
+ export declare const EventsChipRoot: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
5
+ ref?: React.Ref<HTMLDivElement>;
6
+ }, "avatar" | "label" | "style" | "className" | "tabIndex" | "color" | "children" | "sx" | "classes" | "variant" | "disabled" | "size" | "icon" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
2
7
  export interface EventsProps {
3
8
  /**
4
9
  * Overrides or extends the styles applied to the component.
5
10
  * @default null
6
11
  */
7
12
  className?: string;
13
+ /**
14
+ * Event API Endpoint
15
+ * @default Endpoints.SearchEvents
16
+ */
17
+ endpoint: EndpointType;
8
18
  /**
9
19
  * Feed API Query Params
10
20
  * @default [{'limit': 20, 'offset': 0}]
@@ -31,7 +41,7 @@ export interface EventsProps {
31
41
  */
32
42
  filters?: JSX.Element;
33
43
  /** If true, it means that the endpoint fetches all events available
34
- * @default false
44
+ * @default true
35
45
  */
36
46
  general?: boolean;
37
47
  /**
package/lib/esm/components/Events/Events.js CHANGED
@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
3
3
  import { Box, Button, Chip, FormControl, Grid, Icon, InputLabel, MenuItem, Radio, Select, TextField, Typography } from '@mui/material';
4
4
  import { styled } from '@mui/material/styles';
5
5
  import { useThemeProps } from '@mui/system';
6
- import { Endpoints, EventService, http } from '@selfcommunity/api-services';
6
+ import { Endpoints, http } from '@selfcommunity/api-services';
7
7
  import { SCPreferences, SCPreferencesContext, SCUserContext, UserUtils } from '@selfcommunity/react-core';
8
8
  import { SCEventDateFilterType, SCEventSubscriptionStatusType } from '@selfcommunity/types';
9
9
  import { Logger, sortByAttr } from '@selfcommunity/utils';
@@ -16,6 +16,7 @@ import CreateEventButton from '../CreateEventButton';
16
16
  import Event, { EventSkeleton } from '../Event';
17
17
  import Skeleton from '../Events/Skeleton';
18
18
  import { PREFIX } from './constants';
19
+ import PastEventsFilter from './PastEventsFilter';
19
20
  const classes = {
20
21
  root: `${PREFIX}-root`,
21
22
  filters: `${PREFIX}-filters`,
@@ -37,9 +38,10 @@ const Root = styled(Box, {
37
38
  name: PREFIX,
38
39
  slot: 'Root'
39
40
  })(() => ({}));
40
- const ChipRoot = styled(Chip, {
41
+ export const EventsChipRoot = styled(Chip, {
41
42
  name: PREFIX,
42
- slot: 'ChipRoot'
43
+ slot: 'EventsChipRoot',
44
+ shouldForwardProp: (prop) => prop !== 'showFollowed' && prop !== 'showPastEvents'
43
45
  })(() => ({}));
44
46
  /**
45
47
  * > API documentation for the Community-JS Events component. Learn about the available props and the CSS API.
@@ -74,19 +76,15 @@ export default function Events(inProps) {
74
76
  props: inProps,
75
77
  name: PREFIX
76
78
  });
77
- // TODO:
78
- /**
79
- * Add as prop API Endpoint
80
- * endpoint: EndpointType;
81
- */
82
- const { endpointQueryParams = { limit: 8, offset: DEFAULT_PAGINATION_OFFSET }, className, EventComponentProps = { elevation: 0, square: true }, EventSkeletonComponentProps = { elevation: 0, square: true }, showFilters = false, filters, general = true } = props, rest = __rest(props, ["endpointQueryParams", "className", "EventComponentProps", "EventSkeletonComponentProps", "showFilters", "filters", "general"]);
79
+ const { endpoint = Endpoints.SearchEvents, endpointQueryParams = { limit: 8, offset: DEFAULT_PAGINATION_OFFSET }, className, EventComponentProps = { elevation: 0, square: true }, EventSkeletonComponentProps = { elevation: 0, square: true }, showFilters = false, filters, general = true } = props, rest = __rest(props, ["endpoint", "endpointQueryParams", "className", "EventComponentProps", "EventSkeletonComponentProps", "showFilters", "filters", "general"]);
83
80
  // STATE
84
81
  const [events, setEvents] = useState([]);
85
82
  const [loading, setLoading] = useState(true);
86
83
  const [next, setNext] = useState(null);
87
84
  const [search, setSearch] = useState('');
88
85
  const [dateSearch, setDateSearch] = useState(options[0].value);
89
- const [selected, setSelected] = useState(false);
86
+ const [showFollowed, setShowFollowed] = useState(false);
87
+ const [showPastEvents, setShowPastEvents] = useState(false);
90
88
  // CONTEXT
91
89
  const scUserContext = useContext(SCUserContext);
92
90
  const scPreferencesContext = useContext(SCPreferencesContext);
@@ -98,26 +96,31 @@ export default function Events(inProps) {
98
96
  const authUserId = scUserContext.user ? scUserContext.user.id : null;
99
97
  // HANDLERS
100
98
  const handleChipClick = () => {
101
- setSelected(!selected);
99
+ setShowFollowed(!showFollowed);
102
100
  };
103
101
  const handleDeleteClick = () => {
104
- setSelected(false);
102
+ setShowFollowed(false);
103
+ };
104
+ const handleChipPastClick = () => {
105
+ setShowPastEvents(!showPastEvents);
106
+ };
107
+ const handleDeletePastClick = () => {
108
+ setShowPastEvents(false);
105
109
  };
106
110
  /**
107
111
  * Fetches events list
108
112
  */
109
113
  const fetchEvents = () => {
110
- let eventService;
111
- if (general) {
112
- eventService = EventService.searchEvents(Object.assign(Object.assign(Object.assign(Object.assign({}, endpointQueryParams), (search !== '' && { search: search })), (dateSearch !== SCEventDateFilterType.ANY && { date_filter: dateSearch })), (selected && { follows: selected })));
113
- }
114
- else {
115
- eventService = EventService.getUserEvents(Object.assign(Object.assign(Object.assign({}, endpointQueryParams), { subscription_status: SCEventSubscriptionStatusType.GOING }), (search !== '' && { search: search })));
116
- }
117
- eventService
114
+ return http
115
+ .request({
116
+ url: endpoint.url({}),
117
+ method: endpoint.method,
118
+ params: Object.assign(Object.assign({}, endpointQueryParams), (general
119
+ ? Object.assign(Object.assign(Object.assign(Object.assign({}, (search !== '' && { search: search })), (dateSearch !== SCEventDateFilterType.ANY && { date_filter: dateSearch })), (showFollowed && { follows: showFollowed })), (showPastEvents && { past: showPastEvents })) : Object.assign(Object.assign({ subscription_status: SCEventSubscriptionStatusType.GOING }, (showPastEvents && { past: showPastEvents })), (search !== '' && { search: search }))))
120
+ })
118
121
  .then((res) => {
119
- setEvents(res.results);
120
- setNext(res.next);
122
+ setEvents(res.data.results);
123
+ setNext(res.data.next);
121
124
  setLoading(false);
122
125
  })
123
126
  .catch((error) => {
@@ -134,7 +137,7 @@ export default function Events(inProps) {
134
137
  else {
135
138
  fetchEvents();
136
139
  }
137
- }, [contentAvailability, authUserId, search, dateSearch, selected]);
140
+ }, [contentAvailability, authUserId, search, dateSearch, showFollowed, showPastEvents]);
138
141
  const handleNext = useMemo(() => () => {
139
142
  if (!next) {
140
143
  return;
@@ -178,19 +181,19 @@ export default function Events(inProps) {
178
181
  * Renders events list
179
182
  */
180
183
  const filteredEvents = sortByAttr(getFilteredEvents(), 'order');
181
- const c = (_jsxs(_Fragment, { children: [showFilters && (_jsx(Grid, Object.assign({ container: true, className: classes.filters, gap: 2 }, { children: filters ? (filters) : (_jsxs(_Fragment, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12, md: 4 }, { children: _jsx(TextField, { size: 'small', fullWidth: true, value: search, label: _jsx(FormattedMessage, { id: "ui.events.filterByName", defaultMessage: "ui.events.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: _jsxs(FormControl, Object.assign({ fullWidth: true }, { children: [_jsx(InputLabel, { children: _jsx(FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }) }), _jsx(Select, Object.assign({ size: 'small', label: _jsx(FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }), value: dateSearch, onChange: handleOnChangeTimeFrame, renderValue: (selected) => options.find((option) => option.value === selected).label }, { children: options.map((option) => (_jsxs(MenuItem, Object.assign({ value: option.value }, { children: [_jsx(Radio, { checked: dateSearch === option.value, value: option.value, name: "radio-button-select", inputProps: { 'aria-label': option.label } }), option.label] }), option.value))) }))] })) })), _jsx(Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: _jsx(ChipRoot
184
+ const c = (_jsxs(_Fragment, { children: [showFilters && (_jsx(Grid, Object.assign({ container: true, className: classes.filters, gap: 2 }, { children: filters ? (filters) : !general ? (_jsx(Grid, Object.assign({ item: true }, { children: _jsx(PastEventsFilter, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick }) }))) : (_jsxs(_Fragment, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12, md: 4 }, { children: _jsx(TextField, { size: 'small', fullWidth: true, value: search, label: _jsx(FormattedMessage, { id: "ui.events.filterByName", defaultMessage: "ui.events.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: _jsxs(FormControl, Object.assign({ fullWidth: true }, { children: [_jsx(InputLabel, { children: _jsx(FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }) }), _jsx(Select, Object.assign({ disabled: showPastEvents, size: 'small', label: _jsx(FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }), value: dateSearch, onChange: handleOnChangeTimeFrame, renderValue: (selected) => options.find((option) => option.value === selected).label }, { children: options.map((option) => (_jsxs(MenuItem, Object.assign({ value: option.value }, { children: [_jsx(Radio, { checked: dateSearch === option.value, value: option.value, name: "radio-button-select", inputProps: { 'aria-label': option.label } }), option.label] }), option.value))) }))] })) })), _jsx(Grid, Object.assign({ item: true }, { children: _jsx(EventsChipRoot
182
185
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
183
186
  // @ts-ignore
184
187
  , {
185
188
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
186
189
  // @ts-ignore
187
- color: selected ? 'secondary' : 'default',
190
+ color: showFollowed ? 'secondary' : 'default',
188
191
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
189
192
  // @ts-ignore
190
- variant: selected ? 'filled' : 'outlined', label: _jsx(FormattedMessage, { id: "ui.events.filterByFollowedInterest", defaultMessage: "ui.events.filterByFollowedInterest" }), onClick: handleChipClick,
193
+ variant: showFollowed ? 'filled' : 'outlined', label: _jsx(FormattedMessage, { id: "ui.events.filterByFollowedInterest", defaultMessage: "ui.events.filterByFollowedInterest" }), onClick: handleChipClick,
191
194
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
192
195
  // @ts-ignore
193
- selected: selected, deleteIcon: selected ? _jsx(Icon, { children: "close" }) : null, onDelete: selected ? handleDeleteClick : null }) }))] })) }))), _jsx(_Fragment, { children: !events.length ? (_jsx(Box, Object.assign({ className: classes.noResults }, { children: (onlyStaffEnabled && !UserUtils.isStaff(scUserContext.user)) ||
196
+ showFollowed: showFollowed, deleteIcon: showFollowed ? _jsx(Icon, { children: "close" }) : null, onDelete: showFollowed ? handleDeleteClick : null }) })), _jsx(Grid, Object.assign({ item: true }, { children: _jsx(PastEventsFilter, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick }) }))] })) }))), _jsx(_Fragment, { children: !events.length ? (_jsx(Box, Object.assign({ className: classes.noResults }, { children: (onlyStaffEnabled && !UserUtils.isStaff(scUserContext.user)) ||
194
197
  (onlyStaffEnabled && UserUtils.isStaff(scUserContext.user) && general) ? (_jsxs(_Fragment, { children: [_jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps)), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.events.noEvents.title", defaultMessage: "ui.events.noEvents.title" }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { actions: _jsx(CreateEventButton, {}) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.events.noEvents.title.onlyStaff", defaultMessage: "ui.events.noEvents.title.onlyStaff" }) }))] })) }))) : (_jsxs(_Fragment, { children: [_jsx(Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.events }, { children: _jsxs(_Fragment, { children: [filteredEvents.map((event) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 8, md: 6, className: classes.item }, { children: _jsx(Event, Object.assign({ event: event, eventId: event.id }, EventComponentProps)) }), event.id))), filteredEvents.length % 2 !== 0 && (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 8, md: 6, className: classes.itemSkeleton }, { children: _jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { actions: _jsx(CreateEventButton, Object.assign({ variant: "outlined", color: "primary", size: "small" }, { children: _jsx(FormattedMessage, { id: "ui.events.skeleton.action.add", defaultMessage: "ui.events.skeleton.action.add" }) })) })) }), 'skeleton-item'))] }) })), Boolean(next) && (_jsx(Button, Object.assign({ color: "secondary", variant: "text", onClick: handleNext, className: classes.showMore }, { children: _jsx(FormattedMessage, { id: "ui.events.button.seeMore", defaultMessage: "ui.events.button.seeMore" }) })))] })) })] }));
195
198
  /**
196
199
  * Renders root object (if content availability community option is false and user is anonymous, component is hidden)
package/lib/esm/components/Events/PastEventsFilter.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ export interface PastEventsFilterProps {
2
+ showPastEvents: boolean;
3
+ handleClick: () => void;
4
+ handleDeleteClick?: () => void;
5
+ }
6
+ export default function PastEventsFilter(inProps: PastEventsFilterProps): JSX.Element;
package/lib/esm/components/Events/PastEventsFilter.js ADDED
@@ -0,0 +1,27 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { Icon } from '@mui/material';
3
+ import { FormattedMessage } from 'react-intl';
4
+ import { useThemeProps } from '@mui/system';
5
+ import { PREFIX } from './constants';
6
+ import { EventsChipRoot } from './Events';
7
+ export default function PastEventsFilter(inProps) {
8
+ // PROPS
9
+ const props = useThemeProps({
10
+ props: inProps,
11
+ name: PREFIX
12
+ });
13
+ const { showPastEvents, handleClick, handleDeleteClick } = props;
14
+ return (_jsx(EventsChipRoot
15
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
16
+ // @ts-ignore
17
+ , {
18
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
19
+ // @ts-ignore
20
+ color: showPastEvents ? 'secondary' : 'default',
21
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
22
+ // @ts-ignore
23
+ variant: showPastEvents ? 'filled' : 'outlined', label: _jsx(FormattedMessage, { id: "ui.events.filterByPastEvents", defaultMessage: "ui.events.filterByPastEvents" }), onClick: handleClick,
24
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
25
+ // @ts-ignore
26
+ showPastEvents: showPastEvents, deleteIcon: showPastEvents ? _jsx(Icon, { children: "close" }) : null, onDelete: showPastEvents ? handleDeleteClick : undefined }));
27
+ }