@selfcommunity/react-ui 0.7.9-alpha.1 → 0.7.9-alpha.11

package/lib/cjs/components/BottomNavigation/BottomNavigation.js

@@ -14,7 +14,7 @@ const classes = {
     root: `${PREFIX}-root`,
     ios: `${PREFIX}-ios`,
     action: `${PREFIX}-action`,
-    composer: `${PREFIX}-composer`,
+    composer: `${PREFIX}-composer`
 };
 const Root = (0, material_1.styled)(material_1.BottomNavigation, {
     name: PREFIX,
@@ -62,6 +62,7 @@ function BottomNavigation(inProps) {
     const { preferences, features } = (0, react_core_1.useSCPreferences)();
     // MEMO
     const privateMessagingEnabled = (0, react_1.useMemo)(() => features.includes(types_1.SCFeatureName.PRIVATE_MESSAGING), [features]);
+    const groupsEnabled = (0, react_1.useMemo)(() => features.includes(types_1.SCFeatureName.GROUPING), [features]);
     const isIOS = (0, react_1.useMemo)(() => (0, utils_1.iOS)(), []);
     // RENDER
     return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root, { [classes.ios]: isIOS }) }, rest), children
@@ -71,6 +72,7 @@ function BottomNavigation(inProps) {
             (scUserContext.user || preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value) &&
                 preferences[react_core_1.SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED].value ? (react_1.default.createElement(material_1.BottomNavigationAction, { key: "explore", className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {}), icon: react_1.default.createElement(material_1.Icon, null, "explore") })) : null,
             react_1.default.createElement(material_1.BottomNavigationAction, { key: "composer", className: (0, classnames_1.default)(classes.composer, classes.action), component: ComposerIconButton_1.default, disableRipple: true }),
+            groupsEnabled && scUserContext.user ? (react_1.default.createElement(material_1.BottomNavigationAction, { key: "groups", className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUPS_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.GROUPS_ROUTE_NAME, {}), icon: react_1.default.createElement(material_1.Icon, null, "groups") })) : null,
             scUserContext.user ? (react_1.default.createElement(material_1.BottomNavigationAction, { key: "notifications", className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), icon: react_1.default.createElement(material_1.Badge, { badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" },
                     react_1.default.createElement(material_1.Icon, null, "notifications_active")) })) : null,
             privateMessagingEnabled && scUserContext.user ? (react_1.default.createElement(material_1.BottomNavigationAction, { key: "messages", className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), icon: react_1.default.createElement(material_1.Badge, { badgeContent: 0, color: "secondary" },

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

@@ -0,0 +1,55 @@
+export interface ChangeGroupCoverProps {
+    /**
+     * Id of the group. It is optional only for group creation modal.
+     * @default null
+     */
+    groupId?: number;
+    /**
+     * On change function.
+     * @default null
+     */
+    onChange?: (cover: any) => void;
+    /**
+     * Hides this component
+     * @default false
+     */
+    autoHide?: boolean;
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Prop to handle cover loading in the create group modal.
+     * @default false
+     */
+    isCreationMode?: boolean;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS Change Group Cover component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a button that allows admins to edit the group cover and a popover that specifies format and sizes allowed.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/ChangeGroupCover)
+
+ #### Import
+ ```jsx
+ import {ChangeGroupCover} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCChangeGroupCoverButton` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCChangeGroupCoverButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function ChangeGroupCover(inProps: ChangeGroupCoverProps): JSX.Element;

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

@@ -0,0 +1,140 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
+const react_core_1 = require("@selfcommunity/react-core");
+const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
+const react_intl_1 = require("react-intl");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const system_1 = require("@mui/system");
+const constants_1 = require("./constants");
+const lab_1 = require("@mui/lab");
+const api_services_1 = require("@selfcommunity/api-services");
+const Errors_1 = require("../../constants/Errors");
+const utils_1 = require("@selfcommunity/utils");
+const classes = {
+    root: `${constants_1.PREFIX}-root`
+};
+const Root = (0, styles_1.styled)(lab_1.LoadingButton, {
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
+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'
+    }
+});
+/**
+ * > API documentation for the Community-JS Change Group Cover component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a button that allows admins to edit the group cover and a popover that specifies format and sizes allowed.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/ChangeGroupCover)
+
+ #### Import
+ ```jsx
+ import {ChangeGroupCover} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCChangeGroupCoverButton` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCChangeGroupCoverButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+function ChangeGroupCover(inProps) {
+    //PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { groupId, onChange, autoHide, className, isCreationMode = false } = props, rest = tslib_1.__rest(props, ["groupId", "onChange", "autoHide", "className", "isCreationMode"]);
+    //CONTEXT
+    const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
+    //STATE
+    let fileInput = (0, react_1.useRef)(null);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [alert, setAlert] = (0, react_1.useState)(null);
+    // INTL
+    const intl = (0, react_intl_1.useIntl)();
+    // Anonymous
+    if (!scUserContext.user) {
+        return null;
+    }
+    /**
+     * Handles file upload
+     * @param event
+     */
+    const handleUpload = (event) => {
+        fileInput = event.target.files[0];
+        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
+     */
+    function handleSave() {
+        setLoading(true);
+        const formData = new FormData();
+        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // @ts-ignore
+        formData.append('emotional_image_original', fileInput);
+        api_services_1.GroupService.changeGroupAvatarOrCover(groupId, formData, { headers: { 'Content-Type': 'multipart/form-data' } })
+            .then((data) => {
+            onChange && onChange(data.emotional_image);
+            setLoading(false);
+        })
+            .catch((error) => {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+            setLoading(false);
+            setAlert(intl.formatMessage(messages.errorLoadImage));
+        });
+    }
+    /**
+     * If there is an error
+     */
+    if (alert) {
+        return (react_1.default.createElement(material_1.Alert, { color: "error", onClose: () => setAlert(null) }, alert));
+    }
+    /**
+     * Renders root object (if not hidden by autoHide prop)
+     */
+    if (!autoHide) {
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }),
+            react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), size: "medium", variant: "contained", disabled: loading, onClick: () => fileInput.current.click(), loading: loading }, rest),
+                react_1.default.createElement(Icon_1.default, null, "image"))));
+    }
+    return null;
+}
+exports.default = ChangeGroupCover;

