npm - @selfcommunity/react-ui - Versions diffs - 0.7.9-alpha.6 → 0.7.9-alpha.7 - Mend

@selfcommunity/react-ui 0.7.9-alpha.6 → 0.7.9-alpha.7

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.

Files changed (12) hide show

package/lib/cjs/components/ChangeGroupCover/ChangeGroupCover.js CHANGED Viewed

@@ -25,6 +25,10 @@ const messages = (0, react_intl_1.defineMessages)({
     errorLoadImage: {
         id: 'ui.changeGroupCover.button.change.alertErrorImage',
         defaultMessage: 'ui.changeGroupCover.button.change.alertErrorImage'
+    },
+    errorImageSize: {
+        id: 'ui.changeGroupCover.alert',
+        defaultMessage: 'ui.changeGroupCover.alert'
     }
 });
 /**
@@ -75,7 +79,26 @@ function ChangeGroupCover(inProps) {
      */
     const handleUpload = (event) => {
         fileInput = event.target.files[0];
-        isCreationMode ? onChange && onChange(fileInput) : handleSave();
+        if (fileInput) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                const img = new Image();
+                img.onload = () => {
+                    if (img.width < 1920) {
+                        setAlert(intl.formatMessage(messages.errorImageSize));
+                    }
+                    else {
+                        isCreationMode ? onChange && onChange(fileInput) : handleSave();
+                    }
+                };
+                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                // @ts-ignore
+                img.src = e.target.result;
+            };
+            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+            // @ts-ignore
+            reader.readAsDataURL(fileInput);
+        }
     };
     /**
      * Handles cover saving after upload action

package/lib/cjs/components/ChangeGroupPicture/ChangeGroupPicture.js CHANGED Viewed

@@ -16,8 +16,8 @@ const react_intl_1 = require("react-intl");
 const lab_1 = require("@mui/lab");
 const messages = (0, react_intl_1.defineMessages)({
     errorLoadImage: {
-        id: 'ui.changeGroupCover.button.change.alertErrorImage',
-        defaultMessage: 'ui.changeGroupCover.button.change.alertErrorImage'
+        id: 'ui.changeGroupPicture.alert',
+        defaultMessage: 'ui.changeGroupPicture.alert'
     }
 });
 const classes = {
@@ -76,9 +76,27 @@ function ChangeGroupPicture(inProps) {
      * @param event
      */
     function handleUpload(event) {
-        fileInput = event.target.files[0];
-        isCreationMode ? onChange && onChange(fileInput) : handleSave();
+        const fileInput = event.target.files[0];
+        if (fileInput) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                const img = new Image();
+                img.onload = () => {
+                    if (img.width < 600 && img.height < 600) {
+                        setAlert(intl.formatMessage(messages.errorLoadImage));
+                    }
+                    else {
+                        isCreationMode ? onChange && onChange(fileInput) : handleSave();
+                    }
+                };
+                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                // @ts-ignore
+                img.src = e.target.result;
+            };
+            reader.readAsDataURL(fileInput);
+        }
     }
+    // ui.changeGroupPicture.alert
     /**
      * Performs save avatar after upload
      */

package/lib/cjs/components/GroupInviteButton/GroupInviteButton.js CHANGED Viewed

@@ -226,9 +226,9 @@ function GroupInviteButton(inProps) {
         setList((prev) => [...prev, option]);
     };
     /**
-     * If there's no authUserId, component is hidden.
+     * If in group edit mode and logged-in user is not also the group manager, the component is hidden.
     //  */
