@selfcommunity/react-core 0.1.2-alpha.0

package/lib/cjs/constants/Routes.js

@@ -0,0 +1,68 @@
+"use strict";
+
+exports.__esModule = true;
+exports.defaultRoutes = exports.USER_PROFILE_SETTINGS_ROUTE_NAME = exports.USER_PROFILE_ROUTE_NAME = exports.USER_PRIVATE_MESSAGES_ROUTE_NAME = exports.USER_NOTIFICATIONS_ROUTE_NAME = exports.STATUS_ROUTE_NAME = exports.SIGNUP_ROUTE_NAME = exports.SIGNIN_ROUTE_NAME = exports.ROUTER_OPTION = exports.RECOVER_ROUTE_NAME = exports.POST_ROUTE_NAME = exports.PORTAL_OPTION = exports.LOYALTY_ROUTE_NAME = exports.INCUBATOR_ROUTE_NAME = exports.DISCUSSION_ROUTE_NAME = exports.CUSTOM_PAGES_ROUTE_NAME = exports.COMMENT_ROUTE_NAME = exports.CATEGORY_ROUTE_NAME = exports.CATEGORIES_LIST_ROUTE_NAME = void 0;
+const PORTAL_OPTION = 'portal';
+exports.PORTAL_OPTION = PORTAL_OPTION;
+const ROUTER_OPTION = 'router';
+/**
+ * Routes name
+ */
+
+exports.ROUTER_OPTION = ROUTER_OPTION;
+const POST_ROUTE_NAME = 'post';
+exports.POST_ROUTE_NAME = POST_ROUTE_NAME;
+const DISCUSSION_ROUTE_NAME = 'discussion';
+exports.DISCUSSION_ROUTE_NAME = DISCUSSION_ROUTE_NAME;
+const STATUS_ROUTE_NAME = 'status';
+exports.STATUS_ROUTE_NAME = STATUS_ROUTE_NAME;
+const COMMENT_ROUTE_NAME = 'comment';
+exports.COMMENT_ROUTE_NAME = COMMENT_ROUTE_NAME;
+const CATEGORY_ROUTE_NAME = 'category';
+exports.CATEGORY_ROUTE_NAME = CATEGORY_ROUTE_NAME;
+const CATEGORIES_LIST_ROUTE_NAME = 'categories';
+exports.CATEGORIES_LIST_ROUTE_NAME = CATEGORIES_LIST_ROUTE_NAME;
+const USER_PROFILE_ROUTE_NAME = 'user_profile';
+exports.USER_PROFILE_ROUTE_NAME = USER_PROFILE_ROUTE_NAME;
+const USER_PROFILE_SETTINGS_ROUTE_NAME = 'user_profile_settings';
+exports.USER_PROFILE_SETTINGS_ROUTE_NAME = USER_PROFILE_SETTINGS_ROUTE_NAME;
+const USER_NOTIFICATIONS_ROUTE_NAME = 'user_notifications';
+exports.USER_NOTIFICATIONS_ROUTE_NAME = USER_NOTIFICATIONS_ROUTE_NAME;
+const USER_PRIVATE_MESSAGES_ROUTE_NAME = 'user_messages';
+exports.USER_PRIVATE_MESSAGES_ROUTE_NAME = USER_PRIVATE_MESSAGES_ROUTE_NAME;
+const LOYALTY_ROUTE_NAME = 'loyalty';
+exports.LOYALTY_ROUTE_NAME = LOYALTY_ROUTE_NAME;
+const INCUBATOR_ROUTE_NAME = 'incubator';
+exports.INCUBATOR_ROUTE_NAME = INCUBATOR_ROUTE_NAME;
+const SIGNIN_ROUTE_NAME = 'signin';
+exports.SIGNIN_ROUTE_NAME = SIGNIN_ROUTE_NAME;
+const SIGNUP_ROUTE_NAME = 'signup';
+exports.SIGNUP_ROUTE_NAME = SIGNUP_ROUTE_NAME;
+const RECOVER_ROUTE_NAME = 'recover';
+exports.RECOVER_ROUTE_NAME = RECOVER_ROUTE_NAME;
+const CUSTOM_PAGES_ROUTE_NAME = 'custom_pages';
+/**
+ * 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}}
+ */
+
+exports.CUSTOM_PAGES_ROUTE_NAME = CUSTOM_PAGES_ROUTE_NAME;
+const defaultRoutes = {
+  [POST_ROUTE_NAME]: '/post/:id/',
+  [DISCUSSION_ROUTE_NAME]: '/discussion/:id/',
+  [STATUS_ROUTE_NAME]: '/status/:id/',
+  [COMMENT_ROUTE_NAME]: '/:contribution_type/:contribution_id/comment/:id/',
+  [CATEGORY_ROUTE_NAME]: '/category/:id/',
+  [CATEGORIES_LIST_ROUTE_NAME]: '/categories/',
+  [USER_PROFILE_ROUTE_NAME]: '/user/:id/',
+  [USER_PROFILE_SETTINGS_ROUTE_NAME]: '/user/:id/edit/',
+  [USER_NOTIFICATIONS_ROUTE_NAME]: '/notification/',
+  [USER_PRIVATE_MESSAGES_ROUTE_NAME]: '/messages/:id/',
+  [LOYALTY_ROUTE_NAME]: '/loyalty/',
+  [INCUBATOR_ROUTE_NAME]: '/incubator/:id/',
+  [SIGNIN_ROUTE_NAME]: '/signin/',
+  [SIGNUP_ROUTE_NAME]: '/signup/',
+  [RECOVER_ROUTE_NAME]: '/recover/',
+  [CUSTOM_PAGES_ROUTE_NAME]: '/:id/:slug/'
+};
+exports.defaultRoutes = defaultRoutes;

