@selfcommunity/react-ui 0.7.9-alpha.46 → 0.7.9-alpha.48

package/lib/cjs/components/Groups/Groups.d.ts

@@ -1,5 +1,4 @@
 import { SCGroupType } from '@selfcommunity/types';
-import { EndpointType } from '@selfcommunity/api-services';
 import { GroupProps } from '../Group';
 export interface GroupsProps {
     /**
@@ -8,24 +7,19 @@ export interface GroupsProps {
      */
     className?: string;
     /**
-     * Endpoint to call
+     * Feed API Query Params
+     * @default [{'limit': 10, 'offset': 0}]
      */
-    endpoint?: EndpointType;
+    endpointQueryParams?: Record<string, string | number>;
     /**
      * Props to spread to single group object
      * @default {variant: 'outlined', ButtonBaseProps: {disableRipple: 'true'}}
      */
     GroupComponentProps?: GroupProps;
-    /**
-     * Prefetch groups. Useful for SSR.
-     * Use this to init the component with groups
-     * @default null
-     */
-    prefetchedGroups?: SCGroupType[];
     /** If true, it means that the endpoint fetches all groups available
-     * @default null
+     * @default true
      */
-    general?: boolean;
+    general: boolean;
     /**
      * Show/Hide filters
      * @default false

package/lib/cjs/components/Groups/Groups.js

@@ -14,7 +14,9 @@ const Errors_1 = require("../../constants/Errors");
 const system_1 = require("@mui/system");
 const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
 const constants_1 = require("./constants");
-const Group_1 = tslib_1.__importDefault(require("../Group"));
+const Group_1 = tslib_1.__importStar(require("../Group"));
+const Pagination_1 = require("../../constants/Pagination");
+const InfiniteScroll_1 = tslib_1.__importDefault(require("../../shared/InfiniteScroll"));
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     filters: `${constants_1.PREFIX}-filter`,
@@ -65,10 +67,11 @@ function Groups(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { endpoint, className, GroupComponentProps = { variant: 'outlined', ButtonBaseProps: { disableRipple: true, component: material_1.Box } }, prefetchedGroups = [], showFilters = false, filters, handleFilterGroups, general } = props, rest = tslib_1.__rest(props, ["endpoint", "className", "GroupComponentProps", "prefetchedGroups", "showFilters", "filters", "handleFilterGroups", "general"]);
+    const { endpointQueryParams = { limit: Pagination_1.DEFAULT_PAGINATION_LIMIT, offset: Pagination_1.DEFAULT_PAGINATION_OFFSET }, className, GroupComponentProps = { variant: 'outlined', ButtonBaseProps: { disableRipple: true, component: material_1.Box } }, showFilters = false, filters, handleFilterGroups, general = true } = props, rest = tslib_1.__rest(props, ["endpointQueryParams", "className", "GroupComponentProps", "showFilters", "filters", "handleFilterGroups", "general"]);
     // STATE
     const [groups, setGroups] = (0, react_1.useState)([]);
     const [loading, setLoading] = (0, react_1.useState)(true);
+    const [next, setNext] = (0, react_1.useState)(null);
     const [filterName, setFilterName] = (0, react_1.useState)('');
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
@@ -78,19 +81,31 @@ function Groups(inProps) {
         scPreferencesContext.preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value, [scPreferencesContext.preferences]);
     // CONST
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
-    // REFS
-    const isMountedRef = (0, react_core_1.useIsComponentMountedRef)();
+    // HANDLERS
+    const handleScrollUp = () => {
+        window.scrollTo({ left: 0, top: 0, behavior: 'smooth' });
+    };
     /**
      * Fetches groups list
      */
-    const fetchGroups = (next = endpoint.url({})) => tslib_1.__awaiter(this, void 0, void 0, function* () {
-        const response = yield api_services_1.http.request({
-            url: next,
-            method: endpoint.method
+    const fetchGroups = () => {
+        let groupService;
+        if (general) {
+            groupService = api_services_1.GroupService.searchGroups(endpointQueryParams);
+        }
+        else {
+            groupService = api_services_1.GroupService.getUserGroups(endpointQueryParams);
+        }
+        groupService
+            .then((res) => {
+            setGroups(res.results);
+            setNext(res.next);
+            setLoading(false);
+        })
+            .catch((error) => {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
         });
-        const data = response.data;
-        return data.next ? data.results.concat(yield fetchGroups(data.next)) : data.results;
-    });
+    };
     /**
      * On mount, fetches groups list
      */
@@ -98,23 +113,10 @@ function Groups(inProps) {
         if (!contentAvailability && !authUserId) {
             return;
         }
-        else if (prefetchedGroups.length) {
-            setGroups(prefetchedGroups);
-            setLoading(false);
-        }
         else {
-            fetchGroups()
-                .then((data) => {
-                if (isMountedRef.current) {
-                    setGroups(data);
-                    setLoading(false);
-                }
-            })
-                .catch((error) => {
-                utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
-            });
+            fetchGroups();
         }
-    }, [contentAvailability, authUserId, prefetchedGroups.length]);
+    }, [contentAvailability, authUserId]);
     const handleSubscribe = (group) => {
         if (!general) {
             const newGroups = [...groups];
@@ -122,6 +124,22 @@ function Groups(inProps) {
             setGroups(_updated);
         }
     };
+    const handleNext = (0, react_1.useMemo)(() => () => {
+        if (!next) {
+            return;
+        }
+        return api_services_1.http
+            .request({
+            url: next,
+            method: general ? api_services_1.Endpoints.SearchGroups.method : api_services_1.Endpoints.GetUserGroups.method
+        })
+            .then((res) => {
+            setGroups([...groups, ...res.data.results]);
+            setNext(res.data.next);
+        })
+            .catch((error) => console.log(error))
+            .then(() => setLoading(false));
+    }, [next]);
     /**
      * Get groups filtered
      */
@@ -148,16 +166,23 @@ function Groups(inProps) {
     const content = (react_1.default.createElement(react_1.default.Fragment, null,
         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 },
             react_1.default.createElement(material_1.TextField, { fullWidth: true, value: filterName, label: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groups.filterByName", defaultMessage: "ui.groups.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }))))),
