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

package/lib/esm/hooks/useSCSubscribedGroupsManager.js

@@ -0,0 +1,214 @@
+import { useEffect, useMemo } from 'react';
+import { Endpoints, http } from '@selfcommunity/api-services';
+import { SCGroupPrivacyType, SCGroupSubscriptionStatusType } from '@selfcommunity/types';
+import useSCCachingManager from './useSCCachingManager';
+import { SCOPE_SC_CORE } from '../constants/Errors';
+import { Logger } from '@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)
+ ```
+ :::
+ */
+export default function useSCSubscribedGroupsManager(user) {
+    const { cache, updateCache, emptyCache, data, setData, loading, setLoading, setUnLoading, isLoading } = useSCCachingManager();
+    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 = useMemo(() => () => {
+        emptyCache();
+        if (user) {
+            // Only if user is authenticated
+            http
+                .request({
+                url: Endpoints.GetUserGroups.url(),
+                method: 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) => {
+                Logger.error(SCOPE_SC_CORE, 'Unable to refresh the authenticated user groups.');
+                Logger.error(SCOPE_SC_CORE, e);
+            });
+        }
+    }, [data, user, cache]);
+    /**
+     * Memoized subscribe Group
+     * Toggle action
+     */
+    const subscribe = useMemo(() => (group, userId) => {
+        setLoading(group.id);
+        if (userId) {
+            return http
+                .request({
+                url: Endpoints.InviteOrAcceptGroupRequest.url({ id: group.id }),
+                method: Endpoints.InviteOrAcceptGroupRequest.method,
+                data: { users: [userId] },
+            })
+                .then((res) => {
+                if (res.status >= 300) {
+                    return Promise.reject(res);
+                }
+                updateCache([group.id]);
+                setData((prev) => getDataUpdated(prev, group.id, SCGroupSubscriptionStatusType.SUBSCRIBED));
+                setUnLoading(group.id);
+                return Promise.resolve(res.data);
+            });
+        }
+        else {
+            return http
+                .request({
+                url: Endpoints.SubscribeToGroup.url({ id: group.id }),
+                method: Endpoints.SubscribeToGroup.method,
+            })
+                .then((res) => {
+                if (res.status >= 300) {
+                    return Promise.reject(res);
+                }
+                updateCache([group.id]);
+                setData((prev) => getDataUpdated(prev, group.id, group.privacy === SCGroupPrivacyType.PRIVATE ? SCGroupSubscriptionStatusType.REQUESTED : SCGroupSubscriptionStatusType.SUBSCRIBED));
+                setUnLoading(group.id);
+                return Promise.resolve(res.data);
+            });
+        }
+    }, [data, loading, cache]);
+    /**
+     * Memoized subscribe Group
+     * Toggle action
+     */
+    const unsubscribe = useMemo(() => (group) => {
+        if (group.subscription_status !== SCGroupSubscriptionStatusType.REQUESTED) {
+            setLoading(group.id);
+            return http
+                .request({
+                url: Endpoints.UnsubscribeFromGroup.url({ id: group.id }),
+                method: Endpoints.UnsubscribeFromGroup.method,
+            })
+                .then((res) => {
+                if (res.status >= 300) {
+                    return Promise.reject(res);
+                }
+                updateCache([group.id]);
+                setData((prev) => getDataUpdated(prev, group.id, null));
+                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 http
+            .request({
+            url: Endpoints.GetGroupSubscriptionStatus.url({ id: group.id }),
+            method: 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 = 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 = 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 = 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
+     */
+    useEffect(() => {
+        if (!authUserId) {
+            emptyCache();
+        }
+    }, [authUserId]);
+    if (!user) {
+        return { groups: data, loading, isLoading };
+    }
+    return { groups: data, loading, isLoading, subscribe, unsubscribe, subscriptionStatus, refresh, emptyCache };
+}

package/lib/esm/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,8 @@ 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';
+import useSCFetchGroups from './hooks/useSCFetchGroups';
 /**
  * Routing component
  */
@@ -79,4 +81,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, useSCFetchGroups, };

package/lib/esm/index.js

@@ -56,6 +56,8 @@ 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';
+import useSCFetchGroups from './hooks/useSCFetchGroups';
 /**
  * Routing component
  */
@@ -75,4 +77,4 @@ import * as Locale from './constants/Locale';
 /**
  * List all exports
  */
-export { 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 { 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, useSCFetchGroups, };

package/lib/esm/themes/theme.js

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

package/lib/esm/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,40 @@ 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, userId?: number) => Promise<any>;
+    /**
+     * Handle user unsubscription from a group
+     */
+    unsubscribe?: (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/esm/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/esm/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 {
     /**