@selfcommunity/react-core 0.4.9-alpha.0 → 0.4.9-alpha.1

package/lib/cjs/components/provider/SCUserProvider/index.js

@@ -19,6 +19,7 @@ const types_1 = require("@selfcommunity/types");
 const useSCSubscribedIncubatorsManager_1 = tslib_1.__importDefault(require("../../../hooks/useSCSubscribedIncubatorsManager"));
 const useSCBlockedUsersManager_1 = tslib_1.__importDefault(require("../../../hooks/useSCBlockedUsersManager"));
 const Session = tslib_1.__importStar(require("../../../constants/Session"));
+const useSCSubscribedGroupsManager_1 = tslib_1.__importDefault(require("../../../hooks/useSCSubscribedGroupsManager"));
 /**
  * SCUserContext (Authentication Context)
  *
@@ -70,6 +71,7 @@ function SCUserProvider({ children }) {
     const connectionsManager = (0, useSCConnectionsManager_1.default)(state.user);
     const categoriesManager = (0, useSCFollowedCategoriesManager_1.default)(state.user, updateUser);
     const blockedUsersManager = (0, useSCBlockedUsersManager_1.default)(state.user);
+    const subscribedGroupsManager = (0, useSCSubscribedGroupsManager_1.default)(state.user);
     /**
      * Ref notifications subscribers: BLOCKED_USER, UNBLOCKED_USER
      */
@@ -120,6 +122,7 @@ function SCUserProvider({ children }) {
             connectionsManager.refresh && connectionsManager.refresh();
             subscribedIncubatorsManager.refresh && subscribedIncubatorsManager.refresh();
             blockedUsersManager.refresh && blockedUsersManager.refresh();
+            subscribedGroupsManager.refresh && subscribedGroupsManager.refresh();
         }
     }
     /**
@@ -215,6 +218,7 @@ function SCUserProvider({ children }) {
             connections: connectionsManager,
             incubators: subscribedIncubatorsManager,
             blockedUsers: blockedUsersManager,
+            groups: subscribedGroupsManager,
         },
     }), [
         state,
@@ -231,6 +235,8 @@ function SCUserProvider({ children }) {
         blockedUsersManager.blocked,
         subscribedIncubatorsManager.loading,
         subscribedIncubatorsManager.incubators,
+        subscribedGroupsManager.loading,
+        subscribedGroupsManager.groups,
     ]);
     /**
      * We only want to render the underlying app after we

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

@@ -17,6 +17,9 @@ export declare const getCategoriesObjectCacheKey: () => string;
 /** CATEGORY OBJECT **/
 export declare const CATEGORY_OBJECT_CACHE_PREFIX_KEY = "_ca_";
 export declare const getCategoryObjectCacheKey: (id: any) => string;
+/** GROUP OBJECT **/
+export declare const GROUP_OBJECT_CACHE_PREFIX_KEY = "_grp_";
+export declare const getGroupObjectCacheKey: (id: any) => string;
 /** INCUBATOR OBJECT **/
 export declare const INCUBATOR_OBJECT_CACHE_PREFIX_KEY = "_inc_";
 export declare const getIncubatorObjectCacheKey: (id: any) => string;
@@ -62,4 +65,6 @@ export declare const PEOPLE_SUGGESTION_TOOLS_STATE_CACHE_PREFIX_KEY = "_pSugWidg
 export declare const INCUBATOR_LIST_TOOLS_STATE_CACHE_PREFIX_KEY = "_iListWidget_";
 export declare const INCUBATOR_SUGGESTION_TOOLS_STATE_CACHE_PREFIX_KEY = "_iSugWidget_";
 export declare const POLL_SUGGESTION_TOOLS_STATE_CACHE_PREFIX_KEY = "_pSugWidget_";
+export declare const GROUP_MEMBERS_TOOLS_STATE_CACHE_PREFIX_KEY = "_gMemWidget_";
+export declare const GROUP_REQUESTS_TOOLS_STATE_CACHE_PREFIX_KEY = "_gReqWidget_";
 export declare const getWidgetStateCacheKey: (p: any, id?: any) => string;

package/lib/cjs/constants/Cache.js

