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

package/lib/esm/components/SuggestedEventsWidget/SuggestedEventsWidget.js

@@ -7,21 +7,25 @@ import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
 import { Logger } from '@selfcommunity/utils';
 import { useCallback, useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import 'swiper/css';
+import { Navigation } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { DEFAULT_PAGINATION_LIMIT, DEFAULT_PAGINATION_OFFSET } from '../../constants/Pagination';
 import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
+import { SCEventTemplateType } from '../../types/event';
+import Event from '../Event';
 import Widget from '../Widget';
+import Arrow from './Arrow';
 import { PREFIX } from './constants';
 import Skeleton from './Skeleton';
-import { SCEventTemplateType } from '../../types/event';
-import Event from '../Event';
 const classes = {
     root: `${PREFIX}-root`,
     content: `${PREFIX}-content`,
     title: `${PREFIX}-title`,
     swiper: `${PREFIX}-swiper`,
+    swiperSlide: `${PREFIX}-swiper-slide`,
+    swiperPrevArrow: `${PREFIX}-swiper-prev-arrow`,
+    swiperNextArrow: `${PREFIX}-swiper-next-arrow`,
     event: `${PREFIX}-event`,
     actions: `${PREFIX}-actions`,
     actionButton: `${PREFIX}-action-button`
@@ -41,6 +45,8 @@ export default function SuggestedEventsWidget(inProps) {
     // STATE
     const [eventsData, setEventsData] = useState(null);
     const [loading, setLoading] = useState(true);
+    const [showSkeleton, setShowSkeleton] = useState(false);
+    const [currentItem, setCurrentItem] = useState(0);
     // CONTEXT
     const scRoutingContext = useSCRouting();
     useEffect(() => {
@@ -54,13 +60,17 @@ export default function SuggestedEventsWidget(inProps) {
         });
     }, []);
     const handleReachEnd = useCallback(() => {
-        if (eventsData.count > eventsData.results.length) {
+        if (eventsData.count > eventsData.results.length && eventsData.next) {
+            setShowSkeleton(true);
             http
                 .request({
                 url: eventsData.next,
                 method: Endpoints.GetEventSuggestedUsers.method
             })
-                .then((res) => console.log('*** res ***', res))
+                .then((res) => {
+                setEventsData(res.data);
+                setShowSkeleton(false);
+            })
                 .catch((error) => {
                 Logger.error(SCOPE_SC_UI, error);
             });
@@ -73,5 +83,5 @@ export default function SuggestedEventsWidget(inProps) {
     if (!eventsData) {
         return _jsx(HiddenPlaceholder, {});
     }
-    return (_jsxs(Root, Object.assign({ className: classes.root }, rest, { children: [_jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Typography, Object.assign({ variant: "h5", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.suggestedEventsWidget.title", defaultMessage: "ui.suggestedEventsWidget.title" }) })), _jsx(Swiper, Object.assign({ spaceBetween: 8, slidesPerView: "auto", onReachEnd: handleReachEnd }, { children: eventsData === null || eventsData === void 0 ? void 0 : eventsData.results.map((event, i) => (_jsx(SwiperSlide, Object.assign({ className: classes.swiper }, { children: _jsx(Event, { event: event, template: SCEventTemplateType.PREVIEW, actions: _jsx(_Fragment, {}), variant: "outlined", className: classes.event }) }), i))) }))] })), _jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, {}), className: classes.actionButton }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.suggestedEventsWidget.showAll", defaultMessage: "ui.suggestedEventsWidget.showAll" }) })) })) }))] })));
+    return (_jsxs(Root, Object.assign({ className: classes.root }, rest, { children: [_jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Typography, Object.assign({ variant: "h5", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.suggestedEventsWidget.title", defaultMessage: "ui.suggestedEventsWidget.title" }) })), _jsxs(Swiper, Object.assign({ spaceBetween: 8, slidesPerView: "auto", grabCursor: true, modules: [Navigation], onReachEnd: handleReachEnd, onSlideChange: (swiper) => setCurrentItem(swiper.snapIndex), className: classes.swiper }, { children: [(showSkeleton ? [...eventsData.results, undefined] : eventsData.results).map((event, i) => (_jsx(SwiperSlide, Object.assign({ className: classes.swiperSlide }, { children: _jsx(Event, { event: event, template: SCEventTemplateType.PREVIEW, actions: _jsx(_Fragment, {}), variant: "outlined", className: classes.event }) }), i))), _jsx(Arrow, { className: classes.swiperPrevArrow, type: "prev", currentItem: currentItem, setCurrentItem: setCurrentItem }), _jsx(Arrow, { className: classes.swiperNextArrow, type: "next", currentItem: currentItem, setCurrentItem: setCurrentItem })] }))] })), _jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.EVENTS_SUGGESTED_ROUTE_NAME, {}), className: classes.actionButton }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.suggestedEventsWidget.showAll", defaultMessage: "ui.suggestedEventsWidget.showAll" }) })) })) }))] })));
 }

package/lib/esm/components/SuggestedEventsWidget/index.d.ts

@@ -1,4 +1,5 @@
+import Arrow, { ArrowProps } from './Arrow';
 import SuggestedEventsWidgetSkeleton from './Skeleton';
 import SuggestedEventsWidget, { SuggestedEventsWidgetProps } from './SuggestedEventsWidget';
 export default SuggestedEventsWidget;
-export { SuggestedEventsWidgetSkeleton, type SuggestedEventsWidgetProps };
+export { Arrow, SuggestedEventsWidgetSkeleton, type ArrowProps, type SuggestedEventsWidgetProps };

package/lib/esm/components/SuggestedEventsWidget/index.js

@@ -1,4 +1,5 @@
+import Arrow from './Arrow';
 import SuggestedEventsWidgetSkeleton from './Skeleton';
 import SuggestedEventsWidget from './SuggestedEventsWidget';
 export default SuggestedEventsWidget;
-export { SuggestedEventsWidgetSkeleton };
+export { Arrow, SuggestedEventsWidgetSkeleton };