-        loading ? (react_1.default.createElement(Skeleton_1.default, null)) : (react_1.default.createElement(react_1.default.Fragment, null, !groups.length ? (react_1.default.createElement(material_1.Box, { className: classes.noResults },
+        react_1.default.createElement(react_1.default.Fragment, null, !groups.length ? (react_1.default.createElement(material_1.Box, { className: classes.noResults },
             react_1.default.createElement(material_1.Typography, { variant: "h4" },
                 react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groups.noGroups.title", defaultMessage: "ui.groups.noGroups.title" })),
             react_1.default.createElement(material_1.Typography, { variant: "body1" },
-                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groups.noGroups.subtitle", defaultMessage: "ui.groups.noGroups.subtitle" })))) : (react_1.default.createElement(material_1.Grid, { container: true, spacing: { xs: 2 }, className: classes.groups }, filteredGroups.map((group) => (react_1.default.createElement(material_1.Grid, { item: true, xs: 12, sm: 8, md: 6, key: group.id, className: classes.item },
-            react_1.default.createElement(Group_1.default, Object.assign({ group: group, groupId: group.id, groupSubscribeButtonProps: { onSubscribe: handleSubscribe } }, GroupComponentProps)))))))))));
+                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groups.noGroups.subtitle", defaultMessage: "ui.groups.noGroups.subtitle" })))) : (react_1.default.createElement(InfiniteScroll_1.default, { dataLength: groups.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: react_1.default.createElement(Group_1.GroupSkeleton, null), endMessage: react_1.default.createElement(material_1.Typography, { component: "div", className: classes.endMessage },
+                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groups.endMessage", defaultMessage: "ui.groups.endMessage", values: {
+                        button: (chunk) => (react_1.default.createElement(material_1.Button, { color: "secondary", variant: "text", onClick: handleScrollUp }, chunk))
+                    } })) },
+            react_1.default.createElement(material_1.Grid, { container: true, spacing: { xs: 2 }, className: classes.groups }, filteredGroups.map((group) => (react_1.default.createElement(material_1.Grid, { item: true, xs: 12, sm: 8, md: 6, key: group.id, className: classes.item },
+                react_1.default.createElement(Group_1.default, Object.assign({ group: group, groupId: group.id, groupSubscribeButtonProps: { onSubscribe: handleSubscribe } }, GroupComponentProps)))))))))));
     // RENDER
     if (!contentAvailability && !scUserContext.user) {
         return react_1.default.createElement(HiddenPlaceholder_1.default, null);
     }