@@ -3,7 +3,8 @@
  * Cache prefixes
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getWidgetStateCacheKey = exports.POLL_SUGGESTION_TOOLS_STATE_CACHE_PREFIX_KEY = exports.INCUBATOR_SUGGESTION_TOOLS_STATE_CACHE_PREFIX_KEY = exports.INCUBATOR_LIST_TOOLS_STATE_CACHE_PREFIX_KEY = exports.PEOPLE_SUGGESTION_TOOLS_STATE_CACHE_PREFIX_KEY = exports.TRENDING_PEOPLE_TOOLS_STATE_CACHE_PREFIX_KEY = exports.RELATED_FEED_TOOLS_STATE_CACHE_PREFIX_KEY = exports.TRENDING_FEED_TOOLS_STATE_CACHE_PREFIX_KEY = exports.USER_CONNECTIONS_REQUESTS_SENT_TOOLS_STATE_CACHE_PREFIX_KEY = exports.USER_CONNECTIONS_REQUESTS_TOOLS_STATE_CACHE_PREFIX_KEY = exports.USER_CONNECTIONS_TOOLS_STATE_CACHE_PREFIX_KEY = exports.USER_FOLLOWED_TOOLS_STATE_CACHE_PREFIX_KEY = exports.USER_FOLLOWERS_TOOLS_STATE_CACHE_PREFIX_KEY = exports.CATEGORIES_POPULAR_TOOLS_STATE_CACHE_PREFIX_KEY = exports.CATEGORIES_SUGGESTION_TOOLS_STATE_CACHE_PREFIX_KEY = exports.CATEGORIES_FOLLOWED_TOOLS_STATE_CACHE_PREFIX_KEY = exports.CATEGORIES_LIST_TOOLS_STATE_CACHE_PREFIX_KEY = exports.getPmSnippetObjectCacheKey = exports.PM_SNIPPET_OBJECT_CACHE_PREFIX_KEY = exports.getPmSnippetsObjectCacheKey = exports.PM_SNIPPETS_OBJECT_CACHE_PREFIX_KEY = exports.getAdvObjectCacheKey = exports.ADV_OBJECT_CACHE_PREFIX_KEY = exports.getFeedSPCacheKey = exports.FEED_CACHE_SP_KEY = exports.getVirtualizedScrollStateCacheKey = exports.VIRTUALIZED_SCROLL_STATE_CACHE_PREFIX_KEY = exports.getStateFeedCacheKey = exports.FEED_STATE_CACHE_PREFIX_KEY = exports.getFeedCacheKey = exports.FEED_CACHE_PREFIX_KEY = exports.getBroadcastMessagesObjectCacheKey = exports.BROADCAST_MESSAGES_OBJECT_CACHE_PREFIX_KEY = exports.getContributorsCachePrefixKeys = exports.getContributorsCacheKey = exports.CONTRIBUTORS_CACHE_PREFIX_KEY = exports.getIncubatorObjectCacheKey = exports.INCUBATOR_OBJECT_CACHE_PREFIX_KEY = exports.getCategoryObjectCacheKey = exports.CATEGORY_OBJECT_CACHE_PREFIX_KEY = exports.getCategoriesObjectCacheKey = exports.CATEGORIES_OBJECT_CACHE_PREFIX_KEY = exports.getCommentObjectsCachePrefixKeys = exports.getCommentObjectsCacheKey = exports.COMMENT_OBJECTS_CACHE_PREFIX_KEY = exports.getCommentObjectCacheKey = exports.COMMENT_OBJECT_CACHE_PREFIX_KEY = exports.getFeedObjectCacheKey = exports.FEED_OBJECT_CACHE_PREFIX_KEY = void 0;
+exports.POLL_SUGGESTION_TOOLS_STATE_CACHE_PREFIX_KEY = exports.INCUBATOR_SUGGESTION_TOOLS_STATE_CACHE_PREFIX_KEY = exports.INCUBATOR_LIST_TOOLS_STATE_CACHE_PREFIX_KEY = exports.PEOPLE_SUGGESTION_TOOLS_STATE_CACHE_PREFIX_KEY = exports.TRENDING_PEOPLE_TOOLS_STATE_CACHE_PREFIX_KEY = exports.RELATED_FEED_TOOLS_STATE_CACHE_PREFIX_KEY = exports.TRENDING_FEED_TOOLS_STATE_CACHE_PREFIX_KEY = exports.USER_CONNECTIONS_REQUESTS_SENT_TOOLS_STATE_CACHE_PREFIX_KEY = exports.USER_CONNECTIONS_REQUESTS_TOOLS_STATE_CACHE_PREFIX_KEY = exports.USER_CONNECTIONS_TOOLS_STATE_CACHE_PREFIX_KEY = exports.USER_FOLLOWED_TOOLS_STATE_CACHE_PREFIX_KEY = exports.USER_FOLLOWERS_TOOLS_STATE_CACHE_PREFIX_KEY = exports.CATEGORIES_POPULAR_TOOLS_STATE_CACHE_PREFIX_KEY = exports.CATEGORIES_SUGGESTION_TOOLS_STATE_CACHE_PREFIX_KEY = exports.CATEGORIES_FOLLOWED_TOOLS_STATE_CACHE_PREFIX_KEY = exports.CATEGORIES_LIST_TOOLS_STATE_CACHE_PREFIX_KEY = exports.getPmSnippetObjectCacheKey = exports.PM_SNIPPET_OBJECT_CACHE_PREFIX_KEY = exports.getPmSnippetsObjectCacheKey = exports.PM_SNIPPETS_OBJECT_CACHE_PREFIX_KEY = exports.getAdvObjectCacheKey = exports.ADV_OBJECT_CACHE_PREFIX_KEY = exports.getFeedSPCacheKey = exports.FEED_CACHE_SP_KEY = exports.getVirtualizedScrollStateCacheKey = exports.VIRTUALIZED_SCROLL_STATE_CACHE_PREFIX_KEY = exports.getStateFeedCacheKey = exports.FEED_STATE_CACHE_PREFIX_KEY = exports.getFeedCacheKey = exports.FEED_CACHE_PREFIX_KEY = exports.getBroadcastMessagesObjectCacheKey = exports.BROADCAST_MESSAGES_OBJECT_CACHE_PREFIX_KEY = exports.getContributorsCachePrefixKeys = exports.getContributorsCacheKey = exports.CONTRIBUTORS_CACHE_PREFIX_KEY = exports.getIncubatorObjectCacheKey = exports.INCUBATOR_OBJECT_CACHE_PREFIX_KEY = exports.getGroupObjectCacheKey = exports.GROUP_OBJECT_CACHE_PREFIX_KEY = exports.getCategoryObjectCacheKey = exports.CATEGORY_OBJECT_CACHE_PREFIX_KEY = exports.getCategoriesObjectCacheKey = exports.CATEGORIES_OBJECT_CACHE_PREFIX_KEY = exports.getCommentObjectsCachePrefixKeys = exports.getCommentObjectsCacheKey = exports.COMMENT_OBJECTS_CACHE_PREFIX_KEY = exports.getCommentObjectCacheKey = exports.COMMENT_OBJECT_CACHE_PREFIX_KEY = exports.getFeedObjectCacheKey = exports.FEED_OBJECT_CACHE_PREFIX_KEY = void 0;
+exports.getWidgetStateCacheKey = exports.GROUP_REQUESTS_TOOLS_STATE_CACHE_PREFIX_KEY = exports.GROUP_MEMBERS_TOOLS_STATE_CACHE_PREFIX_KEY = void 0;
 /** FEED OBJECT **/
 exports.FEED_OBJECT_CACHE_PREFIX_KEY = '_fo_';
 const getFeedObjectCacheKey = (id, type) => `${exports.FEED_OBJECT_CACHE_PREFIX_KEY}${type}_${id}`;
@@ -26,6 +27,10 @@ exports.getCategoriesObjectCacheKey = getCategoriesObjectCacheKey;
 exports.CATEGORY_OBJECT_CACHE_PREFIX_KEY = '_ca_';
 const getCategoryObjectCacheKey = (id) => `${exports.CATEGORY_OBJECT_CACHE_PREFIX_KEY}${id}`;
 exports.getCategoryObjectCacheKey = getCategoryObjectCacheKey;
