@selfcommunity/react-core 0.1.2-alpha.0

package/lib/esm/hooks/useSCFetchCategories.js

@@ -0,0 +1,71 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = require("react");
+
+var _Errors = require("../constants/Errors");
+
+var _apiServices = require("@selfcommunity/api-services");
+
+var _logger = require("../utils/logger");
+
+var _reactSingletonHook = require("react-singleton-hook");
+
+const init = {
+  categories: [],
+  isLoading: true
+};
+/**
+ :::info
+ This custom hook is used to fetch categories.
+
+ :::tipContext can be consumed in this way:
+
+ ```jsx
+ const {categories, isLoading} = useSCFetchCategories();
+ ```
+ :::
+ */
+
+const useSCFetchCategories = (0, _reactSingletonHook.singletonHook)(init, () => {
+  const [data, setData] = (0, _react.useState)(init);
+  /**
+   * Fetch categories
+   */
+
+  const fetchCategories = async (next = _apiServices.Endpoints.CategoryList.url()) => {
+    const response = await _apiServices.http.request({
+      url: next,
+      method: _apiServices.Endpoints.CategoryList.method
+    });
+    const data = response.data;
+
+    if (data.next) {
+      return data.results.concat(await fetchCategories(data.next));
+    }
+
+    return data.results;
+  };
+  /**
+   * Get categories
+   */
+
+
+  (0, _react.useEffect)(() => {
+    fetchCategories().then(data => {
+      setData({
+        categories: data,
+        isLoading: false
+      });
+    }).catch(error => {
+      console.log(error);
+
+      _logger.Logger.error(_Errors.SCOPE_SC_CORE, 'Unable to retrieve categories');
+    });
+  }, []);
+  return data;
+});
+var _default = useSCFetchCategories;
+exports.default = _default;

package/lib/esm/hooks/useSCFetchCategory.js

@@ -0,0 +1,68 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = useSCFetchCategory;
+
+var _react = require("react");
+
+var _Errors = require("../constants/Errors");
+
+var _apiServices = require("@selfcommunity/api-services");
+
+var _logger = require("../utils/logger");
+
+/**
+ :::info
+ This custom hook is used to fetch a category object.
+ :::
+ * @param object
+ * @param object.id
+ * @param object.category
+ */
+function useSCFetchCategory({
+  id = null,
+  category = null
+}) {
+  const [scCategory, setSCCategory] = (0, _react.useState)(category);
+  const [error, setError] = (0, _react.useState)(null);
+  /**
+   * Memoized fetchTag
+   */
+
+  const fetchCategory = (0, _react.useMemo)(() => () => {
+    return _apiServices.http.request({
+      url: _apiServices.Endpoints.Category.url({
+        id: id
+      }),
+      method: _apiServices.Endpoints.Category.method
+    }).then(res => {
+      if (res.status >= 300) {
+        return Promise.reject(res);
+      }
+
+      return Promise.resolve(res.data);
+    });
+  }, [id]);
+  /**
+   * If id attempt to get the category by id
+   */
+
+  (0, _react.useEffect)(() => {
+    if (id) {
+      fetchCategory().then(obj => {
+        setSCCategory(obj);
+      }).catch(err => {
+        setError(`Category with id ${id} not found`);
+
+        _logger.Logger.error(_Errors.SCOPE_SC_CORE, `Category with id ${id} not found`);
+
+        _logger.Logger.error(_Errors.SCOPE_SC_CORE, err.message);
+      });
+    }
+  }, [id]);
+  return {
+    scCategory,
+    setSCCategory,
+    error
+  };
+}

package/lib/esm/hooks/useSCFetchCommentObject.js

@@ -0,0 +1,68 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = useSCFetchCommentObject;
+
+var _react = require("react");
+
+var _Errors = require("../constants/Errors");
+
+var _apiServices = require("@selfcommunity/api-services");
+
+var _logger = require("../utils/logger");
+
+/**
+ :::info
+ This custom hooks is used to fetch a comment.
+ :::
+ * @param object
+ * @param object.id
+ * @param object.commentObject
+ */
+function useSCFetchCommentObject({
+  id = null,
+  commentObject = null
+}) {
+  const [obj, setObj] = (0, _react.useState)(commentObject);
+  const [error, setError] = (0, _react.useState)(null);
+  /**
+   * Memoized fetchCommentObject
+   */
+
+  const fetchCommentObject = (0, _react.useMemo)(() => () => {
+    return _apiServices.http.request({
+      url: _apiServices.Endpoints.Comment.url({
+        id: id
+      }),
+      method: _apiServices.Endpoints.Comment.method
+    }).then(res => {
+      if (res.status >= 300) {
+        return Promise.reject(res);
+      }
+
+      return Promise.resolve(res.data);
+    });
+  }, [id]);
+  /**
+   * If id and feedObjectType resolve feddObject
+   */
+
+  (0, _react.useEffect)(() => {
+    if (id) {
+      fetchCommentObject().then(obj => {
+        setObj(obj);
+      }).catch(err => {
+        setError(`CommentObject with id ${id} not found`);
+
+        _logger.Logger.error(_Errors.SCOPE_SC_CORE, `CommentObject with id ${id} not found`);
+
+        _logger.Logger.error(_Errors.SCOPE_SC_CORE, err.message);
+      });
+    }
+  }, [id]);
+  return {
+    obj,
+    setObj,
+    error
+  };
+}