package/lib/cjs/components/ChangeGroupCover/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCChangeGroupCoverButton";

package/lib/cjs/components/ChangeGroupCover/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCChangeGroupCoverButton';

package/lib/cjs/components/ChangeGroupCover/index.d.ts

@@ -0,0 +1,3 @@
+import ChangeGroupCover, { ChangeGroupCoverProps } from './ChangeGroupCover';
+export default ChangeGroupCover;
+export { ChangeGroupCoverProps };

package/lib/cjs/components/ChangeGroupCover/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const ChangeGroupCover_1 = tslib_1.__importDefault(require("./ChangeGroupCover"));
+exports.default = ChangeGroupCover_1.default;

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

@@ -0,0 +1,57 @@
+export interface ChangeGroupPictureProps {
+    /**
+     * Id of the group. It is optional only for group creation modal.
+     * @default null
+     */
+    groupId?: number;
+    /**
+     * On change function.
+     * @default null
+     */
+    onChange?: (cover: any) => void;
+    /**
+     * Hides this component
+     * @default false
+     */
+    autoHide?: boolean;
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Prop to handle avatar loading in the create group modal.
+     * @default false
+     */
+    isCreationMode?: boolean;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS Change Group Picture component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a button that allows admins to manage their group pictures.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/ChangeGroupPicture)
+
+ #### Import
+
+ ```jsx
+ import {ChangeGroupPicture} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCChangeGroupPictureButton` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCChangeGroupPictureButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function ChangeGroupPicture(inProps: ChangeGroupPictureProps): JSX.Element;

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

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
+const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
+const react_core_1 = require("@selfcommunity/react-core");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const system_1 = require("@mui/system");
+const constants_1 = require("./constants");
+const Errors_1 = require("../../constants/Errors");
+const api_services_1 = require("@selfcommunity/api-services");
+const utils_1 = require("@selfcommunity/utils");
+const react_intl_1 = require("react-intl");
+const lab_1 = require("@mui/lab");
+const messages = (0, react_intl_1.defineMessages)({
+    errorLoadImage: {
+        id: 'ui.changeGroupPicture.alert',
+        defaultMessage: 'ui.changeGroupPicture.alert'
+    }
+});
+const classes = {
+    root: `${constants_1.PREFIX}-root`
+};
+const Root = (0, styles_1.styled)(lab_1.LoadingButton, {
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS Change Group Picture component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a button that allows admins to manage their group pictures.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/ChangeGroupPicture)
+
+ #### Import
+
+ ```jsx
+ import {ChangeGroupPicture} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCChangeGroupPictureButton` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCChangeGroupPictureButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+function ChangeGroupPicture(inProps) {
+    //PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { groupId, onChange, autoHide, className, isCreationMode = false } = props, rest = tslib_1.__rest(props, ["groupId", "onChange", "autoHide", "className", "isCreationMode"]);
+    //STATE
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [alert, setAlert] = (0, react_1.useState)(null);
+    let fileInput = (0, react_1.useRef)(null);
+    //CONTEXT
+    const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
+    // INTL
+    const intl = (0, react_intl_1.useIntl)();
+    // Anonymous
+    if (!scUserContext.user) {
+        return null;
+    }
+    /**
+     * Handles avatar upload
+     * @param event
+     */
+    function handleUpload(event) {
+        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
+     */
+    function handleSave() {
+        setLoading(true);
+        const formData = new FormData();
+        formData.append('image_original', fileInput);
+        api_services_1.GroupService.changeGroupAvatarOrCover(groupId, formData, { headers: { 'Content-Type': 'multipart/form-data' } })
+            .then((data) => {
+            setLoading(false);
+            onChange && onChange(data.image_bigger);
+        })
+            .catch((error) => {
+            setAlert(intl.formatMessage(messages.errorLoadImage));
+            setLoading(false);
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+        });
+    }
+    /**
+     * If there is an error
+     */
+    if (alert) {
+        return (react_1.default.createElement(material_1.Alert, { color: "error", onClose: () => setAlert(null) }, alert));
+    }
+    /**
+     * Renders the component (if not hidden by autoHide prop)
+     */
+    if (!autoHide) {
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }),
+            react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), size: "small", variant: "contained", disabled: loading, onClick: () => fileInput.current.click(), loading: loading }, rest),
+                react_1.default.createElement(Icon_1.default, null, "photo_camera"))));
+    }
+    return null;
+}
+exports.default = ChangeGroupPicture;

