@selfcommunity/react-core 0.1.2-alpha.0

package/lib/esm/hooks/useSCSubscribedIncubatorsManager.js

@@ -0,0 +1,165 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = useSCSubscribedIncubatorsManager;
+
+var _react = require("react");
+
+var _apiServices = require("@selfcommunity/api-services");
+
+var _logger = require("../utils/logger");
+
+var _Errors = require("../constants/Errors");
+
+var _useSCCachingManager = _interopRequireDefault(require("./useSCCachingManager"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ :::info
+ This custom hook is used to manage to manage subscribed incubators.
+ :::
+ :::tipHow to use it:
+
+ Follow these steps:
+ ```jsx
+ 1. const scUserContext: SCUserContextType = useSCUser();
+ 2. const scSubscribedIncubatorsManager: SCSubscribedIncubatorsManagerType = scUserContext.managers.incubators;
+ 3. scSubscribedIncubatorsManager.isSubscribed(incubator)
+ ```
+ :::
+ */
+function useSCSubscribedIncubatorsManager(user) {
+  const {
+    cache,
+    updateCache,
+    emptyCache,
+    data,
+    setData,
+    loading,
+    setLoading,
+    isLoading
+  } = (0, _useSCCachingManager.default)();
+  /**
+   * Memoized refresh all subscribed
+   * It makes a single request to the server and retrieves
+   * all the incubators subscribed by the authenticated user in a single solution
+   * It might be useful for multi-tab sync
+   */
+
+  const refresh = (0, _react.useMemo)(() => () => {
+    emptyCache();
+
+    if (user) {
+      // Only if user is authenticated
+      _apiServices.http.request({
+        url: _apiServices.Endpoints.GetAllIncubators.url({}),
+        method: _apiServices.Endpoints.GetAllIncubators.method
+      }).then(res => {
+        if (res.status >= 300) {
+          return Promise.reject(res);
+        }
+
+        updateCache(Object.keys(res.data.results).map(id => parseInt(id)));
+        setData(Object.entries(res.data.results).filter(([k, v]) => v === true).map(([k, v]) => parseInt(k)));
+        return Promise.resolve(res.data);
+      }).catch(e => {
+        _logger.Logger.error(_Errors.SCOPE_SC_CORE, 'Unable to refresh incubators subscribed by the authenticated user.');
+
+        _logger.Logger.error(_Errors.SCOPE_SC_CORE, e);
+      });
+    }
+  }, [data, user, cache]);
+  /**
+   * Memoized subscribe/unsubscribe incubator
+   * Toggle action
+   */
+
+  const subscribe = (0, _react.useMemo)(() => incubator => {
+    setLoading(prev => [...prev, ...[incubator.id]]);
+    return _apiServices.http.request({
+      url: _apiServices.Endpoints.SubscribeToIncubator.url({
+        id: incubator.id
+      }),
+      method: _apiServices.Endpoints.SubscribeToIncubator.method
+    }).then(res => {
+      if (res.status >= 300) {
+        return Promise.reject(res);
+      }
+
+      updateCache([incubator.id]);
+      const isSubscribed = data.includes(incubator.id);
+      setData(prev => isSubscribed ? prev.filter(id => id !== incubator.id) : [...[incubator.id], ...prev]);
+      setLoading(prev => prev.filter(i => i !== incubator.id));
+      return Promise.resolve(res.data);
+    });
+  }, [data, loading, cache]);
+  /**
+   * Check if the authenticated user has subscribed the incubator
+   * Update the subscribed cached
+   * Update subscribed incubators
+   * @param incubator
+   */
+
+  const checkIsIncubatorFollowed = incubator => {
+    setLoading(prev => prev.includes(incubator.id) ? prev : [...prev, ...[incubator.id]]);
+
+    _apiServices.http.request({
+      url: _apiServices.Endpoints.CheckIncubatorSubscription.url({
+        id: incubator.id
+      }),
+      method: _apiServices.Endpoints.CheckIncubatorSubscription.method
+    }).then(res => {
+      if (res.status >= 300) {
+        return Promise.reject(res);
+      }
+
+      updateCache([incubator.id]);
+      setData(prev => res.data.subscribed ? [...prev, ...[incubator.id]] : prev.filter(id => id !== incubator.id));
+      setLoading(prev => prev.filter(i => i !== incubator.id));
+      return Promise.resolve(res.data);
+    });
+  }; // /**
+  //  * Bypass remote check if the incubator is subscribed
+  //  */
+  // const getSubscriptionStatus = useMemo(
+  //   () => (incubator: SCIncubatorType) => {
+  //     const isSubscribed = incubator.subscribed === true;
+  //     updateCache([incubator.id]);
+  //     setData((prev) => (isSubscribed ? [...prev, ...[incubator.id]] : prev));
+  //     return isSubscribed;
+  //   },
+  //   [data, cache]
+  // );
+
+  /**
+   * Memoized isSubscribed
+   * If incubator is already in cache -> check if the incubator is in subscribed,
+   * otherwise, check if auth user is subscribed to the incubator
+   */
+
+
+  const isSubscribed = (0, _react.useMemo)(() => incubator => {
+    if (cache.includes(incubator.id)) {
+      return Boolean(data.includes(incubator.id));
+    } // if ('subscribed' in incubator) {
+    //   return getSubscriptionStatus(incubator);
+    // }
+
+
+    if (!loading.includes(incubator.id)) {
+      checkIsIncubatorFollowed(incubator);
+    }
+
+    return false;
+  }, [data, loading, cache]);
+  return {
+    incubators: data,
+    loading,
+    isLoading,
+    subscribe,
+    isSubscribed,
+    refresh,
+    emptyCache
+  };
+}

package/lib/esm/hooks/useSCWebPushMessaging.js

@@ -0,0 +1,286 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = useSCWebPushMessaging;
+
+var _react = require("react");
+
+var _SCContextProvider = require("../components/provider/SCContextProvider");
+
+var _SCUserProvider = require("../components/provider/SCUserProvider");
+
+var _logger = require("../utils/logger");
+
+var _webPushMessaging = require("../utils/webPushMessaging");
+
+var _Errors = require("../constants/Errors");
+
+var _apiServices = require("@selfcommunity/api-services");
+
+var _Device = require("../constants/Device");
+
+var _SCPreferencesProvider = require("../components/provider/SCPreferencesProvider");
+
+var SCPreferences = _interopRequireWildcard(require("../constants/Preferences"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ :::info
+ This custom hook is used to to init web push messaging.
+ :::
+ */
+function useSCWebPushMessaging() {
+  // CONTEXT
+  const scContext = (0, _SCContextProvider.useSCContext)();
+  const scUserContext = (0, _SCUserProvider.useSCUser)();
+  const scPreferencesContext = (0, _react.useContext)(_SCPreferencesProvider.SCPreferencesContext); // STATE
+
+  const [wpSubscription, setWpSubscription] = (0, _react.useState)(null); // REFS
+
+  const subAttempts = (0, _react.useRef)(0); // CONST
+
+  const applicationServerKey = scContext.settings.notifications.webPushMessaging.applicationServerKey !== undefined ? scContext.settings.notifications.webPushMessaging.applicationServerKey : SCPreferences.PROVIDERS_WEB_PUSH_PUBLIC_KEY in scPreferencesContext.preferences ? scPreferencesContext.preferences[SCPreferences.PROVIDERS_WEB_PUSH_PUBLIC_KEY].value : null;
+  const webPushEnabled = SCPreferences.PROVIDERS_WEB_PUSH_ENABLED in scPreferencesContext.preferences && scPreferencesContext.preferences[SCPreferences.PROVIDERS_WEB_PUSH_ENABLED].value ? scPreferencesContext.preferences[SCPreferences.PROVIDERS_WEB_PUSH_ENABLED].value : false;
+  /**
+   * perform update the Subscription
+   * @param data
+   * @param remove
+   */
+
+  const performUpdateSubscription = (data, remove) => {
+    const url = remove ? _apiServices.Endpoints.DeleteDevice.url({
+      type: _Device.WEB_PUSH_NOTIFICATION_DEVICE_TYPE,
+      id: data.registration_id
+    }) : _apiServices.Endpoints.NewDevice.url({
+      type: _Device.WEB_PUSH_NOTIFICATION_DEVICE_TYPE
+    });
+    const method = remove ? _apiServices.Endpoints.DeleteDevice.method : _apiServices.Endpoints.NewDevice.method;
+    return _apiServices.http.request(Object.assign({
+      url,
+      method
+    }, remove ? {} : {
+      data: data
+    })).then(res => {
+      if (res.status >= 300) {
+        return Promise.reject(res);
+      }
+
+      return Promise.resolve(res.data);
+    });
+  };
+  /**
+   * updateSubscriptionOnServer to sync current subscription
+   * @param sub
+   */
+
+
+  const updateSubscriptionOnServer = (sub, remove) => {
+    const browser = (0, _webPushMessaging.loadVersionBrowser)();
+    const endpointParts = sub.endpoint.split('/');
+    const registration_id = endpointParts[endpointParts.length - 1];
+    const data = {
+      browser: browser.name.toUpperCase(),
+      p256dh: btoa(String.fromCharCode.apply(null, new Uint8Array(sub.getKey('p256dh')))),
+      auth: btoa(String.fromCharCode.apply(null, new Uint8Array(sub.getKey('auth')))),
+      user: scUserContext.user ? scUserContext.user.username : '',
+      registration_id: registration_id
+    };
+    return performUpdateSubscription(data, remove).then(res => {
+      if (remove) {
+        setWpSubscription(null);
+      } else {
+        setWpSubscription(res);
+      }
+    }).catch(e => {
+      _logger.Logger.error(_Errors.SCOPE_SC_CORE, e);
+    });
+  };
+  /**
+   * Unsubscribe
+   * @param callback
+   */
+
+
+  const unsubscribe = (callback = null) => {
+    navigator.serviceWorker.ready.then(function (serviceWorkerRegistration) {
+      // To unsubscribe from push messaging, you need get the
+      // subcription object, which you can call unsubscribe() on.
+      serviceWorkerRegistration.pushManager.getSubscription().then(pushSubscription => {
+        // Check we have a subscription to unsubscribe
+        if (!pushSubscription) {
+          // No subscription object, so set the state
+          // to allow the user to subscribe to push
+          return;
+        } // We have a subscription, so call unsubscribe on it
+
+
+        pushSubscription.unsubscribe().then(() => {
+          _logger.Logger.info(_Errors.SCOPE_SC_CORE, 'Unsubscription successfully'); // Request to server to remove
+          // the users data from your data store so you
+          // don't attempt to send them push messages anymore
+
+
+          updateSubscriptionOnServer(pushSubscription, true).then(() => {
+            callback && callback();
+          });
+        }).catch(function (e) {
+          // We failed to unsubscribe, this can lead to
+          // an unusual state, so may be best to remove
+          // the subscription id from your data store and
+          // inform the user that you disabled push
+          _logger.Logger.info(_Errors.SCOPE_SC_CORE, `Unsubscription error.`);
+
+          console.log(e);
+        });
+      }).catch(function (e) {
+        _logger.Logger.info(_Errors.SCOPE_SC_CORE, `Error thrown while unsubscribing from push messaging. ${e}`);
+      });
+    });
+  };
+  /**
+   * Get subscription
+   */
+
+
+  const subscribe = () => {
+    navigator.serviceWorker.ready.then(function (serviceWorkerRegistration) {
+      serviceWorkerRegistration.pushManager.subscribe({
+        userVisibleOnly: true,
+        applicationServerKey: (0, _webPushMessaging.urlB64ToUint8Array)(applicationServerKey)
+      }).then(function (subscription) {
+        if (!subscription) {
+          _logger.Logger.info(_Errors.SCOPE_SC_CORE, 'We aren’t subscribed to push.');
+        } else {
+          updateSubscriptionOnServer(subscription, false);
+        }
+      }).catch(function (e) {
+        if (Notification.permission === 'denied') {
+          // The user denied the notification permission which
+          // means we failed to subscribe and the user will need
+          // to manually change the notification permission to
+          // subscribe to push messages
+          _logger.Logger.info(_Errors.SCOPE_SC_CORE, 'Permission for Notifications was denied');
+        } else {
+          // A problem occurred with the subscription
+          subAttempts.current += 1;
+
+          _logger.Logger.info(_Errors.SCOPE_SC_CORE, `Unable to subscribe(${subAttempts.current}) to push. ${e}`);
+
+          if (subAttempts.current < 3) {
+            unsubscribe(() => subscribe());
+          } else {
+            _logger.Logger.info(_Errors.SCOPE_SC_CORE, `Unable to subscribe to push. ${e}`);
+          }
+        }
+      });
+    });
+  };
+  /**
+   * Request web push notification permission
+   * @type {(function(): void)|*}
+   */
+
+
+  const requestNotificationPermission = () => {
+    if (Notification.permission !== 'granted') {
+      Notification.requestPermission().then(function (permission) {
+        if (permission === 'granted') {
+          navigator.serviceWorker.ready.then(serviceWorkerRegistration => {
+            // Do we already have a push message subscription?
+            serviceWorkerRegistration.pushManager.getSubscription().then(function (subscription) {
+              // Enable any UI which subscribes / unsubscribes from
+              // push messages.
+              if (!subscription) {
+                subscribe();
+                return;
+              } // Keep your server in sync with the latest subscription
+
+
+              updateSubscriptionOnServer(subscription, false);
+            }).catch(err => {
+              _logger.Logger.info(_Errors.SCOPE_SC_CORE, 'Error during getSubscription()');
+
+              console.log(err);
+            });
+          });
+        } else {
+          _logger.Logger.info(_Errors.SCOPE_SC_CORE, 'Permission for Notifications was denied');
+        }
+      });
+    }
+  };
+  /**
+   * Initialize state
+   */
+
+
+  const initialiseState = () => {
+    /**
+     * Check if Notifications supported in the service worker
+     */
+    if (!('showNotification' in ServiceWorkerRegistration.prototype)) {
+      _logger.Logger.info(_Errors.SCOPE_SC_CORE, "Notifications aren't supported.");
+
+      return;
+    }
+    /**
+     * Features, such as service workers and push notifications, require HTTPS secure domains,
+     * so your development environment must serve content over HTTPS to match a production environment.
+     * Check if push messaging is supported.
+     */
+
+
+    if (!('PushManager' in window && 'serviceWorker' in navigator)) {
+      _logger.Logger.info(_Errors.SCOPE_SC_CORE, "Service Worker or Push messaging aren't supported.");
+
+      return;
+    }
+    /**
+     * Check the current Notification permission.
+     * If its denied, it's a permanent block until the user changes the permission
+     */
+
+
+    if (Notification.permission === 'denied') {
+      _logger.Logger.info(_Errors.SCOPE_SC_CORE, 'The user has blocked notifications.');
+
+      return;
+    } else {
+      if (Notification.permission === 'default') {
+        _logger.Logger.info(_Errors.SCOPE_SC_CORE, 'Request permission.');
+
+        requestNotificationPermission();
+      } else if (Notification.permission === 'granted') {
+        subscribe();
+      }
+    }
+  };
+  /**
+   * Init state web push subscription
+   * If web push enabled, applicationServerKey and user is logged, check subscription
+   */
+
+
+  (0, _react.useEffect)(() => {
+    if (!wpSubscription && !scContext.settings.notifications.webPushMessaging.disableToastMessage && scUserContext.user) {
+      if (!webPushEnabled) {
+        _logger.Logger.warn(_Errors.SCOPE_SC_CORE, 'This instance is not configured to support notifications. Enable this feature.');
+      } else if (!applicationServerKey) {
+        _logger.Logger.warn(_Errors.SCOPE_SC_CORE, 'Invalid or missing applicationServerKey. Check the configuration that is passed to the SCContextProvider.');
+      } else {
+        initialiseState();
+      }
+    }
+
+    if (!scUserContext.user && wpSubscription) {
+      // Unsubscribe if user not in session
+      unsubscribe();
+    }
+  }, [scUserContext.user, scContext.settings.notifications.webPushMessaging, wpSubscription]);
+  return {
+    wpSubscription
+  };
+}

package/lib/esm/hooks/useSCWebSocket.js

@@ -0,0 +1,120 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = useSCWebSocket;
+
+var _react = require("react");
+
+var _types = require("@selfcommunity/types");
+
+var _SCContextProvider = require("../components/provider/SCContextProvider");
+
+var _SCUserProvider = require("../components/provider/SCUserProvider");
+
+var _websocket = _interopRequireDefault(require("../utils/websocket"));
+
+var _Notification = require("../constants/Notification");
+
+var _WebSocket = require("../constants/WebSocket");
+
+var _pubsubJs = _interopRequireDefault(require("pubsub-js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ :::info
+ This custom hook is used to to init web socket.
+ :::
+ */
+function useSCWebSocket() {
+  const scContext = (0, _SCContextProvider.useSCContext)();
+  const scUserContext = (0, _SCUserProvider.useSCUser)();
+  const [wsInstance, setWsInstance] = (0, _react.useState)(null); // Websocket uri and protocols
+
+  const _wsUri = `wss://${new URL(scContext.settings.portal).hostname}/ws/${_WebSocket.WS_FACILITY_NOTIFY}?subscribe-user`;
+
+  const _wsProtocol = scContext.settings.session.authToken && scContext.settings.session.authToken.accessToken ? `${_WebSocket.WS_PROTOCOL_PREFIX}${scContext.settings.session.authToken.accessToken}` : null;
+  /**
+   * Before document unload handler
+   * Close webSocket
+   */
+
+
+  const handleBeforeUnload = () => {
+    wsInstance && wsInstance.close();
+  };
+  /**
+   * Check if there is a currently active session and a
+   * wsInstance connection when the provider is mounted for the first time.
+   * If there is an error, it means there is no session.
+   */
+
+
+  (0, _react.useEffect)(() => {
+    if (scUserContext.user && !wsInstance && _wsUri && _wsProtocol) {
+      setWsInstance(_websocket.default.getInstance({
+        uri: _wsUri,
+        heartbeatMsg: _WebSocket.WS_HEARTBEAT_MESSAGE,
+        protocols: [_wsProtocol],
+        receiveMessage: receiveMessage
+      })); // Close the socket channel before window unload
+
+      window.addEventListener('beforeunload', handleBeforeUnload);
+    }
+
+    if (!scUserContext.user && wsInstance) {
+      // Disconnect the socket
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+      wsInstance && wsInstance.close();
+    }
+  }, [scUserContext.user]);
+  /**
+   * Receive a message from wsInstance.
+   */
+
+  const receiveMessage = data => {
+    // receive a message though the websocket from the server
+    let _data = JSON.parse(data);
+
+    if (_data && _data.type && _Notification.SCNotificationTopics.includes(_data.type)) {
+      if (_data.type === _types.SCNotificationTopicType.INTERACTION) {
+        /**
+         * With topic interaction there are two types of notifications group:
+         *  - notification_banner
+         *  - comment, nested_comment, follow, etc..
+         */
+        if (_data.data.activity_type === _types.SCNotificationTypologyType.NOTIFICATION_BANNER) {
+          /**
+           * Notification of type 'notification_banner'
+           * It is a special case of notifications with topic 'interaction'
+           */
+          _pubsubJs.default.publish(`${_data.type}.${_types.SCNotificationTypologyType.NOTIFICATION_BANNER}`, _data);
+        } else if (_Notification.SCNotificationMapping[_data.data.activity_type]) {
+          /**
+           * Notification of type 'comment', 'nested_comment', etc...
+           */
+          _pubsubJs.default.publish(`${_data.type}.${_Notification.SCNotificationMapping[_data.data.activity_type]}`, _data);
+        }
+
+        setNotificationCounters(_data.data);
+      } else {
+        _pubsubJs.default.publish(`${_data.type}`, _data);
+      }
+    }
+  };
+  /**
+   * Update user context counters
+   * @param payload
+   */
+
+
+  const setNotificationCounters = payload => {
+    payload.count_interactions !== undefined && scUserContext.setUnseenInteractionsCounter(payload.count_interactions);
+    payload.count_notification_banners !== undefined && scUserContext.setUnseenInteractionsCounter(payload.count_notification_banners);
+  };
+
+  return {
+    wsInstance,
+    setWsInstance
+  };
+}