@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
64 lines (63 loc) • 3.92 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_intl_1 = require("react-intl");
const material_1 = require("@mui/material");
const InfiniteScroll_1 = tslib_1.__importDefault(require("../../../../../shared/InfiniteScroll"));
const Typography_1 = tslib_1.__importDefault(require("@mui/material/Typography"));
const api_services_1 = require("@selfcommunity/api-services");
const utils_1 = require("@selfcommunity/utils");
const react_core_1 = require("@selfcommunity/react-core");
const types_1 = require("@selfcommunity/types");
const Errors_1 = require("../../../../../constants/Errors");
const BaseDialog_1 = tslib_1.__importDefault(require("../../../../../shared/BaseDialog"));
const CentralProgress_1 = tslib_1.__importDefault(require("../../../../../shared/CentralProgress"));
const User_1 = tslib_1.__importDefault(require("../../../../User"));
function SharesDialog(props) {
// PROPS
const { id = null, feedObject = null, feedObjectType = feedObject ? feedObject.type : types_1.SCContributionType.POST, open = false, onClose = null } = props, rest = tslib_1.__rest(props, ["id", "feedObject", "feedObjectType", "open", "onClose"]);
// STATE
const { obj, setObj } = (0, react_core_1.useSCFetchFeedObject)({ id, feedObject, feedObjectType });
const [isLoading, setIsLoading] = (0, react_1.useState)(Boolean((id && feedObjectType) || feedObject));
const [shares, setShares] = (0, react_1.useState)([]);
const [next, setNext] = (0, react_1.useState)(id && feedObjectType
? `${api_services_1.Endpoints.ShareUsersList.url({ type: feedObjectType, id: id })}`
: feedObject && feedObjectType
? `${api_services_1.Endpoints.ShareUsersList.url({ type: feedObjectType, id: feedObject.id })}`
: null);
/**
* On mount, fetches shares
*/
(0, react_1.useEffect)(() => {
if (obj && next) {
fetchShares();
}
}, [`${obj}`]);
/**
* Fetches shares
*/
function fetchShares() {
setIsLoading(true);
api_services_1.http
.request({
url: next,
method: api_services_1.Endpoints.ShareUsersList.method
})
.then((res) => {
const data = res.data;
setShares([...shares, ...data.results]);
setIsLoading(false);
setNext(data.next !== null ? data.next : null);
})
.catch((error) => {
utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
});
}
/**
* Renders shares dialog
*/
return ((0, jsx_runtime_1.jsx)(BaseDialog_1.default, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.feedObject.sharesDialog.title", id: "ui.feedObject.sharesDialog.title" }), onClose: onClose, open: open }, rest, { children: isLoading ? ((0, jsx_runtime_1.jsx)(CentralProgress_1.default, { size: 50 })) : ((0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: shares.length, next: fetchShares, hasMoreNext: next !== null, loaderNext: (0, jsx_runtime_1.jsx)(CentralProgress_1.default, { size: 30 }), height: 400, endMessage: (0, jsx_runtime_1.jsx)(Typography_1.default, Object.assign({ variant: "body2", align: "center", fontWeight: "bold" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.feedObject.sharesDialog.noOtherLikes", defaultMessage: "ui.feedObject.sharesDialog.noOtherLikes" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: shares.slice(0, 4).map((user, index) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, user: user }, index) }, user.id))) }) }))) })));
}
exports.default = SharesDialog;