@selfcommunity/react-ui 0.10.2-courses.208 → 0.10.2-courses.209
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.
|
@@ -23,6 +23,7 @@ const PubSub_1 = require("../../constants/PubSub");
|
|
|
23
23
|
const classes = {
|
|
24
24
|
root: `${constants_1.PREFIX}-root`,
|
|
25
25
|
filters: `${constants_1.PREFIX}-filter`,
|
|
26
|
+
search: `${constants_1.PREFIX}-search`,
|
|
26
27
|
groups: `${constants_1.PREFIX}-groups`,
|
|
27
28
|
item: `${constants_1.PREFIX}-item`,
|
|
28
29
|
noResults: `${constants_1.PREFIX}-no-results`,
|
|
@@ -96,13 +97,14 @@ function Groups(inProps) {
|
|
|
96
97
|
/**
|
|
97
98
|
* Fetches groups list
|
|
98
99
|
*/
|
|
99
|
-
const fetchGroups = () => {
|
|
100
|
+
const fetchGroups = (searchValue = search) => {
|
|
101
|
+
setLoading(true);
|
|
100
102
|
let groupService;
|
|
101
103
|
if (general) {
|
|
102
|
-
groupService = api_services_1.GroupService.searchGroups(Object.assign(Object.assign({}, endpointQueryParams), (
|
|
104
|
+
groupService = api_services_1.GroupService.searchGroups(Object.assign(Object.assign({}, endpointQueryParams), (searchValue && { search: searchValue })));
|
|
103
105
|
}
|
|
104
106
|
else {
|
|
105
|
-
groupService = api_services_1.GroupService.getUserGroups(Object.assign(Object.assign({}, endpointQueryParams), (
|
|
107
|
+
groupService = api_services_1.GroupService.getUserGroups(Object.assign(Object.assign({}, endpointQueryParams), (searchValue && { search: searchValue })));
|
|
106
108
|
}
|
|
107
109
|
groupService
|
|
108
110
|
.then((res) => {
|
|
@@ -124,7 +126,7 @@ function Groups(inProps) {
|
|
|
124
126
|
else {
|
|
125
127
|
fetchGroups();
|
|
126
128
|
}
|
|
127
|
-
}, [contentAvailability, authUserId
|
|
129
|
+
}, [contentAvailability, authUserId]);
|
|
128
130
|
/**
|
|
129
131
|
* Subscriber for pubsub callback
|
|
130
132
|
*/
|
|
@@ -163,15 +165,6 @@ function Groups(inProps) {
|
|
|
163
165
|
.catch((error) => console.log(error))
|
|
164
166
|
.then(() => setLoading(false));
|
|
165
167
|
}, [next]);
|
|
166
|
-
/**
|
|
167
|
-
* Get groups filtered
|
|
168
|
-
*/
|
|
169
|
-
const getFilteredGroups = () => {
|
|
170
|
-
if (search) {
|
|
171
|
-
return groups.filter((g) => g.name.toLowerCase().includes(search.toLowerCase()));
|
|
172
|
-
}
|
|
173
|
-
return groups;
|
|
174
|
-
};
|
|
175
168
|
/**
|
|
176
169
|
* Handle change filter name
|
|
177
170
|
* @param event
|
|
@@ -182,12 +175,21 @@ function Groups(inProps) {
|
|
|
182
175
|
/**
|
|
183
176
|
* Renders groups list
|
|
184
177
|
*/
|
|
185
|
-
const
|
|
186
|
-
|
|
178
|
+
const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showFilters && (groups.length !== 0 || search.length !== 0) && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, { children: filters ? (filters) : ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { className: classes.search, fullWidth: true, value: search, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groups.filterByName", defaultMessage: "ui.groups.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading, onKeyUp: (e) => {
|
|
179
|
+
e.preventDefault();
|
|
180
|
+
if (e.key === 'Enter') {
|
|
181
|
+
fetchGroups();
|
|
182
|
+
}
|
|
183
|
+
}, InputProps: {
|
|
184
|
+
endAdornment: ((0, jsx_runtime_1.jsxs)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: [search.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => {
|
|
185
|
+
setSearch('');
|
|
186
|
+
fetchGroups('');
|
|
187
|
+
}, disabled: loading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))), isMobile ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => fetchGroups(), disabled: loading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchGroups(), endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }), disabled: loading }))] })))
|
|
188
|
+
} }) }))) }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !groups.length ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.noResults }, { children: search.length ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groups.noResults", defaultMessage: "ui.groups.noResults" }) }))) : !onlyStaffEnabled ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groups.noGroups.title", defaultMessage: "ui.groups.noGroups.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groups.noGroups.subtitle", defaultMessage: "ui.groups.noGroups.subtitle" }) }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groups.noGroups.title.onlyStaff", defaultMessage: "ui.groups.noGroups.title.onlyStaff" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groups.noGroups.subtitle.onlyStaff", defaultMessage: "ui.groups.noGroups.subtitle.onlyStaff" }) }))] })) }))) : ((0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: groups.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: isMobile ? (0, jsx_runtime_1.jsx)(Group_1.GroupSkeleton, {}) : (0, jsx_runtime_1.jsx)(Skeleton_1.default, { groupsNumber: 2 }), endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "div", className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groups.endMessage", defaultMessage: "ui.groups.endMessage", values: {
|
|
187
189
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
188
190
|
// @ts-ignore
|
|
189
191
|
button: (chunk) => ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "secondary", variant: "text", onClick: handleScrollUp }, { children: chunk })))
|
|
190
|
-
} }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.groups }, { children:
|
|
192
|
+
} }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.groups }, { children: groups.map((group) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 8, md: 6, className: classes.item }, { children: (0, jsx_runtime_1.jsx)(Group_1.default, Object.assign({ group: group, groupId: group.id, actionRedirect: true }, GroupComponentProps)) }), group.id))) })) }))) })] }));
|
|
191
193
|
// RENDER
|
|
192
194
|
if (!contentAvailability && !scUserContext.user) {
|
|
193
195
|
return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { __rest } from "tslib";
|
|
2
|
-
import { jsx as _jsx,
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
4
4
|
import { styled } from '@mui/material/styles';
|
|
5
|
-
import { Box, Button, Grid, TextField, Typography, useMediaQuery, useTheme } from '@mui/material';
|
|
5
|
+
import { Box, Button, Grid, Icon, IconButton, InputAdornment, TextField, Typography, useMediaQuery, useTheme } from '@mui/material';
|
|
6
6
|
import { Endpoints, GroupService, http } from '@selfcommunity/api-services';
|
|
7
|
-
import { Logger
|
|
7
|
+
import { Logger } from '@selfcommunity/utils';
|
|
8
8
|
import { SCPreferences, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
|
|
9
9
|
import Skeleton from './Skeleton';
|
|
10
10
|
import { FormattedMessage } from 'react-intl';
|
|
@@ -21,6 +21,7 @@ import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
|
|
|
21
21
|
const classes = {
|
|
22
22
|
root: `${PREFIX}-root`,
|
|
23
23
|
filters: `${PREFIX}-filter`,
|
|
24
|
+
search: `${PREFIX}-search`,
|
|
24
25
|
groups: `${PREFIX}-groups`,
|
|
25
26
|
item: `${PREFIX}-item`,
|
|
26
27
|
noResults: `${PREFIX}-no-results`,
|
|
@@ -94,13 +95,14 @@ export default function Groups(inProps) {
|
|
|
94
95
|
/**
|
|
95
96
|
* Fetches groups list
|
|
96
97
|
*/
|
|
97
|
-
const fetchGroups = () => {
|
|
98
|
+
const fetchGroups = (searchValue = search) => {
|
|
99
|
+
setLoading(true);
|
|
98
100
|
let groupService;
|
|
99
101
|
if (general) {
|
|
100
|
-
groupService = GroupService.searchGroups(Object.assign(Object.assign({}, endpointQueryParams), (
|
|
102
|
+
groupService = GroupService.searchGroups(Object.assign(Object.assign({}, endpointQueryParams), (searchValue && { search: searchValue })));
|
|
101
103
|
}
|
|
102
104
|
else {
|
|
103
|
-
groupService = GroupService.getUserGroups(Object.assign(Object.assign({}, endpointQueryParams), (
|
|
105
|
+
groupService = GroupService.getUserGroups(Object.assign(Object.assign({}, endpointQueryParams), (searchValue && { search: searchValue })));
|
|
104
106
|
}
|
|
105
107
|
groupService
|
|
106
108
|
.then((res) => {
|
|
@@ -122,7 +124,7 @@ export default function Groups(inProps) {
|
|
|
122
124
|
else {
|
|
123
125
|
fetchGroups();
|
|
124
126
|
}
|
|
125
|
-
}, [contentAvailability, authUserId
|
|
127
|
+
}, [contentAvailability, authUserId]);
|
|
126
128
|
/**
|
|
127
129
|
* Subscriber for pubsub callback
|
|
128
130
|
*/
|
|
@@ -161,15 +163,6 @@ export default function Groups(inProps) {
|
|
|
161
163
|
.catch((error) => console.log(error))
|
|
162
164
|
.then(() => setLoading(false));
|
|
163
165
|
}, [next]);
|
|
164
|
-
/**
|
|
165
|
-
* Get groups filtered
|
|
166
|
-
*/
|
|
167
|
-
const getFilteredGroups = () => {
|
|
168
|
-
if (search) {
|
|
169
|
-
return groups.filter((g) => g.name.toLowerCase().includes(search.toLowerCase()));
|
|
170
|
-
}
|
|
171
|
-
return groups;
|
|
172
|
-
};
|
|
173
166
|
/**
|
|
174
167
|
* Handle change filter name
|
|
175
168
|
* @param event
|
|
@@ -180,12 +173,21 @@ export default function Groups(inProps) {
|
|
|
180
173
|
/**
|
|
181
174
|
* Renders groups list
|
|
182
175
|
*/
|
|
183
|
-
const
|
|
184
|
-
|
|
176
|
+
const content = (_jsxs(_Fragment, { children: [showFilters && (groups.length !== 0 || search.length !== 0) && (_jsx(Grid, Object.assign({ container: true, direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, { children: filters ? (filters) : (_jsx(Grid, Object.assign({ item: true, xs: 12, md: 6 }, { children: _jsx(TextField, { className: classes.search, fullWidth: true, value: search, label: _jsx(FormattedMessage, { id: "ui.groups.filterByName", defaultMessage: "ui.groups.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading, onKeyUp: (e) => {
|
|
177
|
+
e.preventDefault();
|
|
178
|
+
if (e.key === 'Enter') {
|
|
179
|
+
fetchGroups();
|
|
180
|
+
}
|
|
181
|
+
}, InputProps: {
|
|
182
|
+
endAdornment: (_jsxs(InputAdornment, Object.assign({ position: "end" }, { children: [search.length > 0 && (_jsx(IconButton, Object.assign({ onClick: () => {
|
|
183
|
+
setSearch('');
|
|
184
|
+
fetchGroups('');
|
|
185
|
+
}, disabled: loading }, { children: _jsx(Icon, { children: "close" }) }))), isMobile ? (_jsx(IconButton, Object.assign({ onClick: () => fetchGroups(), disabled: loading }, { children: _jsx(Icon, { children: "search" }) }))) : (_jsx(Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchGroups(), endIcon: _jsx(Icon, { children: "search" }), disabled: loading }))] })))
|
|
186
|
+
} }) }))) }))), _jsx(_Fragment, { children: !groups.length ? (_jsx(Box, Object.assign({ className: classes.noResults }, { children: search.length ? (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noResults", defaultMessage: "ui.groups.noResults" }) }))) : !onlyStaffEnabled ? (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.title", defaultMessage: "ui.groups.noGroups.title" }) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.subtitle", defaultMessage: "ui.groups.noGroups.subtitle" }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.title.onlyStaff", defaultMessage: "ui.groups.noGroups.title.onlyStaff" }) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.subtitle.onlyStaff", defaultMessage: "ui.groups.noGroups.subtitle.onlyStaff" }) }))] })) }))) : (_jsx(InfiniteScroll, Object.assign({ dataLength: groups.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: isMobile ? _jsx(GroupSkeleton, {}) : _jsx(Skeleton, { groupsNumber: 2 }), endMessage: _jsx(Typography, Object.assign({ component: "div", className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.groups.endMessage", defaultMessage: "ui.groups.endMessage", values: {
|
|
185
187
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
186
188
|
// @ts-ignore
|
|
187
189
|
button: (chunk) => (_jsx(Button, Object.assign({ color: "secondary", variant: "text", onClick: handleScrollUp }, { children: chunk })))
|
|
188
|
-
} }) })) }, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.groups }, { children:
|
|
190
|
+
} }) })) }, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.groups }, { children: groups.map((group) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 8, md: 6, className: classes.item }, { children: _jsx(Group, Object.assign({ group: group, groupId: group.id, actionRedirect: true }, GroupComponentProps)) }), group.id))) })) }))) })] }));
|
|
189
191
|
// RENDER
|
|
190
192
|
if (!contentAvailability && !scUserContext.user) {
|
|
191
193
|
return _jsx(HiddenPlaceholder, {});
|