@selfcommunity/react-ui 0.8.0 → 0.8.1-alpha.0

package/lib/cjs/components/Categories/Categories.js

@@ -16,6 +16,8 @@ const Errors_1 = require("../../constants/Errors");
 const utils_1 = require("@selfcommunity/utils");
 const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
 const constants_1 = require("./constants");
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
+const PubSub_1 = require("../../constants/PubSub");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     filters: `${constants_1.PREFIX}-filter`,
@@ -73,6 +75,7 @@ function Categories(inProps) {
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
     // REFS
     const isMountedRef = (0, react_core_1.useIsComponentMountedRef)();
+    const updatesSubscription = (0, react_1.useRef)(null);
     /**
      * Fetches categories list
      */
@@ -104,6 +107,25 @@ function Categories(inProps) {
             });
         }
     }, [contentAvailability, authUserId, prefetchedCategories.length]);
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onEditCategoryHandler = (0, react_1.useCallback)((_msg, edited) => {
+        setCategories((prev) => {
+            return prev.map((c) => (c.id === edited.id ? Object.assign(Object.assign({}, c), edited) : c));
+        });
+    }, [categories]);
+    /**
+     * On mount, subscribe to receive event updates (only edit)
+     */
+    (0, react_1.useEffect)(() => {
+        if (categories) {
+            updatesSubscription.current = pubsub_js_1.default.subscribe(`${PubSub_1.SCTopicType.CATEGORY}.${PubSub_1.SCCategoryEventType.EDIT}`, onEditCategoryHandler);
+        }
+        return () => {
+            updatesSubscription.current && pubsub_js_1.default.unsubscribe(updatesSubscription.current);
+        };
+    }, [categories]);
     /**
      * Get categories filtered
      */

package/lib/cjs/components/CategoriesPopularWidget/CategoriesPopularWidget.js

