@selfcommunity/react-ui 0.7.50-events.102 → 0.7.50-events.103

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.
@@ -119,7 +119,7 @@ function Event(inProps) {
119
119
  */
120
120
  let contentObj;
121
121
  if (template === event_1.SCEventTemplateType.DETAIL) {
122
- contentObj = ((0, jsx_runtime_1.jsxs)(DetailRoot, Object.assign({ className: classes.detailRoot }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.detailImageWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", image: scEvent.image_medium, alt: scEvent.name, className: classes.detailImage }), (0, jsx_runtime_1.jsx)(Calendar_1.default, { day: new Date(scEvent.start_date).getDate() })] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.detailContent }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.detailNameWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.detailName }, { children: scEvent.name })) })), (0, jsx_runtime_1.jsx)(EventInfoDetails_1.default, { event: scEvent }), !hideEventPlanner && ((0, jsx_runtime_1.jsx)(User_1.default, { user: scEvent.managed_by, elevation: 0, secondary: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.myEventsWidget.planner", defaultMessage: "ui.myEventsWidget.planner" }) })), actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), className: classes.detailUser })), !hideEventParticipants && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.detailFirstDivider }), (0, jsx_runtime_1.jsx)(EventParticipantsButton_1.default, Object.assign({ event: scEvent, eventId: scEvent.id }, EventParticipantsButtonComponentProps))] })), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.detailSecondDivider })] })), actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.detailActions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
122
+ contentObj = ((0, jsx_runtime_1.jsxs)(DetailRoot, Object.assign({ className: classes.detailRoot }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.detailImageWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", image: scEvent.image_medium, alt: scEvent.name, className: classes.detailImage }), (0, jsx_runtime_1.jsx)(Calendar_1.default, { day: new Date(scEvent.start_date).getDate() })] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.detailContent }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.detailNameWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.detailName }, { children: scEvent.name })) })), (0, jsx_runtime_1.jsx)(EventInfoDetails_1.default, { event: scEvent }), !hideEventPlanner && ((0, jsx_runtime_1.jsx)(User_1.default, { user: scEvent.managed_by, elevation: 0, secondary: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.myEventsWidget.planner", defaultMessage: "ui.myEventsWidget.planner" }) })), actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), className: classes.detailUser })), !hideEventParticipants && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.detailFirstDivider }), (0, jsx_runtime_1.jsx)(EventParticipantsButton_1.default, Object.assign({ event: scEvent }, EventParticipantsButtonComponentProps))] })), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.detailSecondDivider })] })), actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.detailActions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
123
123
  }
124
124
  else if (template === event_1.SCEventTemplateType.PREVIEW) {
125
125
  contentObj = ((0, jsx_runtime_1.jsxs)(PreviewRoot, Object.assign({ className: classes.previewRoot }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ position: "relative", className: classes.previewImageWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", height: "100px", image: scEvent.image_medium, alt: scEvent.name, className: classes.previewImage }) })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.previewContent }, { children: [(0, jsx_runtime_1.jsx)(EventInfoDetails_1.default, { event: scEvent, hidePrivacyIcon: true, hasLocationInfo: false, beforePrivacyInfo: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.previewNameWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.previewName }, { children: scEvent.name })) })) }), !hideEventParticipants && (0, jsx_runtime_1.jsx)(EventParticipantsButton_1.default, Object.assign({ event: scEvent, hideCaption: true }, EventParticipantsButtonComponentProps))] })), actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.previewActions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
@@ -79,7 +79,6 @@ function EventSkeleton(inProps) {
79
79
  */
80
80
  let contentObj;
81
81
  if (template === event_1.SCEventTemplateType.DETAIL) {
82
- console.log(actions);
83
82
  contentObj = ((0, jsx_runtime_1.jsxs)(SkeletonDetailRoot, Object.assign({ className: classes.skeletonDetailRoot }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ position: "relative" }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "170px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { className: classes.skeletonDetailCalendar, variant: "rounded", animation: skeletonsAnimation, width: "60px", height: "60px" })] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.skeletonDetailContent }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "36%", height: "40px" }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "9px" }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "50%", height: "20px" })] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "9px" }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "35%", height: "20px" })] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "14px" }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "27%", height: "20px" })] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", gap: "8px", className: classes.skeletonDetailUser }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "36px", height: "36px" }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ gap: "1px" }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "75px", height: "15px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "86px", height: "16px" })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.skeletonDetailFirstDivider }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center", height: "28px" }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "68px", height: "20px" }), (0, jsx_runtime_1.jsxs)(material_1.AvatarGroup, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" })] })] })), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.skeletonDetailSecondDivider })] })), (0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.skeletonDetailActions }, { children: actions !== undefined ? actions : (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rounded", width: 100, height: 30 }) }))] })));
