@selfcommunity/react-ui 0.7.9 → 0.7.10-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -14,6 +14,7 @@ const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
14
14
  const react_core_1 = require("@selfcommunity/react-core");
15
15
  const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
16
16
  const PubSub_1 = require("../../constants/PubSub");
17
+ const User_1 = tslib_1.__importDefault(require("../User"));
17
18
  const classes = {
18
19
  root: `${constants_1.PREFIX}-root`,
19
20
  title: `${constants_1.PREFIX}-title`,
@@ -58,6 +59,7 @@ const Root = (0, styles_1.styled)(Widget_1.default, {
58
59
  * @param inProps
59
60
  */
60
61
  function GroupInfoWidget(inProps) {
62
+ var _a;
61
63
  // PROPS
62
64
  const props = (0, system_1.useThemeProps)({
63
65
  props: inProps,
@@ -147,8 +149,8 @@ function GroupInfoWidget(inProps) {
147
149
  react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupInfoWidget.admin", defaultMessage: "ui.groupInfoWidget.admin", values: {
148
150
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
149
151
  // @ts-ignore
150
- b: (chunks) => react_1.default.createElement("strong", null, chunks),
151
- admin: scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by.username
152
- } })))));
152
+ b: (chunks) => react_1.default.createElement("strong", null, chunks)
153
+ } }),
154
+ react_1.default.createElement(User_1.default, { userId: (_a = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _a === void 0 ? void 0 : _a.id, elevation: 0, actions: react_1.default.createElement(react_1.default.Fragment, null) })))));
153
155
  }
154
156
  exports.default = GroupInfoWidget;
