@selfcommunity/react-core 0.1.2-alpha.0

package/lib/esm/hooks/useSCAuth.js

@@ -0,0 +1,340 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = useAuth;
+exports.userActionTypes = void 0;
+
+var _apiServices = require("@selfcommunity/api-services");
+
+var _react = require("react");
+
+var Session = _interopRequireWildcard(require("../constants/Session"));
+
+var _useDeepCompareEffect = _interopRequireDefault(require("use-deep-compare-effect"));
+
+var _logger = require("../utils/logger");
+
+var _Errors = require("../constants/Errors");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+/**
+ * @hidden
+ * We have complex state logic that involves multiple sub-values,
+ * so useReducer is preferable to useState.
+ * Define all possible auth action types label
+ * Use this to export actions and dispatch an action
+ */
+const userActionTypes = {
+  LOGIN_LOADING: '_login_loading',
+  LOGIN_SUCCESS: '_login_success',
+  LOGIN_FAILURE: '_login_failure',
+  LOGOUT: '_logout',
+  REFRESH_TOKEN_SUCCESS: '_refresh_token_success',
+  REFRESH_TOKEN_FAILURE: '_invalid_token_failure',
+  REFRESH_SESSION: '_refresh_token',
+  UPDATE_USER: '_change_user'
+};
+/**
+ * userReducer:
+ *  - manage the state of authentication
+ *  - update the state base on action type
+ * @param state
+ * @param action
+ */
+
+exports.userActionTypes = userActionTypes;
+
+function userReducer(state, action) {
+  switch (action.type) {
+    case userActionTypes.LOGIN_LOADING:
+      return {
+        user: null,
+        session: Object.assign({}, state.session),
+        error: null,
+        loading: true
+      };
+
+    case userActionTypes.LOGIN_SUCCESS:
+      return {
+        user: action.payload.user,
+        error: null,
+        session: Object.assign({}, state.session),
+        loading: false
+      };
+
+    case userActionTypes.LOGIN_FAILURE:
+      return {
+        user: null,
+        session: Object.assign({}, state.session),
+        error: action.payload.error,
+        loading: false
+      };
+
+    case userActionTypes.REFRESH_TOKEN_SUCCESS:
+      const newAuthToken = Object.assign({}, state.session.authToken, Object.assign({}, state.session.authToken, {
+        accessToken: action.payload.token.accessToken
+      }, action.payload.token.refreshToken ? {
+        refreshToken: action.payload.token.refreshToken
+      } : {}, action.payload.token.expiresIn ? {
+        expiresIn: action.payload.token.expiresIn
+      } : {}));
+      const newSession = Object.assign({}, state.session, {
+        authToken: newAuthToken
+      }); // Update current client config
+
+      _apiServices.http.setAuthorizeToken(newAuthToken.accessToken);
+
+      return Object.assign({}, state, {
+        session: newSession,
+        error: null,
+        loading: false
+      });
+
+    case userActionTypes.REFRESH_TOKEN_FAILURE:
+      return {
+        user: null,
+        session: Object.assign({}, state.session),
+        loading: null,
+        error: action.payload.error
+      };
+
+    case userActionTypes.LOGOUT:
+      return {
+        user: null,
+        session: null,
+        error: null,
+        loading: null
+      };
+
+    case userActionTypes.UPDATE_USER:
+      return Object.assign({}, state, {
+        user: Object.assign({}, state.user, action.payload)
+      });
+
+    case userActionTypes.REFRESH_SESSION:
+      return Object.assign({}, state, action.payload.conf);
+
+    default:
+      throw new Error(`Unhandled type: ${action.type}`);
+  }
+}
+/**
+ * Define initial context auth session
+ * @param session
+ */
+
+
+function stateInitializer(session) {
+  let _session = Object.assign({}, session);
+
+  let _isLoading = false;
+  /**
+   * Set http authorization if session type is OAuth or JWT
+   * Configure http object (Authorization, etc...)
+   */
+
+  if ([Session.OAUTH_SESSION, Session.JWT_SESSION].includes(_session.type) && _session.authToken && _session.authToken.accessToken) {
+    _apiServices.http.setAuthorizeToken(_session.authToken.accessToken);
+
+    _isLoading = true;
+  }
+
+  _apiServices.http.setSupportWithCredentials(_session.type === Session.COOKIE_SESSION);
+
+  return {
+    user: null,
+    session: _session,
+    error: null,
+    loading: _isLoading,
+    isSessionRefreshing: false,
+    refreshSession: false
+  };
+}
+/**
+ :::info
+ This component is used to navigate through the application.
+ :::
+
+ #### Usage
+
+ In order to use router you need to import this components first:
+
+ ```jsx
+ import {SCRoutingContextType, useSCRouting, Link, SCRoutes} from '@selfcommunity/react-core';
+ ````
+
+ :::tipUsage Example:
+
+ ```jsx
+ const scRoutingContext: SCRoutingContextType = useSCRouting();
+ <Button component={Link} to={scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, {id: user.id})>Go to profile</Button>
+````
+or
+
+```jsx
+const scRoutingContext: SCRoutingContextType = useSCRouting();
+<Link to={scRoutingContext.url('profile', {id: user.id})}>Go to profile</Link>
+````
+:::
+ * @param initialSession
+ */
+
+
+function useAuth(initialSession) {
+  const [state, dispatch] = (0, _react.useReducer)(userReducer, {}, () => stateInitializer(initialSession));
+  let authInterceptor = (0, _react.useRef)(null);
+  let isSessionRefreshing = (0, _react.useRef)(false);
+  let failedQueue = (0, _react.useRef)([]); // CONST
+
+  const userId = state.user ? state.user.id : null;
+  const accessToken = state.session.authToken && state.session.authToken.accessToken ? state.session.authToken.accessToken : null;
+  /**
+   * Refresh session
+   */
+
+  const refreshSession = (0, _react.useMemo)(() => () => {
+    const session = state.session;
+
+    if (!isSessionRefreshing.current && session.handleRefreshToken) {
+      isSessionRefreshing.current = true;
+      return session.handleRefreshToken(state.session).then(res => {
+        isSessionRefreshing.current = false;
+        dispatch({
+          type: userActionTypes.REFRESH_TOKEN_SUCCESS,
+          payload: {
+            token: res
+          }
+        });
+        return Promise.resolve(res);
+      }).catch(error => {
+        _logger.Logger.error(_Errors.SCOPE_SC_CORE, 'Unable to refresh user session.');
+
+        if (error.response && error.response.data) {
+          dispatch({
+            type: userActionTypes.REFRESH_TOKEN_FAILURE,
+            payload: {
+              error: error.response.toString()
+            }
+          });
+        }
+
+        return Promise.reject(error);
+      });
+    }
+
+    return Promise.reject(new Error('Unable to refresh session. Unauthenticated user.'));
+  }, [accessToken]);
+  /**
+   * Manages multiple request during refresh session
+   * Save concurrent requests and retry them again
+   * at the end of refreshing session
+   */
+
+  const processQueue = (0, _react.useMemo)(() => (error, token = null) => {
+    failedQueue.current.forEach(prom => {
+      if (error) {
+        prom.reject(error);
+      } else {
+        prom.resolve(token);
+      }
+    });
+    failedQueue.current = [];
+  }, [failedQueue.current]);
+  /**
+   * Add/remove an http request interceptor.
+   * When the component unmounted the interceptor will be detached
+   * The interceptor check if the token is expiring
+   */
+
+  (0, _react.useEffect)(() => {
+    if (userId !== null) {
+      authInterceptor.current = _apiServices.http.getClientInstance().interceptors.response.use(response => {
+        return response;
+      }, async error => {
+        let originalConfig = error.config;
+
+        if (error.response) {
+          if (error.response.status === 401) {
+            /**
+             * if other requests arrive at the same time
+             * as the token refresh, we save them for later
+             */
+            if (isSessionRefreshing.current) {
+              return new Promise(function (resolve, reject) {
+                failedQueue.current.push({
+                  resolve,
+                  reject
+                });
+              }).then(token => {
+                originalConfig.headers['Authorization'] = 'Bearer ' + token;
+                return _apiServices.http.request(originalConfig);
+              }).catch(err => {
+                _logger.Logger.error(_Errors.SCOPE_SC_CORE, 'Unable to resolve promises in failedQueue.');
+
+                return Promise.reject(err);
+              });
+            }
+            /**
+             * we mark the request as retried,
+             * we avoid doing it again
+             */
+
+
+            const session = state.session;
+            const authToken = session && 'authToken' in session ? session.authToken : null;
+
+            if (session.type !== Session.COOKIE_SESSION && !isSessionRefreshing.current && state.user && session && session.handleRefreshToken && Boolean(authToken && authToken.refreshToken)) {
+              /**
+               * set refreshing mode,
+               * save all concurrent request in the meantime
+               */
+              try {
+                const res = await refreshSession();
+                originalConfig.headers.Authorization = `Bearer ${res['accessToken']}`;
+                processQueue(null, res['accessToken']);
+                return Promise.resolve(_apiServices.http.request(originalConfig));
+              } catch (_error) {
+                if (_error.response && _error.response.data) {
+                  processQueue(_error, null);
+                  return Promise.reject(_error.response.data);
+                }
+              }
+            }
+          }
+
+          return Promise.reject(error);
+        }
+      });
+    }
+
+    return () => {
+      if (authInterceptor.current !== null) {
+        _apiServices.http.getClientInstance().interceptors.response.eject(authInterceptor.current);
+      }
+    };
+  }, [userId, accessToken]);
+  /**
+   * Reset session if initial conf changed
+   */
+
+  (0, _useDeepCompareEffect.default)(() => {
+    dispatch({
+      type: userActionTypes.REFRESH_SESSION,
+      payload: {
+        conf: stateInitializer(initialSession)
+      }
+    });
+  }, [initialSession]);
+  return {
+    state,
+    dispatch,
+    helpers: {
+      refreshSession
+    }
+  };
+}

