@selfcommunity/react-ui 0.9.0-alpha.2 → 0.9.0-alpha.21
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/assets/onBoarding/android.d.ts +1 -1
- package/lib/cjs/assets/onBoarding/android.js +1 -1
- package/lib/cjs/components/Event/Event.js +1 -1
- package/lib/cjs/components/EventHeader/EventHeader.js +5 -40
- package/lib/cjs/components/EventMediaWidget/EventMediaWidget.js +37 -34
- package/lib/cjs/components/EventMembersWidget/EventMembersWidget.d.ts +3 -0
- package/lib/cjs/components/EventMembersWidget/EventMembersWidget.js +15 -34
- package/lib/cjs/components/EventMembersWidget/TabContentComponent.js +1 -1
- package/lib/cjs/components/EventSubscribeButton/EventSubscribeButton.d.ts +2 -2
- package/lib/cjs/components/EventSubscribeButton/EventSubscribeButton.js +14 -16
- package/lib/cjs/components/Events/Events.js +3 -4
- package/lib/cjs/components/NavigationSettingsIconButton/NavigationSettingsIconButton.js +35 -2
- package/lib/cjs/components/NavigationToolbar/NavigationToolbar.js +1 -1
- package/lib/cjs/components/OnBoardingWidget/ActionsButton.d.ts +7 -0
- package/lib/cjs/components/OnBoardingWidget/ActionsButton.js +84 -0
- package/lib/cjs/components/OnBoardingWidget/OnBoardingWidget.js +44 -19
- package/lib/cjs/components/OnBoardingWidget/Steps/App/App.js +2 -1
- package/lib/cjs/components/OnBoardingWidget/Steps/Appearance/Appearance.js +10 -13
- package/lib/cjs/components/UserProfileEdit/Section/PublicInfo.js +2 -1
- package/lib/cjs/shared/EventActionsMenu/index.d.ts +1 -1
- package/lib/cjs/shared/EventActionsMenu/index.js +11 -15
- package/lib/cjs/utils/events.d.ts +2 -0
- package/lib/cjs/utils/events.js +10 -0
- package/lib/cjs/utils/widget.js +11 -1
- package/lib/esm/assets/onBoarding/android.d.ts +1 -1
- package/lib/esm/assets/onBoarding/android.js +1 -1
- package/lib/esm/components/Event/Event.js +1 -1
- package/lib/esm/components/EventHeader/EventHeader.js +6 -41
- package/lib/esm/components/EventMediaWidget/EventMediaWidget.js +37 -34
- package/lib/esm/components/EventMembersWidget/EventMembersWidget.d.ts +3 -0
- package/lib/esm/components/EventMembersWidget/EventMembersWidget.js +15 -34
- package/lib/esm/components/EventMembersWidget/TabContentComponent.js +1 -1
- package/lib/esm/components/EventSubscribeButton/EventSubscribeButton.d.ts +2 -2
- package/lib/esm/components/EventSubscribeButton/EventSubscribeButton.js +16 -18
- package/lib/esm/components/Events/Events.js +3 -4
- package/lib/esm/components/NavigationSettingsIconButton/NavigationSettingsIconButton.js +38 -5
- package/lib/esm/components/NavigationToolbar/NavigationToolbar.js +1 -1
- package/lib/esm/components/OnBoardingWidget/ActionsButton.d.ts +7 -0
- package/lib/esm/components/OnBoardingWidget/ActionsButton.js +81 -0
- package/lib/esm/components/OnBoardingWidget/OnBoardingWidget.js +46 -21
- package/lib/esm/components/OnBoardingWidget/Steps/App/App.js +2 -1
- package/lib/esm/components/OnBoardingWidget/Steps/Appearance/Appearance.js +10 -13
- package/lib/esm/components/UserProfileEdit/Section/PublicInfo.js +2 -1
- package/lib/esm/shared/EventActionsMenu/index.d.ts +1 -1
- package/lib/esm/shared/EventActionsMenu/index.js +11 -15
- package/lib/esm/utils/events.d.ts +2 -0
- package/lib/esm/utils/events.js +6 -0
- package/lib/esm/utils/widget.js +11 -1
- package/lib/umd/react-ui.js +1 -1
- package/package.json +6 -6
|
@@ -106,7 +106,7 @@ export default function Event(inProps) {
|
|
|
106
106
|
});
|
|
107
107
|
const { id = `event_object_${props.eventId ? props.eventId : props.event ? props.event.id : ''}`, eventId = null, event = null, className = null, template = SCEventTemplateType.SNIPPET, hideInProgress = false, hideEventParticipants = false, hideEventPlanner = false, actions, EventParticipantsButtonComponentProps = {}, EventSkeletonComponentProps = {} } = props, rest = __rest(props, ["id", "eventId", "event", "className", "template", "hideInProgress", "hideEventParticipants", "hideEventPlanner", "actions", "EventParticipantsButtonComponentProps", "EventSkeletonComponentProps"]);
|
|
108
108
|
// STATE
|
|
109
|
-
const { scEvent } = useSCFetchEvent({ id: eventId, event });
|
|
109
|
+
const { scEvent } = useSCFetchEvent({ id: eventId, event, autoSubscribe: false });
|
|
110
110
|
const inProgress = useMemo(() => scEvent && scEvent.active && scEvent.running, [scEvent]);
|
|
111
111
|
// CONTEXT
|
|
112
112
|
const scRoutingContext = useSCRouting();
|
|
@@ -6,13 +6,12 @@ import { useThemeProps } from '@mui/system';
|
|
|
6
6
|
import { SCPreferences, useSCFetchEvent, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
|
|
7
7
|
import { SCEventLocationType, SCEventPrivacyType } from '@selfcommunity/types';
|
|
8
8
|
import classNames from 'classnames';
|
|
9
|
-
import
|
|
10
|
-
import { useCallback, useEffect, useMemo, useRef } from 'react';
|
|
9
|
+
import { useMemo } from 'react';
|
|
11
10
|
import { FormattedMessage, useIntl } from 'react-intl';
|
|
12
|
-
import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
|
|
13
11
|
import Bullet from '../../shared/Bullet';
|
|
14
12
|
import Calendar from '../../shared/Calendar';
|
|
15
13
|
import EventActionsMenu from '../../shared/EventActionsMenu';
|
|
14
|
+
import { checkEventFinished } from '../../utils/events';
|
|
16
15
|
import EditEventButton from '../EditEventButton';
|
|
17
16
|
import EventInviteButton from '../EventInviteButton';
|
|
18
17
|
import EventSubscribeButton from '../EventSubscribeButton';
|
|
@@ -89,49 +88,15 @@ export default function EventHeader(inProps) {
|
|
|
89
88
|
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
|
90
89
|
// INTL
|
|
91
90
|
const intl = useIntl();
|
|
92
|
-
// REFS
|
|
93
|
-
const updatesSubscription = useRef(null);
|
|
94
91
|
// CONST
|
|
95
92
|
const isEventAdmin = useMemo(() => scUserContext.user && (scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by.id) === scUserContext.user.id, [scUserContext.user, scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by.id]);
|
|
96
|
-
const isEventFinished = useMemo(() =>
|
|
97
|
-
if (scEvent && !scEvent.running) {
|
|
98
|
-
return new Date().getTime() > new Date(scEvent.end_date || scEvent.start_date).getTime();
|
|
99
|
-
}
|
|
100
|
-
return false;
|
|
101
|
-
}, [scEvent]);
|
|
102
|
-
/**
|
|
103
|
-
* Subscriber for pubsub callback
|
|
104
|
-
*/
|
|
105
|
-
const onChangeEventMembersHandler = useCallback((msg, data) => {
|
|
106
|
-
var _a;
|
|
107
|
-
if (data && ((_a = data === null || data === void 0 ? void 0 : data.event) === null || _a === void 0 ? void 0 : _a.id) === (scEvent === null || scEvent === void 0 ? void 0 : scEvent.id)) {
|
|
108
|
-
let _event = Object.assign({}, scEvent);
|
|
109
|
-
if (msg === `${SCTopicType.GROUP}.${SCGroupEventType.ADD_MEMBER}`) {
|
|
110
|
-
_event.subscribers_counter = _event.subscribers_counter + 1;
|
|
111
|
-
}
|
|
112
|
-
else if (msg === `${SCTopicType.GROUP}.${SCGroupEventType.REMOVE_MEMBER}`) {
|
|
113
|
-
_event.subscribers_counter = Math.max(_event.subscribers_counter - 1, 0);
|
|
114
|
-
}
|
|
115
|
-
setSCEvent(_event);
|
|
116
|
-
}
|
|
117
|
-
}, [scEvent, setSCEvent]);
|
|
93
|
+
const isEventFinished = useMemo(() => checkEventFinished(scEvent), [scEvent]);
|
|
118
94
|
/**
|
|
119
95
|
* Handles callback subscribe/unsubscribe event
|
|
120
96
|
*/
|
|
121
|
-
const handleSubscribe = (
|
|
122
|
-
setSCEvent(
|
|
97
|
+
const handleSubscribe = (event) => {
|
|
98
|
+
setSCEvent(event);
|
|
123
99
|
};
|
|
124
|
-
/**
|
|
125
|
-
* On mount, subscribe to receive events updates (only edit)
|
|
126
|
-
*/
|
|
127
|
-
useEffect(() => {
|
|
128
|
-
if (scEvent) {
|
|
129
|
-
updatesSubscription.current = PubSub.subscribe(`${SCTopicType.EVENT}.${SCGroupEventType.MEMBERS}`, onChangeEventMembersHandler);
|
|
130
|
-
}
|
|
131
|
-
return () => {
|
|
132
|
-
updatesSubscription.current && PubSub.unsubscribe(updatesSubscription.current);
|
|
133
|
-
};
|
|
134
|
-
}, [scEvent]);
|
|
135
100
|
// RENDER
|
|
136
101
|
if (!scEvent) {
|
|
137
102
|
return _jsx(EventHeaderSkeleton, {});
|
|
@@ -174,5 +139,5 @@ export default function EventHeader(inProps) {
|
|
|
174
139
|
month: 'long'
|
|
175
140
|
}),
|
|
176
141
|
hour: intl.formatDate(scEvent.start_date, { hour: 'numeric', minute: 'numeric' })
|
|
177
|
-
} })) })), _jsx(Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scEvent.name })), _jsxs(Box, Object.assign({ className: classes.visibility }, { children: [_jsx(_Fragment, { children: scEvent.privacy === SCEventPrivacyType.PUBLIC ? (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.eventHeader.visibility.public", defaultMessage: "ui.eventHeader.visibility.public" })] }))) : (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.eventHeader.visibility.private", defaultMessage: "ui.eventHeader.visibility.private" })] }))) }), _jsx(Bullet, {}), _jsx(Typography, Object.assign({ className: classes.visibilityItem }, { children: scEvent.location === SCEventLocationType.PERSON ? (_jsx(FormattedMessage, { id: "ui.eventHeader.location.live", defaultMessage: "ui.eventHeader.location.live" })) : (_jsx(FormattedMessage, { id: "ui.eventHeader.location.online", defaultMessage: "ui.eventHeader.location.online" })) }))] })), _jsx(User, { className: classes.planner, userId: scEvent.managed_by.id, secondary: _jsx(FormattedMessage, { id: "ui.eventHeader.user.manager", defaultMessage: "ui.eventHeader.user.manager" }), elevation: 0, actions: _jsx(_Fragment, { children: isEventAdmin ? (_jsxs(Box, Object.assign({ className: classes.multiActions }, { children: [_jsx(EventInviteButton, { size: isMobile ? 'small' : 'medium', event: scEvent,
|
|
142
|
+
} })) })), _jsx(Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scEvent.name })), _jsxs(Box, Object.assign({ className: classes.visibility }, { children: [_jsx(_Fragment, { children: scEvent.privacy === SCEventPrivacyType.PUBLIC ? (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.eventHeader.visibility.public", defaultMessage: "ui.eventHeader.visibility.public" })] }))) : (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.eventHeader.visibility.private", defaultMessage: "ui.eventHeader.visibility.private" })] }))) }), _jsx(Bullet, {}), _jsx(Typography, Object.assign({ className: classes.visibilityItem }, { children: scEvent.location === SCEventLocationType.PERSON ? (_jsx(FormattedMessage, { id: "ui.eventHeader.location.live", defaultMessage: "ui.eventHeader.location.live" })) : (_jsx(FormattedMessage, { id: "ui.eventHeader.location.online", defaultMessage: "ui.eventHeader.location.online" })) }))] })), _jsx(User, { className: classes.planner, userId: scEvent.managed_by.id, secondary: _jsx(FormattedMessage, { id: "ui.eventHeader.user.manager", defaultMessage: "ui.eventHeader.user.manager" }), elevation: 0, actions: _jsx(_Fragment, { children: isEventAdmin ? (_jsxs(Box, Object.assign({ className: classes.multiActions }, { children: [_jsx(EventInviteButton, { size: isMobile ? 'small' : 'medium', event: scEvent, disabled: isEventFinished }), _jsxs(Box, { children: [!isMobile && (_jsx(EditEventButton, { size: isMobile ? 'small' : 'medium', event: scEvent, onEditSuccess: setSCEvent, disabled: isEventFinished })), _jsx(EventActionsMenu, Object.assign({ event: scEvent, onEditSuccess: (data) => setSCEvent(data) }, EventActionsProps))] })] }))) : (_jsxs(_Fragment, { children: [_jsx(EventSubscribeButton, Object.assign({ event: scEvent, onSubscribe: handleSubscribe }, EventSubscribeButtonProps, { disabled: isEventFinished })), _jsx(EventActionsMenu, Object.assign({ event: scEvent, onEditSuccess: setSCEvent }, EventActionsProps))] })) }) })] }))] })));
|
|
178
143
|
}
|
|
@@ -81,8 +81,8 @@ export default function EventMediaWidget(inProps) {
|
|
|
81
81
|
cacheStrategy,
|
|
82
82
|
visibleItems: limit
|
|
83
83
|
}, stateWidgetInitializer);
|
|
84
|
-
const [medias, setMedias] = useState(
|
|
85
|
-
const [mediasCount, setMediasCount] = useState(
|
|
84
|
+
const [medias, setMedias] = useState(state.results);
|
|
85
|
+
const [mediasCount, setMediasCount] = useState(state.count);
|
|
86
86
|
const [openDialog, setOpenDialog] = useState(false);
|
|
87
87
|
const [openDialogConfirm, setOpenDialogConfirm] = useState(false);
|
|
88
88
|
const [mediaId, setMediaId] = useState(null);
|
|
@@ -94,25 +94,6 @@ export default function EventMediaWidget(inProps) {
|
|
|
94
94
|
// CONSTS
|
|
95
95
|
const hasAllow = useMemo(() => { var _a; return ((_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) === (scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by.id); }, [scUserContext, scEvent]);
|
|
96
96
|
const countHiddenMedia = useMemo(() => mediasCount - MEDIAS_TO_SHOW, [mediasCount]);
|
|
97
|
-
/**
|
|
98
|
-
* Initialize component
|
|
99
|
-
* Fetch data only if the component is not initialized and it is not loading data
|
|
100
|
-
*/
|
|
101
|
-
const _initComponent = useCallback(() => {
|
|
102
|
-
if (!state.initialized && !state.isLoadingNext) {
|
|
103
|
-
dispatch({ type: actionWidgetTypes.LOADING_NEXT });
|
|
104
|
-
EventService.getEventPhotoGallery(scEvent.id, Object.assign({}, endpointQueryParams))
|
|
105
|
-
.then((payload) => {
|
|
106
|
-
dispatch({ type: actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: Object.assign(Object.assign({}, payload), { initialized: true }) });
|
|
107
|
-
setMedias(payload.results);
|
|
108
|
-
setMediasCount(payload.count);
|
|
109
|
-
})
|
|
110
|
-
.catch((error) => {
|
|
111
|
-
dispatch({ type: actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
|
|
112
|
-
Logger.error(SCOPE_SC_UI, error);
|
|
113
|
-
});
|
|
114
|
-
}
|
|
115
|
-
}, [state.isLoadingNext, scEvent, dispatch, setMedias, setMediasCount]);
|
|
116
97
|
const _fetchNext = useCallback((index) => {
|
|
117
98
|
if (mediasCount > medias.length && index >= 6 && !state.isLoadingNext && state.next) {
|
|
118
99
|
setPreview(index);
|
|
@@ -210,33 +191,55 @@ export default function EventMediaWidget(inProps) {
|
|
|
210
191
|
// EFFECTS
|
|
211
192
|
useEffect(() => {
|
|
212
193
|
let _t;
|
|
213
|
-
if (scUserContext.user &&
|
|
194
|
+
if (scUserContext.user &&
|
|
195
|
+
scEvent &&
|
|
196
|
+
!state.initialized &&
|
|
197
|
+
Boolean((eventId !== undefined && scEvent.id === eventId) || (event && scEvent.id === event.id))) {
|
|
214
198
|
_t = setTimeout(_initComponent);
|
|
215
199
|
return () => {
|
|
216
200
|
clearTimeout(_t);
|
|
217
|
-
if (state.initialized) {
|
|
218
|
-
dispatch({
|
|
219
|
-
type: actionWidgetTypes.INITIALIZE,
|
|
220
|
-
payload: {
|
|
221
|
-
cacheKey: SCCache.getWidgetStateCacheKey(SCCache.EVENT_MEDIA_STATE_CACHE_PREFIX_KEY, scEvent.id)
|
|
222
|
-
}
|
|
223
|
-
});
|
|
224
|
-
}
|
|
225
201
|
};
|
|
226
202
|
}
|
|
227
203
|
}, [scUserContext.user, scEvent, state.initialized]);
|
|
204
|
+
useEffect(() => {
|
|
205
|
+
if (state.initialized && scEvent && Boolean((eventId !== undefined && scEvent.id !== eventId) || (event && scEvent.id !== event.id))) {
|
|
206
|
+
dispatch({ type: actionWidgetTypes.RESET, payload: {} });
|
|
207
|
+
}
|
|
208
|
+
}, [state.initialized, scEvent, eventId, event]);
|
|
209
|
+
/**
|
|
210
|
+
* Initialize component
|
|
211
|
+
* Fetch data only if the component is not initialized and it is not loading data
|
|
212
|
+
*/
|
|
213
|
+
const _initComponent = useCallback(() => {
|
|
214
|
+
if (!state.isLoadingNext) {
|
|
215
|
+
dispatch({ type: actionWidgetTypes.LOADING_NEXT });
|
|
216
|
+
EventService.getEventPhotoGallery(scEvent.id, Object.assign({}, endpointQueryParams))
|
|
217
|
+
.then((payload) => {
|
|
218
|
+
dispatch({ type: actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: Object.assign(Object.assign({}, payload), { initialized: true }) });
|
|
219
|
+
setMedias(payload.results);
|
|
220
|
+
setMediasCount(payload.count);
|
|
221
|
+
})
|
|
222
|
+
.catch((error) => {
|
|
223
|
+
dispatch({ type: actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
|
|
224
|
+
Logger.error(SCOPE_SC_UI, error);
|
|
225
|
+
});
|
|
226
|
+
}
|
|
227
|
+
}, [state.isLoadingNext, scEvent, eventId, dispatch, setMedias, setMediasCount]);
|
|
228
228
|
useEffect(() => {
|
|
229
229
|
if (isMobile && openDialog && state.next) {
|
|
230
230
|
handleNext();
|
|
231
231
|
}
|
|
232
232
|
}, [isMobile, openDialog, state.next]);
|
|
233
233
|
// RENDER
|
|
234
|
-
if (!scEvent ||
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
234
|
+
if (!scEvent ||
|
|
235
|
+
!state.initialized ||
|
|
236
|
+
(scEvent && ((eventId !== undefined && scEvent.id !== eventId) || (event && scEvent.id !== event.id))) ||
|
|
237
|
+
(state.isLoadingNext && !state.initialized)) {
|
|
238
238
|
return _jsx(SkeletonComponent, {});
|
|
239
239
|
}
|
|
240
|
+
if (state.initialized && state.count === 0 && !hasAllow) {
|
|
241
|
+
return _jsx(HiddenPlaceholder, {});
|
|
242
|
+
}
|
|
240
243
|
return (_jsxs(Root, Object.assign({ className: classes.root }, rest, { showPadding: hasAllow }, { children: [_jsx(CardHeader, { title: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center" }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.title", defaultMessage: "ui.eventMediaWidget.title" }) })), hasAllow && mediasCount > 0 && _jsx(TriggerButton, { size: "small", onAdd: handleAddMedia })] })), className: classes.header }), _jsx(Divider, {}), _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsxs(Box, Object.assign({ className: classes.grid }, { children: [showSkeleton === 'widget' && _jsx(EventMediaSkeleton, {}), medias.slice(0, MEDIAS_TO_SHOW).map((media, i, array) => (_jsx(Box, Object.assign({ onClick: () => handleOpenLightbox(i), sx: {
|
|
241
244
|
background: `url(${media.image}) no-repeat center`
|
|
242
245
|
}, className: classes.media }, { children: medias.length > array.length && i === array.length - 1 && (_jsxs(Fragment, { children: [_jsx(Box, { className: classes.mediaLayer }), _jsx(Box, Object.assign({ className: classes.countHiddenMediaWrapper }, { children: _jsxs(Typography, Object.assign({ className: classes.countHiddenMedia }, { children: ["+", countHiddenMedia] })) }))] })) }), media.id))), hasAllow && mediasCount === 0 && (_jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.add", defaultMessage: "ui.eventMediaWidget.add" }) }, { children: _jsx(TriggerButton, { size: "large", onAdd: handleAddMedia, isSquare: true }) })))] })), preview !== -1 && _jsx(Lightbox, { onClose: handleCloseLightbox, index: preview, medias: medias, onIndexChange: _fetchNext })] })), hasAllow && mediasCount > 0 && (_jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(Button, Object.assign({ onClick: handleToggleDialogOpen }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.showAll", defaultMessage: "ui.eventMediaWidget.showAll" }) })) })) }))), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.title, { user: scEvent.managed_by.username }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: medias.length, height: isMobile ? '100%' : '515px', next: handleNext, hasMoreNext: Boolean(state.next), className: classes.dialogInfiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.noMoreResults", defaultMessage: "ui.eventMediaWidget.noMoreResults" }) })) }, { children: _jsxs(Box, Object.assign({ className: classes.grid }, { children: [medias.map((media) => (_jsx(Box, Object.assign({ sx: {
|
|
@@ -11,7 +11,6 @@ import { FormattedMessage } from 'react-intl';
|
|
|
11
11
|
import 'swiper/css';
|
|
12
12
|
import { SCOPE_SC_UI } from '../../constants/Errors';
|
|
13
13
|
import { DEFAULT_PAGINATION_OFFSET } from '../../constants/Pagination';
|
|
14
|
-
import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
|
|
15
14
|
import { actionWidgetTypes, dataWidgetReducer, stateWidgetInitializer } from '../../utils/widget';
|
|
16
15
|
import Widget from '../Widget';
|
|
17
16
|
import { PREFIX } from './constants';
|
|
@@ -60,10 +59,10 @@ export default function EventMembersWidget(inProps) {
|
|
|
60
59
|
cacheStrategy,
|
|
61
60
|
visibleItems: limit
|
|
62
61
|
}, stateWidgetInitializer);
|
|
63
|
-
const [participantsCount, setParticipantsCount] = useState(
|
|
64
|
-
const [invitedCount, setInvitedCount] = useState(
|
|
65
|
-
const [requestsCount, setRequestsCount] = useState(
|
|
66
|
-
const [requestsUsers, setRequestsUsers] = useState(
|
|
62
|
+
const [participantsCount, setParticipantsCount] = useState(participants.count);
|
|
63
|
+
const [invitedCount, setInvitedCount] = useState(invited.count);
|
|
64
|
+
const [requestsCount, setRequestsCount] = useState(requests.count);
|
|
65
|
+
const [requestsUsers, setRequestsUsers] = useState(requests.results);
|
|
67
66
|
const [tabValue, setTabValue] = useState(TabContentEnum.PARTICIPANTS);
|
|
68
67
|
const [refresh, setRefresh] = useState(null);
|
|
69
68
|
// CONTEXT
|
|
@@ -148,33 +147,16 @@ export default function EventMembersWidget(inProps) {
|
|
|
148
147
|
});
|
|
149
148
|
return () => {
|
|
150
149
|
clearTimeout(_t);
|
|
151
|
-
if (participants.initialized) {
|
|
152
|
-
dispatchParticipants({
|
|
153
|
-
type: actionWidgetTypes.INITIALIZE,
|
|
154
|
-
payload: {
|
|
155
|
-
cacheKey: SCCache.getWidgetStateCacheKey(SCCache.USER_PARTECIPANTS_EVENTS_STATE_CACHE_PREFIX_KEY, scEvent.id)
|
|
156
|
-
}
|
|
157
|
-
});
|
|
158
|
-
}
|
|
159
|
-
if (invited.initialized) {
|
|
160
|
-
dispatchParticipants({
|
|
161
|
-
type: actionWidgetTypes.INITIALIZE,
|
|
162
|
-
payload: {
|
|
163
|
-
cacheKey: SCCache.getWidgetStateCacheKey(SCCache.USER_INVITED_EVENTS_STATE_CACHE_PREFIX_KEY, scEvent.id)
|
|
164
|
-
}
|
|
165
|
-
});
|
|
166
|
-
}
|
|
167
|
-
if (requests.initialized) {
|
|
168
|
-
dispatchParticipants({
|
|
169
|
-
type: actionWidgetTypes.INITIALIZE,
|
|
170
|
-
payload: {
|
|
171
|
-
cacheKey: SCCache.getWidgetStateCacheKey(SCCache.USER_REQUESTS_EVENTS_STATE_CACHE_PREFIX_KEY, scEvent.id)
|
|
172
|
-
}
|
|
173
|
-
});
|
|
174
|
-
}
|
|
175
150
|
};
|
|
176
151
|
}
|
|
177
152
|
}, [scUserContext.user, scEvent, refresh]);
|
|
153
|
+
useEffect(() => {
|
|
154
|
+
if (participants.initialized && scEvent && Boolean((eventId !== undefined && scEvent.id !== eventId) || (event && scEvent.id !== event.id))) {
|
|
155
|
+
dispatchParticipants({ type: actionWidgetTypes.RESET, payload: {} });
|
|
156
|
+
dispatchRequests({ type: actionWidgetTypes.RESET, payload: {} });
|
|
157
|
+
dispatchInvited({ type: actionWidgetTypes.RESET, payload: {} });
|
|
158
|
+
}
|
|
159
|
+
}, [participants.initialized, scEvent, eventId, event]);
|
|
178
160
|
// HANDLERS
|
|
179
161
|
const handleTabChange = useCallback((_evt, newTabValue) => {
|
|
180
162
|
setTabValue(newTabValue);
|
|
@@ -188,13 +170,12 @@ export default function EventMembersWidget(inProps) {
|
|
|
188
170
|
}
|
|
189
171
|
setRefresh(_tabValue);
|
|
190
172
|
}, []);
|
|
191
|
-
if (!scEvent
|
|
173
|
+
if (!scEvent ||
|
|
174
|
+
!participants.initialized ||
|
|
175
|
+
(scEvent && ((eventId !== undefined && scEvent.id !== eventId) || (event && scEvent.id !== event.id))) ||
|
|
176
|
+
(tabValue === TabContentEnum.PARTICIPANTS && participants.isLoadingNext && !participants.initialized)) {
|
|
192
177
|
return _jsx(Skeleton, {});
|
|
193
178
|
}
|
|
194
|
-
// RENDER
|
|
195
|
-
if (!scEvent) {
|
|
196
|
-
return _jsx(HiddenPlaceholder, {});
|
|
197
|
-
}
|
|
198
179
|
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: title, defaultMessage: title }) })), _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: participantsCount })), _jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.participants", defaultMessage: "ui.eventMembersWidget.participants" }) }))] })), value: TabContentEnum.PARTICIPANTS }), hasAllow && (_jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h3" }, { children: invitedCount })), _jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.invited", defaultMessage: "ui.eventMembersWidget.invited" }) }))] })), value: TabContentEnum.INVITED })), hasAllow && (_jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h3" }, { children: requestsCount })), _jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.requests", defaultMessage: "ui.eventMembersWidget.requests" }) }))] })), value: TabContentEnum.REQUESTS }))] })), _jsx(TabPanel, Object.assign({ value: TabContentEnum.PARTICIPANTS, className: classes.tabPanel }, { children: _jsx(TabContentComponent, { tabValue: TabContentEnum.PARTICIPANTS, state: participants, dispatch: dispatchParticipants, userProps: userProps, dialogProps: dialogProps, handleRefresh: handleRefresh }) })), hasAllow && (_jsx(TabPanel, Object.assign({ value: TabContentEnum.INVITED, className: classes.tabPanel }, { children: _jsx(TabContentComponent, { tabValue: TabContentEnum.INVITED, state: invited, dispatch: dispatchInvited, userProps: userProps, dialogProps: dialogProps, actionProps: {
|
|
199
180
|
scEvent,
|
|
200
181
|
setCount: setInvitedCount
|
|
@@ -44,7 +44,7 @@ export default function TabContentComponent(props) {
|
|
|
44
44
|
// EFFECTS
|
|
45
45
|
useEffect(() => {
|
|
46
46
|
updatesInvited.current = PubSub.subscribe(`${SCTopicType.EVENT}.${SCGroupEventType.INVITE_MEMBER}`, handleInviteMember);
|
|
47
|
-
updatesParticipants.current = PubSub.subscribe(`${SCTopicType.EVENT}.${SCGroupEventType.
|
|
47
|
+
updatesParticipants.current = PubSub.subscribe(`${SCTopicType.EVENT}.${SCGroupEventType.MEMBERS}`, handleToggleMember);
|
|
48
48
|
return () => {
|
|
49
49
|
updatesInvited.current && PubSub.unsubscribe(updatesInvited.current);
|
|
50
50
|
updatesParticipants.current && PubSub.unsubscribe(updatesParticipants.current);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { SCEventType, SCUserType } from '@selfcommunity/types';
|
|
2
2
|
export interface EventSubscribeButtonProps {
|
|
3
3
|
/**
|
|
4
4
|
* Overrides or extends the styles applied to the component.
|
|
@@ -25,7 +25,7 @@ export interface EventSubscribeButtonProps {
|
|
|
25
25
|
* @param user
|
|
26
26
|
* @param joined
|
|
27
27
|
*/
|
|
28
|
-
onSubscribe?: (event: SCEventType
|
|
28
|
+
onSubscribe?: (event: SCEventType) => any;
|
|
29
29
|
/**
|
|
30
30
|
* Others properties
|
|
31
31
|
*/
|
|
@@ -4,12 +4,12 @@ import { LoadingButton } from '@mui/lab';
|
|
|
4
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
|
-
import {
|
|
7
|
+
import { useSCContext, useSCFetchEvent, useSCUser } from '@selfcommunity/react-core';
|
|
8
8
|
import { SCEventPrivacyType, SCEventSubscriptionStatusType } from '@selfcommunity/types';
|
|
9
9
|
import { CacheStrategies, Logger } from '@selfcommunity/utils';
|
|
10
10
|
import classNames from 'classnames';
|
|
11
11
|
import PubSub from 'pubsub-js';
|
|
12
|
-
import { useEffect, useMemo, useState } from 'react';
|
|
12
|
+
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
13
13
|
import { FormattedMessage } from 'react-intl';
|
|
14
14
|
import { SCOPE_SC_UI } from '../../constants/Errors';
|
|
15
15
|
import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
|
|
@@ -93,19 +93,19 @@ export default function EventSubscribeButton(inProps) {
|
|
|
93
93
|
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
|
94
94
|
// CONST
|
|
95
95
|
const authUserId = scUserContext.user ? scUserContext.user.id : null;
|
|
96
|
-
const { scEvent } = useSCFetchEvent({
|
|
96
|
+
const { scEvent, setSCEvent } = useSCFetchEvent({
|
|
97
97
|
id: eventId,
|
|
98
98
|
event,
|
|
99
99
|
cacheStrategy: authUserId ? CacheStrategies.CACHE_FIRST : CacheStrategies.STALE_WHILE_REVALIDATE
|
|
100
100
|
});
|
|
101
101
|
const isEventAdmin = useMemo(() => { var _a; return scUserContext.user && ((_a = scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by) === null || _a === void 0 ? void 0 : _a.id) === scUserContext.user.id; }, [scUserContext.user, (_a = scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by) === null || _a === void 0 ? void 0 : _a.id]);
|
|
102
102
|
// HANDLERS
|
|
103
|
-
const handleOpen = (event) => {
|
|
103
|
+
const handleOpen = useCallback((event) => {
|
|
104
104
|
setAnchorEl(event.currentTarget);
|
|
105
|
-
};
|
|
106
|
-
const handleClose = () => {
|
|
105
|
+
}, [setAnchorEl]);
|
|
106
|
+
const handleClose = useCallback(() => {
|
|
107
107
|
setAnchorEl(null);
|
|
108
|
-
};
|
|
108
|
+
}, [setAnchorEl]);
|
|
109
109
|
useEffect(() => {
|
|
110
110
|
/**
|
|
111
111
|
* Call scEventsManager.subscriptionStatus inside an effect
|
|
@@ -115,25 +115,23 @@ export default function EventSubscribeButton(inProps) {
|
|
|
115
115
|
setStatus(scEventsManager === null || scEventsManager === void 0 ? void 0 : scEventsManager.subscriptionStatus(scEvent));
|
|
116
116
|
}
|
|
117
117
|
}, [authUserId, scEventsManager === null || scEventsManager === void 0 ? void 0 : scEventsManager.subscriptionStatus, scEvent]);
|
|
118
|
-
const toggleEventAttendance = (eventStatus) => {
|
|
118
|
+
const toggleEventAttendance = useCallback((eventStatus) => {
|
|
119
119
|
setLoading(true);
|
|
120
120
|
const isGoing = eventStatus === SCEventSubscriptionStatusType.GOING ||
|
|
121
121
|
!(scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) ||
|
|
122
122
|
(scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) === SCEventSubscriptionStatusType.INVITED;
|
|
123
|
-
const toggleAction = isGoing
|
|
124
|
-
? scEventsManager.toggleEventAttendance(scEvent, (user === null || user === void 0 ? void 0 : user.id) || null)
|
|
125
|
-
: scEventsManager.toggleEventNonattendance(scEvent);
|
|
123
|
+
const toggleAction = isGoing ? scEventsManager.toggleEventAttendance(scEvent) : scEventsManager.toggleEventNonattendance(scEvent);
|
|
126
124
|
toggleAction
|
|
127
|
-
.then(() => {
|
|
128
|
-
onSubscribe
|
|
125
|
+
.then((data) => {
|
|
126
|
+
onSubscribe ? onSubscribe(data) : setSCEvent(data);
|
|
129
127
|
setLoading(false);
|
|
130
|
-
PubSub.publish(`${SCTopicType.EVENT}.${SCGroupEventType.
|
|
128
|
+
PubSub.publish(`${SCTopicType.EVENT}.${SCGroupEventType.MEMBERS}`);
|
|
131
129
|
})
|
|
132
130
|
.catch((e) => {
|
|
133
131
|
Logger.error(SCOPE_SC_UI, e);
|
|
134
132
|
});
|
|
135
|
-
};
|
|
136
|
-
const handleToggleAction = (event) => {
|
|
133
|
+
}, [scEvent, scEventsManager, onSubscribe, setLoading]);
|
|
134
|
+
const handleToggleAction = useCallback((event) => {
|
|
137
135
|
setAnchorEl(null);
|
|
138
136
|
if (!scUserContext.user) {
|
|
139
137
|
scContext.settings.handleAnonymousAction();
|
|
@@ -141,9 +139,9 @@ export default function EventSubscribeButton(inProps) {
|
|
|
141
139
|
else if (status !== undefined) {
|
|
142
140
|
toggleEventAttendance(event.target.value);
|
|
143
141
|
}
|
|
144
|
-
};
|
|
142
|
+
}, [scUserContext.user, status, scContext.settings]);
|
|
145
143
|
function renderMenuItems() {
|
|
146
|
-
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:
|
|
144
|
+
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))) }));
|
|
147
145
|
}
|
|
148
146
|
/**
|
|
149
147
|
* Get current translated status
|
|
@@ -142,13 +142,13 @@ export default function Events(inProps) {
|
|
|
142
142
|
* On mount, fetches events list
|
|
143
143
|
*/
|
|
144
144
|
useEffect(() => {
|
|
145
|
-
if (!contentAvailability) {
|
|
145
|
+
if (!contentAvailability && !authUserId) {
|
|
146
146
|
return;
|
|
147
147
|
}
|
|
148
148
|
else {
|
|
149
149
|
query === '' && fetchEvents();
|
|
150
150
|
}
|
|
151
|
-
}, [contentAvailability, dateSearch, location, showFollowed, showPastEvents, showMyEvents, query]);
|
|
151
|
+
}, [contentAvailability, authUserId, dateSearch, location, showFollowed, showPastEvents, showMyEvents, query]);
|
|
152
152
|
/**
|
|
153
153
|
* Subscriber for pubsub callback
|
|
154
154
|
*/
|
|
@@ -211,7 +211,6 @@ export default function Events(inProps) {
|
|
|
211
211
|
/**
|
|
212
212
|
* Renders events list
|
|
213
213
|
*/
|
|
214
|
-
console.log(location);
|
|
215
214
|
const c = (_jsxs(_Fragment, { children: [showFilters && (_jsx(Grid, Object.assign({ container: true, className: classes.filters, gap: 2 }, { children: filters ? (filters) : !general ? (_jsxs(_Fragment, { children: [(events.length !== 0 || (events.length === 0 && showMyEvents)) && (_jsx(Grid, Object.assign({ item: true }, { children: _jsx(EventsChipRoot
|
|
216
215
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
217
216
|
// @ts-ignore
|
|
@@ -244,7 +243,7 @@ export default function Events(inProps) {
|
|
|
244
243
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
245
244
|
// @ts-ignore
|
|
246
245
|
showFollowed: showFollowed, deleteIcon: showFollowed ? _jsx(Icon, { children: "close" }) : null, onDelete: showFollowed ? handleDeleteClick : null, disabled: loading || (!events.length && !showFollowed) }) }))), _jsx(Grid, Object.assign({ item: true }, { children: _jsx(PastEventsFilter, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick, disabled: dateSearch !== SCEventDateFilterType.ANY || loading || (!events.length && !showPastEvents) }) }))] })) }))), _jsx(_Fragment, { children: loading ? (_jsx(Skeleton, Object.assign({}, EventsSkeletonComponentProps, { EventSkeletonProps: EventSkeletonComponentProps }))) : (_jsx(_Fragment, { children: !events.length ? (_jsx(Box, Object.assign({ className: classes.noResults }, { children: (onlyStaffEnabled && !UserUtils.isStaff(scUserContext.user)) ||
|
|
247
|
-
(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, { skeletonsAnimation: false, 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 }, GridContainerComponentProps, { children: _jsxs(_Fragment, { children: [events.map((event) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, className: classes.item }, GridItemComponentProps, { children: _jsx(Event, Object.assign({ event: event, eventId: event.id }, EventComponentProps)) }), event.id))), authUserId && events.length % 2 !== 0 && (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, className: classes.itemSkeleton }, GridItemComponentProps, { 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" }) })))] })) })) })] }));
|
|
246
|
+
(onlyStaffEnabled && UserUtils.isStaff(scUserContext.user) && general) ? (_jsxs(_Fragment, { children: [_jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false })), _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, { skeletonsAnimation: false, 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 }, GridContainerComponentProps, { children: _jsxs(_Fragment, { children: [events.map((event) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, className: classes.item }, GridItemComponentProps, { children: _jsx(Event, Object.assign({ event: event, eventId: event.id }, EventComponentProps)) }), event.id))), authUserId && events.length % 2 !== 0 && (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, className: classes.itemSkeleton }, GridItemComponentProps, { 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" }) })))] })) })) })] }));
|
|
248
247
|
/**
|
|
249
248
|
* Renders root object (if content availability community option is false and user is anonymous, component is hidden)
|
|
250
249
|
*/
|
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
import { __rest } from "tslib";
|
|
2
|
-
import { jsx as _jsx,
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { useMemo, useState } from 'react';
|
|
4
4
|
import { styled } from '@mui/material/styles';
|
|
5
|
-
import { Divider, Icon, IconButton, List, ListItem, ListItemButton, Menu, MenuItem, SwipeableDrawer, useMediaQuery, useTheme } from '@mui/material';
|
|
5
|
+
import { Divider, Icon, IconButton, List, ListItem, ListItemButton, ListItemIcon, Menu, MenuItem, SwipeableDrawer, useMediaQuery, useTheme } from '@mui/material';
|
|
6
6
|
import { Link, SCPreferences, SCRoutes, UserUtils, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
|
|
7
7
|
import classNames from 'classnames';
|
|
8
8
|
import { useThemeProps } from '@mui/system';
|
|
9
9
|
import { FormattedMessage } from 'react-intl';
|
|
10
|
-
import { UserService } from '@selfcommunity/api-services';
|
|
10
|
+
import { PreferenceService, UserService } from '@selfcommunity/api-services';
|
|
11
|
+
import { SCOPE_SC_UI } from '../../constants/Errors';
|
|
12
|
+
import { Logger } from '@selfcommunity/utils';
|
|
13
|
+
import { SCPreferenceName } from '@selfcommunity/types';
|
|
11
14
|
const PREFIX = 'SCNavigationSettingsIconButton';
|
|
12
15
|
const classes = {
|
|
13
16
|
root: `${PREFIX}-root`,
|
|
@@ -35,7 +38,9 @@ const PREFERENCES = [
|
|
|
35
38
|
SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED,
|
|
36
39
|
SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED,
|
|
37
40
|
SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED,
|
|
38
|
-
SCPreferences.ADDONS_LOYALTY_POINTS_COLLECTION
|
|
41
|
+
SCPreferences.ADDONS_LOYALTY_POINTS_COLLECTION,
|
|
42
|
+
SCPreferences.CONFIGURATIONS_ONBOARDING_ENABLED,
|
|
43
|
+
SCPreferences.CONFIGURATIONS_ONBOARDING_HIDDEN
|
|
39
44
|
];
|
|
40
45
|
/**
|
|
41
46
|
* > API documentation for the Community-JS Navigation Settings Icon Button component. Learn about the available props and the CSS API.
|
|
@@ -72,6 +77,7 @@ export default function NavigationSettingsIconButton(inProps) {
|
|
|
72
77
|
const scUserContext = useSCUser();
|
|
73
78
|
// MEMO
|
|
74
79
|
const isAdmin = useMemo(() => UserUtils.isAdmin(scUserContext.user), [scUserContext.user]);
|
|
80
|
+
const isCommunityCreator = useMemo(() => UserUtils.isCommunityCreator(scUserContext.user), [scUserContext.user]);
|
|
75
81
|
const isModerator = useMemo(() => UserUtils.isModerator(scUserContext.user), [scUserContext.user]);
|
|
76
82
|
// HOOKS
|
|
77
83
|
const theme = useTheme();
|
|
@@ -92,7 +98,7 @@ export default function NavigationSettingsIconButton(inProps) {
|
|
|
92
98
|
setAnchorEl(null);
|
|
93
99
|
};
|
|
94
100
|
/**
|
|
95
|
-
* Fetches
|
|
101
|
+
* Fetches platform url
|
|
96
102
|
* @param query
|
|
97
103
|
*/
|
|
98
104
|
const fetchPlatform = (query) => {
|
|
@@ -101,6 +107,27 @@ export default function NavigationSettingsIconButton(inProps) {
|
|
|
101
107
|
window.open(platformUrl, '_blank').focus();
|
|
102
108
|
});
|
|
103
109
|
};
|
|
110
|
+
/**
|
|
111
|
+
* Handles preferences update
|
|
112
|
+
*/
|
|
113
|
+
const handlePreferencesUpdate = () => {
|
|
114
|
+
PreferenceService.getAllPreferences().then((preferences) => {
|
|
115
|
+
const prefs = preferences['results'].reduce((obj, p) => (Object.assign(Object.assign({}, obj), { [`${p.section}.${p.name}`]: p })), {});
|
|
116
|
+
scPreferences.setPreferences(prefs);
|
|
117
|
+
});
|
|
118
|
+
};
|
|
119
|
+
/**
|
|
120
|
+
* Updates onBoarding dynamic preference
|
|
121
|
+
*/
|
|
122
|
+
const showOnBoarding = () => {
|
|
123
|
+
PreferenceService.updatePreferences({ [`${SCPreferenceName.ONBOARDING_HIDDEN}`]: false })
|
|
124
|
+
.then(() => {
|
|
125
|
+
handlePreferencesUpdate();
|
|
126
|
+
})
|
|
127
|
+
.catch((e) => {
|
|
128
|
+
Logger.error(SCOPE_SC_UI, e);
|
|
129
|
+
});
|
|
130
|
+
};
|
|
104
131
|
const handleLogout = () => {
|
|
105
132
|
scUserContext.logout();
|
|
106
133
|
};
|
|
@@ -119,6 +146,9 @@ export default function NavigationSettingsIconButton(inProps) {
|
|
|
119
146
|
...(isAdmin
|
|
120
147
|
? [
|
|
121
148
|
_jsx(Divider, {}, "admin_divider"),
|
|
149
|
+
isCommunityCreator &&
|
|
150
|
+
preferences[SCPreferences.CONFIGURATIONS_ONBOARDING_ENABLED] &&
|
|
151
|
+
preferences[SCPreferences.CONFIGURATIONS_ONBOARDING_HIDDEN] && (_jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsxs(ListItemButton, Object.assign({ onClick: showOnBoarding }, { children: [_jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.onboarding", defaultMessage: "ui.navigationSettingsIconButton.onboarding" }), _jsx(ListItemIcon, { children: _jsx(Icon, { children: "magic_wand" }) })] })) }), "onboarding")),
|
|
122
152
|
_jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(ListItemButton, Object.assign({ onClick: () => fetchPlatform('') }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.platform", defaultMessage: "ui.navigationSettingsIconButton.platform" }) })) }), "platform")
|
|
123
153
|
]
|
|
124
154
|
: []),
|
|
@@ -147,6 +177,9 @@ export default function NavigationSettingsIconButton(inProps) {
|
|
|
147
177
|
...(isAdmin
|
|
148
178
|
? [
|
|
149
179
|
_jsx(Divider, {}, "platform_divider"),
|
|
180
|
+
isCommunityCreator &&
|
|
181
|
+
preferences[SCPreferences.CONFIGURATIONS_ONBOARDING_ENABLED] &&
|
|
182
|
+
preferences[SCPreferences.CONFIGURATIONS_ONBOARDING_HIDDEN] && (_jsxs(MenuItem, Object.assign({ className: classes.item, onClick: showOnBoarding }, { children: [_jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.onboarding", defaultMessage: "ui.navigationSettingsIconButton.onboarding" }), _jsx(ListItemIcon, { children: _jsx(Icon, { children: "magic_wand" }) })] }), "onboarding")),
|
|
150
183
|
_jsx(MenuItem, Object.assign({ className: classes.item, onClick: () => fetchPlatform('') }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.platform", defaultMessage: "ui.navigationSettingsIconButton.platform" }) }), "platform")
|
|
151
184
|
]
|
|
152
185
|
: []),
|
|
@@ -142,7 +142,7 @@ export default function NavigationToolbar(inProps) {
|
|
|
142
142
|
(preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && (_jsx(IconButton, Object.assign({ className: classNames(classes.explore, { [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {})) }), "aria-label": "Explore", to: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "explore" }) }))), groupsEnabled && scUserContext.user && (_jsx(IconButton, Object.assign({ className: classNames(classes.groups, {
|
|
143
143
|
[classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {})) ||
|
|
144
144
|
value.startsWith(scRoutingContext.url(SCRoutes.GROUPS_ROUTE_NAME, {}))
|
|
145
|
-
}), "aria-label": "Groups", to: scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "groups" }) }))), eventsEnabled && (_jsx(IconButton, Object.assign({ className: classNames(classes.events, {
|
|
145
|
+
}), "aria-label": "Groups", to: scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "groups" }) }))), eventsEnabled && (scUserContext.user || preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY]) && (_jsx(IconButton, Object.assign({ className: classNames(classes.events, {
|
|
146
146
|
[classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}))
|
|
147
147
|
}), "aria-label": "Groups", to: scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "CalendarIcon" }) })))] })));
|
|
148
148
|
return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsx(NavigationMenuIconButtonComponent, Object.assign({}, NavigationMenuIconButtonComponentProps)), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo }, { children: _jsx("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO], alt: "logo" }) })), !scUserContext.user && !preferences[SCPreferences.ADDONS_CLOSED_COMMUNITY] && (_jsx(Button, Object.assign({ color: "inherit", component: Link, to: scRoutingContext.url(SCRoutes.SIGNUP_ROUTE_NAME, {}), className: classes.register }, { children: _jsx(FormattedMessage, { id: "ui.appBar.navigation.register", defaultMessage: "ui.appBar.navigation.register" }) }))), preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED] && (_jsx(_Fragment, { children: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] ? (_jsx(Tooltip, Object.assign({ title: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] }, { children: _jsx(Link, Object.assign({ target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: _jsx("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) })) }))) : (_jsx(Link, Object.assign({ target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: _jsx("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) }))) })), _children, (preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && !disableSearch ? (_jsx(SearchAutocomplete, Object.assign({ className: classes.search, blurOnSelect: true }, SearchAutocompleteProps))) : (_jsx(Box, { className: classes.search })), startActions, scUserContext.user ? (_jsxs(_Fragment, { children: [showComposer && _jsx(ComposerIconButton, Object.assign({ className: classes.composer }, ComposerIconButtonProps)), _jsx(Tooltip, Object.assign({ title: scUserContext.user.username }, { children: _jsx(IconButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user), "aria-label": "Profile", className: classes.profile }, { children: _jsx(Avatar, { alt: scUserContext.user.username, src: scUserContext.user.avatar }) })) })), _jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ className: classNames(classes.notification, {
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { IconButtonProps } from '@mui/material';
|
|
2
|
+
export interface OnBoardingActionsButtonProps extends IconButtonProps {
|
|
3
|
+
isExpanded: boolean;
|
|
4
|
+
onExpandChange: () => void;
|
|
5
|
+
onHideOnBoarding: () => void;
|
|
6
|
+
}
|
|
7
|
+
export default function OnBoardingActionsButton(inProps: OnBoardingActionsButtonProps): JSX.Element;
|