+/** GROUP OBJECT **/
+exports.GROUP_OBJECT_CACHE_PREFIX_KEY = '_grp_';
+const getGroupObjectCacheKey = (id) => `${exports.GROUP_OBJECT_CACHE_PREFIX_KEY}${id}`;
+exports.getGroupObjectCacheKey = getGroupObjectCacheKey;
 /** INCUBATOR OBJECT **/
 exports.INCUBATOR_OBJECT_CACHE_PREFIX_KEY = '_inc_';
 const getIncubatorObjectCacheKey = (id) => `${exports.INCUBATOR_OBJECT_CACHE_PREFIX_KEY}${id}`;
@@ -86,5 +91,7 @@ exports.PEOPLE_SUGGESTION_TOOLS_STATE_CACHE_PREFIX_KEY = '_pSugWidget_';
 exports.INCUBATOR_LIST_TOOLS_STATE_CACHE_PREFIX_KEY = '_iListWidget_';
 exports.INCUBATOR_SUGGESTION_TOOLS_STATE_CACHE_PREFIX_KEY = '_iSugWidget_';
 exports.POLL_SUGGESTION_TOOLS_STATE_CACHE_PREFIX_KEY = '_pSugWidget_';
+exports.GROUP_MEMBERS_TOOLS_STATE_CACHE_PREFIX_KEY = '_gMemWidget_';
+exports.GROUP_REQUESTS_TOOLS_STATE_CACHE_PREFIX_KEY = '_gReqWidget_';
 const getWidgetStateCacheKey = (p, id = undefined) => `${p}${id !== undefined ? id : ''}`;
 exports.getWidgetStateCacheKey = getWidgetStateCacheKey;

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

@@ -31,6 +31,7 @@ export declare const SIGNUP_ROUTE_NAME = "signup";
 export declare const RECOVER_ROUTE_NAME = "recover";
 export declare const CUSTOM_PAGES_ROUTE_NAME = "custom_pages";
 export declare const LEGAL_PAGES_ROUTE_NAME = "legal_pages";
+export declare const GROUP_ROUTE_NAME = "group";
 /**
  * Default Routes
  * @type {{[p: string]: string, '[POST_ROUTE_NAME]': string, '[INCUBATOR_ROUTE_NAME]': string, '[LOYALTY_ROUTE_NAME]': string, '[USER_NOTIFICATION_ROUTE_NAME]': string, '[USER_PRIVATE_MESSAGES_ROUTE_NAME]': string, '[COMMENT_ROUTE_NAME]': string, '[DISCUSSION_ROUTE_NAME]': string, '[CATEGORIES_ROUTE_NAME]': string, '[USER_PROFILE_ROUTE_NAME]': string, '[CATEGORY_ROUTE_NAME]': string, '[USER_PROFILE_SETTINGS_ROUTE_NAME]': string, '[STATUS_ROUTE_NAME]': string}}

package/lib/cjs/constants/Routes.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultRoutes = exports.LEGAL_PAGES_ROUTE_NAME = exports.CUSTOM_PAGES_ROUTE_NAME = exports.RECOVER_ROUTE_NAME = exports.SIGNUP_ROUTE_NAME = exports.SIGNIN_ROUTE_NAME = exports.INCUBATOR_ROUTE_NAME = exports.LOYALTY_ROUTE_NAME = exports.USER_PROFILE_FOLLOWED_DISCUSSIONS_ROUTE_NAME = exports.USER_PROFILE_FOLLOWED_POSTS_ROUTE_NAME = exports.USER_PROFILE_CATEGORIES_ROUTE_NAME = exports.USER_PROFILE_CONNECTIONS_REQUESTS_SENT_ROUTE_NAME = exports.USER_PROFILE_CONNECTIONS_REQUESTS_ROUTE_NAME = exports.USER_PROFILE_CONNECTIONS_ROUTE_NAME = exports.USER_PROFILE_FOLLOWERS_ROUTE_NAME = exports.USER_PROFILE_FOLLOWINGS_ROUTE_NAME = exports.USER_PRIVATE_MESSAGES_ROUTE_NAME = exports.USER_NOTIFICATIONS_ROUTE_NAME = exports.USER_PROFILE_SETTINGS_ROUTE_NAME = exports.USER_PROFILE_ROUTE_NAME = exports.CATEGORIES_LIST_ROUTE_NAME = exports.CATEGORY_TRENDING_FEED_ROUTE_NAME = exports.CATEGORY_ROUTE_NAME = exports.COMMENT_ROUTE_NAME = exports.STATUS_ROUTE_NAME = exports.DISCUSSION_ROUTE_NAME = exports.POST_ROUTE_NAME = exports.EXPLORE_ROUTE_NAME = exports.HOME_ROUTE_NAME = exports.ROUTER_OPTION = exports.PORTAL_OPTION = void 0;
+exports.defaultRoutes = exports.GROUP_ROUTE_NAME = exports.LEGAL_PAGES_ROUTE_NAME = exports.CUSTOM_PAGES_ROUTE_NAME = exports.RECOVER_ROUTE_NAME = exports.SIGNUP_ROUTE_NAME = exports.SIGNIN_ROUTE_NAME = exports.INCUBATOR_ROUTE_NAME = exports.LOYALTY_ROUTE_NAME = exports.USER_PROFILE_FOLLOWED_DISCUSSIONS_ROUTE_NAME = exports.USER_PROFILE_FOLLOWED_POSTS_ROUTE_NAME = exports.USER_PROFILE_CATEGORIES_ROUTE_NAME = exports.USER_PROFILE_CONNECTIONS_REQUESTS_SENT_ROUTE_NAME = exports.USER_PROFILE_CONNECTIONS_REQUESTS_ROUTE_NAME = exports.USER_PROFILE_CONNECTIONS_ROUTE_NAME = exports.USER_PROFILE_FOLLOWERS_ROUTE_NAME = exports.USER_PROFILE_FOLLOWINGS_ROUTE_NAME = exports.USER_PRIVATE_MESSAGES_ROUTE_NAME = exports.USER_NOTIFICATIONS_ROUTE_NAME = exports.USER_PROFILE_SETTINGS_ROUTE_NAME = exports.USER_PROFILE_ROUTE_NAME = exports.CATEGORIES_LIST_ROUTE_NAME = exports.CATEGORY_TRENDING_FEED_ROUTE_NAME = exports.CATEGORY_ROUTE_NAME = exports.COMMENT_ROUTE_NAME = exports.STATUS_ROUTE_NAME = exports.DISCUSSION_ROUTE_NAME = exports.POST_ROUTE_NAME = exports.EXPLORE_ROUTE_NAME = exports.HOME_ROUTE_NAME = exports.ROUTER_OPTION = exports.PORTAL_OPTION = void 0;
 exports.PORTAL_OPTION = 'portal';
 exports.ROUTER_OPTION = 'router';
 /**
@@ -34,6 +34,7 @@ exports.SIGNUP_ROUTE_NAME = 'signup';
 exports.RECOVER_ROUTE_NAME = 'recover';
 exports.CUSTOM_PAGES_ROUTE_NAME = 'custom_pages';
 exports.LEGAL_PAGES_ROUTE_NAME = 'legal_pages';
+exports.GROUP_ROUTE_NAME = 'group';
 /**
  * Default Routes
  * @type {{[p: string]: string, '[POST_ROUTE_NAME]': string, '[INCUBATOR_ROUTE_NAME]': string, '[LOYALTY_ROUTE_NAME]': string, '[USER_NOTIFICATION_ROUTE_NAME]': string, '[USER_PRIVATE_MESSAGES_ROUTE_NAME]': string, '[COMMENT_ROUTE_NAME]': string, '[DISCUSSION_ROUTE_NAME]': string, '[CATEGORIES_ROUTE_NAME]': string, '[USER_PROFILE_ROUTE_NAME]': string, '[CATEGORY_ROUTE_NAME]': string, '[USER_PROFILE_SETTINGS_ROUTE_NAME]': string, '[STATUS_ROUTE_NAME]': string}}
@@ -67,4 +68,5 @@ exports.defaultRoutes = {
     [exports.RECOVER_ROUTE_NAME]: '/recover/',
     [exports.CUSTOM_PAGES_ROUTE_NAME]: '/:id/:slug/',
     [exports.LEGAL_PAGES_ROUTE_NAME]: '/legal/:policy/',
+    [exports.GROUP_ROUTE_NAME]: '/group/:id/',
 };

package/lib/cjs/hooks/useSCFetchGroup.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { SCGroupType } from '@selfcommunity/types';
+import { CacheStrategies } from '@selfcommunity/utils';
+/**
+ :::info
+ This custom hook is used to fetch a group object.
+ :::
+ * @param object
+ * @param object.id
+ * @param object.group
+ * @param object.cacheStrategy
+ */
+export default function useSCFetchGroup({ id, group, cacheStrategy, }: {
+    id?: number | string;
+    group?: SCGroupType;
+    cacheStrategy?: CacheStrategies;
+}): {
+    scGroup: SCGroupType;
+    setSCGroup: import("react").Dispatch<import("react").SetStateAction<SCGroupType>>;
+    error: string;
+};