@@ -21,7 +21,7 @@ export interface GroupsProps {
21
21
  general?: boolean;
22
22
  /**
23
23
  * Show/Hide filters
24
- * @default false
24
+ * @default true
25
25
  */
26
26
  showFilters?: boolean;
27
27
  /**
@@ -67,7 +67,7 @@ function Groups(inProps) {
67
67
  props: inProps,
68
68
  name: constants_1.PREFIX
69
69
  });
70
- const { endpointQueryParams = { limit: 20, offset: Pagination_1.DEFAULT_PAGINATION_OFFSET }, className, GroupComponentProps = { variant: 'outlined', ButtonBaseProps: { disableRipple: true, component: material_1.Box } }, showFilters = false, filters, general = true } = props, rest = tslib_1.__rest(props, ["endpointQueryParams", "className", "GroupComponentProps", "showFilters", "filters", "general"]);
70
+ const { endpointQueryParams = { limit: 20, offset: Pagination_1.DEFAULT_PAGINATION_OFFSET }, className, GroupComponentProps = { variant: 'outlined', ButtonBaseProps: { disableRipple: true, component: material_1.Box } }, showFilters = true, filters, general = true } = props, rest = tslib_1.__rest(props, ["endpointQueryParams", "className", "GroupComponentProps", "showFilters", "filters", "general"]);
71
71
  // STATE
72
72
  const [groups, setGroups] = (0, react_1.useState)([]);
73
73
  const [loading, setLoading] = (0, react_1.useState)(true);
@@ -156,7 +156,7 @@ function Groups(inProps) {
156
156
  */
157
157
  const filteredGroups = (0, utils_1.sortByAttr)(getFilteredGroups(), 'order');
158
158
  const content = (react_1.default.createElement(react_1.default.Fragment, null,
159
- showFilters && (react_1.default.createElement(material_1.Grid, { container: true, direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, filters ? (filters) : (react_1.default.createElement(material_1.Grid, { item: true, xs: 12, md: 6 },
159
+ showFilters && groups.length !== 0 && (react_1.default.createElement(material_1.Grid, { container: true, direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, filters ? (filters) : (react_1.default.createElement(material_1.Grid, { item: true, xs: 12, md: 6 },
160
160
  react_1.default.createElement(material_1.TextField, { fullWidth: true, value: search, label: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groups.filterByName", defaultMessage: "ui.groups.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }))))),
161
161
  react_1.default.createElement(react_1.default.Fragment, null, !groups.length ? (react_1.default.createElement(material_1.Box, { className: classes.noResults },
162
162
  react_1.default.createElement(material_1.Typography, { variant: "h4" },
@@ -129,7 +129,8 @@ function NavigationToolbar(inProps) {
129
129
  (preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && (react_1.default.createElement(material_1.IconButton, { className: (0, classnames_1.default)(classes.explore, { [classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {})) }), "aria-label": "Explore", to: scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {}), component: react_core_1.Link },
130
130
  react_1.default.createElement(Icon_1.default, null, "explore"))),
131
131
  groupsEnabled && scUserContext.user && (react_1.default.createElement(material_1.IconButton, { className: (0, classnames_1.default)(classes.groups, {
132
- [classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}))
132
+ [classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {})) ||
133
+ value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.GROUPS_ROUTE_NAME, {}))
133
134
  }), "aria-label": "Groups", to: scRoutingContext.url(react_core_1.SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), component: react_core_1.Link },
134
135
  react_1.default.createElement(Icon_1.default, null, "groups")))));
135
136
  return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest),
@@ -61,17 +61,26 @@ function GroupNotification(props) {
61
61
  ' ',
62
62
  react_1.default.createElement(react_intl_1.FormattedMessage, { id: `ui.notification.${notificationObject.type}`, defaultMessage: `ui.notification.${notificationObject.type}`, values: {
63
63
  group: notificationObject.group.name,
64
- link: (...chunks) => react_1.default.createElement(react_core_1.Link, { to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, notificationObject.group) }, chunks)
64
+ link: (...chunks) => (react_1.default.createElement(react_core_1.Link, { to: notificationObject.type === types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_GROUP ||
65
+ notificationObject.type === types_1.SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_GROUP
66
+ ? scRoutingContext.url(react_core_1.SCRoutes.GROUP_MEMBERS_ROUTE_NAME, notificationObject.group)
67
+ : scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, notificationObject.group) }, chunks))
65
68
  } })), footer: isToastTemplate && (react_1.default.createElement(material_1.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
66
69
  react_1.default.createElement(DateTimeAgo_1.default, { date: notificationObject.active_at }),
67
70
  status && status !== types_1.SCGroupSubscriptionStatusType.SUBSCRIBED && (react_1.default.createElement(material_1.Typography, { color: "primary" },
68
- react_1.default.createElement(react_core_1.Link, { to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, notificationObject.group) },
71
+ react_1.default.createElement(react_core_1.Link, { to: notificationObject.type === types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_GROUP ||
72
+ notificationObject.type === types_1.SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_GROUP
73
+ ? scRoutingContext.url(react_core_1.SCRoutes.GROUP_MEMBERS_ROUTE_NAME, notificationObject.group)
74
+ : scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, notificationObject.group) },
69
75
  react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.notification.group.button.see", defaultMessage: "ui.notification.group.button.see" })))))) }, rest)));
70
76
  }
71
77
  return (react_1.default.createElement(react_1.default.Fragment, null,
72
78
  react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, actions: react_1.default.createElement(material_1.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
73
79
  react_1.default.createElement(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.activeAt }),
74
- status && status !== types_1.SCGroupSubscriptionStatusType.SUBSCRIBED && (react_1.default.createElement(lab_1.LoadingButton, { color: 'primary', variant: "outlined", size: "small", classes: { root: classes.acceptButton }, component: react_core_1.Link, loading: scUserContext.user ? status === null || manager.isLoading(notificationObject.group) : null, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, notificationObject.group) },
80
+ status && status !== types_1.SCGroupSubscriptionStatusType.SUBSCRIBED && (react_1.default.createElement(lab_1.LoadingButton, { color: 'primary', variant: "outlined", size: "small", classes: { root: classes.acceptButton }, component: react_core_1.Link, loading: scUserContext.user ? status === null || manager.isLoading(notificationObject.group) : null, to: notificationObject.type === types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_GROUP ||
81
+ notificationObject.type === types_1.SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_GROUP
82
+ ? scRoutingContext.url(react_core_1.SCRoutes.GROUP_MEMBERS_ROUTE_NAME, notificationObject.group)
83
+ : scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, notificationObject.group) },
75
84
  react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.notification.group.button.see", defaultMessage: "ui.notification.group.button.see" })))) }, rest)),
76
85
  openAlert && react_1.default.createElement(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })));
77
86
  }
@@ -217,7 +217,10 @@ function UserNotification(inProps) {
217
217
  ' ',
218
218
  react_1.default.createElement(react_intl_1.FormattedMessage, { id: `ui.notification.${notificationObject.aggregated[0].type}`, defaultMessage: `ui.notification.${notificationObject.aggregated[0].type}`, values: {
219
219
  group: groupNotification.group.name,
220
- link: (...chunks) => react_1.default.createElement(react_core_1.Link, { to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, groupNotification.group) }, chunks)
220
+ link: (...chunks) => (react_1.default.createElement(react_core_1.Link, { to: notificationObject.aggregated[0].type === types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_GROUP ||
221
+ notificationObject.aggregated[0].type === types_1.SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_GROUP
222
+ ? scRoutingContext.url(react_core_1.SCRoutes.GROUP_MEMBERS_ROUTE_NAME, groupNotification.group)
223
+ : scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, groupNotification.group) }, chunks))
221
224
  } })) }));
222
225
  }
