@selfcommunity/react-templates
Version:
React Templates Components to integrate a Community created with SelfCommunity.
259 lines (252 loc) • 12.9 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 material_1 = require("@mui/material");
const react_ui_1 = require("@selfcommunity/react-ui");
const UserFeed_1 = tslib_1.__importDefault(require("../UserFeed"));
const react_core_1 = require("@selfcommunity/react-core");
const types_1 = require("@selfcommunity/types");
const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const react_intl_1 = require("react-intl");
const system_1 = require("@mui/system");
const Skeleton_2 = tslib_1.__importDefault(require("../UserFeed/Skeleton"));
const constants_1 = require("./constants");
const classes = {
root: `${constants_1.PREFIX}-root`,
counters: `${constants_1.PREFIX}-counters`,
tags: `${constants_1.PREFIX}-tags`,
info: `${constants_1.PREFIX}-info`,
feed: `${constants_1.PREFIX}-feed`,
actions: `${constants_1.PREFIX}-actions`
};
const Root = (0, material_1.styled)(material_1.Box, {
name: constants_1.PREFIX,
slot: 'Root'
})(() => ({}));
const WIDGETS_FOLLOWERS = [
{
type: 'widget',
component: react_ui_1.UserLiveStreamWidget,
componentProps: {},
column: 'right',
position: 0
},
{
type: 'widget',
component: react_ui_1.UserFollowedCategoriesWidget,
componentProps: {},
column: 'right',
position: 1
},
{
type: 'widget',
component: react_ui_1.UserFollowedUsersWidget,
componentProps: {},
column: 'right',
position: 2
},
{
type: 'widget',
component: react_ui_1.UserFollowersWidget,
componentProps: {},
column: 'right',
position: 3
},
{
type: 'widget',
component: react_ui_1.UserSubscribedGroupsWidget,
componentProps: {},
column: 'right',
position: 4
},
{
type: 'widget',
component: react_ui_1.UserCreatedCoursesWidget,
componentProps: {},
column: 'right',
position: 5
}
];
const WIDGETS_FOLLOWERS_MY_PROFILE = [
{
type: 'widget',
component: react_ui_1.LoyaltyProgramWidget,
componentProps: {},
column: 'right',
position: -1
}
];
const WIDGETS_CONNECTIONS = [
{
type: 'widget',
component: react_ui_1.UserLiveStreamWidget,
componentProps: {},
column: 'right',
position: 0
},
{
type: 'widget',
component: react_ui_1.UserFollowedCategoriesWidget,
componentProps: {},
column: 'right',
position: 1
},
{
type: 'widget',
component: react_ui_1.UserConnectionsWidget,
componentProps: {},
column: 'right',
position: 2
},
{
type: 'widget',
component: react_ui_1.UserSubscribedGroupsWidget,
componentProps: {},
column: 'right',
position: 3
}
];
const WIDGETS_CONNECTIONS_MY_PROFILE = [
{
type: 'widget',
component: react_ui_1.LoyaltyProgramWidget,
componentProps: {},
column: 'right',
position: -1
},
{
type: 'widget',
component: react_ui_1.UserConnectionsRequestsWidget,
componentProps: { autoHide: true },
column: 'right',
position: 2
},
{
type: 'widget',
component: react_ui_1.UserConnectionsRequestsSentWidget,
componentProps: { autoHide: true },
column: 'right',
position: 3
}
];
/**
* > API documentation for the Community-JS User Profile Template. Learn about the available props and the CSS API.
*
*
* This component renders a specific user's profile template.
* Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-templates/Components/UserProfile)
#### Import
```jsx
import {UserProfile} from '@selfcommunity/react-templates';
```
#### Component Name
The name `SCUserProfileTemplate` can be used when providing style overrides in the theme.
#### CSS
|Rule Name|Global class|Description|
|---|---|---|
|root|.SCUserProfileTemplate-root|Styles applied to the root element.|
|counters|.SCUserProfileTemplate-counters|Styles applied to the counters section.|
|tags|.SCUserProfileTemplate-tags|Styles applied to the tags section.|
|info|.SCUserProfileTemplate-info|Styles applied to the info section.|
|feed|.SCUserProfileTemplate-feed|Styles applied to the feed section.|
|actions|.SCUserProfileTemplate-actions|Styles applied to the actions section.|
*
* @param inProps
*/
function UserProfile(inProps) {
// PROPS
const props = (0, system_1.useThemeProps)({
props: inProps,
name: constants_1.PREFIX
});
const { id = 'user_profile', className, user, userId, startActions = null, endActions = null, viewStartActions = null, viewEndActions = null, editStartActions = null, editEndActions = null, widgets = null, FeedObjectProps, FeedSidebarProps, UserProfileHeaderProps = {}, onEditClick = null, UserFeedProps = {} } = props;
// CONTEXT
const scUserContext = (0, react_core_1.useSCUser)();
const scPreferencesContext = (0, react_core_1.useSCPreferences)();
const scRoutingContext = (0, react_core_1.useSCRouting)();
const { features } = (0, react_core_1.useSCPreferences)();
// STATE
const [isConnection, setIsConnection] = (0, react_1.useState)(undefined);
// HOOKS
const { scUser } = (0, react_core_1.useSCFetchUser)({ id: userId, user });
const { blockedBy, loading: loadingBlockedBy } = (0, react_core_1.useSCFetchUserBlockedBy)({ user: scUser });
const intl = (0, react_intl_1.useIntl)();
// MEMO
const taggingEnabled = (0, react_1.useMemo)(() => features.includes(types_1.SCFeatureName.TAGGING), [features]);
const isMe = (0, react_1.useMemo)(() => scUserContext.user && (scUser === null || scUser === void 0 ? void 0 : scUser.id) === scUserContext.user.id, [scUserContext.user, scUser]);
const followEnabled = (0, react_1.useMemo)(() => react_core_1.SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED in scPreferencesContext.preferences &&
scPreferencesContext.preferences[react_core_1.SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED].value, [scPreferencesContext.preferences]);
const privateMessagingEnabled = (0, react_1.useMemo)(() => features.includes(types_1.SCFeatureName.PRIVATE_MESSAGING), [features]);
const _widgets = (0, react_1.useMemo)(() => {
var _a, _b;
if (widgets !== null) {
return widgets;
}
if (!scUser) {
return [];
}
let _widgets = [];
if (followEnabled && ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) === scUser.id) {
_widgets = [...WIDGETS_FOLLOWERS, ...WIDGETS_FOLLOWERS_MY_PROFILE];
}
else if (followEnabled) {
_widgets = [...WIDGETS_FOLLOWERS];
}
else if (!followEnabled && ((_b = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _b === void 0 ? void 0 : _b.id) === scUser.id) {
_widgets = [...WIDGETS_CONNECTIONS, ...WIDGETS_CONNECTIONS_MY_PROFILE];
}
else {
_widgets = [...WIDGETS_CONNECTIONS];
}
return _widgets.map((w) => (Object.assign(Object.assign({}, w), { componentProps: Object.assign(Object.assign({}, w.componentProps), { userId: scUser.id }) })));
}, [widgets, followEnabled, scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user, scUser]);
/**
* Check if the authenticated user is connected (follow/friend) to the profile user
*/
(0, react_1.useEffect)(() => {
if (user && Object.is(isConnection !== null && isConnection !== void 0 ? isConnection : null, null)) {
if (isMe) {
setIsConnection(false);
}
else if (followEnabled && scUserContext.managers.followers.isFollower) {
setIsConnection(scUserContext.managers.followers.isFollower(user));
}
else if (!followEnabled && scUserContext.managers.connections.status) {
setIsConnection(scUserContext.managers.connections.status(user) === 'connected');
}
}
}, [isConnection, scUserContext.managers.followers, scUserContext.managers.connections, followEnabled, isMe, user, scUserContext.user]);
if (!scUser) {
return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
}
// HANDLERS
const handleEdit = () => {
onEditClick && onEditClick(scUser);
};
// RENDER
if (!isMe) {
UserFeedProps.FeedProps = Object.assign({ HeaderComponent: null }, UserFeedProps.FeedProps);
}
let actionItems = [];
if (privateMessagingEnabled && !isMe && user && user.can_send_pm_to) {
actionItems = [
{
label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "templates.userProfile.send.pm", id: "templates.userProfile.send.pm" }),
to: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, scUser)
}
];
}
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(react_ui_1.UserProfileHeader, Object.assign({ user: scUser }, UserProfileHeaderProps, { actions: !isMe && scUser && Boolean((scUserContext.user && scUserContext.managers.blockedUsers.isBlocked(scUser)) || blockedBy) ? null : ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 2, className: classes.actions }, { children: [startActions, isMe ? editStartActions : viewStartActions, isMe ? ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", color: "secondary", onClick: handleEdit }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "templates.userProfile.edit", id: "templates.userProfile.edit" }) }))) : ((0, jsx_runtime_1.jsx)(react_ui_1.ConnectionUserButton, { user: scUser })), isMe ? editEndActions : viewEndActions, endActions, (0, jsx_runtime_1.jsx)(react_ui_1.UserActionIconButton, { user: scUser, items: actionItems })] }), `actions_${scUser.id}`)) })), scUserContext.user === undefined ||
(scUserContext.user && ((loadingBlockedBy && blockedBy === null) || scUserContext.managers.blockedUsers.isLoading())) ? ((0, jsx_runtime_1.jsx)(Skeleton_2.default, {})) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loadingBlockedBy || (scUserContext.user && scUserContext.managers.blockedUsers.loading) ? null : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !isMe && scUser && Boolean((scUserContext.user && scUserContext.managers.blockedUsers.isBlocked(scUser)) || blockedBy) ? ((0, jsx_runtime_1.jsx)(react_ui_1.UserProfileBlocked, { user: scUser, blockedByUser: blockedBy })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_ui_1.UserCounters, { className: classes.counters, userId: userId, user: scUser }), scUser.date_joined && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.info }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.userProfile.dateJoined", defaultMessage: "templates.userProfile.dateJoined", values: {
date: intl.formatDate(scUser.date_joined, {
year: 'numeric',
month: 'long'
})
} }) }))), scUser.location && ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.info }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add_location_alt" }), " ", scUser.location] }))), taggingEnabled && ((0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "row", spacing: 2, className: classes.tags }, { children: scUser.tags
.filter((t) => t.visible)
.map((tag) => ((0, jsx_runtime_1.jsx)(react_ui_1.TagChip, { tag: tag, clickable: false, disposable: false }, tag.id))) }), `tags_${scUser.id}`)), (0, jsx_runtime_1.jsx)(UserFeed_1.default, Object.assign({ className: classes.feed, user: scUser, widgets: _widgets, FeedObjectProps: FeedObjectProps, FeedSidebarProps: FeedSidebarProps }, UserFeedProps), `feed_${scUser.id}`)] })) })) }))] })));
}
exports.default = UserProfile;