package/lib/cjs/hooks/useSCFetchGroup.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const Errors_1 = require("../constants/Errors");
+const api_services_1 = require("@selfcommunity/api-services");
+const utils_1 = require("@selfcommunity/utils");
+const Cache_1 = require("../constants/Cache");
+const use_deep_compare_effect_1 = require("use-deep-compare-effect");
+const SCUserProvider_1 = require("../components/provider/SCUserProvider");
+/**
+ :::info
+ This custom hook is used to fetch a group object.
+ :::
+ * @param object
+ * @param object.id
+ * @param object.group
+ * @param object.cacheStrategy
+ */
+function useSCFetchGroup({ id = null, group = null, cacheStrategy = utils_1.CacheStrategies.CACHE_FIRST, }) {
+    const __groupId = group ? group.id : id;
+    // CONTEXT
+    const scUserContext = (0, SCUserProvider_1.useSCUser)();
+    const authUserId = scUserContext.user ? scUserContext.user.id : null;
+    // CACHE
+    const __groupCacheKey = (0, Cache_1.getGroupObjectCacheKey)(__groupId);
+    const __group = authUserId ? group : (0, utils_1.objectWithoutProperties)(group, ['subscribed']);
+    const [scGroup, setSCGroup] = (0, react_1.useState)(cacheStrategy !== utils_1.CacheStrategies.NETWORK_ONLY ? utils_1.LRUCache.get(__groupCacheKey, __group) : null);
+    const [error, setError] = (0, react_1.useState)(null);
+    /**
+     * Memoized fetchTag
+     */
+    const fetchGroup = (0, react_1.useMemo)(() => () => {
+        return api_services_1.http
+            .request({
+            url: api_services_1.Endpoints.GetGroupInfo.url({ id: __groupId }),
+            method: api_services_1.Endpoints.GetGroupInfo.method,
+        })
+            .then((res) => {
+            if (res.status >= 300) {
+                return Promise.reject(res);
+            }
+            return Promise.resolve(res.data);
+        });
+    }, [__groupId]);
+    /**
+     * If id attempt to get the group by id
+     */
+    (0, react_1.useEffect)(() => {
+        if (__groupId && (!scGroup || (scGroup && __groupId !== scGroup.id))) {
+            fetchGroup()
+                .then((obj) => {
+                const _c = authUserId ? obj : (0, utils_1.objectWithoutProperties)(obj, ['subscribed']);
+                setSCGroup(_c);
+                utils_1.LRUCache.set(__groupCacheKey, _c);
+            })
+                .catch((err) => {
+                utils_1.LRUCache.delete(__groupCacheKey);
+                setError(`Group with id ${id} not found`);
+                utils_1.Logger.error(Errors_1.SCOPE_SC_CORE, `Group with id ${id} not found`);
+                utils_1.Logger.error(Errors_1.SCOPE_SC_CORE, err.message);
+            });
+        }
+    }, [__groupId]);
+    (0, use_deep_compare_effect_1.useDeepCompareEffectNoCheck)(() => {
+        if (group) {
+            const _c = authUserId ? group : (0, utils_1.objectWithoutProperties)(group, ['subscribed']);
+            setSCGroup(_c);
+            utils_1.LRUCache.set(__groupCacheKey, _c);
+        }
+    }, [group]);
+    return { scGroup, setSCGroup, error };
+}
+exports.default = useSCFetchGroup;

package/lib/cjs/hooks/useSCSubscribedGroupsManager.d.ts