package/lib/cjs/components/ChangeGroupPicture/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCChangeGroupPictureButton";

package/lib/cjs/components/ChangeGroupPicture/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCChangeGroupPictureButton';

package/lib/cjs/components/ChangeGroupPicture/index.d.ts

@@ -0,0 +1,3 @@
+import ChangeGroupPicture, { ChangeGroupPictureProps } from './ChangeGroupPicture';
+export default ChangeGroupPicture;
+export { ChangeGroupPictureProps };

package/lib/cjs/components/ChangeGroupPicture/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const ChangeGroupPicture_1 = tslib_1.__importDefault(require("./ChangeGroupPicture"));
+exports.default = ChangeGroupPicture_1.default;

package/lib/cjs/components/Composer/Attributes/Attributes.d.ts

@@ -16,7 +16,7 @@ export interface AttributesProps extends Omit<BoxProps, 'value' | 'onChange' | '
      * @param value
      * @default empty object
      */
-    onClick?: (attribute: 'categories' | 'addressing' | 'location') => void;
+    onClick?: (attribute: 'categories' | 'group' | 'addressing' | 'location') => void;
 }
 declare const _default: (props: AttributesProps) => JSX.Element;
 export default _default;

package/lib/cjs/components/Composer/Attributes/Attributes.js