223
226
  /**
@@ -12,6 +12,7 @@ import PubSub from 'pubsub-js';
12
12
  import { useSCFetchGroup } from '@selfcommunity/react-core';
13
13
  import GroupInfoWidgetSkeleton from './Skeleton';
14
14
  import { SCEventType, SCTopicType } from '../../constants/PubSub';
15
+ import User from '../User';
15
16
  const classes = {
16
17
  root: `${PREFIX}-root`,
17
18
  title: `${PREFIX}-title`,
@@ -56,6 +57,7 @@ const Root = styled(Widget, {
56
57
  * @param inProps
57
58
  */
58
59
  export default function GroupInfoWidget(inProps) {
60
+ var _a;
59
61
  // PROPS
60
62
  const props = useThemeProps({
61
63
  props: inProps,
@@ -145,7 +147,7 @@ export default function GroupInfoWidget(inProps) {
145
147
  React.createElement(FormattedMessage, { id: "ui.groupInfoWidget.admin", defaultMessage: "ui.groupInfoWidget.admin", values: {
146
148
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
147
149
  // @ts-ignore
148
- b: (chunks) => React.createElement("strong", null, chunks),
149
- admin: scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by.username
150
- } })))));
150
+ b: (chunks) => React.createElement("strong", null, chunks)
151
+ } }),
152
+ React.createElement(User, { userId: (_a = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _a === void 0 ? void 0 : _a.id, elevation: 0, actions: React.createElement(React.Fragment, null) })))));
151
153
  }