@@ -0,0 +1,36 @@
+import { SCGroupType, SCUserType } from '@selfcommunity/types';
+/**
+ :::info
+ This custom hook is used to manage the groups followed.
+ :::
+
+ :::tip How to use it:
+ Follow these steps:
+ ```jsx
+ 1. const scUserContext: SCUserContextType = useSCUser();
+ 2. const scSubscribedGroupsManager: SCSubscribedGroupsManagerType = scUserContext.manager.groups;
+ 3. scSubscribedGroupsManager.isSubscribed(group)
+ ```
+ :::
+ */
+export default function useSCSubscribedGroupsManager(user?: SCUserType): {
+    groups: any[];
+    loading: any[];
+    isLoading: (v: number | {
+        id: number;
+    }) => boolean;
+    subscribe?: undefined;
+    subscriptionStatus?: undefined;
+    refresh?: undefined;
+    emptyCache?: undefined;
+} | {
+    groups: any[];
+    loading: any[];
+    isLoading: (v: number | {
+        id: number;
+    }) => boolean;
+    subscribe: (group: SCGroupType) => Promise<any>;
+    subscriptionStatus: (group: SCGroupType) => string;
+    refresh: () => void;
+    emptyCache: () => void;
+};

package/lib/cjs/hooks/useSCSubscribedGroupsManager.js

@@ -0,0 +1,176 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const api_services_1 = require("@selfcommunity/api-services");
+const useSCCachingManager_1 = tslib_1.__importDefault(require("./useSCCachingManager"));
+const Errors_1 = require("../constants/Errors");
+const utils_1 = require("@selfcommunity/utils");
+/**
+ :::info
+ This custom hook is used to manage the groups followed.
+ :::
+
+ :::tip How to use it:
+ Follow these steps:
+ ```jsx
+ 1. const scUserContext: SCUserContextType = useSCUser();
+ 2. const scSubscribedGroupsManager: SCSubscribedGroupsManagerType = scUserContext.manager.groups;
+ 3. scSubscribedGroupsManager.isSubscribed(group)
+ ```
+ :::
+ */
+function useSCSubscribedGroupsManager(user) {
+    const { cache, updateCache, emptyCache, data, setData, loading, setLoading, setUnLoading, isLoading } = (0, useSCCachingManager_1.default)();
+    const authUserId = user ? user.id : null;
+    /**
+     * Memoized refresh all groups
+     * It makes a single request to the server and retrieves
+     * all the groups followed by the user in a single solution
+     * It might be useful for multi-tab sync
+     */
+    const refresh = (0, react_1.useMemo)(() => () => {
+        emptyCache();
+        if (user) {
+            // Only if user is authenticated
+            api_services_1.http
+                .request({
+                url: api_services_1.Endpoints.GetUserGroups.url(),
+                method: api_services_1.Endpoints.GetUserGroups.method,
+            })
+                .then((res) => {
+                if (res.status >= 300) {
+                    return Promise.reject(res);
+                }
+                const groupsIds = res.data.map((g) => g.id);
+                updateCache(groupsIds);
+                setData(groupsIds);
+                return Promise.resolve(res.data);
+            })
+                .catch((e) => {
+                utils_1.Logger.error(Errors_1.SCOPE_SC_CORE, 'Unable to refresh the authenticated user groups.');
+                utils_1.Logger.error(Errors_1.SCOPE_SC_CORE, e);
+            });
+        }
+    }, [data, user, cache]);
+    /**
+     * Memoized subscribe Group
+     * Toggle action
+     */
+    const subscribe = (0, react_1.useMemo)(() => (group) => {
+        setLoading(group.id);
+        return api_services_1.http
+            .request({
+            url: api_services_1.Endpoints.SubscribeToGroup.url({ id: group.id }),
+            method: api_services_1.Endpoints.SubscribeToGroup.method,
+        })
+            .then((res) => {
+            if (res.status >= 300) {
+                return Promise.reject(res);
+            }
+            updateCache([group.id]);
+            const isSubscribed = data.includes(group.id);
+            setData((prev) => (isSubscribed ? prev.filter((id) => id !== group.id) : [...[group.id], ...prev]));
+            setUnLoading(group.id);
+            return Promise.resolve(res.data);
+        });
+    }, [data, loading, cache]);
+    /**
+     * Check the authenticated user subscription status to the group
+     * Update the groups cached
+     * Update groups subscription statuses
+     * @param group
+     */
+    const checkGroupSubscriptionStatus = (group) => {
+        setLoading(group.id);
+        return api_services_1.http
+            .request({
+            url: api_services_1.Endpoints.GetGroupSubscriptionStatus.url({ id: group.id }),
+            method: api_services_1.Endpoints.GetGroupSubscriptionStatus.method,
+        })
+            .then((res) => {
+            if (res.status >= 300) {
+                return Promise.reject(res);
+            }
+            setData((prev) => getDataUpdated(prev, group.id, res.data.status));
+            updateCache([group.id]);
+            setUnLoading(group.id);
+            return Promise.resolve(res.data);
+        })
+            .catch((e) => {
+            setUnLoading(group.id);
+            return Promise.reject(e);
+        });
+    };
+    /**
+     * Get updated data
+     * @param data
+     * @param groupId
+     * @param subscriptionStatus
+     */
+    const getDataUpdated = (data, groupId, subscriptionStatus) => {
+        const _index = data.findIndex((k) => parseInt(Object.keys(k)[0]) === groupId);
+        let _data;
+        if (_index < 0) {
+            _data = [...data, ...[{ [groupId]: subscriptionStatus }]];
+        }
+        else {
+            _data = data.map((k, i) => {
+                if (parseInt(Object.keys(k)[0]) === groupId) {
+                    return { [Object.keys(k)[0]]: subscriptionStatus };
+                }
+                return { [Object.keys(k)[0]]: data[i][Object.keys(k)[0]] };
+            });
+        }
+        return _data;
+    };
+    /**
+     * Return current group subscription status if exists,
+     * otherwise return null
+     */
+    const getCurrentGroupCacheStatus = (0, react_1.useMemo)(() => (group) => {
+        const d = data.filter((k) => parseInt(Object.keys(k)[0]) === group.id);
+        return d.length ? d[0][group.id] : null;
+    }, [data]);
+    /**
+     * Bypass remote check if the group is subscribed
+     */
+    const getSubscriptionStatus = (0, react_1.useMemo)(() => (group) => {
+        updateCache([group.id]);
+        setData((prev) => getDataUpdated(prev, group.id, group.subscription_status));
+        return group.subscription_status;
+    }, [data, cache]);
+    /**
+     * Memoized subscriptionStatus
+     * If group is already in cache -> check if the group is in groups,
+     * otherwise, check if user subscribe the group
+     */
+    const subscriptionStatus = (0, react_1.useMemo)(() => (group) => {
+        // Cache is valid also for anonymous user
+        if (cache.includes(group.id)) {
+            return getCurrentGroupCacheStatus(group);
+        }
+        if (authUserId) {
+            if ('subscription_status' in group) {
+                return getSubscriptionStatus(group);
+            }
+            if (!isLoading(group)) {
+                checkGroupSubscriptionStatus(group);
+            }
+        }
+        return null;
+    }, [data, loading, cache, authUserId]);
+    /**
+     * Empty cache on logout
+     */
+    (0, react_1.useEffect)(() => {
+        if (!authUserId) {
+            emptyCache();
+        }
+    }, [authUserId]);
+    if (!user) {
+        return { groups: data, loading, isLoading };
+    }
+    return { groups: data, loading, isLoading, subscribe, subscriptionStatus, refresh, emptyCache };
+}
+exports.default = useSCSubscribedGroupsManager;

