@selfcommunity/react-ui 0.7.50-events.65 → 0.7.50-events.66
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.
- package/lib/cjs/components/EventMembersWidget/EventMembersWidget.js +9 -39
- package/lib/cjs/components/EventMembersWidget/Skeleton.js +3 -3
- package/lib/cjs/components/EventMembersWidget/TabContentComponent.d.ts +24 -0
- package/lib/cjs/components/EventMembersWidget/TabContentComponent.js +52 -0
- package/lib/cjs/components/Events/Events.js +2 -2
- package/lib/cjs/components/InviteEventButton/InviteEventButton.js +4 -4
- package/lib/cjs/components/RelatedEventsWidget/RelatedEventsWidget.js +5 -4
- package/lib/cjs/components/RelatedEventsWidget/Skeleton.js +1 -1
- package/lib/esm/components/EventMembersWidget/EventMembersWidget.js +12 -42
- package/lib/esm/components/EventMembersWidget/Skeleton.js +4 -4
- package/lib/esm/components/EventMembersWidget/TabContentComponent.d.ts +24 -0
- package/lib/esm/components/EventMembersWidget/TabContentComponent.js +48 -0
- package/lib/esm/components/Events/Events.js +2 -2
- package/lib/esm/components/InviteEventButton/InviteEventButton.js +4 -4
- package/lib/esm/components/RelatedEventsWidget/RelatedEventsWidget.js +5 -4
- package/lib/esm/components/RelatedEventsWidget/Skeleton.js +1 -1
- package/lib/umd/react-ui.js +1 -1
- package/package.json +7 -7
|
@@ -13,38 +13,25 @@ const react_intl_1 = require("react-intl");
|
|
|
13
13
|
require("swiper/css");
|
|
14
14
|
const Errors_1 = require("../../constants/Errors");
|
|
15
15
|
const Pagination_1 = require("../../constants/Pagination");
|
|
16
|
-
const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
|
|
17
16
|
const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
|
|
18
|
-
const InfiniteScroll_1 = tslib_1.__importDefault(require("../../shared/InfiniteScroll"));
|
|
19
17
|
const widget_1 = require("../../utils/widget");
|
|
20
|
-
const InviteEventButton_1 = tslib_1.__importDefault(require("../InviteEventButton"));
|
|
21
|
-
const User_1 = tslib_1.__importStar(require("../User"));
|
|
22
18
|
const Widget_1 = tslib_1.__importDefault(require("../Widget"));
|
|
23
19
|
const constants_1 = require("./constants");
|
|
24
20
|
const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
|
|
21
|
+
const TabContentComponent_1 = tslib_1.__importDefault(require("./TabContentComponent"));
|
|
25
22
|
const classes = {
|
|
26
23
|
root: `${constants_1.PREFIX}-root`,
|
|
27
24
|
content: `${constants_1.PREFIX}-content`,
|
|
28
25
|
title: `${constants_1.PREFIX}-title`,
|
|
29
26
|
tabsWrapper: `${constants_1.PREFIX}-tabs-wrapper`,
|
|
30
27
|
tabLabelWrapper: `${constants_1.PREFIX}-tab-label-wrapper`,
|
|
31
|
-
tabPanel: `${constants_1.PREFIX}-tab-panel
|
|
32
|
-
actions: `${constants_1.PREFIX}-actions`,
|
|
33
|
-
actionButton: `${constants_1.PREFIX}-action-button`,
|
|
34
|
-
dialogRoot: `${constants_1.PREFIX}-dialog-root`,
|
|
35
|
-
infiniteScroll: `${constants_1.PREFIX}-infinite-scroll`,
|
|
36
|
-
endMessage: `${constants_1.PREFIX}-end-message`
|
|
28
|
+
tabPanel: `${constants_1.PREFIX}-tab-panel`
|
|
37
29
|
};
|
|
38
30
|
const Root = (0, system_1.styled)(Widget_1.default, {
|
|
39
31
|
name: constants_1.PREFIX,
|
|
40
32
|
slot: 'Root',
|
|
41
33
|
overridesResolver: (_props, styles) => styles.root
|
|
42
|
-
})();
|
|
43
|
-
const DialogRoot = (0, system_1.styled)(BaseDialog_1.default, {
|
|
44
|
-
name: constants_1.PREFIX,
|
|
45
|
-
slot: 'DialogRoot',
|
|
46
|
-
overridesResolver: (_props, styles) => styles.dialogRoot
|
|
47
|
-
})();
|
|
34
|
+
})(() => ({}));
|
|
48
35
|
function EventMembersWidget(inProps) {
|
|
49
36
|
// PROPS
|
|
50
37
|
const props = (0, material_1.useThemeProps)({
|
|
@@ -65,13 +52,10 @@ function EventMembersWidget(inProps) {
|
|
|
65
52
|
next: null,
|
|
66
53
|
cacheKey: react_core_1.SCCache.getWidgetStateCacheKey(react_core_1.SCCache.USER_INVITED_EVENTS_STATE_CACHE_PREFIX_KEY, eventId || event.id),
|
|
67
54
|
cacheStrategy,
|
|
68
|
-
visibleItems:
|
|
55
|
+
visibleItems: limit
|
|
69
56
|
}, widget_1.stateWidgetInitializer);
|
|
70
|
-
const [openDialog, setOpenDialog] = (0, react_1.useState)(false);
|
|
71
57
|
const [invitedNumber, setInvitedNumber] = (0, react_1.useState)(0);
|
|
72
58
|
const [tabValue, setTabValue] = (0, react_1.useState)('1');
|
|
73
|
-
const state = (0, react_1.useMemo)(() => (tabValue === '1' ? participants : invited), [tabValue, participants, invited]);
|
|
74
|
-
const dispatch = (0, react_1.useCallback)((value) => (tabValue === '1' ? dispatchParticipants(value) : dispatchInvited(value)), [tabValue, dispatchParticipants, dispatchInvited]);
|
|
75
59
|
// CONTEXT
|
|
76
60
|
const scUserContext = (0, react_core_1.useSCUser)();
|
|
77
61
|
// HOOKS
|
|
@@ -118,33 +102,19 @@ function EventMembersWidget(inProps) {
|
|
|
118
102
|
}
|
|
119
103
|
}, [scUserContext.user, scEvent]);
|
|
120
104
|
// HANDLERS
|
|
121
|
-
/**
|
|
122
|
-
* Handles pagination
|
|
123
|
-
*/
|
|
124
|
-
const handleNext = (0, react_1.useCallback)(() => {
|
|
125
|
-
dispatch({ type: widget_1.actionWidgetTypes.LOADING_NEXT });
|
|
126
|
-
api_services_1.http
|
|
127
|
-
.request({
|
|
128
|
-
url: state.next,
|
|
129
|
-
method: api_services_1.Endpoints.UserSuggestion.method
|
|
130
|
-
})
|
|
131
|
-
.then((res) => {
|
|
132
|
-
dispatch({ type: widget_1.actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: res.data });
|
|
133
|
-
});
|
|
134
|
-
}, [dispatch, state.next, state.isLoadingNext, state.initialized]);
|
|
135
|
-
const handleToggleDialogOpen = (0, react_1.useCallback)(() => {
|
|
136
|
-
setOpenDialog((prev) => !prev);
|
|
137
|
-
}, []);
|
|
138
105
|
const handleTabChange = (0, react_1.useCallback)((_evt, newTabValue) => {
|
|
139
106
|
setTabValue(newTabValue);
|
|
140
107
|
}, []);
|
|
141
|
-
if (!scEvent && !
|
|
108
|
+
if (!scEvent && !participants.initialized) {
|
|
142
109
|
return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
|
|
143
110
|
}
|
|
144
111
|
// RENDER
|
|
145
112
|
if (!scEvent) {
|
|
146
113
|
return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
|
|
147
114
|
}
|
|
148
|
-
return ((0, jsx_runtime_1.
|
|
115
|
+
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.invited", defaultMessage: "ui.eventMembersWidget.invited" }) })), (0, jsx_runtime_1.jsxs)(lab_1.TabContext, Object.assign({ value: tabValue }, { children: [(0, jsx_runtime_1.jsxs)(lab_1.TabList, Object.assign({ className: classes.tabsWrapper, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: "fullWidth" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3" }, { children: participants.count })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.participants", defaultMessage: "ui.eventMembersWidget.participants" }) }))] })), value: "1" }), invited && ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3" }, { children: invitedNumber })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.invited", defaultMessage: "ui.eventMembersWidget.invited" }) }))] })), value: "2" }))] })), (0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ value: "1", className: classes.tabPanel }, { children: (0, jsx_runtime_1.jsx)(TabContentComponent_1.default, { state: participants, dispatch: dispatchParticipants, userProps: userProps, dialogProps: dialogProps }) })), invited && ((0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ value: "2", className: classes.tabPanel }, { children: (0, jsx_runtime_1.jsx)(TabContentComponent_1.default, { state: invited, dispatch: dispatchInvited, userProps: userProps, dialogProps: dialogProps, actionProps: {
|
|
116
|
+
scEvent,
|
|
117
|
+
setInvitedNumber
|
|
118
|
+
} }) })))] }))] })) })));
|
|
149
119
|
}
|
|
150
120
|
exports.default = EventMembersWidget;
|
|
@@ -16,14 +16,14 @@ const classes = {
|
|
|
16
16
|
tabsWrapper: `${constants_1.PREFIX}-tabs-wrapper`,
|
|
17
17
|
tabLabelWrapper: `${constants_1.PREFIX}-tab-label-wrapper`,
|
|
18
18
|
tabPanel: `${constants_1.PREFIX}-tab-panel`,
|
|
19
|
-
|
|
19
|
+
actionButton: `${constants_1.PREFIX}-action-button`
|
|
20
20
|
};
|
|
21
21
|
const Root = (0, system_1.styled)(Widget_1.default, {
|
|
22
22
|
name: constants_1.PREFIX,
|
|
23
23
|
slot: 'SkeletonRoot',
|
|
24
24
|
overridesResolver: (_props, styles) => styles.skeletonRoot
|
|
25
|
-
})();
|
|
25
|
+
})(() => ({}));
|
|
26
26
|
function EventMembersWidgetSkeleton() {
|
|
27
|
-
return ((0, jsx_runtime_1.
|
|
27
|
+
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", width: "53px", height: "25px", className: classes.title }), (0, jsx_runtime_1.jsxs)(lab_1.TabContext, Object.assign({ value: "1" }, { children: [(0, jsx_runtime_1.jsx)(system_1.Box, Object.assign({ className: classes.tabsWrapper }, { children: (0, jsx_runtime_1.jsxs)(lab_1.TabList, Object.assign({ variant: "fullWidth" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", width: "26px", height: "24px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", width: "106px", height: "19px" })] })), value: "1" }), (0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", width: "26px", height: "24px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", width: "106px", height: "19px" })] })), value: "2" })] })) })), (0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ value: "1", className: classes.tabPanel }, { children: (0, jsx_runtime_1.jsxs)(material_1.List, { children: [[1, 2, 3, 4].map((_element, i) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, {}) }, i))), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { className: classes.actionButton, animation: "wave", width: "52px", height: "20px" })] }) })), (0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ value: "2", className: classes.tabPanel }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: [1, 2, 3, 4].map((_element, i) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, {}) }, i))) }) }))] }))] })) })));
|
|
28
28
|
}
|
|
29
29
|
exports.default = EventMembersWidgetSkeleton;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { SCEventType } from '@selfcommunity/types';
|
|
2
|
+
import { Dispatch, SetStateAction } from 'react';
|
|
3
|
+
import { BaseDialogProps } from '../../shared/BaseDialog';
|
|
4
|
+
import { UserProps } from '../User';
|
|
5
|
+
interface TabComponentProps {
|
|
6
|
+
state: any;
|
|
7
|
+
dispatch: Dispatch<any>;
|
|
8
|
+
/**
|
|
9
|
+
* Props to spread to single user object
|
|
10
|
+
* @default empty object
|
|
11
|
+
*/
|
|
12
|
+
userProps?: UserProps;
|
|
13
|
+
/**
|
|
14
|
+
* Props to spread to users suggestion dialog
|
|
15
|
+
* @default {}
|
|
16
|
+
*/
|
|
17
|
+
dialogProps?: BaseDialogProps;
|
|
18
|
+
actionProps?: {
|
|
19
|
+
scEvent?: SCEventType;
|
|
20
|
+
setInvitedNumber: Dispatch<SetStateAction<number>>;
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
export default function TabContentComponent(props: TabComponentProps): JSX.Element;
|
|
24
|
+
export {};
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const tslib_1 = require("tslib");
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const material_1 = require("@mui/material");
|
|
6
|
+
const api_services_1 = require("@selfcommunity/api-services");
|
|
7
|
+
const react_1 = require("react");
|
|
8
|
+
const react_intl_1 = require("react-intl");
|
|
9
|
+
const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
|
|
10
|
+
const InfiniteScroll_1 = tslib_1.__importDefault(require("../../shared/InfiniteScroll"));
|
|
11
|
+
const widget_1 = require("../../utils/widget");
|
|
12
|
+
const InviteEventButton_1 = tslib_1.__importDefault(require("../InviteEventButton"));
|
|
13
|
+
const User_1 = tslib_1.__importStar(require("../User"));
|
|
14
|
+
const constants_1 = require("./constants");
|
|
15
|
+
const classes = {
|
|
16
|
+
actionButton: `${constants_1.PREFIX}-action-button`,
|
|
17
|
+
dialogRoot: `${constants_1.PREFIX}-dialog-root`,
|
|
18
|
+
infiniteScroll: `${constants_1.PREFIX}-infinite-scroll`,
|
|
19
|
+
endMessage: `${constants_1.PREFIX}-end-message`
|
|
20
|
+
};
|
|
21
|
+
const DialogRoot = (0, material_1.styled)(BaseDialog_1.default, {
|
|
22
|
+
name: constants_1.PREFIX,
|
|
23
|
+
slot: 'DialogRoot',
|
|
24
|
+
overridesResolver: (_props, styles) => styles.dialogRoot
|
|
25
|
+
})(() => ({}));
|
|
26
|
+
function TabContentComponent(props) {
|
|
27
|
+
// PROPS
|
|
28
|
+
const { state, dispatch, userProps, dialogProps, actionProps } = props;
|
|
29
|
+
// STATE
|
|
30
|
+
const [openDialog, setOpenDialog] = (0, react_1.useState)(false);
|
|
31
|
+
// HANDLERS
|
|
32
|
+
/**
|
|
33
|
+
* Handles pagination
|
|
34
|
+
*/
|
|
35
|
+
const handleNext = (0, react_1.useCallback)(() => {
|
|
36
|
+
dispatch({ type: widget_1.actionWidgetTypes.LOADING_NEXT });
|
|
37
|
+
api_services_1.http
|
|
38
|
+
.request({
|
|
39
|
+
url: state.next,
|
|
40
|
+
method: api_services_1.Endpoints.UserSuggestion.method
|
|
41
|
+
})
|
|
42
|
+
.then((res) => {
|
|
43
|
+
dispatch({ type: widget_1.actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: res.data });
|
|
44
|
+
});
|
|
45
|
+
}, [dispatch, state.next, state.isLoadingNext, state.initialized]);
|
|
46
|
+
const handleToggleDialogOpen = (0, react_1.useCallback)(() => {
|
|
47
|
+
setOpenDialog((prev) => !prev);
|
|
48
|
+
}, []);
|
|
49
|
+
const getActionsComponent = (0, react_1.useCallback)((userId) => actionProps ? (0, jsx_runtime_1.jsx)(InviteEventButton_1.default, { event: actionProps.scEvent, userId: userId, setInvitedNumber: actionProps.setInvitedNumber }) : undefined, [actionProps]);
|
|
50
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((user) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, Object.assign({ elevation: 0, user: user }, userProps, { actions: getActionsComponent(user.id) })) }, user.id))) }), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleToggleDialogOpen, className: classes.actionButton }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.showAll", defaultMessage: "ui.eventMembersWidget.showAll" }) })) }))), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.eventMembersWidget.title", id: "ui.eventMembersWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, Object.assign({ elevation: 0 }, userProps)), className: classes.infiniteScroll, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.noMoreResults", defaultMessage: "ui.eventMembersWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((user) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, Object.assign({ elevation: 0, user: user }, userProps)) }, user.id))) }) })) })))] }));
|
|
51
|
+
}
|
|
52
|
+
exports.default = TabContentComponent;
|
|
@@ -119,7 +119,7 @@ function Events(inProps) {
|
|
|
119
119
|
url: endpoint.url({}),
|
|
120
120
|
method: endpoint.method,
|
|
121
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 && {
|
|
122
|
+
? Object.assign(Object.assign(Object.assign(Object.assign({}, (search !== '' && { search: search })), (dateSearch !== types_1.SCEventDateFilterType.ANY && { date_filter: dateSearch })), (showFollowed && { follows: showFollowed })), (showPastEvents && { date_filter: types_1.SCEventDateFilterType.PAST })) : Object.assign(Object.assign(Object.assign({}, (search !== '' && { search: search })), { subscription_status: types_1.SCEventSubscriptionStatusType.GOING }), (showPastEvents && { date_filter: types_1.SCEventDateFilterType.PAST }))))
|
|
123
123
|
})
|
|
124
124
|
.then((res) => {
|
|
125
125
|
setEvents(res.data.results);
|
|
@@ -197,7 +197,7 @@ function Events(inProps) {
|
|
|
197
197
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
198
198
|
// @ts-ignore
|
|
199
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, disabled: dateSearch !== types_1.SCEventDateFilterType.ANY }) }))] })) }))), (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)) ||
|
|
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:
|
|
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: 12, 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: 12, md: 6, className: classes.itemSkeleton }, { children: (0, jsx_runtime_1.jsx)(Event_1.EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false, 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" }) })))] })) })] }));
|
|
201
201
|
/**
|
|
202
202
|
* Renders root object (if content availability community option is false and user is anonymous, component is hidden)
|
|
203
203
|
*/
|
|
@@ -20,7 +20,7 @@ const InviteButton = (0, styles_1.styled)(lab_1.LoadingButton, {
|
|
|
20
20
|
name: PREFIX,
|
|
21
21
|
slot: 'Root',
|
|
22
22
|
overridesResolver: (_props, styles) => styles.root
|
|
23
|
-
})();
|
|
23
|
+
})(() => ({}));
|
|
24
24
|
/**
|
|
25
25
|
* > API documentation for the Community-JS Invite Event Button component. Learn about the available props and the CSS API.
|
|
26
26
|
|
|
@@ -59,7 +59,7 @@ function InviteEventButton(inProps) {
|
|
|
59
59
|
if (invited) {
|
|
60
60
|
api_services_1.EventService.removeInviteEvent(scEvent.id, { users: [scUser.id] })
|
|
61
61
|
.then(() => {
|
|
62
|
-
setInvited(
|
|
62
|
+
setInvited(false);
|
|
63
63
|
setInvitedNumber((prev) => prev - 1);
|
|
64
64
|
})
|
|
65
65
|
.catch((_error) => {
|
|
@@ -69,14 +69,14 @@ function InviteEventButton(inProps) {
|
|
|
69
69
|
else {
|
|
70
70
|
api_services_1.EventService.inviteOrAcceptEventRequest(scEvent.id, { users: [scUser.id] })
|
|
71
71
|
.then(() => {
|
|
72
|
-
setInvited(
|
|
72
|
+
setInvited(true);
|
|
73
73
|
setInvitedNumber((prev) => prev + 1);
|
|
74
74
|
})
|
|
75
75
|
.catch((_error) => {
|
|
76
76
|
utils_1.Logger.error(Errors_1.SCOPE_SC_UI, _error);
|
|
77
77
|
});
|
|
78
78
|
}
|
|
79
|
-
}, [scEvent, scUser]);
|
|
79
|
+
}, [scEvent, scUser, invited]);
|
|
80
80
|
return ((0, jsx_runtime_1.jsx)(InviteButton, Object.assign({ size: "small", variant: "outlined", onClick: handleInviteAction, loading: invited === null, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: invited ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.inviteEventButton.remove", id: "ui.inviteEventButton.remove" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.inviteEventButton.invite", id: "ui.inviteEventButton.invite" })) })));
|
|
81
81
|
}
|
|
82
82
|
exports.default = InviteEventButton;
|
|
@@ -29,6 +29,7 @@ const messages = (0, react_intl_1.defineMessages)({
|
|
|
29
29
|
const classes = {
|
|
30
30
|
root: `${constants_1.PREFIX}-root`,
|
|
31
31
|
content: `${constants_1.PREFIX}-content`,
|
|
32
|
+
header: `${constants_1.PREFIX}-header`,
|
|
32
33
|
avatarWrapper: `${constants_1.PREFIX}-avatar-wrapper`,
|
|
33
34
|
avatar: `${constants_1.PREFIX}-avatar`,
|
|
34
35
|
eventWrapper: `${constants_1.PREFIX}-event-wrapper`,
|
|
@@ -43,12 +44,12 @@ const Root = (0, system_1.styled)(Widget_1.default, {
|
|
|
43
44
|
name: constants_1.PREFIX,
|
|
44
45
|
slot: 'Root',
|
|
45
46
|
overridesResolver: (_props, styles) => styles.root
|
|
46
|
-
})();
|
|
47
|
+
})(() => ({}));
|
|
47
48
|
const DialogRoot = (0, system_1.styled)(BaseDialog_1.default, {
|
|
48
49
|
name: constants_1.PREFIX,
|
|
49
50
|
slot: 'DialogRoot',
|
|
50
51
|
overridesResolver: (_props, styles) => styles.dialogRoot
|
|
51
|
-
})();
|
|
52
|
+
})(() => ({}));
|
|
52
53
|
function RelatedEventsWidget(inProps) {
|
|
53
54
|
var _a;
|
|
54
55
|
// PROPS
|
|
@@ -117,9 +118,9 @@ function RelatedEventsWidget(inProps) {
|
|
|
117
118
|
return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
|
|
118
119
|
}
|
|
119
120
|
// RENDER
|
|
120
|
-
if (!scEvent) {
|
|
121
|
+
if (!scEvent || (state === null || state === void 0 ? void 0 : state.count) === 0) {
|
|
121
122
|
return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
|
|
122
123
|
}
|
|
123
|
-
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, { id: (_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.id }), className: classes.avatarWrapper }, { children:
|
|
124
|
+
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.header }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, { id: (_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.id }), className: classes.avatarWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "rounded", src: scEvent.managed_by.avatar, alt: scEvent.managed_by.username, className: classes.avatar }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: (0, jsx_runtime_1.jsx)("b", { children: intl.formatMessage(messages.title, { user: scEvent.managed_by.username }) }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.eventWrapper }, { children: state === null || state === void 0 ? void 0 : state.results.map((_event, i, array) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Event_1.default, Object.assign({ event: _event, eventId: _event.id }, eventComponentProps, { className: classes.event }), i), i < array.length - 1 && (0, jsx_runtime_1.jsx)(material_1.Divider, {})] }))) }))] })), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleToggleDialogOpen, className: classes.actionButton }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.relatedEventsWidget.showAll", defaultMessage: "ui.relatedEventsWidget.showAll" }) })) })) }))), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.title, { user: scEvent.managed_by.username }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: (0, jsx_runtime_1.jsx)(Event_1.EventSkeleton, Object.assign({ elevation: 0 }, eventComponentProps)), className: classes.infiniteScroll, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.relatedEventsWidget.noMoreResults", defaultMessage: "ui.eventMembersWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((event) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Event_1.default, Object.assign({ elevation: 0, event: event }, eventComponentProps)) }, event.id))) }) })) })))] })));
|
|
124
125
|
}
|
|
125
126
|
exports.default = RelatedEventsWidget;
|
|
@@ -21,7 +21,7 @@ const Root = (0, system_1.styled)(Widget_1.default, {
|
|
|
21
21
|
name: constants_1.PREFIX,
|
|
22
22
|
slot: 'SkeletonRoot',
|
|
23
23
|
overridesResolver: (_props, styles) => styles.skeletonRoot
|
|
24
|
-
})();
|
|
24
|
+
})(() => ({}));
|
|
25
25
|
function RelatedEventsWidgetSkeleton() {
|
|
26
26
|
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(User_1.UserSkeleton, { className: classes.user, elevation: 0 }), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.eventWrapper }, { children: [1, 2, 3, 4].map((_event, i, array) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Event_1.EventSkeleton, { elevation: 0, className: classes.event }, i), i < array.length - 1 && (0, jsx_runtime_1.jsx)(material_1.Divider, {})] }))) }))] })), (0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", width: "52px", height: "20px" }) }))] })));
|
|
27
27
|
}
|
|
@@ -1,48 +1,35 @@
|
|
|
1
1
|
import { __rest } from "tslib";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { TabContext, TabList, TabPanel } from '@mui/lab';
|
|
4
|
-
import {
|
|
4
|
+
import { CardContent, Stack, Tab, Typography, useThemeProps } from '@mui/material';
|
|
5
5
|
import { styled } from '@mui/system';
|
|
6
|
-
import {
|
|
6
|
+
import { EventService } from '@selfcommunity/api-services';
|
|
7
7
|
import { SCCache, useSCFetchEvent, useSCUser } from '@selfcommunity/react-core';
|
|
8
8
|
import { Logger } from '@selfcommunity/utils';
|
|
9
|
-
import { useCallback, useEffect,
|
|
9
|
+
import { useCallback, useEffect, useReducer, useState } from 'react';
|
|
10
10
|
import { FormattedMessage } from 'react-intl';
|
|
11
11
|
import 'swiper/css';
|
|
12
12
|
import { SCOPE_SC_UI } from '../../constants/Errors';
|
|
13
13
|
import { DEFAULT_PAGINATION_LIMIT, DEFAULT_PAGINATION_OFFSET } from '../../constants/Pagination';
|
|
14
|
-
import BaseDialog from '../../shared/BaseDialog';
|
|
15
14
|
import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
|
|
16
|
-
import InfiniteScroll from '../../shared/InfiniteScroll';
|
|
17
15
|
import { actionWidgetTypes, dataWidgetReducer, stateWidgetInitializer } from '../../utils/widget';
|
|
18
|
-
import InviteEventButton from '../InviteEventButton';
|
|
19
|
-
import User, { UserSkeleton } from '../User';
|
|
20
16
|
import Widget from '../Widget';
|
|
21
17
|
import { PREFIX } from './constants';
|
|
22
18
|
import Skeleton from './Skeleton';
|
|
19
|
+
import TabContentComponent from './TabContentComponent';
|
|
23
20
|
const classes = {
|
|
24
21
|
root: `${PREFIX}-root`,
|
|
25
22
|
content: `${PREFIX}-content`,
|
|
26
23
|
title: `${PREFIX}-title`,
|
|
27
24
|
tabsWrapper: `${PREFIX}-tabs-wrapper`,
|
|
28
25
|
tabLabelWrapper: `${PREFIX}-tab-label-wrapper`,
|
|
29
|
-
tabPanel: `${PREFIX}-tab-panel
|
|
30
|
-
actions: `${PREFIX}-actions`,
|
|
31
|
-
actionButton: `${PREFIX}-action-button`,
|
|
32
|
-
dialogRoot: `${PREFIX}-dialog-root`,
|
|
33
|
-
infiniteScroll: `${PREFIX}-infinite-scroll`,
|
|
34
|
-
endMessage: `${PREFIX}-end-message`
|
|
26
|
+
tabPanel: `${PREFIX}-tab-panel`
|
|
35
27
|
};
|
|
36
28
|
const Root = styled(Widget, {
|
|
37
29
|
name: PREFIX,
|
|
38
30
|
slot: 'Root',
|
|
39
31
|
overridesResolver: (_props, styles) => styles.root
|
|
40
|
-
})();
|
|
41
|
-
const DialogRoot = styled(BaseDialog, {
|
|
42
|
-
name: PREFIX,
|
|
43
|
-
slot: 'DialogRoot',
|
|
44
|
-
overridesResolver: (_props, styles) => styles.dialogRoot
|
|
45
|
-
})();
|
|
32
|
+
})(() => ({}));
|
|
46
33
|
export default function EventMembersWidget(inProps) {
|
|
47
34
|
// PROPS
|
|
48
35
|
const props = useThemeProps({
|
|
@@ -63,13 +50,10 @@ export default function EventMembersWidget(inProps) {
|
|
|
63
50
|
next: null,
|
|
64
51
|
cacheKey: SCCache.getWidgetStateCacheKey(SCCache.USER_INVITED_EVENTS_STATE_CACHE_PREFIX_KEY, eventId || event.id),
|
|
65
52
|
cacheStrategy,
|
|
66
|
-
visibleItems:
|
|
53
|
+
visibleItems: limit
|
|
67
54
|
}, stateWidgetInitializer);
|
|
68
|
-
const [openDialog, setOpenDialog] = useState(false);
|
|
69
55
|
const [invitedNumber, setInvitedNumber] = useState(0);
|
|
70
56
|
const [tabValue, setTabValue] = useState('1');
|
|
71
|
-
const state = useMemo(() => (tabValue === '1' ? participants : invited), [tabValue, participants, invited]);
|
|
72
|
-
const dispatch = useCallback((value) => (tabValue === '1' ? dispatchParticipants(value) : dispatchInvited(value)), [tabValue, dispatchParticipants, dispatchInvited]);
|
|
73
57
|
// CONTEXT
|
|
74
58
|
const scUserContext = useSCUser();
|
|
75
59
|
// HOOKS
|
|
@@ -116,32 +100,18 @@ export default function EventMembersWidget(inProps) {
|
|
|
116
100
|
}
|
|
117
101
|
}, [scUserContext.user, scEvent]);
|
|
118
102
|
// HANDLERS
|
|
119
|
-
/**
|
|
120
|
-
* Handles pagination
|
|
121
|
-
*/
|
|
122
|
-
const handleNext = useCallback(() => {
|
|
123
|
-
dispatch({ type: actionWidgetTypes.LOADING_NEXT });
|
|
124
|
-
http
|
|
125
|
-
.request({
|
|
126
|
-
url: state.next,
|
|
127
|
-
method: Endpoints.UserSuggestion.method
|
|
128
|
-
})
|
|
129
|
-
.then((res) => {
|
|
130
|
-
dispatch({ type: actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: res.data });
|
|
131
|
-
});
|
|
132
|
-
}, [dispatch, state.next, state.isLoadingNext, state.initialized]);
|
|
133
|
-
const handleToggleDialogOpen = useCallback(() => {
|
|
134
|
-
setOpenDialog((prev) => !prev);
|
|
135
|
-
}, []);
|
|
136
103
|
const handleTabChange = useCallback((_evt, newTabValue) => {
|
|
137
104
|
setTabValue(newTabValue);
|
|
138
105
|
}, []);
|
|
139
|
-
if (!scEvent && !
|
|
106
|
+
if (!scEvent && !participants.initialized) {
|
|
140
107
|
return _jsx(Skeleton, {});
|
|
141
108
|
}
|
|
142
109
|
// RENDER
|
|
143
110
|
if (!scEvent) {
|
|
144
111
|
return _jsx(HiddenPlaceholder, {});
|
|
145
112
|
}
|
|
146
|
-
return (
|
|
113
|
+
return (_jsx(Root, Object.assign({ className: classes.root }, rest, { children: _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Typography, Object.assign({ variant: "h5", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.invited", defaultMessage: "ui.eventMembersWidget.invited" }) })), _jsxs(TabContext, Object.assign({ value: tabValue }, { children: [_jsxs(TabList, Object.assign({ className: classes.tabsWrapper, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: "fullWidth" }, { children: [_jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h3" }, { children: participants.count })), _jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.participants", defaultMessage: "ui.eventMembersWidget.participants" }) }))] })), value: "1" }), invited && (_jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h3" }, { children: invitedNumber })), _jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.invited", defaultMessage: "ui.eventMembersWidget.invited" }) }))] })), value: "2" }))] })), _jsx(TabPanel, Object.assign({ value: "1", className: classes.tabPanel }, { children: _jsx(TabContentComponent, { state: participants, dispatch: dispatchParticipants, userProps: userProps, dialogProps: dialogProps }) })), invited && (_jsx(TabPanel, Object.assign({ value: "2", className: classes.tabPanel }, { children: _jsx(TabContentComponent, { state: invited, dispatch: dispatchInvited, userProps: userProps, dialogProps: dialogProps, actionProps: {
|
|
114
|
+
scEvent,
|
|
115
|
+
setInvitedNumber
|
|
116
|
+
} }) })))] }))] })) })));
|
|
147
117
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { TabContext, TabList, TabPanel } from '@mui/lab';
|
|
3
|
-
import {
|
|
3
|
+
import { CardContent, List, ListItem, Skeleton, Stack, Tab } from '@mui/material';
|
|
4
4
|
import { Box, styled } from '@mui/system';
|
|
5
5
|
import 'swiper/css';
|
|
6
6
|
import { UserSkeleton } from '../User';
|
|
@@ -13,13 +13,13 @@ const classes = {
|
|
|
13
13
|
tabsWrapper: `${PREFIX}-tabs-wrapper`,
|
|
14
14
|
tabLabelWrapper: `${PREFIX}-tab-label-wrapper`,
|
|
15
15
|
tabPanel: `${PREFIX}-tab-panel`,
|
|
16
|
-
|
|
16
|
+
actionButton: `${PREFIX}-action-button`
|
|
17
17
|
};
|
|
18
18
|
const Root = styled(Widget, {
|
|
19
19
|
name: PREFIX,
|
|
20
20
|
slot: 'SkeletonRoot',
|
|
21
21
|
overridesResolver: (_props, styles) => styles.skeletonRoot
|
|
22
|
-
})();
|
|
22
|
+
})(() => ({}));
|
|
23
23
|
export default function EventMembersWidgetSkeleton() {
|
|
24
|
-
return (
|
|
24
|
+
return (_jsx(Root, Object.assign({ className: classes.root }, { children: _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Skeleton, { animation: "wave", width: "53px", height: "25px", className: classes.title }), _jsxs(TabContext, Object.assign({ value: "1" }, { children: [_jsx(Box, Object.assign({ className: classes.tabsWrapper }, { children: _jsxs(TabList, Object.assign({ variant: "fullWidth" }, { children: [_jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Skeleton, { animation: "wave", width: "26px", height: "24px" }), _jsx(Skeleton, { animation: "wave", width: "106px", height: "19px" })] })), value: "1" }), _jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Skeleton, { animation: "wave", width: "26px", height: "24px" }), _jsx(Skeleton, { animation: "wave", width: "106px", height: "19px" })] })), value: "2" })] })) })), _jsx(TabPanel, Object.assign({ value: "1", className: classes.tabPanel }, { children: _jsxs(List, { children: [[1, 2, 3, 4].map((_element, i) => (_jsx(ListItem, { children: _jsx(UserSkeleton, {}) }, i))), _jsx(Skeleton, { className: classes.actionButton, animation: "wave", width: "52px", height: "20px" })] }) })), _jsx(TabPanel, Object.assign({ value: "2", className: classes.tabPanel }, { children: _jsx(List, { children: [1, 2, 3, 4].map((_element, i) => (_jsx(ListItem, { children: _jsx(UserSkeleton, {}) }, i))) }) }))] }))] })) })));
|
|
25
25
|
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { SCEventType } from '@selfcommunity/types';
|
|
2
|
+
import { Dispatch, SetStateAction } from 'react';
|
|
3
|
+
import { BaseDialogProps } from '../../shared/BaseDialog';
|
|
4
|
+
import { UserProps } from '../User';
|
|
5
|
+
interface TabComponentProps {
|
|
6
|
+
state: any;
|
|
7
|
+
dispatch: Dispatch<any>;
|
|
8
|
+
/**
|
|
9
|
+
* Props to spread to single user object
|
|
10
|
+
* @default empty object
|
|
11
|
+
*/
|
|
12
|
+
userProps?: UserProps;
|
|
13
|
+
/**
|
|
14
|
+
* Props to spread to users suggestion dialog
|
|
15
|
+
* @default {}
|
|
16
|
+
*/
|
|
17
|
+
dialogProps?: BaseDialogProps;
|
|
18
|
+
actionProps?: {
|
|
19
|
+
scEvent?: SCEventType;
|
|
20
|
+
setInvitedNumber: Dispatch<SetStateAction<number>>;
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
export default function TabContentComponent(props: TabComponentProps): JSX.Element;
|
|
24
|
+
export {};
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Button, List, ListItem, styled, Typography } from '@mui/material';
|
|
3
|
+
import { Endpoints, http } from '@selfcommunity/api-services';
|
|
4
|
+
import { useCallback, useState } from 'react';
|
|
5
|
+
import { FormattedMessage } from 'react-intl';
|
|
6
|
+
import BaseDialog from '../../shared/BaseDialog';
|
|
7
|
+
import InfiniteScroll from '../../shared/InfiniteScroll';
|
|
8
|
+
import { actionWidgetTypes } from '../../utils/widget';
|
|
9
|
+
import InviteEventButton from '../InviteEventButton';
|
|
10
|
+
import User, { UserSkeleton } from '../User';
|
|
11
|
+
import { PREFIX } from './constants';
|
|
12
|
+
const classes = {
|
|
13
|
+
actionButton: `${PREFIX}-action-button`,
|
|
14
|
+
dialogRoot: `${PREFIX}-dialog-root`,
|
|
15
|
+
infiniteScroll: `${PREFIX}-infinite-scroll`,
|
|
16
|
+
endMessage: `${PREFIX}-end-message`
|
|
17
|
+
};
|
|
18
|
+
const DialogRoot = styled(BaseDialog, {
|
|
19
|
+
name: PREFIX,
|
|
20
|
+
slot: 'DialogRoot',
|
|
21
|
+
overridesResolver: (_props, styles) => styles.dialogRoot
|
|
22
|
+
})(() => ({}));
|
|
23
|
+
export default function TabContentComponent(props) {
|
|
24
|
+
// PROPS
|
|
25
|
+
const { state, dispatch, userProps, dialogProps, actionProps } = props;
|
|
26
|
+
// STATE
|
|
27
|
+
const [openDialog, setOpenDialog] = useState(false);
|
|
28
|
+
// HANDLERS
|
|
29
|
+
/**
|
|
30
|
+
* Handles pagination
|
|
31
|
+
*/
|
|
32
|
+
const handleNext = useCallback(() => {
|
|
33
|
+
dispatch({ type: actionWidgetTypes.LOADING_NEXT });
|
|
34
|
+
http
|
|
35
|
+
.request({
|
|
36
|
+
url: state.next,
|
|
37
|
+
method: Endpoints.UserSuggestion.method
|
|
38
|
+
})
|
|
39
|
+
.then((res) => {
|
|
40
|
+
dispatch({ type: actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: res.data });
|
|
41
|
+
});
|
|
42
|
+
}, [dispatch, state.next, state.isLoadingNext, state.initialized]);
|
|
43
|
+
const handleToggleDialogOpen = useCallback(() => {
|
|
44
|
+
setOpenDialog((prev) => !prev);
|
|
45
|
+
}, []);
|
|
46
|
+
const getActionsComponent = useCallback((userId) => actionProps ? _jsx(InviteEventButton, { event: actionProps.scEvent, userId: userId, setInvitedNumber: actionProps.setInvitedNumber }) : undefined, [actionProps]);
|
|
47
|
+
return (_jsxs(_Fragment, { children: [_jsx(List, { children: state.results.map((user) => (_jsx(ListItem, { children: _jsx(User, Object.assign({ elevation: 0, user: user }, userProps, { actions: getActionsComponent(user.id) })) }, user.id))) }), state.count > state.visibleItems && (_jsx(Button, Object.assign({ onClick: handleToggleDialogOpen, className: classes.actionButton }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.showAll", defaultMessage: "ui.eventMembersWidget.showAll" }) })) }))), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.eventMembersWidget.title", id: "ui.eventMembersWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(UserSkeleton, Object.assign({ elevation: 0 }, userProps)), className: classes.infiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.noMoreResults", defaultMessage: "ui.eventMembersWidget.noMoreResults" }) })) }, { children: _jsx(List, { children: state.results.map((user) => (_jsx(ListItem, { children: _jsx(User, Object.assign({ elevation: 0, user: user }, userProps)) }, user.id))) }) })) })))] }));
|
|
48
|
+
}
|
|
@@ -116,7 +116,7 @@ export default function Events(inProps) {
|
|
|
116
116
|
url: endpoint.url({}),
|
|
117
117
|
method: endpoint.method,
|
|
118
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 && {
|
|
119
|
+
? Object.assign(Object.assign(Object.assign(Object.assign({}, (search !== '' && { search: search })), (dateSearch !== SCEventDateFilterType.ANY && { date_filter: dateSearch })), (showFollowed && { follows: showFollowed })), (showPastEvents && { date_filter: SCEventDateFilterType.PAST })) : Object.assign(Object.assign(Object.assign({}, (search !== '' && { search: search })), { subscription_status: SCEventSubscriptionStatusType.GOING }), (showPastEvents && { date_filter: SCEventDateFilterType.PAST }))))
|
|
120
120
|
})
|
|
121
121
|
.then((res) => {
|
|
122
122
|
setEvents(res.data.results);
|
|
@@ -194,7 +194,7 @@ export default function Events(inProps) {
|
|
|
194
194
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
195
195
|
// @ts-ignore
|
|
196
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, disabled: dateSearch !== SCEventDateFilterType.ANY }) }))] })) }))), _jsx(_Fragment, { children: !events.length ? (_jsx(Box, Object.assign({ className: classes.noResults }, { children: (onlyStaffEnabled && !UserUtils.isStaff(scUserContext.user)) ||
|
|
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:
|
|
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: 12, 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: 12, md: 6, className: classes.itemSkeleton }, { children: _jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false, 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" }) })))] })) })] }));
|
|
198
198
|
/**
|
|
199
199
|
* Renders root object (if content availability community option is false and user is anonymous, component is hidden)
|
|
200
200
|
*/
|