@@ -20,6 +20,8 @@ const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/Hidden
 const react_core_1 = require("@selfcommunity/react-core");
 const widget_1 = require("../../utils/widget");
 const constants_1 = require("./constants");
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
+const PubSub_1 = require("../../constants/PubSub");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     title: `${constants_1.PREFIX}-title`,
@@ -89,6 +91,8 @@ function CategoriesPopularWidget(inProps) {
     // HOOKS
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    // REFS
+    const updatesSubscription = (0, react_1.useRef)(null);
     /**
      * Initialize component
      * Fetch data only if the component is not initialized and it is not loading data
@@ -106,6 +110,23 @@ function CategoriesPopularWidget(inProps) {
             });
         }
     }, [state.isLoadingNext, state.initialized, limit, dispatch]);
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onEditCategoryHandler = (0, react_1.useCallback)((_msg, edited) => {
+        const _categories = [...state.results];
+        const updatedCategories = _categories.map((c) => (c.id === edited.id ? Object.assign(Object.assign({}, c), edited) : c));
+        dispatch({ type: widget_1.actionWidgetTypes.SET_RESULTS, payload: { results: updatedCategories } });
+    }, [dispatch]);
+    /**
+     * On mount, subscribe to receive event updates (only edit)
+     */
+    (0, react_1.useEffect)(() => {
+        updatesSubscription.current = pubsub_js_1.default.subscribe(`${PubSub_1.SCTopicType.CATEGORY}.${PubSub_1.SCCategoryEventType.EDIT}`, onEditCategoryHandler);
+        return () => {
+            updatesSubscription.current && pubsub_js_1.default.unsubscribe(updatesSubscription.current);
+        };
+    }, [onEditCategoryHandler]);
     // EFFECTS
     (0, react_1.useEffect)(() => {
         var _a;

package/lib/cjs/components/CategoriesSuggestionWidget/CategoriesSuggestionWidget.js

@@ -20,6 +20,8 @@ const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"))
 const Errors_1 = require("../../constants/Errors");
 const InfiniteScroll_1 = tslib_1.__importDefault(require("../../shared/InfiniteScroll"));
 const constants_1 = require("./constants");
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
+const PubSub_1 = require("../../constants/PubSub");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     title: `${constants_1.PREFIX}-title`,
@@ -85,6 +87,8 @@ function CategoriesSuggestionWidget(inProps) {
     // HOOKS
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    // REFS
+    const updatesSubscription = (0, react_1.useRef)(null);
     /**
      * Initialize component
      * Fetch data only if the component is not initialized and it is not loading data
@@ -102,6 +106,23 @@ function CategoriesSuggestionWidget(inProps) {
             });
         }
     }, [state.isLoadingNext, state.initialized, limit, dispatch]);
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onEditCategoryHandler = (0, react_1.useCallback)((_msg, edited) => {
+        const _categories = [...state.results];
+        const updatedCategories = _categories.map((c) => (c.id === edited.id ? Object.assign(Object.assign({}, c), edited) : c));
+        dispatch({ type: widget_1.actionWidgetTypes.SET_RESULTS, payload: { results: updatedCategories } });
+    }, [dispatch]);
+    /**
+     * On mount, subscribe to receive event updates (only edit)
+     */
+    (0, react_1.useEffect)(() => {
+        updatesSubscription.current = pubsub_js_1.default.subscribe(`${PubSub_1.SCTopicType.CATEGORY}.${PubSub_1.SCCategoryEventType.EDIT}`, onEditCategoryHandler);
+        return () => {
+            updatesSubscription.current && pubsub_js_1.default.unsubscribe(updatesSubscription.current);
+        };
+    }, [onEditCategoryHandler]);
     // EFFECTS
     (0, react_1.useEffect)(() => {
         let _t;

package/lib/cjs/components/OnBoardingWidget/OnBoardingWidget.js

@@ -26,6 +26,8 @@ const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const notistack_1 = require("notistack");
 const header_1 = tslib_1.__importDefault(require("../../assets/onBoarding/header"));
 const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
+const PubSub_1 = require("../../constants/PubSub");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     content: `${constants_1.PREFIX}-content`,
@@ -191,6 +193,13 @@ const OnBoardingWidget = (inProps) => {
         fetchPlatform('/contents/interests/');
         setShowCategoriesModal(false);
     };
+    /**
+     * Notify when a category info changes
+     * @param data
+     */
+    const notifyCategoryChanges = (0, react_1.useCallback)((data) => {
+        pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.CATEGORY}.${PubSub_1.SCCategoryEventType.EDIT}`, data);
+    }, []);
     // EFFECTS
     (0, react_1.useEffect)(() => {
         if (prevContentsStep &&
@@ -226,6 +235,22 @@ const OnBoardingWidget = (inProps) => {
             return () => clearInterval(intervalId);
         }
     }, [scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user, isGenerating, isAdmin]);
+    /**
+     * updates categories info when generating category content
+     */
+    (0, react_1.useEffect)(() => {
+        const categoryStep = steps.find((step) => step.step === types_1.SCOnBoardingStepType.CATEGORIES);
+        if ((categoryStep === null || categoryStep === void 0 ? void 0 : categoryStep.status) === types_1.SCOnBoardingStepStatusType.IN_PROGRESS && categoryStep.results.length !== 0) {
+            categoryStep.results.forEach((c) => {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                // @ts-ignore
+                const isAlreadyNotified = prevCategoriesStep === null || prevCategoriesStep === void 0 ? void 0 : prevCategoriesStep.results.some((result) => result.id === c.id);
+                if (!isAlreadyNotified) {
+                    notifyCategoryChanges(c);
+                }
+            });
+        }
+    }, [steps, prevCategoriesStep]);
     /**
      * Render _step content section
      */

package/lib/cjs/constants/PubSub.d.ts

@@ -4,7 +4,8 @@ import { SCUserType, SCGroupType, SCEventType } from '@selfcommunity/types';
  */
 export declare enum SCTopicType {
     GROUP = "group",
-    EVENT = "event"
+    EVENT = "event",
+    CATEGORY = "category"
 }
 /**
  * Group/Event event types
@@ -18,6 +19,12 @@ export declare enum SCGroupEventType {
     INVITE_MEMBER = "members.invite_member",
     REMOVE_MEMBER = "members.remove_member"
 }
+/**
+ * Category event types
+ */
+export declare enum SCCategoryEventType {
+    EDIT = "edit"
+}
 export interface SCGroupMembersEventType {
     group: SCGroupType;
     user?: SCUserType;

package/lib/cjs/constants/PubSub.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SCGroupEventType = exports.SCTopicType = void 0;
+exports.SCCategoryEventType = exports.SCGroupEventType = exports.SCTopicType = void 0;
 /**
  * Define topics for pubsub
  */
@@ -8,6 +8,7 @@ var SCTopicType;
 (function (SCTopicType) {
     SCTopicType["GROUP"] = "group";
     SCTopicType["EVENT"] = "event";
+    SCTopicType["CATEGORY"] = "category";
 })(SCTopicType = exports.SCTopicType || (exports.SCTopicType = {}));
 /**
  * Group/Event event types
@@ -22,3 +23,10 @@ var SCGroupEventType;
     SCGroupEventType["INVITE_MEMBER"] = "members.invite_member";
     SCGroupEventType["REMOVE_MEMBER"] = "members.remove_member";
 })(SCGroupEventType = exports.SCGroupEventType || (exports.SCGroupEventType = {}));
+/**
+ * Category event types
+ */
+var SCCategoryEventType;
+(function (SCCategoryEventType) {
+    SCCategoryEventType["EDIT"] = "edit";
+})(SCCategoryEventType = exports.SCCategoryEventType || (exports.SCCategoryEventType = {}));

package/lib/esm/components/Categories/Categories.js

@@ -1,6 +1,6 @@
 import { __awaiter, __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Box, Grid, TextField, Typography } from '@mui/material';
 import { CategoryService, Endpoints } from '@selfcommunity/api-services';
@@ -14,6 +14,8 @@ import { SCOPE_SC_UI } from '../../constants/Errors';
 import { Logger, sortByAttr } from '@selfcommunity/utils';
 import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
 import { PREFIX } from './constants';
+import PubSub from 'pubsub-js';
+import { SCCategoryEventType, SCTopicType } from '../../constants/PubSub';
 const classes = {
     root: `${PREFIX}-root`,
     filters: `${PREFIX}-filter`,
@@ -71,6 +73,7 @@ export default function Categories(inProps) {
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
     // REFS
     const isMountedRef = useIsComponentMountedRef();
+    const updatesSubscription = useRef(null);
     /**
      * Fetches categories list
      */
@@ -102,6 +105,25 @@ export default function Categories(inProps) {
             });
         }
     }, [contentAvailability, authUserId, prefetchedCategories.length]);
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onEditCategoryHandler = useCallback((_msg, edited) => {
+        setCategories((prev) => {
+            return prev.map((c) => (c.id === edited.id ? Object.assign(Object.assign({}, c), edited) : c));
+        });
+    }, [categories]);
+    /**
+     * On mount, subscribe to receive event updates (only edit)
+     */
+    useEffect(() => {
+        if (categories) {
+            updatesSubscription.current = PubSub.subscribe(`${SCTopicType.CATEGORY}.${SCCategoryEventType.EDIT}`, onEditCategoryHandler);
+        }
+        return () => {
+            updatesSubscription.current && PubSub.unsubscribe(updatesSubscription.current);
+        };
+    }, [categories]);
     /**
      * Get categories filtered
      */

package/lib/esm/components/CategoriesPopularWidget/CategoriesPopularWidget.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useContext, useEffect, useMemo, useReducer, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Button, CardContent, List, ListItem, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { CategoryService, Endpoints, http } from '@selfcommunity/api-services';
@@ -18,6 +18,8 @@ import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
 import { SCCache, SCPreferences, SCPreferencesContext, SCUserContext } from '@selfcommunity/react-core';
 import { actionWidgetTypes, dataWidgetReducer, stateWidgetInitializer } from '../../utils/widget';
 import { PREFIX } from './constants';
+import PubSub from 'pubsub-js';
+import { SCCategoryEventType, SCTopicType } from '../../constants/PubSub';
 const classes = {
     root: `${PREFIX}-root`,
     title: `${PREFIX}-title`,
@@ -87,6 +89,8 @@ export default function CategoriesPopularWidget(inProps) {
     // HOOKS
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    // REFS
+    const updatesSubscription = useRef(null);
     /**
      * Initialize component
      * Fetch data only if the component is not initialized and it is not loading data
@@ -104,6 +108,23 @@ export default function CategoriesPopularWidget(inProps) {
             });
         }
     }, [state.isLoadingNext, state.initialized, limit, dispatch]);
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onEditCategoryHandler = useCallback((_msg, edited) => {
+        const _categories = [...state.results];
+        const updatedCategories = _categories.map((c) => (c.id === edited.id ? Object.assign(Object.assign({}, c), edited) : c));
+        dispatch({ type: actionWidgetTypes.SET_RESULTS, payload: { results: updatedCategories } });
+    }, [dispatch]);
+    /**
+     * On mount, subscribe to receive event updates (only edit)
+     */
+    useEffect(() => {
+        updatesSubscription.current = PubSub.subscribe(`${SCTopicType.CATEGORY}.${SCCategoryEventType.EDIT}`, onEditCategoryHandler);
+        return () => {
+            updatesSubscription.current && PubSub.unsubscribe(updatesSubscription.current);
+        };
+    }, [onEditCategoryHandler]);
     // EFFECTS
     useEffect(() => {
         var _a;

package/lib/esm/components/CategoriesSuggestionWidget/CategoriesSuggestionWidget.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useMemo, useReducer, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Button, CardContent, List, ListItem, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { Endpoints, http, SuggestionService } from '@selfcommunity/api-services';
@@ -18,6 +18,8 @@ import BaseDialog from '../../shared/BaseDialog';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import InfiniteScroll from '../../shared/InfiniteScroll';
 import { PREFIX } from './constants';
+import PubSub from 'pubsub-js';
+import { SCCategoryEventType, SCTopicType } from '../../constants/PubSub';
 const classes = {
     root: `${PREFIX}-root`,
     title: `${PREFIX}-title`,
@@ -83,6 +85,8 @@ export default function CategoriesSuggestionWidget(inProps) {
     // HOOKS
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    // REFS
+    const updatesSubscription = useRef(null);
     /**
      * Initialize component
      * Fetch data only if the component is not initialized and it is not loading data
@@ -100,6 +104,23 @@ export default function CategoriesSuggestionWidget(inProps) {
             });
         }
     }, [state.isLoadingNext, state.initialized, limit, dispatch]);
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onEditCategoryHandler = useCallback((_msg, edited) => {
+        const _categories = [...state.results];
+        const updatedCategories = _categories.map((c) => (c.id === edited.id ? Object.assign(Object.assign({}, c), edited) : c));
+        dispatch({ type: actionWidgetTypes.SET_RESULTS, payload: { results: updatedCategories } });
+    }, [dispatch]);
+    /**
+     * On mount, subscribe to receive event updates (only edit)
+     */
+    useEffect(() => {
+        updatesSubscription.current = PubSub.subscribe(`${SCTopicType.CATEGORY}.${SCCategoryEventType.EDIT}`, onEditCategoryHandler);
+        return () => {
+            updatesSubscription.current && PubSub.unsubscribe(updatesSubscription.current);
+        };
+    }, [onEditCategoryHandler]);
     // EFFECTS
     useEffect(() => {
         let _t;

package/lib/esm/components/OnBoardingWidget/OnBoardingWidget.js

@@ -1,6 +1,6 @@
 import { __awaiter, __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Accordion, AccordionDetails, AccordionSummary, Box, Button, CardContent, CardMedia, Checkbox, Chip, Fade, Icon, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import { styled } from '@mui/material/styles';
@@ -24,6 +24,8 @@ import OnBoardingWidgetSkeleton from './Skeleton';
 import { closeSnackbar, useSnackbar } from 'notistack';
 import HeaderPlaceholder from '../../assets/onBoarding/header';
 import BaseDialog from '../../shared/BaseDialog';
+import PubSub from 'pubsub-js';
+import { SCCategoryEventType, SCTopicType } from '../../constants/PubSub';
 const classes = {
     root: `${PREFIX}-root`,
     content: `${PREFIX}-content`,
@@ -189,6 +191,13 @@ const OnBoardingWidget = (inProps) => {
         fetchPlatform('/contents/interests/');
         setShowCategoriesModal(false);
     };
+    /**
+     * Notify when a category info changes
+     * @param data
+     */
+    const notifyCategoryChanges = useCallback((data) => {
+        PubSub.publish(`${SCTopicType.CATEGORY}.${SCCategoryEventType.EDIT}`, data);
+    }, []);
     // EFFECTS
     useEffect(() => {
         if (prevContentsStep &&
@@ -224,6 +233,22 @@ const OnBoardingWidget = (inProps) => {
             return () => clearInterval(intervalId);
         }
     }, [scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user, isGenerating, isAdmin]);
+    /**
+     * updates categories info when generating category content
+     */
+    useEffect(() => {
+        const categoryStep = steps.find((step) => step.step === SCOnBoardingStepType.CATEGORIES);
+        if ((categoryStep === null || categoryStep === void 0 ? void 0 : categoryStep.status) === SCOnBoardingStepStatusType.IN_PROGRESS && categoryStep.results.length !== 0) {
+            categoryStep.results.forEach((c) => {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                // @ts-ignore
+                const isAlreadyNotified = prevCategoriesStep === null || prevCategoriesStep === void 0 ? void 0 : prevCategoriesStep.results.some((result) => result.id === c.id);
+                if (!isAlreadyNotified) {
+                    notifyCategoryChanges(c);
+                }
+            });
+        }
+    }, [steps, prevCategoriesStep]);
     /**
      * Render _step content section
      */

package/lib/esm/constants/PubSub.d.ts

@@ -4,7 +4,8 @@ import { SCUserType, SCGroupType, SCEventType } from '@selfcommunity/types';
  */
 export declare enum SCTopicType {
     GROUP = "group",
-    EVENT = "event"
+    EVENT = "event",
+    CATEGORY = "category"
 }
 /**
  * Group/Event event types
@@ -18,6 +19,12 @@ export declare enum SCGroupEventType {
     INVITE_MEMBER = "members.invite_member",
     REMOVE_MEMBER = "members.remove_member"
 }
+/**
+ * Category event types
+ */
+export declare enum SCCategoryEventType {
+    EDIT = "edit"
+}
 export interface SCGroupMembersEventType {
     group: SCGroupType;
     user?: SCUserType;

package/lib/esm/constants/PubSub.js

@@ -5,6 +5,7 @@ export var SCTopicType;
 (function (SCTopicType) {
     SCTopicType["GROUP"] = "group";
     SCTopicType["EVENT"] = "event";
+    SCTopicType["CATEGORY"] = "category";
 })(SCTopicType || (SCTopicType = {}));
 /**
  * Group/Event event types
@@ -19,3 +20,10 @@ export var SCGroupEventType;
     SCGroupEventType["INVITE_MEMBER"] = "members.invite_member";
     SCGroupEventType["REMOVE_MEMBER"] = "members.remove_member";
 })(SCGroupEventType || (SCGroupEventType = {}));
+/**
+ * Category event types
+ */
+export var SCCategoryEventType;
+(function (SCCategoryEventType) {
+    SCCategoryEventType["EDIT"] = "edit";
+})(SCCategoryEventType || (SCCategoryEventType = {}));