package/lib/cjs/index.d.ts

@@ -1,7 +1,7 @@
 /**
  * Types
  */
-import { SCUserContextType, SCFollowedCategoriesManagerType, SCContextProviderType, SCContextType, SCSettingsType, SCSessionType, SCFollowedManagerType, SCFollowersManagerType, SCSettingsManagerType, SCConnectionsManagerType, SCSubscribedIncubatorsManagerType, SCLocaleType, SCNotificationContextType, SCPreferencesContextType, SCThemeContextType, SCRoutingContextType, SCLocaleContextType, SCAlertMessagesContextType, SCThemeAvatarVariableType, SCThemeCategoryIconVariableType, SCThemeCategoryVariableType, SCThemeVariablesType, SCThemeType } from './types';
+import { SCUserContextType, SCFollowedCategoriesManagerType, SCContextProviderType, SCContextType, SCSettingsType, SCSessionType, SCFollowedManagerType, SCFollowersManagerType, SCSettingsManagerType, SCConnectionsManagerType, SCSubscribedIncubatorsManagerType, SCLocaleType, SCNotificationContextType, SCPreferencesContextType, SCThemeContextType, SCRoutingContextType, SCLocaleContextType, SCAlertMessagesContextType, SCThemeAvatarVariableType, SCThemeCategoryIconVariableType, SCThemeCategoryVariableType, SCThemeVariablesType, SCThemeType, SCSubscribedGroupsManagerType } from './types';
 /**
  * ContextProvider component
  */
@@ -60,6 +60,7 @@ import useSCFetchPrivateMessageSnippets from './hooks/useSCFetchPrivateMessageSn
 import useSCFetchBroadcastMessages from './hooks/useSCFetchBroadcastMessages';
 import useSCFetchUserBlockedBy from './hooks/useSCFetchUserBlockedBy';
 import useSCUserIsBlocked from './hooks/useSCUserIsBlocked';
+import useSCFetchGroup from './hooks/useSCFetchGroup';
 /**
  * Routing component
  */
@@ -79,4 +80,4 @@ import * as Locale from './constants/Locale';
 /**
  * List all exports
  */
-export { SCUserContextType, SCFollowedCategoriesManagerType, SCContextProviderType, SCContextType, SCSettingsType, SCSessionType, SCSettingsManagerType, SCFollowedManagerType, SCFollowersManagerType, SCConnectionsManagerType, SCSubscribedIncubatorsManagerType, SCLocaleType, SCNotificationContextType, SCPreferencesContextType, SCThemeContextType, SCRoutingContextType, SCLocaleContextType, SCAlertMessagesContextType, SCThemeAvatarVariableType, SCThemeCategoryIconVariableType, SCThemeCategoryVariableType, SCThemeVariablesType, SCThemeType, SCContext, SCUserContext, SCThemeContext, SCRoutingContext, SCLocaleContext, SCPreferencesContext, useSCContext, SCContextProvider, SCUserProvider, useSCUser, useSCPreferences, SCThemeProvider, useSCTheme, withSCTheme, SCRoutingProvider, useSCRouting, SCLocaleProvider, useSCLocale, withSCLocale, SCPreferencesProvider, SCPreferences, SCFeatures, SCNotification, SCNotificationProvider, SCNotificationContext, useSCNotification, SCAlertMessagesProvider, SCAlertMessagesContext, useSCAlertMessages, Link, SCRoutes, SCCache, UserUtils, Locale, useSCFetchUser, useSCFetchUserProviders, useSCFetchVote, useSCFetchFeedObject, useSCFetchCommentObject, useSCFetchCommentObjects, useSCFetchCustomAdv, useSCFetchTag, useSCFetchAddressingTagList, useSCFetchCategory, useSCFetchCategories, useSCFetchIncubator, useSCMediaClick, useSCFetchContributors, useSCFetchFeed, useIsComponentMountedRef, usePreviousValue, useIsomorphicLayoutEffect, useEffectOnce, useNoInitialEffect, useSCFetchPrivateMessageSnippets, useSCFetchBroadcastMessages, useSCFetchUserBlockedBy, useSCUserIsBlocked, };
+export { SCUserContextType, SCFollowedCategoriesManagerType, SCContextProviderType, SCContextType, SCSettingsType, SCSessionType, SCSettingsManagerType, SCFollowedManagerType, SCFollowersManagerType, SCConnectionsManagerType, SCSubscribedIncubatorsManagerType, SCLocaleType, SCNotificationContextType, SCPreferencesContextType, SCThemeContextType, SCRoutingContextType, SCLocaleContextType, SCAlertMessagesContextType, SCThemeAvatarVariableType, SCThemeCategoryIconVariableType, SCThemeCategoryVariableType, SCThemeVariablesType, SCThemeType, SCSubscribedGroupsManagerType, SCContext, SCUserContext, SCThemeContext, SCRoutingContext, SCLocaleContext, SCPreferencesContext, useSCContext, SCContextProvider, SCUserProvider, useSCUser, useSCPreferences, SCThemeProvider, useSCTheme, withSCTheme, SCRoutingProvider, useSCRouting, SCLocaleProvider, useSCLocale, withSCLocale, SCPreferencesProvider, SCPreferences, SCFeatures, SCNotification, SCNotificationProvider, SCNotificationContext, useSCNotification, SCAlertMessagesProvider, SCAlertMessagesContext, useSCAlertMessages, Link, SCRoutes, SCCache, UserUtils, Locale, useSCFetchUser, useSCFetchUserProviders, useSCFetchVote, useSCFetchFeedObject, useSCFetchCommentObject, useSCFetchCommentObjects, useSCFetchCustomAdv, useSCFetchTag, useSCFetchAddressingTagList, useSCFetchCategory, useSCFetchCategories, useSCFetchIncubator, useSCMediaClick, useSCFetchContributors, useSCFetchFeed, useIsComponentMountedRef, usePreviousValue, useIsomorphicLayoutEffect, useEffectOnce, useNoInitialEffect, useSCFetchPrivateMessageSnippets, useSCFetchBroadcastMessages, useSCFetchUserBlockedBy, useSCUserIsBlocked, useSCFetchGroup, };