package/lib/cjs/constants/Session.js

@@ -0,0 +1,22 @@
+"use strict";
+
+exports.__esModule = true;
+exports.sessionTypes = exports.SESSION_TYPE_OPTION = exports.SESSION_OPTION = exports.SESSION_HANDLE_REFRESH_TOKEN_OPTION = exports.SESSION_CLIENT_ID_OPTION = exports.SESSION_AUTH_TOKEN_OPTION = exports.OAUTH_SESSION = exports.JWT_SESSION = exports.COOKIE_SESSION = void 0;
+const SESSION_OPTION = 'session';
+exports.SESSION_OPTION = SESSION_OPTION;
+const SESSION_TYPE_OPTION = 'type';
+exports.SESSION_TYPE_OPTION = SESSION_TYPE_OPTION;
+const SESSION_CLIENT_ID_OPTION = 'clientId';
+exports.SESSION_CLIENT_ID_OPTION = SESSION_CLIENT_ID_OPTION;
+const SESSION_AUTH_TOKEN_OPTION = 'authToken';
+exports.SESSION_AUTH_TOKEN_OPTION = SESSION_AUTH_TOKEN_OPTION;
+const SESSION_HANDLE_REFRESH_TOKEN_OPTION = 'handleRefreshToken';
+exports.SESSION_HANDLE_REFRESH_TOKEN_OPTION = SESSION_HANDLE_REFRESH_TOKEN_OPTION;
+const COOKIE_SESSION = 'Cookie';
+exports.COOKIE_SESSION = COOKIE_SESSION;
+const JWT_SESSION = 'JWT';
+exports.JWT_SESSION = JWT_SESSION;
+const OAUTH_SESSION = 'OAuth';
+exports.OAUTH_SESSION = OAUTH_SESSION;
+const sessionTypes = [JWT_SESSION, OAUTH_SESSION, COOKIE_SESSION];
+exports.sessionTypes = sessionTypes;

package/lib/cjs/constants/Theme.js

@@ -0,0 +1,6 @@
+"use strict";
+
+exports.__esModule = true;
+exports.THEME_OPTION = void 0;
+const THEME_OPTION = 'theme';
+exports.THEME_OPTION = THEME_OPTION;

package/lib/cjs/constants/WebSocket.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports.WS_PROTOCOL_PREFIX = exports.WS_HEARTBEAT_MESSAGE = exports.WS_FACILITY_NOTIFY = void 0;
+const WS_PROTOCOL_PREFIX = '__';
+exports.WS_PROTOCOL_PREFIX = WS_PROTOCOL_PREFIX;
+const WS_FACILITY_NOTIFY = 'notify';
+exports.WS_FACILITY_NOTIFY = WS_FACILITY_NOTIFY;
+const WS_HEARTBEAT_MESSAGE = '--1a61c1de89b75ddfbb684b8d224ee3ae--';
+exports.WS_HEARTBEAT_MESSAGE = WS_HEARTBEAT_MESSAGE;

package/lib/cjs/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/cjs/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
+  };
+}