package/lib/esm/hooks/useSCCachingManager.js

@@ -0,0 +1,58 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = useSCCachingManager;
+
+var _react = require("react");
+
+/**
+ :::info
+ This custom hook manages cached data and the loading state.
+ :::
+ */
+function useSCCachingManager() {
+  const cache = (0, _react.useRef)([]);
+  const [loading, setLoading] = (0, _react.useState)([]);
+  const [data, setData] = (0, _react.useState)([]);
+  /**
+   * Update cache
+   * @param ids
+   */
+
+  const updateCache = (0, _react.useMemo)(() => ids => {
+    ids.map(c => {
+      if (!cache.current.includes(c)) {
+        cache.current.push(c);
+      }
+    });
+  }, [cache]);
+  /**
+   * Empty cache
+   * emptying the cache each isFollow request
+   * results in a request to the server
+   */
+
+  const emptyCache = (0, _react.useMemo)(() => () => {
+    cache.current = [];
+  }, [cache]);
+  /**
+   * Category is checking
+   * Return true if the manager is checking
+   * the follow status of the obj
+   * @param category
+   */
+
+  const isLoading = (0, _react.useMemo)(() => obj => {
+    return loading.includes(obj.id);
+  }, [loading]);
+  return {
+    cache: cache.current,
+    updateCache,
+    emptyCache,
+    data,
+    setData,
+    loading,
+    setLoading,
+    isLoading
+  };
+}