package/lib/cjs/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useIsComponentMountedRef = exports.useSCFetchFeed = exports.useSCFetchContributors = exports.useSCMediaClick = exports.useSCFetchIncubator = exports.useSCFetchCategories = exports.useSCFetchCategory = exports.useSCFetchAddressingTagList = exports.useSCFetchTag = exports.useSCFetchCustomAdv = exports.useSCFetchCommentObjects = exports.useSCFetchCommentObject = exports.useSCFetchFeedObject = exports.useSCFetchVote = exports.useSCFetchUserProviders = exports.useSCFetchUser = exports.Locale = exports.UserUtils = exports.SCCache = exports.SCRoutes = exports.Link = exports.useSCAlertMessages = exports.SCAlertMessagesContext = exports.SCAlertMessagesProvider = exports.useSCNotification = exports.SCNotificationContext = exports.SCNotificationProvider = exports.SCNotification = exports.SCFeatures = exports.SCPreferences = exports.SCPreferencesProvider = exports.withSCLocale = exports.useSCLocale = exports.SCLocaleProvider = exports.useSCRouting = exports.SCRoutingProvider = exports.withSCTheme = exports.useSCTheme = exports.SCThemeProvider = exports.useSCPreferences = exports.useSCUser = exports.SCUserProvider = exports.SCContextProvider = exports.useSCContext = exports.SCPreferencesContext = exports.SCLocaleContext = exports.SCRoutingContext = exports.SCThemeContext = exports.SCUserContext = exports.SCContext = void 0;
-exports.useSCUserIsBlocked = exports.useSCFetchUserBlockedBy = exports.useSCFetchBroadcastMessages = exports.useSCFetchPrivateMessageSnippets = exports.useNoInitialEffect = exports.useEffectOnce = exports.useIsomorphicLayoutEffect = exports.usePreviousValue = void 0;
+exports.useSCFetchGroup = exports.useSCUserIsBlocked = exports.useSCFetchUserBlockedBy = exports.useSCFetchBroadcastMessages = exports.useSCFetchPrivateMessageSnippets = exports.useNoInitialEffect = exports.useEffectOnce = exports.useIsomorphicLayoutEffect = exports.usePreviousValue = void 0;
 const tslib_1 = require("tslib");
 /**
  * ContextProvider component
@@ -110,6 +110,8 @@ const useSCFetchUserBlockedBy_1 = tslib_1.__importDefault(require("./hooks/useSC
 exports.useSCFetchUserBlockedBy = useSCFetchUserBlockedBy_1.default;
 const useSCUserIsBlocked_1 = tslib_1.__importDefault(require("./hooks/useSCUserIsBlocked"));
 exports.useSCUserIsBlocked = useSCUserIsBlocked_1.default;
+const useSCFetchGroup_1 = tslib_1.__importDefault(require("./hooks/useSCFetchGroup"));
+exports.useSCFetchGroup = useSCFetchGroup_1.default;
 /**
  * Routing component
  */

package/lib/cjs/themes/theme.js

@@ -43,6 +43,14 @@ const getTheme = (options, preferences) => {
                 sizeLarge: 50,
             },
         },