-    if (!canEdit) {
+    if (group && !canEdit) {
         return null;
     }
     /**
@@ -242,7 +242,7 @@ function GroupInviteButton(inProps) {
                     react_1.default.createElement(material_1.Icon, { fontSize: "medium" }, "arrow_back")),
                 react_1.default.createElement(material_1.Typography, { className: classes.dialogTitle },
                     react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupInviteButton.dialog.title", defaultMessage: "ui.groupInviteButton.dialog.title" })),
-                react_1.default.createElement(lab_1.LoadingButton, { size: "small", color: "secondary", variant: "contained", onClick: handleSendInvitations, loading: isSending },
+                react_1.default.createElement(lab_1.LoadingButton, { size: "small", color: "secondary", variant: "contained", onClick: handleSendInvitations, loading: isSending, disabled: !invited.length },
                     react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupInviteButton.dialog.button.end", defaultMessage: "ui.groupInviteButton.dialog.button.end" }))) },
             react_1.default.createElement(material_1.Box, { className: classes.dialogContent },
                 react_1.default.createElement(Autocomplete_1.default, { className: classes.autocomplete, loading: loading, size: "small", multiple: true, freeSolo: true, disableClearable: true, options: suggested, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, value: invited, getOptionLabel: (option) => (option ? option.username : '...'), isOptionEqualToValue: (option, value) => (option ? value.id === option.id : false), renderTags: () => null, renderOption: (props, option) => (react_1.default.createElement(material_1.Box, Object.assign({ component: "li" }, props),

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

@@ -1,31 +1,27 @@
+import { SCGroupType } from '@selfcommunity/types';
 import { EndpointType } from '@selfcommunity/api-services';
-import { CacheStrategies } from '@selfcommunity/utils';
 import { GroupProps } from '../Group';
 export interface GroupsProps {
     /**
-     * Endpoint to call
-     */
-    endpoint: EndpointType;
-    /**
-     * Hides this component
-     * @default false
+     * Overrides or extends the styles applied to the component.
+     * @default null
      */
-    autoHide?: boolean;
+    className?: string;
     /**
-     * Limit the number of users to show
-     * @default false
+     * Endpoint to call
      */
-    limit?: number;
+    endpoint: EndpointType;
     /**
-     * Caching strategies
-     * @default CacheStrategies.CACHE_FIRST
+     * Props to spread to single group object
+     * @default {variant: 'outlined', ButtonBaseProps: {disableRipple: 'true'}}
      */
-    cacheStrategy?: CacheStrategies;
+    GroupComponentProps?: GroupProps;
     /**
-     * Props to spread to single group object
-     * @default empty object
+     * Prefetch groups. Useful for SSR.
+     * Use this to init the component with groups
+     * @default null
      */
-    GroupProps?: GroupProps;
+    prefetchedGroups?: SCGroupType[];
     /**
      * Other props
      */

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

@@ -7,7 +7,6 @@ const material_1 = require("@mui/material");
 const api_services_1 = require("@selfcommunity/api-services");
 const utils_1 = require("@selfcommunity/utils");
 const react_core_1 = require("@selfcommunity/react-core");
-const widget_1 = require("../../utils/widget");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const react_intl_1 = require("react-intl");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -65,117 +64,65 @@ function Groups(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { endpoint, autoHide = false, limit = 6, className, cacheStrategy = utils_1.CacheStrategies.NETWORK_ONLY, onHeightChange, onStateChange, GroupProps = { variant: 'outlined', ButtonBaseProps: { disableRipple: true, component: material_1.Box } } } = props, rest = tslib_1.__rest(props, ["endpoint", "autoHide", "limit", "className", "cacheStrategy", "onHeightChange", "onStateChange", "GroupProps"]);
+    const { endpoint, className, GroupComponentProps = { variant: 'outlined', ButtonBaseProps: { disableRipple: true, component: material_1.Box } }, prefetchedGroups = [] } = props, rest = tslib_1.__rest(props, ["endpoint", "className", "GroupComponentProps", "prefetchedGroups"]);
     // STATE
-    const [state, dispatch] = (0, react_1.useReducer)(widget_1.dataWidgetReducer, {
-        isLoadingNext: false,
-        next: null,
-        cacheKey: react_core_1.SCCache.getWidgetStateCacheKey(react_core_1.SCCache.GROUPS_LIST_TOOLS_STATE_CACHE_PREFIX_KEY),
-        cacheStrategy,
-        visibleItems: limit
-    }, widget_1.stateWidgetInitializer);
+    const [groups, setGroups] = (0, react_1.useState)([]);
+    const [loading, setLoading] = (0, react_1.useState)(true);
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
     const scPreferencesContext = (0, react_core_1.useSCPreferences)();
     // MEMO
     const contentAvailability = (0, react_1.useMemo)(() => react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY in scPreferencesContext.preferences &&
         scPreferencesContext.preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value, [scPreferencesContext.preferences]);
-    // HOOKS
-    // const theme = useTheme<SCThemeType>();
-    // const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    // CONST
+    const authUserId = scUserContext.user ? scUserContext.user.id : null;
+    // REFS
+    const isMountedRef = (0, react_core_1.useIsComponentMountedRef)();
     /**
-     * Initialize component
-     * Fetch data only if the component is not initialized, and it is not loading data
+     * Fetches groups list
      */
-    const _initComponent = (0, react_1.useMemo)(() => () => {
-        if (!state.initialized && !state.isLoadingNext) {
-            dispatch({ type: widget_1.actionWidgetTypes.LOADING_NEXT });
-            api_services_1.http
-                .request({
-                url: endpoint.url({ limit }),
-                method: endpoint.method
-            })
-                .then((payload) => {
-                dispatch({ type: widget_1.actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: Object.assign(Object.assign({}, payload.data), { initialized: true }) });
-            })
-                .catch((error) => {
-                dispatch({ type: widget_1.actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
-                utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
-            });
-        }
-    }, [state.isLoadingNext, state.initialized, endpoint, limit, dispatch]);
-    // EFFECTS
-    (0, react_1.useEffect)(() => {
-        var _a;
-        let _t;
-        if ((contentAvailability || (!contentAvailability && ((_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.id))) && scUserContext.user !== undefined) {
-            _t = setTimeout(_initComponent);
-            return () => {
-                _t && clearTimeout(_t);
-            };
-        }
-    }, [scUserContext.user, contentAvailability]);
-    (0, react_1.useEffect)(() => {
-        if (state.next && state.results.length === limit && state.initialized) {
-            dispatch({ type: widget_1.actionWidgetTypes.LOADING_NEXT });
-            api_services_1.http
-                .request({
-                url: endpoint.url({ offset: limit, limit: 10 }),
-                method: endpoint.method
-            })
-                .then((payload) => {
-                dispatch({ type: widget_1.actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: payload.data });
-            })
-                .catch((error) => {
-                dispatch({ type: widget_1.actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
-                utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
-            });
-        }
-    }, [state.next, state.results.length, state.initialized, limit]);
+    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 data = response.data;
+        return data.next ? data.results.concat(yield fetchGroups(data.next)) : data.results;
+    });
     /**
-     * Virtual feed update
+     * On mount, fetches groups list
      */
     (0, react_1.useEffect)(() => {
-        onHeightChange && onHeightChange();
-    }, [state.results]);
-    (0, react_1.useEffect)(() => {
-        if (!endpoint || (!contentAvailability && !scUserContext.user)) {
+        if (!contentAvailability && !authUserId) {
             return;
         }
-        else if (cacheStrategy === utils_1.CacheStrategies.NETWORK_ONLY) {
-            onStateChange && onStateChange({ cacheStrategy: utils_1.CacheStrategies.CACHE_FIRST });
+        else if (prefetchedGroups.length) {
+            setGroups(prefetchedGroups);
+            setLoading(false);
         }
-    }, [scUserContext.user, endpoint, contentAvailability]);
-    (0, react_1.useEffect)(() => {
-        if (!endpoint || !scUserContext.user || !state.initialized) {
-            return;
+        else {
+            fetchGroups()
+                .then((data) => {
+                if (isMountedRef.current) {
+                    setGroups(data);
+                    setLoading(false);
+                }
+            })
+                .catch((error) => {
+                utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+            });
         }
-    }, []);
-    // HANDLERS
-    const handleNext = (0, react_1.useMemo)(() => () => {
-        dispatch({ type: widget_1.actionWidgetTypes.LOADING_NEXT });
-        api_services_1.http
-            .request({
-            url: state.next,
-            method: endpoint.method
-        })
-            .then((res) => {
-            dispatch({ type: widget_1.actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: res.data });
-        });
-    }, [dispatch, state.next, state.isLoadingNext, state.initialized, endpoint.method]);
+    }, [contentAvailability, authUserId, prefetchedGroups.length]);
     // RENDER
-    if ((autoHide && !state.count && state.initialized) || (!contentAvailability && !scUserContext.user) || !endpoint) {
+    if (!contentAvailability && !scUserContext.user) {
         return react_1.default.createElement(HiddenPlaceholder_1.default, null);
     }
-    if (!state.initialized) {
-        return react_1.default.createElement(Skeleton_1.default, null);
-    }
-    const content = (react_1.default.createElement(react_1.default.Fragment, null, !state.count ? (react_1.default.createElement(material_1.Typography, { className: classes.noResults, variant: "body2" },
-        react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupRequestsWidget.subtitle.noResults", defaultMessage: "" }))) : (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.Grid, { container: true, spacing: { xs: 3 }, className: classes.groups }, state.results.slice(0, state.visibleItems).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 }, GroupProps)))))),
-        state.count > state.visibleItems && (react_1.default.createElement(material_1.Button, { className: classes.showMore, onClick: handleNext },
-            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupRequestsWidget.button.showMore", defaultMessage: "ui.groupRequestsWidget.button.showMore" })))))));
+    const content = (react_1.default.createElement(react_1.default.Fragment, null, loading ? (react_1.default.createElement(Skeleton_1.default, null)) : (react_1.default.createElement(material_1.Grid, { container: true, spacing: { xs: 3 }, className: classes.groups }, !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(react_1.default.Fragment, null, groups.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 }, GroupComponentProps)))))))))));
     return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest), content));
 }
 exports.default = Groups;

package/lib/esm/components/ChangeGroupCover/ChangeGroupCover.js CHANGED Viewed

@@ -23,6 +23,10 @@ const messages = defineMessages({
     errorLoadImage: {
         id: 'ui.changeGroupCover.button.change.alertErrorImage',
         defaultMessage: 'ui.changeGroupCover.button.change.alertErrorImage'
+    },
+    errorImageSize: {
+        id: 'ui.changeGroupCover.alert',
+        defaultMessage: 'ui.changeGroupCover.alert'
     }
 });
 /**
@@ -73,7 +77,26 @@ export default function ChangeGroupCover(inProps) {
      */
     const handleUpload = (event) => {
         fileInput = event.target.files[0];
-        isCreationMode ? onChange && onChange(fileInput) : handleSave();
+        if (fileInput) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                const img = new Image();
+                img.onload = () => {
+                    if (img.width < 1920) {
+                        setAlert(intl.formatMessage(messages.errorImageSize));
+                    }
+                    else {
+                        isCreationMode ? onChange && onChange(fileInput) : handleSave();
+                    }
+                };
+                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                // @ts-ignore
+                img.src = e.target.result;
+            };
+            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+            // @ts-ignore
+            reader.readAsDataURL(fileInput);
+        }
     };
     /**
      * Handles cover saving after upload action

package/lib/esm/components/ChangeGroupPicture/ChangeGroupPicture.js CHANGED Viewed

@@ -14,8 +14,8 @@ import { defineMessages, useIntl } from 'react-intl';
 import { LoadingButton } from '@mui/lab';
 const messages = defineMessages({
     errorLoadImage: {
-        id: 'ui.changeGroupCover.button.change.alertErrorImage',
-        defaultMessage: 'ui.changeGroupCover.button.change.alertErrorImage'
+        id: 'ui.changeGroupPicture.alert',
+        defaultMessage: 'ui.changeGroupPicture.alert'
     }
 });
 const classes = {
@@ -74,9 +74,27 @@ export default function ChangeGroupPicture(inProps) {
      * @param event
      */
     function handleUpload(event) {
-        fileInput = event.target.files[0];
-        isCreationMode ? onChange && onChange(fileInput) : handleSave();
+        const fileInput = event.target.files[0];
+        if (fileInput) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                const img = new Image();
+                img.onload = () => {
+                    if (img.width < 600 && img.height < 600) {
+                        setAlert(intl.formatMessage(messages.errorLoadImage));
+                    }
+                    else {
+                        isCreationMode ? onChange && onChange(fileInput) : handleSave();
+                    }
+                };
+                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                // @ts-ignore
+                img.src = e.target.result;
+            };
+            reader.readAsDataURL(fileInput);
+        }
     }