84
83
  }
85
84
  else if (template === event_1.SCEventTemplateType.PREVIEW) {
@@ -75,6 +75,10 @@ function EventParticipantsButton(inProps) {
75
75
  const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
76
76
  const participantsAvailable = (0, react_1.useMemo)(() => scEvent.privacy === types_1.SCEventPrivacyType.PUBLIC ||
77
77
  [types_1.SCEventSubscriptionStatusType.SUBSCRIBED, types_1.SCEventSubscriptionStatusType.GOING, types_1.SCEventSubscriptionStatusType.NOT_GOING].indexOf(scEvent.subscription_status) > -1, [scEvent]);
78
+ (0, use_deep_compare_effect_1.useDeepCompareEffectNoCheck)(() => {
79
+ setFollowers([]);
80
+ setLoading(true);
81
+ }, [scEvent]);
78
82
  // FETCH FIRST FOLLOWERS
79
83
  (0, use_deep_compare_effect_1.useDeepCompareEffectNoCheck)(() => {
80
84
  if (!scEvent) {
@@ -90,7 +94,7 @@ function EventParticipantsButton(inProps) {
90
94
  else {
91
95
  setOffset(0);
92
96
  }
93
- }, [scEvent, participantsAvailable]);
97
+ }, [scEvent, participantsAvailable, followers]);
94
98
  (0, react_1.useEffect)(() => {
95
99
  if (open && offset !== null) {
96
100
  setLoading(true);
@@ -82,6 +82,7 @@ function EventSubscribeButton(inProps) {
82
82
  const { className, eventId, event, user, onSubscribe } = props, rest = tslib_1.__rest(props, ["className", "eventId", "event", "user", "onSubscribe"]);
83
83
  // STATE
84
84
  const [status, setStatus] = (0, react_1.useState)(undefined);
85
+ const [loading, setLoading] = (0, react_1.useState)(false);
85
86
  const [anchorEl, setAnchorEl] = react_1.default.useState(null);
86
87
  const open = Boolean(anchorEl);
87
88
  // CONTEXT
@@ -115,6 +116,7 @@ function EventSubscribeButton(inProps) {
115
116
  }
116
117
  }, [authUserId, scEventsManager === null || scEventsManager === void 0 ? void 0 : scEventsManager.subscriptionStatus, scEvent]);
117
118
  const toggleEventAttendance = (eventStatus) => {
119
+ setLoading(true);
118
120
  const isGoing = eventStatus === types_1.SCEventSubscriptionStatusType.GOING ||
119
121
  !scEvent.subscription_status ||
120
122
  (scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) === types_1.SCEventSubscriptionStatusType.INVITED;
@@ -124,6 +126,7 @@ function EventSubscribeButton(inProps) {
124
126
  toggleAction
125
127
  .then(() => {
126
128
  onSubscribe && onSubscribe(scEvent, (0, react_core_1.getEventStatus)(scEvent, isGoing));
129
+ setLoading(false);
127
130
  })
128
131
  .catch((e) => {
129
132
  utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
@@ -139,7 +142,7 @@ function EventSubscribeButton(inProps) {
139
142
  }
140
143
  };
141
144
  function renderMenuItems() {
142
- return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: options.map((option) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { label: option.label, control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { size: "small", checked: status === option.value, value: option.value, onChange: handleToggleAction, name: `${option.value}-option`, inputProps: { 'aria-label': `${option.label}` } }), labelPlacement: "start" }) }), option.value))) }));
145
+ return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: options.map((option) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, disabled: loading }, { children: (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { label: option.label, control: loading ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: 'primary', size: 20 })) : ((0, jsx_runtime_1.jsx)(material_1.Checkbox, { size: "small", checked: status === option.value, value: option.value, onChange: handleToggleAction, name: `${option.value}-option`, inputProps: { 'aria-label': `${option.label}` } })), labelPlacement: "start" }) }), option.value))) }));
143
146
  }