+        group: {
+            avatar: {
+                sizeSmall: 40,
+                sizeMedium: 60,
+                sizeLarge: 90,
+                sizeXLarge: 120,
+            },
+        },
     };
     const defaultOptions = preferences
         ? {

package/lib/cjs/types/context.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { SCAuthTokenType, SCIncubatorType, SCCategoryType, SCUserType, SCUserSettingsType, SCReactionType } from "@selfcommunity/types";
+import { SCAuthTokenType, SCIncubatorType, SCCategoryType, SCUserType, SCUserSettingsType, SCReactionType, SCGroupType } from '@selfcommunity/types';
 import { SCThemeType } from './theme';
 /**
  * Interface SCSettingsType
@@ -132,7 +132,7 @@ export interface SCUserContextType {
      */
     refreshCounters: () => Promise<any>;
     /**
-     * Managers: followed, connections, categories, incubators, etc...
+     * Managers: followed, connections, categories, incubators, groups, etc...
      */
     managers: {
         settings?: SCSettingsManagerType;
@@ -142,6 +142,7 @@ export interface SCUserContextType {
         categories: SCFollowedCategoriesManagerType;
         incubators?: SCSubscribedIncubatorsManagerType;
         blockedUsers?: SCBlockedUsersManagerType;
+        groups?: SCSubscribedGroupsManagerType;
     };
 }
 export interface SCSettingsManagerType {
@@ -248,6 +249,36 @@ export interface SCFollowedCategoriesManagerType {
      */
     emptyCache?: () => void;
 }
+export interface SCSubscribedGroupsManagerType {
+    /**
+     * List of all groups ids followed by the authenticated user
+     */
+    groups: number[];
+    /**
+     * List of all groups in loading state
+     */
+    loading: number[];
+    /**
+     * List of current groups in loading state
+     */
+    isLoading: (group: SCGroupType) => boolean;
+    /**
+     * Handle user subscription to a group
+     */
+    subscribe?: (group: SCGroupType) => Promise<any>;
+    /**
+     * Handles a user subscription status to a group, caching data
+     */
+    subscriptionStatus?: (group: SCGroupType) => string;
+    /**
+     * Refresh groups
+     */
+    refresh?: () => void;
+    /**
+     * Empty cache to revalidate all groups
+     */
+    emptyCache?: () => void;
+}
 export interface SCConnectionsManagerType {
     /**
      * List of all users in relations(social graph) with authenticated user

package/lib/cjs/types/index.d.ts

@@ -1,3 +1,3 @@
-import { SCUserContextType, SCFollowedManagerType, SCFollowersManagerType, SCFollowedCategoriesManagerType, SCSettingsManagerType, SCSubscribedIncubatorsManagerType, SCConnectionsManagerType, SCBlockedUsersManagerType, SCContextProviderType, SCContextType, SCSettingsType, SCSessionType, SCPreferencesContextType, SCNotificationContextType, SCLocaleType, SCVoteType, SCVoteContextType, SCThemeContextType, SCRoutingContextType, SCLocaleContextType, SCAlertMessagesContextType } from './context';
+import { SCUserContextType, SCFollowedManagerType, SCFollowersManagerType, SCFollowedCategoriesManagerType, SCSettingsManagerType, SCSubscribedIncubatorsManagerType, SCConnectionsManagerType, SCBlockedUsersManagerType, SCContextProviderType, SCContextType, SCSettingsType, SCSessionType, SCPreferencesContextType, SCNotificationContextType, SCLocaleType, SCVoteType, SCVoteContextType, SCThemeContextType, SCRoutingContextType, SCLocaleContextType, SCAlertMessagesContextType, SCSubscribedGroupsManagerType } from './context';
 import { SCThemeAvatarVariableType, SCThemeUserVariableType, SCThemeCategoryIconVariableType, SCThemeCategoryVariableType, SCThemeVariablesType, SCThemeType } from './theme';
-export { SCUserContextType, SCFollowedCategoriesManagerType, SCSettingsManagerType, SCContextProviderType, SCContextType, SCSettingsType, SCSessionType, SCFollowedManagerType, SCFollowersManagerType, SCConnectionsManagerType, SCBlockedUsersManagerType, SCSubscribedIncubatorsManagerType, SCLocaleType, SCVoteType, SCVoteContextType, SCNotificationContextType, SCPreferencesContextType, SCThemeContextType, SCRoutingContextType, SCLocaleContextType, SCAlertMessagesContextType, SCThemeAvatarVariableType, SCThemeUserVariableType, SCThemeCategoryIconVariableType, SCThemeCategoryVariableType, SCThemeVariablesType, SCThemeType, };
+export { SCUserContextType, SCFollowedCategoriesManagerType, SCSettingsManagerType, SCContextProviderType, SCContextType, SCSettingsType, SCSessionType, SCFollowedManagerType, SCFollowersManagerType, SCConnectionsManagerType, SCBlockedUsersManagerType, SCSubscribedIncubatorsManagerType, SCLocaleType, SCVoteType, SCVoteContextType, SCNotificationContextType, SCPreferencesContextType, SCThemeContextType, SCRoutingContextType, SCLocaleContextType, SCAlertMessagesContextType, SCThemeAvatarVariableType, SCThemeUserVariableType, SCThemeCategoryIconVariableType, SCThemeCategoryVariableType, SCThemeVariablesType, SCThemeType, SCSubscribedGroupsManagerType, };

package/lib/cjs/types/theme.d.ts

@@ -29,6 +29,15 @@ export interface SCThemeUserVariableType {
      */
     avatar: SCThemeAvatarVariableType;
 }
+/**
+ * Interface SCThemeGroupVariableType
+ */
+export interface SCThemeGroupVariableType {
+    /**
+     * Avatar variables
+     */
+    avatar: SCThemeAvatarVariableType;
+}
 /**
  * Interface SCThemeCategoryVariableType
  */
@@ -67,6 +76,10 @@ export interface SCThemeVariablesType {
      * Category
      */
     category: SCThemeCategoryVariableType;
+    /**
+     * Group
+     */
+    group: SCThemeGroupVariableType;
 }
 export interface SCThemeType extends MuiTheme {
     /**

package/lib/esm/components/provider/SCUserProvider/index.js

@@ -15,6 +15,7 @@ import { SCNotificationTopicType, SCNotificationTypologyType, SCUserStatus } fro
 import useSCSubscribedIncubatorsManager from '../../../hooks/useSCSubscribedIncubatorsManager';
 import useSCBlockedUsersManager from '../../../hooks/useSCBlockedUsersManager';
 import * as Session from '../../../constants/Session';
+import useSCSubscribedGroupsManager from '../../../hooks/useSCSubscribedGroupsManager';
 /**
  * SCUserContext (Authentication Context)
  *
@@ -66,6 +67,7 @@ export default function SCUserProvider({ children }) {
     const connectionsManager = useSCConnectionsManager(state.user);
     const categoriesManager = useSCFollowedCategoriesManager(state.user, updateUser);
     const blockedUsersManager = useSCBlockedUsersManager(state.user);
+    const subscribedGroupsManager = useSCSubscribedGroupsManager(state.user);
     /**
      * Ref notifications subscribers: BLOCKED_USER, UNBLOCKED_USER
      */
@@ -116,6 +118,7 @@ export default function SCUserProvider({ children }) {
             connectionsManager.refresh && connectionsManager.refresh();
             subscribedIncubatorsManager.refresh && subscribedIncubatorsManager.refresh();
             blockedUsersManager.refresh && blockedUsersManager.refresh();
+            subscribedGroupsManager.refresh && subscribedGroupsManager.refresh();
         }
     }
     /**
@@ -211,6 +214,7 @@ export default function SCUserProvider({ children }) {
             connections: connectionsManager,
             incubators: subscribedIncubatorsManager,
             blockedUsers: blockedUsersManager,
+            groups: subscribedGroupsManager,
         },
     }), [
         state,
@@ -227,6 +231,8 @@ export default function SCUserProvider({ children }) {
         blockedUsersManager.blocked,
         subscribedIncubatorsManager.loading,
         subscribedIncubatorsManager.incubators,
+        subscribedGroupsManager.loading,
+        subscribedGroupsManager.groups,
     ]);
     /**
      * We only want to render the underlying app after we