package/lib/esm/hooks/useSCConnectionsManager.js

@@ -0,0 +1,285 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = useSCConnectionsManager;
+
+var _react = require("react");
+
+var _apiServices = require("@selfcommunity/api-services");
+
+var _types = require("@selfcommunity/types");
+
+var _logger = require("../utils/logger");
+
+var _Errors = require("../constants/Errors");
+
+var _SCPreferencesProvider = require("../components/provider/SCPreferencesProvider");
+
+var _Preferences = require("../constants/Preferences");
+
+var _useSCCachingManager = _interopRequireDefault(require("./useSCCachingManager"));
+
+var _pubsubJs = _interopRequireDefault(require("pubsub-js"));
+
+var _Notification = require("../constants/Notification");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Used on refresh and in status method
+ * Check if the user status is 'connected', 'sent_connection_request'
+ * 'received_connection_request', to update the cache and data
+ */
+const STATUS_CONNECTED = 'connected';
+const STATUS_DISCONNECTED = 'disconnected';
+const STATUS_CONNECTION_REQUEST_SENT = 'sent_connection_request';
+const STATUS_CONNECTION_REQUEST_RECEIVED = 'received_connection_request';
+/**
+ :::info
+ This custom hook is used to manage to manage friends.
+ :::
+
+ :::tipHow to use it:
+
+ Follow these steps:
+ ```jsx
+ 1. const scUserContext: SCUserContextType = useSCUser();
+ 2. const scConnectionsManager: SCConnectionsManagerType = scUserContext.manager.connections;
+ 3. scConnectionsManager.status(user)
+ ```
+ :::
+ */
+
+function useSCConnectionsManager(user) {
+  const {
+    cache,
+    updateCache,
+    emptyCache,
+    data,
+    setData,
+    loading,
+    setLoading,
+    isLoading
+  } = (0, _useSCCachingManager.default)();
+  const scPreferencesContext = (0, _SCPreferencesProvider.useSCPreferences)();
+  const connectionsDisabled = _Preferences.CONFIGURATIONS_FOLLOW_ENABLED in scPreferencesContext.preferences && scPreferencesContext.preferences[_Preferences.CONFIGURATIONS_FOLLOW_ENABLED].value;
+  const notificationConnAcceptSubscription = (0, _react.useRef)(null);
+  const notificationConnRequestSubscription = (0, _react.useRef)(null);
+  const notificationConnRemoveSubscription = (0, _react.useRef)(null);
+  /**
+   * Notification subscriber only for FOLLOW
+   * @param msg
+   * @param data
+   */
+
+  const notificationSubscriber = (msg, data) => {
+    if (data.connection && data.connection_id !== undefined) {
+      updateCache([data.data.connection.id]);
+      let _data = [];
+
+      if (_Notification.SCNotificationMapping[data.data.activity_type] === _types.SCNotificationTypologyType.CONNECTION_REQUEST) {
+        _data = data.map(([k, v]) => ({
+          k: k === data.data.connection_id ? STATUS_CONNECTION_REQUEST_SENT : v
+        }));
+      } else if (_Notification.SCNotificationMapping[data.data.activity_type] === _types.SCNotificationTypologyType.CONNECTION_ACCEPT) {
+        _data = data.map(([k, v]) => ({
+          k: k === data.data.connection_id ? STATUS_CONNECTED : v
+        }));
+      } else if (_Notification.SCNotificationMapping[data.data.activity_type] === _types.SCNotificationTypologyType.CONNECTION_REMOVE) {
+        _data = data.map(([k, v]) => ({
+          k: k === data.data.connection_id ? STATUS_DISCONNECTED : v
+        }));
+      }
+
+      setData(_data);
+    }
+  };
+  /**
+   * Subscribe to notification types user_follow, user_unfollow
+   */
+
+
+  (0, _react.useEffect)(() => {
+    notificationConnAcceptSubscription.current = _pubsubJs.default.subscribe(`${_types.SCNotificationTopicType.INTERACTION}.${_types.SCNotificationTypologyType.CONNECTION_ACCEPT}`, notificationSubscriber);
+    notificationConnRequestSubscription.current = _pubsubJs.default.subscribe(`${_types.SCNotificationTopicType.INTERACTION}.${_types.SCNotificationTypologyType.CONNECTION_REQUEST}`, notificationSubscriber);
+    notificationConnRemoveSubscription.current = _pubsubJs.default.subscribe(`${_types.SCNotificationTopicType.INTERACTION}.${_types.SCNotificationTypologyType.CONNECTION_REMOVE}`, notificationSubscriber);
+    return () => {
+      _pubsubJs.default.unsubscribe(notificationConnAcceptSubscription.current);
+
+      _pubsubJs.default.unsubscribe(notificationConnRequestSubscription.current);
+
+      _pubsubJs.default.unsubscribe(notificationConnRemoveSubscription.current);
+    };
+  }, []);
+  /**
+   * Memoized refresh all connections
+   * It makes a single request to the server and retrieves
+   * all the users connected by the authenticated user in a single solution
+   * It might be useful for multi-tab sync
+   */
+
+  const refresh = (0, _react.useMemo)(() => () => {
+    emptyCache();
+
+    if (user && cache.length > 0) {
+      // Only if user is authenticated
+      _apiServices.http.request({
+        url: _apiServices.Endpoints.UserConnectionStatuses.url({}),
+        method: _apiServices.Endpoints.UserConnectionStatuses.method,
+        data: {
+          users: cache
+        }
+      }).then(res => {
+        if (res.status >= 300) {
+          return Promise.reject(res);
+        }
+
+        updateCache(Object.keys(res.data.connection_statuses).map(id => parseInt(id)));
+        setData(Object.entries(res.data.connection_statuses).filter(([k, v]) => v !== null).map(([k, v]) => ({
+          [parseInt(k)]: v
+        })));
+        return Promise.resolve(res.data);
+      }).catch(e => {
+        _logger.Logger.error(_Errors.SCOPE_SC_CORE, 'Unable to refresh users Connections by the authenticated user.');
+
+        _logger.Logger.error(_Errors.SCOPE_SC_CORE, e);
+      });
+    }
+  }, [data, user, cache]);
+  /**
+   * Memoized Request connection
+   */
+
+  const requestConnection = (0, _react.useMemo)(() => user => {
+    setLoading(prev => [...prev, ...[user.id]]);
+
+    if (getCurrentStatus(user) === STATUS_CONNECTION_REQUEST_RECEIVED) {
+      return acceptConnection(user);
+    }
+
+    return _apiServices.http.request({
+      url: _apiServices.Endpoints.UserRequestConnection.url({
+        id: user.id
+      }),
+      method: _apiServices.Endpoints.UserRequestConnection.method
+    }).then(res => {
+      if (res.status >= 300) {
+        return Promise.reject(res);
+      }
+
+      updateCache([user.id]);
+
+      const _data = data.map(([k, v]) => ({
+        k: k === user.id ? STATUS_CONNECTION_REQUEST_SENT : v
+      }));
+
+      setData(_data);
+      setLoading(prev => prev.filter(u => u !== user.id));
+      return Promise.resolve(res.data);
+    });
+  }, [data, loading, cache]);
+  /**
+   * Memoized Accept Request connection
+   */
+
+  const acceptConnection = (0, _react.useMemo)(() => user => {
+    setLoading(prev => [...prev, ...[user.id]]);
+
+    if (getCurrentStatus(user) === STATUS_CONNECTION_REQUEST_RECEIVED) {
+      return _apiServices.http.request({
+        url: _apiServices.Endpoints.UserAcceptRequestConnection.url({
+          id: user.id
+        }),
+        method: _apiServices.Endpoints.UserAcceptRequestConnection.method
+      }).then(res => {
+        if (res.status >= 300) {
+          return Promise.reject(res);
+        }
+
+        updateCache([user.id]);
+
+        const _data = data.map(([k, v]) => ({
+          k: k === user.id ? STATUS_CONNECTED : v
+        }));
+
+        setData(_data);
+        setLoading(prev => prev.filter(u => u !== user.id));
+        return Promise.resolve(res.data);
+      });
+    }
+  }, [data, loading, cache]);
+  /**
+   * Return current user status if exist,
+   * otherwise return null
+   */
+
+  const getCurrentStatus = (0, _react.useMemo)(() => user => {
+    const d = data.filter(([id, v]) => id === user.id);
+    return d.length ? d[0][user.id] : null;
+  }, [data]);
+  /**
+   * Check if the authenticated user is connected with the user
+   * Update the users cached
+   * Update user statuses
+   * @param user
+   */
+
+  const checkUserConnectionStatus = user => {
+    setLoading(prev => prev.includes(user.id) ? prev : [...prev, ...[user.id]]);
+
+    _apiServices.http.request({
+      url: _apiServices.Endpoints.UserCheckConnection.url({
+        id: user.id
+      }),
+      method: _apiServices.Endpoints.UserCheckConnection.method
+    }).then(res => {
+      if (res.status >= 300) {
+        return Promise.reject(res);
+      }
+
+      updateCache([user.id]);
+      setData(prev => res.data.is_connection ? [...prev, ...[{
+        [user.id]: STATUS_CONNECTED
+      }]] : prev.filter(([id, v]) => id !== user.id));
+      setLoading(prev => prev.filter(u => u !== user.id));
+      return Promise.resolve(res.data);
+    });
+  };
+  /**
+   * Memoized status
+   * If user is already in cache -> check data user statuses,
+   * otherwise, check if auth user is connected with user
+   */
+
+
+  const status = (0, _react.useMemo)(() => user => {
+    if (cache.includes(user.id)) {
+      return data.filter((k, v) => k === user.id)[0][user.id];
+    }
+
+    if (!loading.includes(user.id)) {
+      checkUserConnectionStatus(user);
+    }
+
+    return null;
+  }, [data, loading, cache]);
+
+  if (connectionsDisabled || !user) {
+    return {
+      connections: data,
+      loading,
+      isLoading
+    };
+  }
+
+  return {
+    connections: data,
+    loading,
+    isLoading,
+    status,
+    requestConnection,
+    acceptConnection,
+    refresh,
+    emptyCache
+  };
+}