package/lib/esm/hooks/useSCFetchCommentObjects.js

@@ -0,0 +1,296 @@
+"use strict";
+
+exports.__esModule = true;
+exports.commentsObjectActionTypes = void 0;
+exports.default = useSCFetchCommentObjects;
+
+var _react = require("react");
+
+var _Errors = require("../constants/Errors");
+
+var _types = require("@selfcommunity/types");
+
+var _apiServices = require("@selfcommunity/api-services");
+
+var _logger = require("../utils/logger");
+
+var _useSCFetchFeedObject = _interopRequireDefault(require("./useSCFetchFeedObject"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * @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 commentsObjectActionTypes = {
+  LOADING_NEXT: '_loading_next',
+  LOADING_PREVIOUS: '_loading_previous',
+  DATA_NEXT_LOADED: '_data_next_loaded',
+  DATA_PREVIOUS_LOADED: '_data_previous_loaded',
+  DATA_RELOAD: '_data_reload',
+  DATA_RELOADED: '_data_reloaded'
+};
+/**
+ * commentsReducer:
+ *  - manage the state of comments object
+ *  - update the state base on action type
+ * @param state
+ * @param action
+ */
+
+exports.commentsObjectActionTypes = commentsObjectActionTypes;
+
+function commentsReducer(state, action) {
+  switch (action.type) {
+    case commentsObjectActionTypes.LOADING_NEXT:
+      return Object.assign({}, state, {
+        isLoadingNext: true,
+        isLoadingPrevious: false
+      });
+
+    case commentsObjectActionTypes.LOADING_PREVIOUS:
+      return Object.assign({}, state, {
+        isLoadingNext: false,
+        isLoadingPrevious: true
+      });
+
+    case commentsObjectActionTypes.DATA_NEXT_LOADED:
+      return Object.assign({}, state, {
+        page: action.payload.currentPage,
+        comments: action.payload.comments,
+        isLoadingNext: false,
+        componentLoaded: true,
+        next: action.payload.next
+      }, action.payload.previous ? {
+        previous: action.payload.previous
+      } : {}, action.payload.total ? {
+        total: action.payload.total
+      } : {});
+
+    case commentsObjectActionTypes.DATA_PREVIOUS_LOADED:
+      return Object.assign({}, state, {
+        page: action.payload.currentPage,
+        comments: action.payload.comments,
+        isLoadingPrevious: false,
+        previous: action.payload.previous
+      });
+
+    case commentsObjectActionTypes.DATA_RELOAD:
+      return Object.assign({}, state, {
+        next: action.payload.next,
+        comments: [],
+        total: 0,
+        previous: null,
+        reload: true
+      });
+
+    case commentsObjectActionTypes.DATA_RELOADED:
+      return Object.assign({}, state, {
+        componentLoaded: false,
+        reload: false
+      });
+
+    default:
+      throw new Error(`Unhandled type: ${action.type}`);
+  }
+}
+/**
+ * Define initial state
+ * @param data
+ */
+
+
+function stateInitializer(data) {
+  return {
+    componentLoaded: false,
+    comments: [],
+    total: 0,
+    next: data.next,
+    previous: null,
+    isLoadingNext: false,
+    isLoadingPrevious: false,
+    page: data.offset / data.pageSize + 1,
+    reload: false
+  };
+}
+/**
+ :::info
+ This custom hooks is used to fetch paginated comments.
+ :::
+ * @param id
+ * @param feedObject
+ * @param feedObjectType
+ * @param offset
+ * @param pageSize
+ * @param orderBy
+ * @param parent
+ */
+
+
+function useSCFetchCommentObjects(props) {
+  // PROPS
+  const {
+    id,
+    feedObject,
+    feedObjectType,
+    offset = 0,
+    pageSize = 5,
+    orderBy = _types.SCCommentsOrderBy.ADDED_AT_DESC,
+    parent,
+    onChangePage
+  } = props; // FeedObject
+
+  const {
+    obj,
+    setObj
+  } = (0, _useSCFetchFeedObject.default)({
+    id,
+    feedObject,
+    feedObjectType
+  });
+  const objId = obj ? obj.id : null;
+  /**
+   * Get next url
+   */
+
+  const getNextUrl = () => {
+    const _offset = offset ? `&offset=${offset}` : '';
+
+    const _parent = parent ? `&parent=${parent}` : '';
+
+    const _objectId = obj ? obj.id : id;
+
+    const _typeObject = obj ? obj.type : feedObjectType;
+
+    return `${_apiServices.Endpoints.Comments.url()}?${_typeObject}=${_objectId}&limit=${pageSize}&ordering=${orderBy}${_offset}${_parent}`;
+  }; // STATE
+
+
+  const [state, dispatch] = (0, _react.useReducer)(commentsReducer, {}, () => stateInitializer({
+    offset,
+    pageSize,
+    next: getNextUrl()
+  }));
+  /**
+   * Calculate current page
+   */
+
+  const getCurrentPage = url => {
+    const urlSearchParams = new URLSearchParams(url);
+    const params = Object.fromEntries(urlSearchParams.entries());
+    const currentOffset = params.offset ? parseInt(params.offset) : 0;
+    return currentOffset / pageSize + 1;
+  };
+  /**
+   * Get Comments
+   */
+
+
+  const performFetchComments = url => {
+    return _apiServices.http.request({
+      url,
+      method: _apiServices.Endpoints.Comments.method
+    }).then(res => {
+      if (res.status >= 300) {
+        return Promise.reject(res);
+      }
+
+      return Promise.resolve(res.data);
+    });
+  };
+  /**
+   * Fetch previous comments
+   */
+
+
+  function getPreviousPage() {
+    if (obj && state.previous && !state.isLoadingPrevious) {
+      dispatch({
+        type: commentsObjectActionTypes.LOADING_PREVIOUS
+      });
+      performFetchComments(state.previous).then(res => {
+        let currentPage = getCurrentPage(state.previous);
+        dispatch({
+          type: commentsObjectActionTypes.DATA_PREVIOUS_LOADED,
+          payload: {
+            page: currentPage,
+            comments: [...res.results, ...state.comments],
+            previous: res.previous
+          }
+        });
+        onChangePage && onChangePage(currentPage);
+      }).catch(error => {
+        _logger.Logger.error(_Errors.SCOPE_SC_CORE, error);
+      });
+    }
+  }
+  /**
+   * Fetch next comments
+   */
+
+
+  function getNextPage() {
+    if (obj && state.next && !state.isLoadingNext) {
+      dispatch({
+        type: commentsObjectActionTypes.LOADING_NEXT
+      });
+      performFetchComments(state.next).then(res => {
+        let currentPage = getCurrentPage(state.next);
+        dispatch({
+          type: commentsObjectActionTypes.DATA_NEXT_LOADED,
+          payload: Object.assign({
+            page: currentPage,
+            comments: [...state.comments, ...res.results],
+            next: res.next,
+            total: res.count,
+            componentLoaded: true
+          }, offset && state.comments.length === 0 ? {
+            previous: res.previous
+          } : {})
+        });
+        onChangePage && onChangePage(currentPage);
+      }).catch(error => {
+        _logger.Logger.error(_Errors.SCOPE_SC_CORE, error);
+      });
+    }
+  }
+  /**
+   * Reset component status on change orderBy, pageSize, offset
+   */
+
+
+  (0, _react.useEffect)(() => {
+    if (state.componentLoaded && Boolean(obj) && !state.reload) {
+      dispatch({
+        type: commentsObjectActionTypes.DATA_RELOAD,
+        payload: {
+          next: getNextUrl()
+        }
+      });
+    }
+  }, [objId, parent, orderBy, pageSize, offset]);
+  /**
+   * Reload fetch comments
+   */
+
+  (0, _react.useEffect)(() => {
+    if (state.componentLoaded && state.reload && !state.isLoadingNext && !state.isLoadingPrevious) {
+      dispatch({
+        type: commentsObjectActionTypes.DATA_RELOADED
+      });
+      getNextPage();
+    }
+  }, [state.reload]);
+  return Object.assign({
+    feedObject: obj,
+    setFeedObject: setObj
+  }, state, {
+    pageSize,
+    getNextPage,
+    getPreviousPage,
+    orderBy
+  });
+}

package/lib/esm/hooks/useSCFetchCustomAdv.js

@@ -0,0 +1,84 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = useSCFetchCustomAdv;
+
+var _react = require("react");
+
+var _Errors = require("../constants/Errors");
+
+var _apiServices = require("@selfcommunity/api-services");
+
+var _logger = require("../utils/logger");
+
+/**
+ :::info
+ This custom hook is used to fetch a custom adv object.
+ :::
+ * @param object
+ * @param object.position
+ * @param object.categoryId
+ */
+function useSCFetchCustomAdv({
+  position = null,
+  categoriesId = null
+}) {
+  const [scCustomAdv, setSCCustomAdv] = (0, _react.useState)(null);
+  const [error, setError] = (0, _react.useState)(null);
+  const mounted = (0, _react.useRef)(false);
+  /**
+   * Memoized fetchCustomAdv
+   */
+
+  const fetchCustomAdv = (0, _react.useMemo)(() => () => {
+    return _apiServices.http.request({
+      url: _apiServices.Endpoints.CustomAdvSearch.url(),
+      method: _apiServices.Endpoints.CustomAdvSearch.method,
+      params: Object.assign({}, position && {
+        position: position
+      }, categoriesId && {
+        categories: `[${categoriesId.toString()}]`
+      })
+    }).then(res => {
+      if (res.status >= 300) {
+        return Promise.reject(res);
+      }
+
+      return Promise.resolve(res.data.results);
+    });
+  }, [position, `${categoriesId}`]);
+  /**
+   * Track mount/unmount
+   */
+
+  (0, _react.useEffect)(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  /**
+   * If id attempt to get the category by id
+   */
+
+  (0, _react.useEffect)(() => {
+    fetchCustomAdv().then(objects => {
+      if (mounted.current) {
+        setSCCustomAdv(objects[Math.floor(Math.random() * objects.length)]);
+      }
+    }).catch(err => {
+      if (mounted.current) {
+        setError(`Custom ADV with position ${position} not found`);
+      }
+
+      _logger.Logger.error(_Errors.SCOPE_SC_CORE, `Custom ADV with position ${position} not found`);
+
+      _logger.Logger.error(_Errors.SCOPE_SC_CORE, err.message);
+    });
+  }, [position, `${categoriesId}`]);
+  return {
+    scCustomAdv,
+    setSCCustomAdv,
+    error
+  };
+}

package/lib/esm/hooks/useSCFetchFeedObject.js

@@ -0,0 +1,79 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = useSCFetchFeedObject;
+
+var _react = require("react");
+
+var _apiServices = require("@selfcommunity/api-services");
+
+var _logger = require("../utils/logger");
+
+var _Errors = require("../constants/Errors");
+
+var _types = require("@selfcommunity/types");
+
+var _useDeepCompareEffect = require("use-deep-compare-effect");
+
+/**
+ :::info
+ This custom hook is used to fetch a feed object.
+ :::
+ * @param object
+ * @param object.id
+ * @param object.feedObject
+ * @param object.feedObjectType
+ */
+function useSCFetchFeedObject({
+  id = null,
+  feedObject = null,
+  feedObjectType = _types.SCFeedObjectTypologyType.POST || _types.SCFeedObjectTypologyType.DISCUSSION || _types.SCFeedObjectTypologyType.STATUS
+}) {
+  const [obj, setObj] = (0, _react.useState)(feedObject);
+  const [error, setError] = (0, _react.useState)(null);
+  /**
+   * Memoized fetchFeedObject
+   */
+
+  const fetchFeedObject = () => {
+    return _apiServices.http.request({
+      url: _apiServices.Endpoints.FeedObject.url({
+        type: feedObjectType,
+        id: id
+      }),
+      method: _apiServices.Endpoints.FeedObject.method
+    }).then(res => {
+      if (res.status >= 300) {
+        return Promise.reject(res);
+      }
+
+      return Promise.resolve(res.data);
+    });
+  };
+  /**
+   * If id and feedObjectType resolve feddObject
+   */
+
+
+  (0, _react.useEffect)(() => {
+    if (id && feedObjectType) {
+      fetchFeedObject().then(obj => {
+        setObj(obj);
+      }).catch(err => {
+        setError(`FeedObject with id ${id} not found`);
+
+        _logger.Logger.error(_Errors.SCOPE_SC_CORE, `FeedObject with id ${id} not found`);
+
+        _logger.Logger.error(_Errors.SCOPE_SC_CORE, err.message);
+      });
+    }
+  }, [id, feedObjectType]);
+  (0, _useDeepCompareEffect.useDeepCompareEffectNoCheck)(() => {
+    setObj(feedObject);
+  }, [feedObject]);
+  return {
+    obj,
+    setObj,
+    error
+  };
+}