@@ -26,6 +26,12 @@ exports.default = (props) => {
     const handleClickCategory = (0, react_1.useCallback)(() => {
         onClick && onClick('categories');
     }, [onClick]);
+    const handleDeleteGroup = (0, react_1.useCallback)(() => {
+        onChange && onChange(Object.assign(Object.assign({}, value), { group: null }));
+    }, [value, onChange]);
+    const handleClickGroup = (0, react_1.useCallback)(() => {
+        onClick && onClick('group');
+    }, [onClick]);
     const handleDeleteTag = (0, react_1.useCallback)((id) => () => {
         onChange && onChange(Object.assign(Object.assign({}, value), { addressing: value.addressing.filter((tag) => tag.id !== id) }));
     }, [value, onChange]);
@@ -41,6 +47,7 @@ exports.default = (props) => {
     return (react_1.default.createElement(Root, { className: (0, classnames_1.default)(classes.root, className) },
         ((_a = value === null || value === void 0 ? void 0 : value.categories) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
             (value === null || value === void 0 ? void 0 : value.categories.map((c) => (react_1.default.createElement(material_1.Chip, { key: c.id, label: c.name, onDelete: handleDeleteCategory(c.id), icon: react_1.default.createElement(Icon_1.default, null, "category"), onClick: handleClickCategory })))),
+        (value === null || value === void 0 ? void 0 : value.group) && (react_1.default.createElement(material_1.Chip, { key: value === null || value === void 0 ? void 0 : value.group.id, label: value === null || value === void 0 ? void 0 : value.group.name, onDelete: handleDeleteGroup, icon: react_1.default.createElement(Icon_1.default, null, "groups"), onClick: handleClickGroup })),
         ((_b = value === null || value === void 0 ? void 0 : value.addressing) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
             (value === null || value === void 0 ? void 0 : value.addressing.map((t) => (react_1.default.createElement(TagChip_1.default, { key: t.id, tag: t, onDelete: handleDeleteTag(t.id), icon: react_1.default.createElement(Icon_1.default, null, "label"), onClick: handleClickTag })))),
         (value === null || value === void 0 ? void 0 : value.location) && (react_1.default.createElement(material_1.Chip, { icon: react_1.default.createElement(Icon_1.default, null, "add_location_alt"), label: value === null || value === void 0 ? void 0 : value.location.location, onDelete: handleDeleteLocation, onClick: handleClickLocation }))));

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

@@ -1,5 +1,5 @@
 import { SyntheticEvent } from 'react';
-import { SCCategoryType, SCContributionType, SCFeedDiscussionType, SCFeedPostType, SCFeedStatusType, SCMediaType, SCPollType, SCTagType } from '@selfcommunity/types';
+import { SCCategoryType, SCContributionType, SCFeedDiscussionType, SCFeedPostType, SCFeedStatusType, SCGroupType, SCMediaType, SCPollType, SCTagType } from '@selfcommunity/types';
 import { DialogProps } from '@mui/material';
 import { EditorProps } from '../Editor';
 import { SCMediaObjectType } from '../../types/media';
@@ -27,6 +27,7 @@ export interface ComposerProps extends Omit<DialogProps, 'defaultValue' | 'scrol
         title?: string;
         text?: string;
         categories?: SCCategoryType[];
+        group?: SCGroupType;
         audience?: string;
         addressing?: SCTagType[];
         medias?: SCMediaType[];

package/lib/cjs/components/Composer/Composer.js

@@ -59,7 +59,9 @@ const COMPOSER_INITIAL_STATE = {
     html: '',
     htmlError: null,
     categories: [],
+    group: null,
     categoriesError: null,
+    groupsError: null,
     addressing: null,
     addressingError: null,
     medias: [],
@@ -133,7 +135,7 @@ function Composer(inProps) {
     const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
     const [layer, setLayer] = (0, react_1.useState)();
     const [state, dispatch] = (0, react_1.useReducer)(reducer, Object.assign(Object.assign(Object.assign({}, COMPOSER_INITIAL_STATE), defaultValue), { key: (0, utils_1.random)() }));
-    const { key, id, type, title, titleError, html, categories, addressing, audience, medias, poll, pollError, location, error } = state;
+    const { key, id, type, title, titleError, html, categories, group, addressing, audience, medias, poll, pollError, location, error } = state;
     const destructureFeedObject = (_feedObject) => {
         if (_feedObject.type === types_1.SCContributionType.POST) {
             _feedObject = _feedObject;
@@ -153,6 +155,7 @@ function Composer(inProps) {
                     title: _feedObject.title,
                     html: _feedObject.html,
                     categories: _feedObject.categories,
+                    group: _feedObject.group,
                     addressing: _feedObject.addressing,
                     medias: _feedObject.medias,
                     poll: _feedObject.poll,
@@ -304,18 +307,23 @@ function Composer(inProps) {
         }
     }), [handleAddLayer, handleRemoveLayer, handleChangeCategories, categories]);
     const handleChangeAudience = (0, react_1.useCallback)((value) => {
-        dispatch({ type: 'addressing', value });
+        if (group || typeof value === 'object') {
+            dispatch({ type: 'group', value });
+        }
+        else {
+            dispatch({ type: 'addressing', value });
+        }
         setLayer(null);
-    }, []);
+    }, [group]);
     const handleAddAudienceLayer = (0, react_1.useCallback)(() => handleAddLayer({
         name: 'audience',
         Component: AudienceLayer_1.default,
         ComponentProps: {
             onClose: handleRemoveLayer,
             onSave: handleChangeAudience,
-            defaultValue: addressing
+            defaultValue: group || typeof addressing === 'object' ? group : addressing
         }
-    }), [handleAddLayer, handleRemoveLayer, handleChangeAudience, addressing]);
+    }), [handleAddLayer, handleRemoveLayer, handleChangeAudience, addressing, group]);
     const handleChangeLocation = (0, react_1.useCallback)((value) => {
         dispatch({ type: 'location', value });
         setLayer(null);
@@ -406,6 +414,9 @@ function Composer(inProps) {
         if (features.includes(types_1.SCFeatureName.TAGGING) && addressing !== null) {
             data.addressing = addressing.map((t) => t.id);
         }
+        if (features.includes(types_1.SCFeatureName.GROUPING) && group !== null) {
+            data.group = group.id;
+        }
         setIsSubmitting(true);
         // Finding right url
         const _type = type === Composer_1.COMPOSER_TYPE_POLL ? types_1.SCContributionType.POST : type;
@@ -433,7 +444,7 @@ function Composer(inProps) {
             dispatch({ type: 'multiple', value: (0, api_services_1.formatHttpErrorCode)(error) });
         })
             .then(() => setIsSubmitting(false));
-    }, [scUserContext.user, feedObjectType, id, type, title, html, categories, addressing, audience, medias, poll, location, hasPoll]);
+    }, [scUserContext.user, feedObjectType, id, type, title, html, categories, group, addressing, audience, medias, poll, location, hasPoll]);
     //edited here
     const handleClose = (0, react_1.useCallback)((event, reason) => {
         if (unloadRef.current) {
@@ -488,13 +499,29 @@ function Composer(inProps) {
         }
         switch (type) {
             case Composer_1.COMPOSER_TYPE_POLL:
-                return (react_1.default.createElement(ContentPoll_1.default, { key: key, onChange: handleChangePoll, value: { html, categories, addressing, medias, poll, location }, error: pollError, disabled: isSubmitting }));
+                return (react_1.default.createElement(ContentPoll_1.default, { key: key, onChange: handleChangePoll, value: { html, group, addressing, medias, poll, location }, error: pollError, disabled: isSubmitting }));
             case types_1.SCContributionType.DISCUSSION:
-                return (react_1.default.createElement(ContentDiscussion_1.default, { key: key, value: { title, html, categories, addressing, medias, poll, location }, error: { titleError, error }, onChange: handleChangeDiscussion, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: true, uploadImage: true }, EditorProps) }));
+                return (react_1.default.createElement(ContentDiscussion_1.default, { key: key, value: { title, html, categories, group, addressing, medias, poll, location }, error: { titleError, error }, onChange: handleChangeDiscussion, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: true, uploadImage: true }, EditorProps) }));
             default:
-                return (react_1.default.createElement(ContentPost_1.default, { key: key, value: { html, categories, addressing, medias, poll, location }, error: { error }, onChange: handleChangePost, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: false, uploadImage: false }, EditorProps) }));
+                return (react_1.default.createElement(ContentPost_1.default, { key: key, value: { html, categories, group, addressing, medias, poll, location }, error: { error }, onChange: handleChangePost, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: false, uploadImage: false }, EditorProps) }));
         }
-    }, [key, type, title, html, categories, addressing, medias, poll, pollError, location, error, handleChangePoll, handleChangePost, isSubmitting]);
+    }, [
+        key,
+        type,
+        title,
+        html,
+        categories,
+        group,
+        addressing,
+        medias,
+        poll,
+        pollError,
+        location,
+        error,
+        handleChangePoll,
+        handleChangePost,
+        isSubmitting
+    ]);
     if (!scUserContext.user && !(scUserContext.loading && open)) {
         return null;
     }
@@ -506,7 +533,7 @@ function Composer(inProps) {
                 react_1.default.createElement(LoadingButton_1.default, { size: "small", type: "submit", color: "secondary", variant: "contained", disabled: !canSubmit, loading: isSubmitting },
                     react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.submit", defaultMessage: "ui.composer.submit" }))),
             react_1.default.createElement(material_1.DialogContent, { className: classes.content },
-                react_1.default.createElement(Attributes_1.default, { value: { categories, addressing, location }, className: classes.attributes, onChange: handleChangeAttributes, onClick: handleClickAttributes }),
+                react_1.default.createElement(Attributes_1.default, { value: { categories, group, addressing, location }, className: classes.attributes, onChange: handleChangeAttributes, onClick: handleClickAttributes }),
                 content,
                 medias && medias.length > 0 && (react_1.default.createElement(material_1.Box, { className: classes.medias }, mediaObjectTypes.map((mediaObjectType) => {
                     if (mediaObjectType.previewComponent) {
@@ -526,7 +553,7 @@ function Composer(inProps) {
                 }),
                 react_1.default.createElement(material_1.IconButton, { disabled: isSubmitting, onClick: handleAddCategoryLayer },
                     react_1.default.createElement(Icon_1.default, null, "category")),
-                react_1.default.createElement(material_1.IconButton, { disabled: isSubmitting || !features.includes(types_1.SCFeatureName.TAGGING), onClick: handleAddAudienceLayer }, addressing === null || addressing.length === 0 ? react_1.default.createElement(Icon_1.default, null, "public") : react_1.default.createElement(Icon_1.default, null, "label")),
+                react_1.default.createElement(material_1.IconButton, { disabled: isSubmitting || !features.includes(types_1.SCFeatureName.TAGGING), onClick: handleAddAudienceLayer }, addressing === null || addressing.length === 0 ? (react_1.default.createElement(Icon_1.default, null, "public")) : typeof addressing === 'object' ? (react_1.default.createElement(Icon_1.default, null, "groups")) : (react_1.default.createElement(Icon_1.default, null, "label"))),
                 preferences[react_core_1.SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED].value && (react_1.default.createElement(material_1.IconButton, { disabled: isSubmitting, onClick: handleAddLocationLayer, color: location !== null ? 'primary' : 'default' },
                     react_1.default.createElement(Icon_1.default, null, "add_location_alt"))))),
         layer && (react_1.default.createElement(LayerTransitionRoot, { className: classes.layerTransitionRoot, in: true, container: dialogRef.current, direction: "left" },

package/lib/cjs/components/Composer/Content/ContentDiscussion/ContentDiscussion.js

@@ -26,6 +26,7 @@ const Root = (0, styles_1.styled)(material_1.Box, {
 const DEFAULT_DISCUSSION = {
     title: '',
     categories: [],
+    group: null,
     medias: [],
     html: '',
     addressing: []
@@ -45,9 +46,12 @@ exports.default = (props) => {
     }, [value]);
     // RENDER
     return (react_1.default.createElement(Root, { className: (0, classnames_1.default)(classes.root, className) },
-        generalError && react_1.default.createElement(material_1.Typography, { className: classes.generalError },
-            react_1.default.createElement(react_intl_1.FormattedMessage, { id: `ui.composer.error.${generalError}`, defaultMessage: `ui.composer.error.${generalError}` })),
-        react_1.default.createElement(material_1.TextField, { className: classes.title, placeholder: intl.formatMessage({ id: "ui.composer.content.discussion.title.label", defaultMessage: "ui.composer.content.discussion.title.label" }), autoFocus: true, fullWidth: true, variant: "outlined", value: value.title, multiline: true, onChange: handleChangeTitle, InputProps: {
+        generalError && (react_1.default.createElement(material_1.Typography, { className: classes.generalError },
+            react_1.default.createElement(react_intl_1.FormattedMessage, { id: `ui.composer.error.${generalError}`, defaultMessage: `ui.composer.error.${generalError}` }))),
+        react_1.default.createElement(material_1.TextField, { className: classes.title, placeholder: intl.formatMessage({
+                id: 'ui.composer.content.discussion.title.label',
+                defaultMessage: 'ui.composer.content.discussion.title.label'
+            }), autoFocus: true, fullWidth: true, variant: "outlined", value: value.title, multiline: true, onChange: handleChangeTitle, InputProps: {
                 endAdornment: react_1.default.createElement(material_1.Typography, { variant: "body2" }, Composer_1.COMPOSER_TITLE_MAX_LENGTH - value.title.length)
             }, error: Boolean(titleError), helperText: titleError, disabled: disabled }),
         react_1.default.createElement(Editor_1.default, Object.assign({}, EditorProps, { editable: !disabled, className: classes.editor, onChange: handleChangeHtml, defaultValue: value.html }))));