+    if (loading) {
+        return react_1.default.createElement(Skeleton_1.default, null);
+    }
     return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest), content));
 }
 exports.default = Groups;

package/lib/cjs/components/User/User.d.ts

@@ -48,7 +48,7 @@ export interface UserProps extends WidgetProps {
      * Props to spread to the button
      * @default {}
      */
-    buttonProps?: ButtonBaseProps;
+    buttonProps?: ButtonBaseProps | null;
     /**
      * Any other properties
      */

package/lib/cjs/components/User/User.js

@@ -67,7 +67,7 @@ function User(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { userId = null, user = null, handleIgnoreAction, className = null, followConnectUserButtonProps = {}, showFollowers = false, elevation, badgeContent = null, actions = null, isGroupAdmin = false, buttonProps = {} } = props, rest = tslib_1.__rest(props, ["userId", "user", "handleIgnoreAction", "className", "followConnectUserButtonProps", "showFollowers", "elevation", "badgeContent", "actions", "isGroupAdmin", "buttonProps"]);
+    const { userId = null, user = null, handleIgnoreAction, className = null, followConnectUserButtonProps = {}, showFollowers = false, elevation, badgeContent = null, actions = null, isGroupAdmin = false, buttonProps = null } = props, rest = tslib_1.__rest(props, ["userId", "user", "handleIgnoreAction", "className", "followConnectUserButtonProps", "showFollowers", "elevation", "badgeContent", "actions", "isGroupAdmin", "buttonProps"]);
     // STATE
     const { scUser, setSCUser } = (0, react_core_1.useSCFetchUser)({ id: userId, user });
     // CONTEXT

package/lib/esm/components/Groups/Groups.d.ts

@@ -1,5 +1,4 @@
 import { SCGroupType } from '@selfcommunity/types';
-import { EndpointType } from '@selfcommunity/api-services';
 import { GroupProps } from '../Group';
 export interface GroupsProps {
     /**
@@ -8,24 +7,19 @@ export interface GroupsProps {
      */
     className?: string;
     /**
-     * Endpoint to call
+     * Feed API Query Params
+     * @default [{'limit': 10, 'offset': 0}]
      */
-    endpoint?: EndpointType;
+    endpointQueryParams?: Record<string, string | number>;
     /**
      * Props to spread to single group object
      * @default {variant: 'outlined', ButtonBaseProps: {disableRipple: 'true'}}
      */
     GroupComponentProps?: GroupProps;
-    /**
-     * Prefetch groups. Useful for SSR.
-     * Use this to init the component with groups
-     * @default null
-     */
-    prefetchedGroups?: SCGroupType[];
     /** If true, it means that the endpoint fetches all groups available
-     * @default null
+     * @default true
      */
-    general?: boolean;
+    general: boolean;
     /**
      * Show/Hide filters
      * @default false

package/lib/esm/components/Groups/Groups.js

@@ -1,10 +1,10 @@
-import { __awaiter, __rest } from "tslib";
+import { __rest } from "tslib";
 import React, { useEffect, useMemo, useState } from 'react';
 import { styled } from '@mui/material/styles';
-import { Box, Grid, TextField, Typography } from '@mui/material';
-import { http } from '@selfcommunity/api-services';
+import { Box, Button, Grid, TextField, Typography } from '@mui/material';
+import { Endpoints, GroupService, http } from '@selfcommunity/api-services';
 import { Logger, sortByAttr } from '@selfcommunity/utils';
-import { SCPreferences, useIsComponentMountedRef, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
+import { SCPreferences, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
 import Skeleton from './Skeleton';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
@@ -12,7 +12,9 @@ import { SCOPE_SC_UI } from '../../constants/Errors';
 import { useThemeProps } from '@mui/system';
 import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
 import { PREFIX } from './constants';
-import Group from '../Group';
+import Group, { GroupSkeleton } from '../Group';
+import { DEFAULT_PAGINATION_LIMIT, DEFAULT_PAGINATION_OFFSET } from '../../constants/Pagination';
+import InfiniteScroll from '../../shared/InfiniteScroll';
 const classes = {
     root: `${PREFIX}-root`,
     filters: `${PREFIX}-filter`,
@@ -63,10 +65,11 @@ export default function Groups(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { endpoint, className, GroupComponentProps = { variant: 'outlined', ButtonBaseProps: { disableRipple: true, component: Box } }, prefetchedGroups = [], showFilters = false, filters, handleFilterGroups, general } = props, rest = __rest(props, ["endpoint", "className", "GroupComponentProps", "prefetchedGroups", "showFilters", "filters", "handleFilterGroups", "general"]);
+    const { endpointQueryParams = { limit: DEFAULT_PAGINATION_LIMIT, offset: DEFAULT_PAGINATION_OFFSET }, className, GroupComponentProps = { variant: 'outlined', ButtonBaseProps: { disableRipple: true, component: Box } }, showFilters = false, filters, handleFilterGroups, general = true } = props, rest = __rest(props, ["endpointQueryParams", "className", "GroupComponentProps", "showFilters", "filters", "handleFilterGroups", "general"]);
     // STATE
     const [groups, setGroups] = useState([]);
     const [loading, setLoading] = useState(true);
+    const [next, setNext] = useState(null);
     const [filterName, setFilterName] = useState('');
     // CONTEXT
     const scUserContext = useSCUser();
@@ -76,19 +79,31 @@ export default function Groups(inProps) {
         scPreferencesContext.preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value, [scPreferencesContext.preferences]);
     // CONST
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
-    // REFS
-    const isMountedRef = useIsComponentMountedRef();
+    // HANDLERS
+    const handleScrollUp = () => {
+        window.scrollTo({ left: 0, top: 0, behavior: 'smooth' });
+    };
     /**
      * Fetches groups list
      */
-    const fetchGroups = (next = endpoint.url({})) => __awaiter(this, void 0, void 0, function* () {
-        const response = yield http.request({
-            url: next,
-            method: endpoint.method
+    const fetchGroups = () => {
+        let groupService;
+        if (general) {
+            groupService = GroupService.searchGroups(endpointQueryParams);
+        }
+        else {
+            groupService = GroupService.getUserGroups(endpointQueryParams);
+        }
+        groupService
+            .then((res) => {
+            setGroups(res.results);
+            setNext(res.next);
+            setLoading(false);
+        })
+            .catch((error) => {
+            Logger.error(SCOPE_SC_UI, error);
         });
-        const data = response.data;
-        return data.next ? data.results.concat(yield fetchGroups(data.next)) : data.results;
-    });
+    };
     /**
      * On mount, fetches groups list
      */
@@ -96,23 +111,10 @@ export default function Groups(inProps) {
         if (!contentAvailability && !authUserId) {
             return;
         }
-        else if (prefetchedGroups.length) {
-            setGroups(prefetchedGroups);
-            setLoading(false);
-        }
         else {
-            fetchGroups()
-                .then((data) => {
-                if (isMountedRef.current) {
-                    setGroups(data);
-                    setLoading(false);
-                }
-            })
-                .catch((error) => {
-                Logger.error(SCOPE_SC_UI, error);
-            });
+            fetchGroups();
         }
-    }, [contentAvailability, authUserId, prefetchedGroups.length]);
+    }, [contentAvailability, authUserId]);
     const handleSubscribe = (group) => {
         if (!general) {
             const newGroups = [...groups];
@@ -120,6 +122,22 @@ export default function Groups(inProps) {
             setGroups(_updated);
         }
     };
+    const handleNext = useMemo(() => () => {
+        if (!next) {
+            return;
+        }
+        return http
+            .request({
+            url: next,
+            method: general ? Endpoints.SearchGroups.method : Endpoints.GetUserGroups.method
+        })
+            .then((res) => {
+            setGroups([...groups, ...res.data.results]);
+            setNext(res.data.next);
+        })
+            .catch((error) => console.log(error))
+            .then(() => setLoading(false));
+    }, [next]);
     /**
      * Get groups filtered
      */
@@ -146,15 +164,22 @@ export default function Groups(inProps) {
     const content = (React.createElement(React.Fragment, null,
         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 },
             React.createElement(TextField, { fullWidth: true, value: filterName, label: React.createElement(FormattedMessage, { id: "ui.groups.filterByName", defaultMessage: "ui.groups.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }))))),
-        loading ? (React.createElement(Skeleton, null)) : (React.createElement(React.Fragment, null, !groups.length ? (React.createElement(Box, { className: classes.noResults },
+        React.createElement(React.Fragment, null, !groups.length ? (React.createElement(Box, { className: classes.noResults },
             React.createElement(Typography, { variant: "h4" },
                 React.createElement(FormattedMessage, { id: "ui.groups.noGroups.title", defaultMessage: "ui.groups.noGroups.title" })),
             React.createElement(Typography, { variant: "body1" },
-                React.createElement(FormattedMessage, { id: "ui.groups.noGroups.subtitle", defaultMessage: "ui.groups.noGroups.subtitle" })))) : (React.createElement(Grid, { container: true, spacing: { xs: 2 }, className: classes.groups }, filteredGroups.map((group) => (React.createElement(Grid, { item: true, xs: 12, sm: 8, md: 6, key: group.id, className: classes.item },
-            React.createElement(Group, Object.assign({ group: group, groupId: group.id, groupSubscribeButtonProps: { onSubscribe: handleSubscribe } }, GroupComponentProps)))))))))));
+                React.createElement(FormattedMessage, { id: "ui.groups.noGroups.subtitle", defaultMessage: "ui.groups.noGroups.subtitle" })))) : (React.createElement(InfiniteScroll, { dataLength: groups.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: React.createElement(GroupSkeleton, null), endMessage: React.createElement(Typography, { component: "div", className: classes.endMessage },
+                React.createElement(FormattedMessage, { id: "ui.groups.endMessage", defaultMessage: "ui.groups.endMessage", values: {
+                        button: (chunk) => (React.createElement(Button, { color: "secondary", variant: "text", onClick: handleScrollUp }, chunk))
+                    } })) },
+            React.createElement(Grid, { container: true, spacing: { xs: 2 }, className: classes.groups }, filteredGroups.map((group) => (React.createElement(Grid, { item: true, xs: 12, sm: 8, md: 6, key: group.id, className: classes.item },
+                React.createElement(Group, Object.assign({ group: group, groupId: group.id, groupSubscribeButtonProps: { onSubscribe: handleSubscribe } }, GroupComponentProps)))))))))));
     // RENDER
     if (!contentAvailability && !scUserContext.user) {
         return React.createElement(HiddenPlaceholder, null);
     }
+    if (loading) {
+        return React.createElement(Skeleton, null);
+    }
     return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest), content));
 }