+    // ui.changeGroupPicture.alert
     /**
      * Performs save avatar after upload
      */

package/lib/esm/components/GroupInviteButton/GroupInviteButton.js CHANGED Viewed

@@ -224,9 +224,9 @@ export default function GroupInviteButton(inProps) {
         setList((prev) => [...prev, option]);
     };
     /**
-     * If there's no authUserId, component is hidden.
+     * If in group edit mode and logged-in user is not also the group manager, the component is hidden.
     //  */
-    if (!canEdit) {
+    if (group && !canEdit) {
         return null;
     }
     /**
@@ -240,7 +240,7 @@ export default function GroupInviteButton(inProps) {
                     React.createElement(Icon, { fontSize: "medium" }, "arrow_back")),
                 React.createElement(Typography, { className: classes.dialogTitle },
                     React.createElement(FormattedMessage, { id: "ui.groupInviteButton.dialog.title", defaultMessage: "ui.groupInviteButton.dialog.title" })),
-                React.createElement(LoadingButton, { size: "small", color: "secondary", variant: "contained", onClick: handleSendInvitations, loading: isSending },
+                React.createElement(LoadingButton, { size: "small", color: "secondary", variant: "contained", onClick: handleSendInvitations, loading: isSending, disabled: !invited.length },
                     React.createElement(FormattedMessage, { id: "ui.groupInviteButton.dialog.button.end", defaultMessage: "ui.groupInviteButton.dialog.button.end" }))) },
             React.createElement(Box, { className: classes.dialogContent },
                 React.createElement(Autocomplete, { className: classes.autocomplete, loading: loading, size: "small", multiple: true, freeSolo: true, disableClearable: true, options: suggested, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, value: invited, getOptionLabel: (option) => (option ? option.username : '...'), isOptionEqualToValue: (option, value) => (option ? value.id === option.id : false), renderTags: () => null, renderOption: (props, option) => (React.createElement(Box, Object.assign({ component: "li" }, props),

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

@@ -1,31 +1,27 @@
+import { SCGroupType } from '@selfcommunity/types';
 import { EndpointType } from '@selfcommunity/api-services';
-import { CacheStrategies } from '@selfcommunity/utils';
 import { GroupProps } from '../Group';
 export interface GroupsProps {
     /**
-     * Endpoint to call
-     */
-    endpoint: EndpointType;
-    /**
-     * Hides this component
-     * @default false
+     * Overrides or extends the styles applied to the component.
+     * @default null
      */
-    autoHide?: boolean;
+    className?: string;
     /**
-     * Limit the number of users to show
-     * @default false
+     * Endpoint to call
      */
-    limit?: number;
+    endpoint: EndpointType;
     /**
-     * Caching strategies
-     * @default CacheStrategies.CACHE_FIRST
+     * Props to spread to single group object
+     * @default {variant: 'outlined', ButtonBaseProps: {disableRipple: 'true'}}
      */
-    cacheStrategy?: CacheStrategies;
+    GroupComponentProps?: GroupProps;
     /**
-     * Props to spread to single group object
-     * @default empty object
+     * Prefetch groups. Useful for SSR.
+     * Use this to init the component with groups
+     * @default null
      */
-    GroupProps?: GroupProps;
+    prefetchedGroups?: SCGroupType[];
     /**
      * Other props
      */

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

@@ -1,11 +1,10 @@
-import { __rest } from "tslib";
-import React, { useEffect, useMemo, useReducer } from 'react';
+import { __awaiter, __rest } from "tslib";
+import React, { useEffect, useMemo, useState } from 'react';
 import { styled } from '@mui/material/styles';
-import { Box, Button, Grid, Typography } from '@mui/material';
+import { Box, Grid, Typography } from '@mui/material';
 import { http } from '@selfcommunity/api-services';
-import { CacheStrategies, Logger } from '@selfcommunity/utils';
-import { SCCache, SCPreferences, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
-import { actionWidgetTypes, dataWidgetReducer, stateWidgetInitializer } from '../../utils/widget';
+import { Logger } from '@selfcommunity/utils';
+import { SCPreferences, useIsComponentMountedRef, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
 import Skeleton from './Skeleton';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
@@ -63,116 +62,64 @@ export default function Groups(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { endpoint, autoHide = false, limit = 6, className, cacheStrategy = CacheStrategies.NETWORK_ONLY, onHeightChange, onStateChange, GroupProps = { variant: 'outlined', ButtonBaseProps: { disableRipple: true, component: Box } } } = props, rest = __rest(props, ["endpoint", "autoHide", "limit", "className", "cacheStrategy", "onHeightChange", "onStateChange", "GroupProps"]);
+    const { endpoint, className, GroupComponentProps = { variant: 'outlined', ButtonBaseProps: { disableRipple: true, component: Box } }, prefetchedGroups = [] } = props, rest = __rest(props, ["endpoint", "className", "GroupComponentProps", "prefetchedGroups"]);
     // STATE
-    const [state, dispatch] = useReducer(dataWidgetReducer, {
-        isLoadingNext: false,
-        next: null,
-        cacheKey: SCCache.getWidgetStateCacheKey(SCCache.GROUPS_LIST_TOOLS_STATE_CACHE_PREFIX_KEY),
-        cacheStrategy,
-        visibleItems: limit
-    }, stateWidgetInitializer);
+    const [groups, setGroups] = useState([]);
+    const [loading, setLoading] = useState(true);
     // CONTEXT
     const scUserContext = useSCUser();
     const scPreferencesContext = useSCPreferences();
     // MEMO
     const contentAvailability = useMemo(() => SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY in scPreferencesContext.preferences &&
         scPreferencesContext.preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value, [scPreferencesContext.preferences]);
-    // HOOKS
-    // const theme = useTheme<SCThemeType>();
-    // const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    // CONST
+    const authUserId = scUserContext.user ? scUserContext.user.id : null;
+    // REFS
+    const isMountedRef = useIsComponentMountedRef();
     /**
-     * Initialize component
-     * Fetch data only if the component is not initialized, and it is not loading data
+     * Fetches groups list
      */
-    const _initComponent = useMemo(() => () => {
-        if (!state.initialized && !state.isLoadingNext) {
-            dispatch({ type: actionWidgetTypes.LOADING_NEXT });
-            http
-                .request({
-                url: endpoint.url({ limit }),
-                method: endpoint.method
-            })
-                .then((payload) => {
-                dispatch({ type: actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: Object.assign(Object.assign({}, payload.data), { initialized: true }) });
-            })
-                .catch((error) => {
-                dispatch({ type: actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
-                Logger.error(SCOPE_SC_UI, error);
-            });
-        }
-    }, [state.isLoadingNext, state.initialized, endpoint, limit, dispatch]);
-    // EFFECTS
-    useEffect(() => {
-        var _a;
-        let _t;
-        if ((contentAvailability || (!contentAvailability && ((_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.id))) && scUserContext.user !== undefined) {
-            _t = setTimeout(_initComponent);
-            return () => {
-                _t && clearTimeout(_t);
-            };
-        }
-    }, [scUserContext.user, contentAvailability]);
-    useEffect(() => {
-        if (state.next && state.results.length === limit && state.initialized) {
-            dispatch({ type: actionWidgetTypes.LOADING_NEXT });
-            http
-                .request({
-                url: endpoint.url({ offset: limit, limit: 10 }),
-                method: endpoint.method
-            })
-                .then((payload) => {
-                dispatch({ type: actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: payload.data });
-            })
-                .catch((error) => {
-                dispatch({ type: actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
-                Logger.error(SCOPE_SC_UI, error);
-            });
-        }
-    }, [state.next, state.results.length, state.initialized, limit]);
+    const fetchGroups = (next = endpoint.url({})) => __awaiter(this, void 0, void 0, function* () {
+        const response = yield http.request({
+            url: next,
+            method: endpoint.method
+        });
+        const data = response.data;
+        return data.next ? data.results.concat(yield fetchGroups(data.next)) : data.results;
+    });
     /**
-     * Virtual feed update
+     * On mount, fetches groups list
      */
     useEffect(() => {
-        onHeightChange && onHeightChange();
-    }, [state.results]);
-    useEffect(() => {
-        if (!endpoint || (!contentAvailability && !scUserContext.user)) {
+        if (!contentAvailability && !authUserId) {
             return;
         }
-        else if (cacheStrategy === CacheStrategies.NETWORK_ONLY) {
-            onStateChange && onStateChange({ cacheStrategy: CacheStrategies.CACHE_FIRST });
+        else if (prefetchedGroups.length) {
+            setGroups(prefetchedGroups);
+            setLoading(false);
         }
-    }, [scUserContext.user, endpoint, contentAvailability]);
-    useEffect(() => {
-        if (!endpoint || !scUserContext.user || !state.initialized) {
-            return;
+        else {
+            fetchGroups()
+                .then((data) => {
+                if (isMountedRef.current) {
+                    setGroups(data);
+                    setLoading(false);
+                }
+            })
+                .catch((error) => {
+                Logger.error(SCOPE_SC_UI, error);
+            });
         }
-    }, []);
-    // HANDLERS
-    const handleNext = useMemo(() => () => {
-        dispatch({ type: actionWidgetTypes.LOADING_NEXT });
-        http
-            .request({
-            url: state.next,
-            method: endpoint.method
-        })
-            .then((res) => {
-            dispatch({ type: actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: res.data });
-        });
-    }, [dispatch, state.next, state.isLoadingNext, state.initialized, endpoint.method]);
+    }, [contentAvailability, authUserId, prefetchedGroups.length]);
     // RENDER
-    if ((autoHide && !state.count && state.initialized) || (!contentAvailability && !scUserContext.user) || !endpoint) {
+    if (!contentAvailability && !scUserContext.user) {
         return React.createElement(HiddenPlaceholder, null);
     }
-    if (!state.initialized) {
-        return React.createElement(Skeleton, null);
-    }
-    const content = (React.createElement(React.Fragment, null, !state.count ? (React.createElement(Typography, { className: classes.noResults, variant: "body2" },
-        React.createElement(FormattedMessage, { id: "ui.groupRequestsWidget.subtitle.noResults", defaultMessage: "" }))) : (React.createElement(React.Fragment, null,
-        React.createElement(Grid, { container: true, spacing: { xs: 3 }, className: classes.groups }, state.results.slice(0, state.visibleItems).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 }, GroupProps)))))),
-        state.count > state.visibleItems && (React.createElement(Button, { className: classes.showMore, onClick: handleNext },
-            React.createElement(FormattedMessage, { id: "ui.groupRequestsWidget.button.showMore", defaultMessage: "ui.groupRequestsWidget.button.showMore" })))))));
+    const content = (React.createElement(React.Fragment, null, loading ? (React.createElement(Skeleton, null)) : (React.createElement(Grid, { container: true, spacing: { xs: 3 }, className: classes.groups }, !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(React.Fragment, null, groups.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 }, GroupComponentProps)))))))))));
     return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest), content));
 }