144
147
  /**
145
148
  * Get current translated status
@@ -66,6 +66,14 @@ function EventNotification(props) {
66
66
  hour: intl.formatDate(notificationObject.event.start_date, { hour: 'numeric', minute: 'numeric' })
67
67
  } }) })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ component: "p", variant: "body2" }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.event.privacy.${notificationObject.event.privacy}`, defaultMessage: `ui.notification.event.privacy.${notificationObject.event.privacy}` }), ' ', "-", ' ', notificationObject.event.location === types_1.SCEventLocationType.PERSON ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.event.address.live.label`, defaultMessage: `ui.notification.event.address.live.label` })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.event.address.online.label`, defaultMessage: `ui.notification.event.address.online.label` }))] }))] }), footer: isToastTemplate ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "primary" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.event.button.see", defaultMessage: "ui.notification.event.button.see" }) })) }))] }))) : ((0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.snippetTime })) }, rest)));
68
68
  }
69
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, primary: (0, jsx_runtime_1.jsx)(Event_1.default, { event: notificationObject.event, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), elevation: 0 }), actions: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.activeAt }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ color: 'primary', variant: "outlined", size: "small", classes: { root: classes.seeButton }, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.event.button.see", defaultMessage: "ui.notification.event.button.see" }) }))] })) }, rest)), openAlert && (0, jsx_runtime_1.jsx)(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
69
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!notificationObject.user.deleted && {
70
+ to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
71
+ }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !notificationObject.user.community_badge, smaller: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { className: classes.avatar, alt: notificationObject.user.username, variant: "circular", src: notificationObject.user.avatar }) })) })), primary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!notificationObject.user.deleted && {
72
+ to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
73
+ }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.user.username })), ' ', (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.event.${notificationObject.type}`, defaultMessage: `ui.notification.event.${notificationObject.type}`, values: {
74
+ icon: (...chunks) => (0, jsx_runtime_1.jsx)(material_1.Icon, { children: chunks }),
75
+ event: notificationObject.event.name,
76
+ link: (...chunks) => (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: chunks }))
77
+ } }), (0, jsx_runtime_1.jsx)(Event_1.default, { event: notificationObject.event, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), elevation: 0 })] }), actions: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.activeAt }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ color: 'primary', variant: "outlined", size: "small", classes: { root: classes.seeButton }, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.event.button.see", defaultMessage: "ui.notification.event.button.see" }) }))] })) }, rest)), openAlert && (0, jsx_runtime_1.jsx)(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
70
78
  }
71
79
  exports.default = EventNotification;
@@ -194,25 +194,6 @@ function UserNotification(inProps) {
194
194
  b: (...chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
195
195
  })] }) }));
196
196
  }
197
- /**
198
- * Event notifications header
199
- */
200
- if (notificationObject.aggregated &&
201
- (notificationObject.aggregated[0].type === types_1.SCNotificationTypologyType.USER_INVITED_TO_JOIN_EVENT ||
202
- notificationObject.aggregated[0].type === types_1.SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_EVENT ||
203
- notificationObject.aggregated[0].type === types_1.SCNotificationTypologyType.USER_ADDED_TO_EVENT ||
204
- notificationObject.aggregated[0].type === types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT)) {
205
- let eventNotification = notificationObject.aggregated[0];
206
- return ((0, jsx_runtime_1.jsx)(material_1.CardHeader, { className: classes.header, avatar: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!eventNotification.user.deleted && {
207
- to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, eventNotification.user)
208
- }), { onClick: eventNotification.user.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !eventNotification.user.community_badge, smaller: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { className: classes.avatar, alt: eventNotification.user.username, variant: "circular", src: eventNotification.user.avatar }) })) })), titleTypographyProps: { className: classes.title, variant: 'subtitle1' }, title: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!eventNotification.user.deleted && {
209
- to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, eventNotification.user)
210
- }), { onClick: eventNotification.user.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: eventNotification.user.username })), ' ', (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.${notificationObject.aggregated[0].type}`, defaultMessage: `ui.notification.${notificationObject.aggregated[0].type}`, values: {
211
- icon: (...chunks) => (0, jsx_runtime_1.jsx)(Icon_1.default, { children: chunks }),
212
- event: eventNotification.event.name,
213
- link: (...chunks) => (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENTS_ROUTE_NAME, eventNotification.event) }, { children: chunks }))
214
- } })] }) }));
215
- }
216
197
  /**
217
198
  * Group notifications header
218
199
  */
@@ -117,7 +117,7 @@ export default function Event(inProps) {
117
117
  */
118
118
  let contentObj;
119
119
  if (template === SCEventTemplateType.DETAIL) {
120
- contentObj = (_jsxs(DetailRoot, Object.assign({ className: classes.detailRoot }, { children: [_jsxs(Box, Object.assign({ className: classes.detailImageWrapper }, { children: [_jsx(CardMedia, { component: "img", image: scEvent.image_medium, alt: scEvent.name, className: classes.detailImage }), _jsx(Calendar, { day: new Date(scEvent.start_date).getDate() })] })), _jsxs(CardContent, Object.assign({ className: classes.detailContent }, { children: [_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.detailNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h3", className: classes.detailName }, { children: scEvent.name })) })), _jsx(EventInfoDetails, { event: scEvent }), !hideEventPlanner && (_jsx(User, { user: scEvent.managed_by, elevation: 0, secondary: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.myEventsWidget.planner", defaultMessage: "ui.myEventsWidget.planner" }) })), actions: _jsx(_Fragment, {}), className: classes.detailUser })), !hideEventParticipants && (_jsxs(_Fragment, { children: [_jsx(Divider, { className: classes.detailFirstDivider }), _jsx(EventParticipantsButton, Object.assign({ event: scEvent, eventId: scEvent.id }, EventParticipantsButtonComponentProps))] })), _jsx(Divider, { className: classes.detailSecondDivider })] })), actions !== null && actions !== void 0 ? actions : (_jsx(CardActions, Object.assign({ className: classes.detailActions }, { children: _jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
120
+ contentObj = (_jsxs(DetailRoot, Object.assign({ className: classes.detailRoot }, { children: [_jsxs(Box, Object.assign({ className: classes.detailImageWrapper }, { children: [_jsx(CardMedia, { component: "img", image: scEvent.image_medium, alt: scEvent.name, className: classes.detailImage }), _jsx(Calendar, { day: new Date(scEvent.start_date).getDate() })] })), _jsxs(CardContent, Object.assign({ className: classes.detailContent }, { children: [_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.detailNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h3", className: classes.detailName }, { children: scEvent.name })) })), _jsx(EventInfoDetails, { event: scEvent }), !hideEventPlanner && (_jsx(User, { user: scEvent.managed_by, elevation: 0, secondary: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.myEventsWidget.planner", defaultMessage: "ui.myEventsWidget.planner" }) })), actions: _jsx(_Fragment, {}), className: classes.detailUser })), !hideEventParticipants && (_jsxs(_Fragment, { children: [_jsx(Divider, { className: classes.detailFirstDivider }), _jsx(EventParticipantsButton, Object.assign({ event: scEvent }, EventParticipantsButtonComponentProps))] })), _jsx(Divider, { className: classes.detailSecondDivider })] })), actions !== null && actions !== void 0 ? actions : (_jsx(CardActions, Object.assign({ className: classes.detailActions }, { children: _jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
121
121
  }
122
122
  else if (template === SCEventTemplateType.PREVIEW) {
123
123
  contentObj = (_jsxs(PreviewRoot, Object.assign({ className: classes.previewRoot }, { children: [_jsx(Box, Object.assign({ position: "relative", className: classes.previewImageWrapper }, { children: _jsx(CardMedia, { component: "img", height: "100px", image: scEvent.image_medium, alt: scEvent.name, className: classes.previewImage }) })), _jsxs(CardContent, Object.assign({ className: classes.previewContent }, { children: [_jsx(EventInfoDetails, { event: scEvent, hidePrivacyIcon: true, hasLocationInfo: false, beforePrivacyInfo: _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.previewNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h5", className: classes.previewName }, { children: scEvent.name })) })) }), !hideEventParticipants && _jsx(EventParticipantsButton, Object.assign({ event: scEvent, hideCaption: true }, EventParticipantsButtonComponentProps))] })), actions !== null && actions !== void 0 ? actions : (_jsx(CardActions, Object.assign({ className: classes.previewActions }, { children: _jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
@@ -77,7 +77,6 @@ export default function EventSkeleton(inProps) {
77
77
  */
78
78
  let contentObj;
79
79
  if (template === SCEventTemplateType.DETAIL) {
80
- console.log(actions);
81
80
  contentObj = (_jsxs(SkeletonDetailRoot, Object.assign({ className: classes.skeletonDetailRoot }, { children: [_jsxs(Box, Object.assign({ position: "relative" }, { children: [_jsx(Skeleton, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "170px" }), _jsx(Skeleton, { className: classes.skeletonDetailCalendar, variant: "rounded", animation: skeletonsAnimation, width: "60px", height: "60px" })] })), _jsxs(CardContent, Object.assign({ className: classes.skeletonDetailContent }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, width: "36%", height: "40px" }), _jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "9px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "50%", height: "20px" })] })), _jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "9px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "35%", height: "20px" })] })), _jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "14px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "27%", height: "20px" })] })), _jsxs(Stack, Object.assign({ direction: "row", gap: "8px", className: classes.skeletonDetailUser }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "36px", height: "36px" }), _jsxs(Stack, Object.assign({ gap: "1px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, width: "75px", height: "15px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "86px", height: "16px" })] }))] })), _jsx(Divider, { className: classes.skeletonDetailFirstDivider }), _jsxs(Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center", height: "28px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, width: "68px", height: "20px" }), _jsxs(AvatarGroup, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" })] })] })), _jsx(Divider, { className: classes.skeletonDetailSecondDivider })] })), _jsx(CardActions, Object.assign({ className: classes.skeletonDetailActions }, { children: actions !== undefined ? actions : _jsx(Skeleton, { variant: "rounded", width: 100, height: 30 }) }))] })));
82
81
  }
83
82
  else if (template === SCEventTemplateType.PREVIEW) {
@@ -73,6 +73,10 @@ export default function EventParticipantsButton(inProps) {
73
73
  const { scEvent } = useSCFetchEvent({ id: eventId, event });
74
74
  const participantsAvailable = useMemo(() => scEvent.privacy === SCEventPrivacyType.PUBLIC ||
75
75
  [SCEventSubscriptionStatusType.SUBSCRIBED, SCEventSubscriptionStatusType.GOING, SCEventSubscriptionStatusType.NOT_GOING].indexOf(scEvent.subscription_status) > -1, [scEvent]);
76
+ useDeepCompareEffectNoCheck(() => {
77
+ setFollowers([]);
78
+ setLoading(true);
79
+ }, [scEvent]);
76
80
  // FETCH FIRST FOLLOWERS
77
81
  useDeepCompareEffectNoCheck(() => {
78
82
  if (!scEvent) {
@@ -88,7 +92,7 @@ export default function EventParticipantsButton(inProps) {
88
92
  else {
89
93
  setOffset(0);
90
94
  }
91
- }, [scEvent, participantsAvailable]);
95
+ }, [scEvent, participantsAvailable, followers]);
92
96
  useEffect(() => {
93
97
  if (open && offset !== null) {
94
98
  setLoading(true);
@@ -1,7 +1,7 @@
1
1
  import { __rest } from "tslib";
2
2
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import { LoadingButton } from '@mui/lab';
4
- import { Box, Button, Checkbox, FormControlLabel, Icon, Menu, MenuItem, SwipeableDrawer, useMediaQuery, useTheme } from '@mui/material';
4
+ import { Box, Button, Checkbox, CircularProgress, FormControlLabel, Icon, Menu, MenuItem, SwipeableDrawer, useMediaQuery, useTheme } from '@mui/material';
5
5
  import { styled } from '@mui/material/styles';
6
6
  import { useThemeProps } from '@mui/system';
7
7
  import { getEventStatus, useSCContext, useSCFetchEvent, useSCUser } from '@selfcommunity/react-core';
@@ -80,6 +80,7 @@ export default function EventSubscribeButton(inProps) {
80
80
  const { className, eventId, event, user, onSubscribe } = props, rest = __rest(props, ["className", "eventId", "event", "user", "onSubscribe"]);
81
81
  // STATE
82
82
  const [status, setStatus] = useState(undefined);
83
+ const [loading, setLoading] = useState(false);
83
84
  const [anchorEl, setAnchorEl] = React.useState(null);
84
85
  const open = Boolean(anchorEl);
85
86
  // CONTEXT
@@ -113,6 +114,7 @@ export default function EventSubscribeButton(inProps) {
113
114
  }
114
115
  }, [authUserId, scEventsManager === null || scEventsManager === void 0 ? void 0 : scEventsManager.subscriptionStatus, scEvent]);
115
116
  const toggleEventAttendance = (eventStatus) => {
117
+ setLoading(true);
116
118
  const isGoing = eventStatus === SCEventSubscriptionStatusType.GOING ||
117
119
  !scEvent.subscription_status ||
118
120
  (scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) === SCEventSubscriptionStatusType.INVITED;
@@ -122,6 +124,7 @@ export default function EventSubscribeButton(inProps) {
122
124
  toggleAction
123
125
  .then(() => {
124
126
  onSubscribe && onSubscribe(scEvent, getEventStatus(scEvent, isGoing));
127
+ setLoading(false);
125
128
  })
126
129
  .catch((e) => {
127
130
  Logger.error(SCOPE_SC_UI, e);
@@ -137,7 +140,7 @@ export default function EventSubscribeButton(inProps) {
137
140
  }
138
141
  };
139
142
  function renderMenuItems() {
140
- return (_jsx(Box, { children: options.map((option) => (_jsx(MenuItem, Object.assign({ className: classes.item }, { children: _jsx(FormControlLabel, { label: option.label, control: _jsx(Checkbox, { size: "small", checked: status === option.value, value: option.value, onChange: handleToggleAction, name: `${option.value}-option`, inputProps: { 'aria-label': `${option.label}` } }), labelPlacement: "start" }) }), option.value))) }));
143
+ return (_jsx(Box, { children: options.map((option) => (_jsx(MenuItem, Object.assign({ className: classes.item, disabled: loading }, { children: _jsx(FormControlLabel, { label: option.label, control: loading ? (_jsx(CircularProgress, { color: 'primary', size: 20 })) : (_jsx(Checkbox, { size: "small", checked: status === option.value, value: option.value, onChange: handleToggleAction, name: `${option.value}-option`, inputProps: { 'aria-label': `${option.label}` } })), labelPlacement: "start" }) }), option.value))) }));
141
144
  }
142
145
  /**
143
146
  * Get current translated status
@@ -64,5 +64,13 @@ export default function EventNotification(props) {
64
64
  hour: intl.formatDate(notificationObject.event.start_date, { hour: 'numeric', minute: 'numeric' })
65
65
  } }) })), _jsxs(Typography, Object.assign({ component: "p", variant: "body2" }, { children: [_jsx(FormattedMessage, { id: `ui.notification.event.privacy.${notificationObject.event.privacy}`, defaultMessage: `ui.notification.event.privacy.${notificationObject.event.privacy}` }), ' ', "-", ' ', notificationObject.event.location === SCEventLocationType.PERSON ? (_jsx(FormattedMessage, { id: `ui.notification.event.address.live.label`, defaultMessage: `ui.notification.event.address.live.label` })) : (_jsx(FormattedMessage, { id: `ui.notification.event.address.online.label`, defaultMessage: `ui.notification.event.address.online.label` }))] }))] }), footer: isToastTemplate ? (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at }), _jsx(Typography, Object.assign({ color: "primary" }, { children: _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: _jsx(FormattedMessage, { id: "ui.notification.event.button.see", defaultMessage: "ui.notification.event.button.see" }) })) }))] }))) : (_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.snippetTime })) }, rest)));
66
66
  }
67
- return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, primary: _jsx(EventItem, { event: notificationObject.event, actions: _jsx(_Fragment, {}), elevation: 0 }), actions: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }), _jsx(LoadingButton, Object.assign({ color: 'primary', variant: "outlined", size: "small", classes: { root: classes.seeButton }, component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: _jsx(FormattedMessage, { id: "ui.notification.event.button.see", defaultMessage: "ui.notification.event.button.see" }) }))] })) }, rest)), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
67
+ return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: _jsx(Link, Object.assign({}, (!notificationObject.user.deleted && {
68
+ to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
69
+ }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !notificationObject.user.community_badge, smaller: true }, { children: _jsx(Avatar, { className: classes.avatar, alt: notificationObject.user.username, variant: "circular", src: notificationObject.user.avatar }) })) })), primary: _jsxs(_Fragment, { children: [_jsx(Link, Object.assign({}, (!notificationObject.user.deleted && {
70
+ to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
71
+ }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.user.username })), ' ', _jsx(FormattedMessage, { id: `ui.notification.event.${notificationObject.type}`, defaultMessage: `ui.notification.event.${notificationObject.type}`, values: {
72
+ icon: (...chunks) => _jsx(Icon, { children: chunks }),
73
+ event: notificationObject.event.name,
74
+ link: (...chunks) => _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: chunks }))
75
+ } }), _jsx(EventItem, { event: notificationObject.event, actions: _jsx(_Fragment, {}), elevation: 0 })] }), actions: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }), _jsx(LoadingButton, Object.assign({ color: 'primary', variant: "outlined", size: "small", classes: { root: classes.seeButton }, component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: _jsx(FormattedMessage, { id: "ui.notification.event.button.see", defaultMessage: "ui.notification.event.button.see" }) }))] })) }, rest)), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
68
76
  }
@@ -192,25 +192,6 @@ export default function UserNotification(inProps) {
192
192
  b: (...chunks) => _jsx("strong", { children: chunks })
193
193
  })] }) }));
194
194
  }
195
- /**
196
- * Event notifications header
197
- */
198
- if (notificationObject.aggregated &&
199
- (notificationObject.aggregated[0].type === SCNotificationTypologyType.USER_INVITED_TO_JOIN_EVENT ||
200
- notificationObject.aggregated[0].type === SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_EVENT ||
201
- notificationObject.aggregated[0].type === SCNotificationTypologyType.USER_ADDED_TO_EVENT ||
202
- notificationObject.aggregated[0].type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT)) {
203
- let eventNotification = notificationObject.aggregated[0];
204
- return (_jsx(CardHeader, { className: classes.header, avatar: _jsx(Link, Object.assign({}, (!eventNotification.user.deleted && {
205
- to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, eventNotification.user)
206
- }), { onClick: eventNotification.user.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !eventNotification.user.community_badge, smaller: true }, { children: _jsx(Avatar, { className: classes.avatar, alt: eventNotification.user.username, variant: "circular", src: eventNotification.user.avatar }) })) })), titleTypographyProps: { className: classes.title, variant: 'subtitle1' }, title: _jsxs(_Fragment, { children: [_jsx(Link, Object.assign({}, (!eventNotification.user.deleted && {
207
- to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, eventNotification.user)
208
- }), { onClick: eventNotification.user.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: eventNotification.user.username })), ' ', _jsx(FormattedMessage, { id: `ui.notification.${notificationObject.aggregated[0].type}`, defaultMessage: `ui.notification.${notificationObject.aggregated[0].type}`, values: {
209
- icon: (...chunks) => _jsx(Icon, { children: chunks }),
210
- event: eventNotification.event.name,
211
- link: (...chunks) => _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, eventNotification.event) }, { children: chunks }))
212
- } })] }) }));
213
- }
214
195
  /**
215
196
  * Group notifications header
216
197
  */