package/lib/esm/components/User/User.d.ts

@@ -48,7 +48,7 @@ export interface UserProps extends WidgetProps {
      * Props to spread to the button
      * @default {}
      */
-    buttonProps?: ButtonBaseProps;
+    buttonProps?: ButtonBaseProps | null;
     /**
      * Any other properties
      */

package/lib/esm/components/User/User.js

@@ -65,7 +65,7 @@ export default function User(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { userId = null, user = null, handleIgnoreAction, className = null, followConnectUserButtonProps = {}, showFollowers = false, elevation, badgeContent = null, actions = null, isGroupAdmin = false, buttonProps = {} } = props, rest = __rest(props, ["userId", "user", "handleIgnoreAction", "className", "followConnectUserButtonProps", "showFollowers", "elevation", "badgeContent", "actions", "isGroupAdmin", "buttonProps"]);
+    const { userId = null, user = null, handleIgnoreAction, className = null, followConnectUserButtonProps = {}, showFollowers = false, elevation, badgeContent = null, actions = null, isGroupAdmin = false, buttonProps = null } = props, rest = __rest(props, ["userId", "user", "handleIgnoreAction", "className", "followConnectUserButtonProps", "showFollowers", "elevation", "badgeContent", "actions", "isGroupAdmin", "buttonProps"]);
     // STATE
     const { scUser, setSCUser } = useSCFetchUser({ id: userId, user });
     // CONTEXT