@@ -21,7 +21,7 @@ export interface GroupsProps {
21
21
  general?: boolean;
22
22
  /**
23
23
  * Show/Hide filters
24
- * @default false
24
+ * @default true
25
25
  */
26
26
  showFilters?: boolean;
27
27
  /**
@@ -65,7 +65,7 @@ export default function Groups(inProps) {
65
65
  props: inProps,
66
66
  name: PREFIX
67
67
  });
68
- const { endpointQueryParams = { limit: 20, offset: DEFAULT_PAGINATION_OFFSET }, className, GroupComponentProps = { variant: 'outlined', ButtonBaseProps: { disableRipple: true, component: Box } }, showFilters = false, filters, general = true } = props, rest = __rest(props, ["endpointQueryParams", "className", "GroupComponentProps", "showFilters", "filters", "general"]);
68
+ const { endpointQueryParams = { limit: 20, offset: DEFAULT_PAGINATION_OFFSET }, className, GroupComponentProps = { variant: 'outlined', ButtonBaseProps: { disableRipple: true, component: Box } }, showFilters = true, filters, general = true } = props, rest = __rest(props, ["endpointQueryParams", "className", "GroupComponentProps", "showFilters", "filters", "general"]);
69
69
  // STATE
70
70
  const [groups, setGroups] = useState([]);
71
71
  const [loading, setLoading] = useState(true);
@@ -154,7 +154,7 @@ export default function Groups(inProps) {
154
154
  */
155
155
  const filteredGroups = sortByAttr(getFilteredGroups(), 'order');
156
156
  const content = (React.createElement(React.Fragment, null,
157
- showFilters && (React.createElement(Grid, { container: true, direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, filters ? (filters) : (React.createElement(Grid, { item: true, xs: 12, md: 6 },
157
+ showFilters && groups.length !== 0 && (React.createElement(Grid, { container: true, direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, filters ? (filters) : (React.createElement(Grid, { item: true, xs: 12, md: 6 },
158
158
  React.createElement(TextField, { fullWidth: true, value: search, label: React.createElement(FormattedMessage, { id: "ui.groups.filterByName", defaultMessage: "ui.groups.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }))))),
159
159
  React.createElement(React.Fragment, null, !groups.length ? (React.createElement(Box, { className: classes.noResults },
160
160
  React.createElement(Typography, { variant: "h4" },
@@ -127,7 +127,8 @@ export default function NavigationToolbar(inProps) {
127
127
  (preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && (React.createElement(IconButton, { className: classNames(classes.explore, { [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {})) }), "aria-label": "Explore", to: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), component: Link },
128
128
  React.createElement(Icon, null, "explore"))),
129
129
  groupsEnabled && scUserContext.user && (React.createElement(IconButton, { className: classNames(classes.groups, {
130
- [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}))
130
+ [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {})) ||
131
+ value.startsWith(scRoutingContext.url(SCRoutes.GROUPS_ROUTE_NAME, {}))
131
132
  }), "aria-label": "Groups", to: scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), component: Link },
132
133
  React.createElement(Icon, null, "groups")))));
133
134
  return (React.createElement(Root, Object.assign({ className: classNames(className, classes.root) }, rest),
@@ -3,7 +3,7 @@ import React, { useContext, useEffect, useState } from 'react';
3
3
  import { styled } from '@mui/material/styles';
4
4
  import { Avatar, Box, Stack, Typography } from '@mui/material';
5
5
  import { Link, SCRoutes, SCUserContext, useSCRouting } from '@selfcommunity/react-core';
6
- import { SCGroupSubscriptionStatusType } from '@selfcommunity/types';
6
+ import { SCGroupSubscriptionStatusType, SCNotificationTypologyType } from '@selfcommunity/types';
7
7
  import { FormattedMessage } from 'react-intl';
8
8
  import DateTimeAgo from '../../../shared/DateTimeAgo';
9
9
  import classNames from 'classnames';
@@ -59,17 +59,26 @@ export default function GroupNotification(props) {
59
59
  ' ',
60
60
  React.createElement(FormattedMessage, { id: `ui.notification.${notificationObject.type}`, defaultMessage: `ui.notification.${notificationObject.type}`, values: {
61
61
  group: notificationObject.group.name,
62
- link: (...chunks) => React.createElement(Link, { to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, notificationObject.group) }, chunks)
62
+ link: (...chunks) => (React.createElement(Link, { to: notificationObject.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_GROUP ||
63
+ notificationObject.type === SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_GROUP
64
+ ? scRoutingContext.url(SCRoutes.GROUP_MEMBERS_ROUTE_NAME, notificationObject.group)
65
+ : scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, notificationObject.group) }, chunks))
63
66
  } })), footer: isToastTemplate && (React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
64
67
  React.createElement(DateTimeAgo, { date: notificationObject.active_at }),
65
68
  status && status !== SCGroupSubscriptionStatusType.SUBSCRIBED && (React.createElement(Typography, { color: "primary" },
66
- React.createElement(Link, { to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, notificationObject.group) },
69
+ React.createElement(Link, { to: notificationObject.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_GROUP ||
70
+ notificationObject.type === SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_GROUP
71
+ ? scRoutingContext.url(SCRoutes.GROUP_MEMBERS_ROUTE_NAME, notificationObject.group)
72
+ : scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, notificationObject.group) },
67
73
  React.createElement(FormattedMessage, { id: "ui.notification.group.button.see", defaultMessage: "ui.notification.group.button.see" })))))) }, rest)));
68
74
  }
69
75
  return (React.createElement(React.Fragment, null,
70
76
  React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, actions: React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
71
77
  React.createElement(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }),
72
- status && status !== SCGroupSubscriptionStatusType.SUBSCRIBED && (React.createElement(LoadingButton, { color: 'primary', variant: "outlined", size: "small", classes: { root: classes.acceptButton }, component: Link, loading: scUserContext.user ? status === null || manager.isLoading(notificationObject.group) : null, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, notificationObject.group) },
78
+ status && status !== SCGroupSubscriptionStatusType.SUBSCRIBED && (React.createElement(LoadingButton, { color: 'primary', variant: "outlined", size: "small", classes: { root: classes.acceptButton }, component: Link, loading: scUserContext.user ? status === null || manager.isLoading(notificationObject.group) : null, to: notificationObject.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_GROUP ||
79
+ notificationObject.type === SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_GROUP
80
+ ? scRoutingContext.url(SCRoutes.GROUP_MEMBERS_ROUTE_NAME, notificationObject.group)
81
+ : scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, notificationObject.group) },
73
82
  React.createElement(FormattedMessage, { id: "ui.notification.group.button.see", defaultMessage: "ui.notification.group.button.see" })))) }, rest)),
74
83
  openAlert && React.createElement(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })));
75
84
  }
@@ -215,7 +215,10 @@ export default function UserNotification(inProps) {
215
215
  ' ',
216
216
  React.createElement(FormattedMessage, { id: `ui.notification.${notificationObject.aggregated[0].type}`, defaultMessage: `ui.notification.${notificationObject.aggregated[0].type}`, values: {
217
217
  group: groupNotification.group.name,
218
- link: (...chunks) => React.createElement(Link, { to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, groupNotification.group) }, chunks)
218
+ link: (...chunks) => (React.createElement(Link, { to: notificationObject.aggregated[0].type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_GROUP ||
219
+ notificationObject.aggregated[0].type === SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_GROUP
220
+ ? scRoutingContext.url(SCRoutes.GROUP_MEMBERS_ROUTE_NAME, groupNotification.group)
221
+ : scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, groupNotification.group) }, chunks))
219
222
  } })) }));
220
223
  }
221
224
  /**