@selfcommunity/react-ui 0.7.0-alpha.334 → 0.7.0-alpha.336

package/lib/esm/components/Composer/Composer.js

@@ -1,109 +1,66 @@
 import { __rest } from "tslib";
-import React, { forwardRef, useEffect, useMemo, useReducer, useRef, useState } from 'react';
-import { SCFeatureName } from '@selfcommunity/types';
+import React, { forwardRef, useCallback, useEffect, useMemo, useReducer, useRef, useState, } from 'react';
+import { SCContributionType, SCFeatureName, } from '@selfcommunity/types';
 import { Endpoints, formatHttpErrorCode, http } from '@selfcommunity/api-services';
-import { SCPreferences, UserUtils, useSCFetchAddressingTagList, useSCPreferences, useSCUser, } from '@selfcommunity/react-core';
+import { SCPreferences, UserUtils, useSCPreferences, useSCUser, } from '@selfcommunity/react-core';
 import { FormattedMessage } from 'react-intl';
 import Icon from '@mui/material/Icon';
-import { Alert, AlertTitle, Avatar, Badge, Box, Chip, Dialog, DialogActions, DialogContent, DialogTitle, Fade, FormControl, IconButton, InputBase, MenuItem, Select, Stack, Tab, Tabs, TextField, Tooltip, Typography, useMediaQuery } from '@mui/material';
+import { Alert, AlertTitle, Box, Dialog, DialogActions, DialogContent, DialogTitle, Fade, IconButton, Slide, useMediaQuery, } from '@mui/material';
 import { styled, useTheme } from '@mui/material/styles';
-import { COMPOSER_POLL_MIN_CHOICES, COMPOSER_TITLE_MAX_LENGTH, COMPOSER_TYPE_DISCUSSION, COMPOSER_TYPE_POST } from '../../constants/Composer';
+import { COMPOSER_POLL_MIN_CHOICES, COMPOSER_TITLE_MAX_LENGTH, COMPOSER_TYPE_POLL } from '../../constants/Composer';
 import { MEDIA_TYPE_SHARE } from '../../constants/Media';
 import LoadingButton from '@mui/lab/LoadingButton';
-import Audience from './Audience';
-import CategoryAutocomplete from '../CategoryAutocomplete';
-import { iOS, isObject, random, stripHtml } from '@selfcommunity/utils';
+import AudienceLayer from './Layer/AudienceLayer';
+import { iOS, random, stripHtml } from '@selfcommunity/utils';
 import classNames from 'classnames';
-import PollPreview from '../FeedObject/Poll';
-import Editor from '../Editor';
-import { Document, Image, Link, Share } from '../../shared/Media';
-import MediasPreview from '../../shared/MediasPreview';
-import Poll from './Poll';
-import LocationAutocomplete from '../LocationAutocomplete';
-import TagChip from '../../shared/TagChip';
-import { ComposerSkeleton } from './index';
+import ContentPoll from './Content/ContentPoll';
 import { useSnackbar } from 'notistack';
 import { useThemeProps } from '@mui/system';
 import { extractHashtags } from '../../utils/editor';
+import TypeSwitchButtonGroup from './TypeSwitchButtonGroup';
+import ContentPost from './Content/ContentPost';
+import CategoryLayer from './Layer/CategoryLayer';
+import LocationLayer from './Layer/LocationLayer';
+import ContentDiscussion from './Content/ContentDiscussion';
+import { File, Link, Share } from '../../shared/Media';
+import Attributes from './Attributes';
+import { PREFIX } from './constants';
+import ComposerSkeleton from './Skeleton';
+import CloseLayer from './Layer/CloseLayer';
 const DialogTransition = forwardRef(function Transition(props, ref) {
     return React.createElement(Fade, Object.assign({ ref: ref }, props));
 });
-const TypeInput = styled(InputBase, {
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    '&.Mui-InputBase-root': {
-        'label + &': {
-            marginTop: theme.spacing(3)
-        }
-    },
-    '& .Mui-InputBase-input': {
-        position: 'relative',
-        backgroundColor: theme.palette.background.paper,
-        border: 0,
-        padding: '10px 26px 10px 12px'
-    }
-}));
-const PREFIX = 'SCComposer';
 const classes = {
     root: `${PREFIX}-root`,
     ios: `${PREFIX}-ios`,
-    writing: `${PREFIX}-writing`,
     title: `${PREFIX}-title`,
-    titleDense: `${PREFIX}-title-dense`,
     types: `${PREFIX}-types`,
-    avatar: `${PREFIX}-avatar`,
     content: `${PREFIX}-content`,
-    mediaContent: `${PREFIX}-mediaContent`,
-    audienceContent: `${PREFIX}-audienceContent`,
-    locationContent: `${PREFIX}-locationContent`,
-    block: `${PREFIX}-block`,
-    editor: `${PREFIX}-editor`,
-    divider: `${PREFIX}-divider`,
+    attributes: `${PREFIX}-attributes`,
     medias: `${PREFIX}-medias`,
-    location: `${PREFIX}-location`,
-    audience: `${PREFIX}-audience`,
-    mediasActions: `${PREFIX}-mediasActions`,
-    mediasActionsTitle: `${PREFIX}-mediasActionsTitle`,
-    mediasActionsActions: `${PREFIX}-mediasActionsActions`,
-    sortableMedia: `${PREFIX}-sortableMedia`,
-    sortableMediaCover: `${PREFIX}-sortableMediaCover`,
-    links: `${PREFIX}-links`,
     actions: `${PREFIX}-actions`,
-    mediaActions: `${PREFIX}-media-actions`,
-    filterActions: `${PREFIX}-filter-actions`,
-    actionInput: `${PREFIX}-actionInput`,
-    badgeError: `${PREFIX}-badgeError`
+    layerTransitionRoot: `${PREFIX}-layer-transition-root`
 };
 const Root = styled(Dialog, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
 })(() => ({}));
-export const MAIN_VIEW = 'main';
-export const AUDIENCE_VIEW = 'audience';
-export const POLL_VIEW = 'poll';
-export const LOCATION_VIEW = 'location';
-const AUDIENCE_ALL = 'all';
-const AUDIENCE_TAG = 'tag';
-const PREFERENCES = [
-    SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED,
-    SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED,
-    SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED,
-    SCPreferences.ADDONS_POLLS_ENABLED,
-    SCPreferences.ADDONS_VIDEO_UPLOAD_ENABLED
-];
+const LayerTransitionRoot = styled(Slide, {
+    name: PREFIX,
+    slot: 'LayerTransitionRoot',
+    overridesResolver: (props, styles) => styles.layerTransitionRoot
+})(({ theme }) => ({}));
 const COMPOSER_INITIAL_STATE = {
     id: null,
     type: null,
     title: '',
     titleError: null,
-    text: '',
-    textError: null,
+    html: '',
+    htmlError: null,
     categories: [],
     categoriesError: null,
-    audience: AUDIENCE_ALL,
-    addressing: [],
+    addressing: null,
     addressingError: null,
     medias: [],
     poll: null,
@@ -138,30 +95,14 @@ const reducer = (state, action) => {
  |Rule Name|Global class|Description|
  |---|---|---|
  |root|.SCComposer-root|Styles applied to the root element.|
- |writing|.SCComposer-writing|Styles applied to the root element when user is writing in the editor.|
+ |ios|.SCComposer-ios|Styles applied to the root element when the device is ios.|
  |title|.SCComposer-title|Styles applied to the title element.|
- |titleDense|.SCComposer-title-dense|Styles applied to the dense title element.|
  |types|.SCComposer-types|Styles applied to the types element.|
- |avatar|.SCComposer-avatar|Styles applied to the avatar element.|
  |content|.SCComposer-content|Styles applied to the content.|
- |mediaContent|.SCComposer-mediaContent|Styles applied to the media content.|
- |audienceContent|.SCComposer-audienceContent|Styles applied to the audience content.|
- |locationContent|.SCComposer-locationContent|Styles applied to the location content.|
- |block|.SCComposer-block|Styles applied to the block element.|
- |editor|.SCComposer-editor|Styles applied to the editor element.|
- |divider|.SCComposer-divider|Styles applied to the divider element.|
+ |attributes|.SCComposer-attributes|Styles applied to the attributes.|
  |medias|.SCComposer-medias|Styles applied to the medias.|
- |location|.SCComposer-location|Styles applied to the location element.|
- |audience|.SCComposer-audience|Styles applied to the audience element.|
- |mediasActions|.SCComposer-mediasActions|Styles applied to the medias actions section.|
- |sortableMedia|.SCComposer-sortableMedia|Styles applied to the sortable media element.|
- |sortableMediaCover|.SCComposer-sortableMediaCover|Styles applied to the sortable media cover element.|
- |links|.SCComposer-links|Styles applied to the links element.|
  |actions|.SCComposer-actions|Styles applied to the actions section.|
- |mediaActions|.SCComposer-media-actions|Styles applied to the media actions section.|
- |filterActions|.SCComposer-filter-actions|Styles applied to the filter actions section.|
- |actionInput|.SCComposer-actionInput|Styles applied to the action input element.|
- |badgeError|.SCComposer-badgeError|Styles applied to the badge error element.|
+ |layerTransitionRoot|.SCComposer-layer-transition-root|Styles applied to the overlay layers (eg. location).|
 
 
  * @param inProps
@@ -172,31 +113,24 @@ export default function Composer(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { feedObjectId = null, feedObjectType = null, feedObject = null, defaultValue = {}, view = MAIN_VIEW, mediaObjectTypes = [Image, Document, Link, Share], EditorProps = null, onClose = null, onSuccess = null, maxWidth } = props, rest = __rest(props, ["feedObjectId", "feedObjectType", "feedObject", "defaultValue", "view", "mediaObjectTypes", "EditorProps", "onClose", "onSuccess", "maxWidth"]);
+    const { feedObjectId = null, feedObjectType = null, feedObject = null, defaultValue = {}, mediaObjectTypes = [File, Link, Share], EditorProps = {}, onClose = null, onSuccess = null, maxWidth } = props, rest = __rest(props, ["feedObjectId", "feedObjectType", "feedObject", "defaultValue", "mediaObjectTypes", "EditorProps", "onClose", "onSuccess", "maxWidth"]);
     // Context
-    const scPrefernces = useSCPreferences();
+    const { preferences, features } = useSCPreferences();
     const scUserContext = useSCUser();
     const { enqueueSnackbar } = useSnackbar();
     // HOOKS
-    const { scAddressingTags } = useSCFetchAddressingTagList({ fetch: rest.open });
     const theme = useTheme();
     const fullScreen = useMediaQuery(theme.breakpoints.down('md'), { noSsr: typeof window !== 'undefined' });
     // State variables
     const [isSubmitting, setIsSubmitting] = useState(false);
-    const [_view, setView] = useState(view);
-    const [composerTypes, setComposerTypes] = useState([]);
-    const [mediaChunks, setMediaChunks] = useState([]);
-    const [editorFocused, setEditorFocused] = useState(false);
-    const [state, dispatch] = useReducer(reducer, Object.assign(Object.assign(Object.assign({}, COMPOSER_INITIAL_STATE), defaultValue), { view, key: random() }));
-    const { key, id, type, title, titleError, text, categories, addressing, audience, medias, poll, pollError, location, error } = state;
-    const addMedia = (media) => {
-        dispatch({ type: 'medias', value: [...medias, media] });
-    };
+    const [layer, setLayer] = useState();
+    const [state, dispatch] = useReducer(reducer, Object.assign(Object.assign(Object.assign({}, COMPOSER_INITIAL_STATE), defaultValue), { key: random() }));
+    const { key, id, type, title, titleError, html, categories, addressing, audience, medias, poll, pollError, location, error } = state;
     const destructureFeedObject = (_feedObject) => {
-        if (_feedObject.type === COMPOSER_TYPE_POST) {
+        if (_feedObject.type === SCContributionType.POST) {
             _feedObject = _feedObject;
         }
-        else if (_feedObject.type === COMPOSER_TYPE_DISCUSSION) {
+        else if (_feedObject.type === SCContributionType.DISCUSSION) {
             _feedObject = _feedObject;
         }
         else {
@@ -207,11 +141,10 @@ export default function Composer(inProps) {
                 type: 'multiple',
                 value: {
                     id: _feedObject.id,
-                    type: _feedObject.type,
+                    type: _feedObject.poll ? COMPOSER_TYPE_POLL : feedObject.type,
                     title: _feedObject.title,
-                    text: _feedObject.html,
+                    html: _feedObject.html,
                     categories: _feedObject.categories,
-                    audience: _feedObject.addressing ? AUDIENCE_TAG : AUDIENCE_ALL,
                     addressing: _feedObject.addressing,
                     medias: _feedObject.medias,
                     poll: _feedObject.poll,
@@ -225,43 +158,24 @@ export default function Composer(inProps) {
         }
     };
     // Edit state variables
-    const editMode = Boolean((feedObjectId && feedObjectType) || feedObject);
+    const editMode = useMemo(() => Boolean((feedObjectId && feedObjectType) || feedObject), [feedObjectId, feedObjectType, feedObject]);
     const [isLoading, setIsLoading] = useState(editMode);
     const [loadError, setLoadError] = useState(false);
     // REFS
+    const dialogRef = useRef();
     const unloadRef = useRef(false);
-    let titleRef = useRef();
-    let editorRef = useRef();
-    // Create a ref for medias becaouse of state update error on chunk upload
-    const mediasRef = useRef({ medias, mediaChunks, addMedia, setMediaChunks });
-    mediasRef.current = { medias, mediaChunks, addMedia, setMediaChunks };
-    /*
-     * Compute preferences
-     */
-    const preferences = useMemo(() => {
-        const _preferences = {};
-        PREFERENCES.map((p) => (_preferences[p] = p in scPrefernces.preferences ? scPrefernces.preferences[p].value : null));
-        return _preferences;
-    }, [scPrefernces.preferences]);
-    /*
-     * Compose the enabled types of posts that can be created based on preferences
-     */
-    const setEnabledComposerTypes = () => {
-        const types = [];
-        if (preferences[SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED]) {
-            types.push(COMPOSER_TYPE_POST);
-        }
-        if (preferences[SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED]) {
-            types.push(COMPOSER_TYPE_DISCUSSION);
-        }
-        if (!type) {
-            dispatch({ type: 'type', value: preferences[SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED] ? COMPOSER_TYPE_POST : COMPOSER_TYPE_DISCUSSION });
-        }
-        if (JSON.stringify(composerTypes) !== JSON.stringify(types)) {
-            setComposerTypes(types);
-        }
-    };
-    setEnabledComposerTypes();
+    // Create a ref for medias because of state update error on chunk upload
+    const mediasRef = useRef({ medias });
+    mediasRef.current = { medias };
+    // MEMO
+    const hasPoll = useMemo(() => {
+        return poll && poll.title.length > 0 && poll.title.length < COMPOSER_TITLE_MAX_LENGTH && poll.choices.length >= COMPOSER_POLL_MIN_CHOICES;
+    }, [poll]);
+    const canSubmit = useMemo(() => {
+        return !isLoading && ((type === SCContributionType.DISCUSSION && title.length > 0 && title.length < COMPOSER_TITLE_MAX_LENGTH) ||
+            (type === SCContributionType.POST && (stripHtml(html).length > 0 || medias.length > 0 || hasPoll)) ||
+            (type === COMPOSER_TYPE_POLL && hasPoll));
+    }, [isLoading, type, title, html, medias, hasPoll]);
     // Load feed object
     useEffect(() => {
         if (!editMode) {
@@ -285,11 +199,9 @@ export default function Composer(inProps) {
         })
             .then(() => setIsLoading(false));
     }, [editMode]);
-    // Props update
-    useEffect(() => setView(view), [view]);
     // Prevent unload
     useEffect(() => {
-        if (!unloadRef.current && canSubmit()) {
+        if (!unloadRef.current && canSubmit) {
             unloadRef.current = true;
             const onUnload = (event) => {
                 event.preventDefault();
@@ -297,129 +209,125 @@ export default function Composer(inProps) {
             };
             window.onbeforeunload = onUnload;
         }
-        else if (unloadRef.current && !canSubmit()) {
+        else if (unloadRef.current && !canSubmit) {
             unloadRef.current = false;
             window.onbeforeunload = null;
         }
-    }, [state]);
-    // Autofocus
-    useEffect(() => {
-        if (!rest.open || fullScreen) {
-            return;
-        }
-        if (type === COMPOSER_TYPE_DISCUSSION) {
-            titleRef.current && titleRef.current.focus();
-        }
-        else {
-            editorRef.current && editorRef.current.focus();
-        }
-    }, [fullScreen, rest.open, type, editorRef]);
-    // CHECKS
-    const hasPoll = () => {
-        return poll && poll.title.length > 0 && poll.title.length < COMPOSER_TITLE_MAX_LENGTH && poll.choices.length >= COMPOSER_POLL_MIN_CHOICES;
-    };
-    const canSubmit = () => {
-        return ((type === COMPOSER_TYPE_DISCUSSION && title.length > 0 && title.length < COMPOSER_TITLE_MAX_LENGTH) ||
-            (type === COMPOSER_TYPE_POST && (stripHtml(text).length > 0 || medias.length > 0 || hasPoll())));
-    };
+    }, [state, canSubmit]);
     /* Handlers */
-    const handleChangeView = (view) => {
-        return (event) => {
-            setView(view);
-        };
-    };
-    const handleChangeType = (event, child) => {
-        const target = event.target;
-        dispatch({ type: 'type', value: target.value });
-    };
-    const handleChangeText = (value) => {
-        dispatch({ type: 'text', value });
-    };
-    const handleChangePoll = (poll) => {
+    const handleAddLayer = useCallback((layer) => setLayer(layer), []);
+    const handleRemoveLayer = useCallback(() => setLayer(null), []);
+    const handleChangeType = useCallback((value) => {
+        dispatch({ type: 'type', value });
+    }, []);
+    const handleChangePoll = useCallback((content) => {
         dispatch({
             type: 'multiple',
-            value: {
-                poll: poll,
-                pollError: poll.title.length > COMPOSER_TITLE_MAX_LENGTH
+            value: Object.assign(Object.assign({}, content), { pollError: content.poll.title.length > COMPOSER_TITLE_MAX_LENGTH
                     ? { titleError: React.createElement(FormattedMessage, { id: "ui.composer.title.error.maxlength", defaultMessage: "ui.composer.title.error.maxlength" }) }
-                    : null
-            }
+                    : null })
         });
-    };
-    const handleChange = (prop) => (event, data) => {
-        let target = null;
-        switch (prop) {
-            case 'title':
-                target = event.target;
-                dispatch({
-                    type: 'multiple',
-                    value: {
-                        title: target.value,
-                        titleError: target.value.length > COMPOSER_TITLE_MAX_LENGTH ? (React.createElement(FormattedMessage, { id: "ui.composer.title.error.maxlength", defaultMessage: "ui.composer.title.error.maxlength" })) : null
-                    }
-                });
-                break;
-            case 'categories':
-            case 'addressing':
-                dispatch({ type: prop, value: event });
-                break;
-            case 'location':
-                const value = event && isObject(event)
-                    ? event['location']
-                        ? { location: event['location'], lat: event['lat'], lng: event['lng'] }
-                        : { location: event['full_address'], lat: event['lat'], lng: event['lng'] }
-                    : null;
-                dispatch({ type: prop, value });
-                break;
-            case 'audience':
-                data !== null && dispatch({ type: 'multiple', value: { audience: data, addressing: audience === AUDIENCE_ALL ? [] : audience } });
-                break;
-            default:
-                target = event.target;
-                dispatch({ type: prop, value: target.value });
-                break;
+    }, []);
+    const handleChangeDiscussion = useCallback((content) => {
+        dispatch({
+            type: 'multiple',
+            value: Object.assign(Object.assign({}, content), { titleError: content.title.length > COMPOSER_TITLE_MAX_LENGTH ? (React.createElement(FormattedMessage, { id: "ui.composer.title.error.maxlength", defaultMessage: "ui.composer.title.error.maxlength" })) : null })
+        });
+    }, []);
+    const handleChangePost = useCallback((content) => {
+        dispatch({
+            type: 'multiple',
+            value: Object.assign({}, content)
+        });
+    }, []);
+    const handleChangeCategories = useCallback((value) => {
+        dispatch({ type: 'categories', value });
+        setLayer(null);
+    }, []);
+    const handleAddCategoryLayer = useCallback(() => handleAddLayer({
+        name: 'category',
+        Component: CategoryLayer,
+        ComponentProps: {
+            onClose: handleRemoveLayer,
+            onSave: handleChangeCategories,
+            defaultValue: categories
         }
-    };
-    const handleClose = (event) => {
-        if (unloadRef.current) {
-            window.onbeforeunload = null;
+    }), [handleAddLayer, handleRemoveLayer, handleChangeCategories, categories]);
+    const handleChangeAudience = useCallback((value) => {
+        dispatch({ type: 'addressing', value });
+        setLayer(null);
+    }, []);
+    const handleAddAudienceLayer = useCallback(() => handleAddLayer({
+        name: 'audience',
+        Component: AudienceLayer,
+        ComponentProps: {
+            onClose: handleRemoveLayer,
+            onSave: handleChangeAudience,
+            defaultValue: addressing
         }
-        onClose && onClose(event);
-    };
-    const handleDeletePoll = (event) => {
-        dispatch({ type: 'poll', value: null });
-        setView(MAIN_VIEW);
-    };
-    const handleDeleteLocation = (event) => {
-        dispatch({ type: 'location', value: null });
-    };
-    const handleDeleteTag = (id) => (event) => {
-        const _addressing = addressing.filter((t) => t.id !== id);
-        dispatch({ type: 'multiple', value: { audience: _addressing.length === 0 ? AUDIENCE_ALL : AUDIENCE_TAG, addressing: _addressing } });
-    };
-    const handleDeleteMedia = (id, mediaObjectType) => {
-        return (event) => {
-            if (id) {
-                dispatch({ type: 'medias', value: medias.filter((m) => m.id != id) });
-            }
-            else if (mediaObjectType) {
-                dispatch({ type: 'medias', value: medias.filter((m) => !mediaObjectType.filter(m)) });
-            }
-        };
-    };
-    const handleMediaProgress = (chunks) => {
-        mediasRef.current.setMediaChunks(chunks);
-    };
-    const handleAddMedia = (media) => {
-        mediasRef.current.addMedia(media);
-    };
-    const handleSortMedia = (newSort) => {
+    }), [handleAddLayer, handleRemoveLayer, handleChangeAudience, addressing]);
+    const handleChangeLocation = useCallback((value) => {
+        dispatch({ type: 'location', value });
+        setLayer(null);
+    }, []);
+    const handleAddLocationLayer = useCallback(() => handleAddLayer({
+        name: 'location',
+        Component: LocationLayer,
+        ComponentProps: {
+            onClose: handleRemoveLayer,
+            onSave: handleChangeLocation,
+            defaultValue: location
+        }
+    }), [handleAddLayer, handleRemoveLayer, handleChangeLocation, location]);
+    const handleChangeMedias = useCallback((value) => {
+        const _medias = [...value];
         dispatch({
             type: 'medias',
-            value: [...medias.filter((media) => newSort.findIndex((m) => m.id === media.id) === -1), ...newSort]
+            value: [...value]
         });
-    };
-    const handleSubmit = (event) => {
+        mediasRef.current.medias = _medias;
+        setLayer(null);
+    }, []);
+    const handleAddMedia = useCallback((media) => {
+        const _medias = [...mediasRef.current.medias, media];
+        dispatch({
+            type: 'medias',
+            value: _medias
+        });
+        mediasRef.current.medias = _medias;
+    }, []);
+    const handleMediaTriggerClick = useCallback((mediaObjectType) => (event) => {
+        if (mediaObjectType.layerComponent) {
+            handleAddLayer({
+                name: mediaObjectType.name,
+                Component: mediaObjectType.layerComponent,
+                ComponentProps: {
+                    onClose: handleRemoveLayer,
+                    onSave: handleChangeMedias,
+                    defaultValue: medias
+                }
+            });
+        }
+    }, [handleAddLayer, handleRemoveLayer, handleChangeMedias, medias]);
+    const handleChangeAttributes = useCallback((content) => {
+        dispatch({
+            type: 'multiple',
+            value: Object.assign({}, content)
+        });
+    }, []);
+    const handleClickAttributes = useCallback((attr) => {
+        switch (attr) {
+            case 'categories':
+                handleAddCategoryLayer();
+                break;
+            case 'addressing':
+                handleAddAudienceLayer();
+                break;
+        }
+    }, [handleAddCategoryLayer, handleAddAudienceLayer]);
+    const handleSubmit = useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
         if (UserUtils.isBlocked(scUserContext.user)) {
             // deny submit action if authenticated user is blocked
             enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
@@ -429,32 +337,29 @@ export default function Composer(inProps) {
             return;
         }
         // Extract hashtags and add to categories
-        const _categories = [...categories.map((c) => c.id), ...extractHashtags(text)];
+        const _categories = [...categories.map((c) => c.id), ...extractHashtags(html)];
         const data = {
             title,
-            text,
+            text: html,
             medias: medias.map((m) => m.id),
             categories: _categories.filter((item, index) => _categories.indexOf(item) === index)
         };
-        if (preferences[SCPreferences.ADDONS_POLLS_ENABLED] && hasPoll()) {
+        if (preferences[SCPreferences.ADDONS_POLLS_ENABLED].value && hasPoll) {
             data.poll = poll;
         }
-        if (preferences[SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED] && location) {
-            data.location = {
-                location: location.location,
-                lat: location.lat,
-                lng: location.lng
-            };
+        if (preferences[SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED].value && location) {
+            data.location = location;
         }
-        if (scPrefernces.features.includes(SCFeatureName.TAGGING) && audience === AUDIENCE_TAG) {
+        if (features.includes(SCFeatureName.TAGGING) && addressing !== null) {
             data.addressing = addressing.map((t) => t.id);
         }
         setIsSubmitting(true);
         // Finding right url
-        let url = Endpoints.Composer.url({ type });
+        const _type = type === COMPOSER_TYPE_POLL ? SCContributionType.POST : type;
+        let url = Endpoints.Composer.url({ type: _type });
         let method = Endpoints.Composer.method;
         if (editMode) {
-            url = Endpoints.ComposerEdit.url({ type, id });
+            url = Endpoints.ComposerEdit.url({ type: feedObjectType ? feedObjectType : _type, id });
             method = Endpoints.ComposerEdit.method;
         }
         // Perform request
@@ -475,184 +380,86 @@ export default function Composer(inProps) {
             dispatch({ type: 'multiple', value: formatHttpErrorCode(error) });
         })
             .then(() => setIsSubmitting(false));
-    };
-    // MEMO
-    const _EditorProps = useMemo(() => (EditorProps ? EditorProps : { toolbar: true, uploadImage: true }), [EditorProps, type]);
+    }, [scUserContext.user, feedObjectType, id, type, title, html, categories, addressing, audience, medias, poll, location, hasPoll]);
+    const handleClose = useCallback((event) => {
+        if (unloadRef.current) {
+            window.onbeforeunload = null;
+        }
+        onClose && onClose(event);
+        setLayer(null);
+        dispatch({ type: 'reset' });
+    }, [onClose]);
+    const handleClosePrompt = useCallback((event) => {
+        if (canSubmit) {
+            handleAddLayer({
+                name: 'close',
+                Component: CloseLayer,
+                ComponentProps: {
+                    onClose: handleRemoveLayer,
+                    onSave: handleClose
+                }
+            });
+        }
+        else {
+            handleClose(event);
+        }
+    }, [canSubmit, handleAddLayer, handleRemoveLayer, handleClose]);
     const isIOS = useMemo(() => iOS(), []);
     // RENDER
     const hasMediaShare = useMemo(() => medias.findIndex((m) => m.type === MEDIA_TYPE_SHARE) !== -1, [medias]);
-    const renderMediaAdornment = (mediaObjectType) => {
-        return (React.createElement(Box, { className: classes.mediasActions },
-            React.createElement(Typography, { className: classes.mediasActionsTitle },
-                React.createElement(FormattedMessage, { id: `ui.composer.media.${mediaObjectType.name}.edit`, defaultMessage: `ui.composer.media.${mediaObjectType.name}.edit` })),
-            React.createElement(Typography, { className: classes.mediasActionsActions },
-                React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: "ui.composer.edit", defaultMessage: "ui.composer.edit" }) },
-                    React.createElement(IconButton, { onClick: handleChangeView(mediaObjectType.name), color: "inherit" },
-                        React.createElement(Icon, null, "edit"))),
-                React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: "ui.composer.delete", defaultMessage: "ui.composer.delete" }) },
-                    React.createElement(IconButton, { onClick: handleDeleteMedia(null, mediaObjectType), color: "inherit" },
-                        React.createElement(Icon, null, "delete"))))));
-    };
-    const renderAudienceView = () => {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(DialogTitle, { className: classes.title },
-                React.createElement(Typography, { component: "div" },
-                    React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW) },
-                        React.createElement(Icon, null, "arrow_back"))),
-                React.createElement(Box, null,
-                    React.createElement(FormattedMessage, { id: "ui.composer.audience.title", defaultMessage: "ui.composer.audience.title" })),
-                React.createElement(Box, null,
-                    React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: "ui.composer.done", defaultMessage: "ui.composer.done" }) },
-                        React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW), color: "inherit" },
-                            React.createElement(Icon, null, "check"))))),
-            React.createElement(DialogContent, { className: classNames(classes.content, classes.audienceContent) },
-                React.createElement(Tabs, { value: audience, onChange: handleChange('audience'), "aria-label": "audience type" },
-                    React.createElement(Tab, { value: AUDIENCE_ALL, icon: React.createElement(Icon, null, "public"), label: React.createElement(FormattedMessage, { id: "ui.composer.audience.all", defaultMessage: "ui.composer.audience.all" }) }),
-                    React.createElement(Tab, { value: AUDIENCE_TAG, icon: React.createElement(Icon, null, "label"), label: React.createElement(FormattedMessage, { id: "ui.composer.audience.tag", defaultMessage: "ui.composer.audience.tag" }) })),
-                React.createElement(Typography, { align: "center", className: classes.block },
-                    audience === AUDIENCE_ALL && (React.createElement(FormattedMessage, { id: "ui.composer.audience.all.message", defaultMessage: "ui.composer.audience.all.message" })),
-                    audience === AUDIENCE_TAG && (React.createElement(FormattedMessage, { id: "ui.composer.audience.tag.message", defaultMessage: "ui.composer.audience.tag.message" }))),
-                audience === AUDIENCE_TAG && React.createElement(Audience, { onChange: handleChange('addressing'), defaultValue: addressing, tags: scAddressingTags }))));
-    };
-    const renderMediaView = (mediaObjectType) => {
-        return () => {
-            return (React.createElement(React.Fragment, null,
-                React.createElement(DialogTitle, { className: classes.title },
-                    React.createElement(Typography, { component: "div" },
-                        React.createElement("span", null,
-                            React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW), disabled: mediasRef.current.mediaChunks.length > 0 },
-                                React.createElement(Icon, null, "arrow_back")))),
-                    React.createElement(Box, null,
-                        React.createElement(FormattedMessage, { id: `ui.composer.media.${mediaObjectType.name}.edit`, defaultMessage: `ui.composer.media.${mediaObjectType.name}.edit` })),
-                    React.createElement(Box, null,
-                        React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: "ui.composer.done", defaultMessage: "ui.composer.done" }) },
-                            React.createElement("span", null,
-                                React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW), color: "inherit", disabled: mediasRef.current.mediaChunks.length > 0 },
-                                    React.createElement(Icon, null, "check")))))),
-                React.createElement(DialogContent, { className: classNames(classes.content, classes.mediaContent) }, React.createElement(mediaObjectType.editComponent, { medias: medias.filter(mediaObjectType.filter), onProgress: handleMediaProgress, onSuccess: handleAddMedia, onSort: handleSortMedia, onDelete: handleDeleteMedia }))));
-        };
-    };
-    const renderPollView = () => {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(DialogTitle, { className: classes.title },
-                React.createElement(Typography, { component: "div" },
-                    React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW) },
-                        React.createElement(Icon, null, "arrow_back"))),
-                React.createElement(Box, null,
-                    React.createElement(FormattedMessage, { id: "ui.composer.poll", defaultMessage: "ui.composer.poll" })),
-                React.createElement(Stack, { spacing: 2, direction: "row" },
-                    React.createElement(React.Fragment, null,
-                        React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: "ui.composer.delete", defaultMessage: "ui.composer.delete" }) },
-                            React.createElement("span", null,
-                                React.createElement(IconButton, { onClick: handleDeletePoll, color: "inherit", disabled: !hasPoll() },
-                                    React.createElement(Icon, null, "delete")))),
-                        React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: "ui.composer.done", defaultMessage: "ui.composer.done" }) },
-                            React.createElement("span", null,
-                                React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW), color: "inherit", disabled: !hasPoll() },
-                                    React.createElement(Icon, null, "check"))))))),
-            React.createElement(DialogContent, { className: classes.content },
-                React.createElement(Poll, { onChange: handleChangePoll, value: poll, error: pollError }))));
-    };
-    const renderLocationView = () => {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(DialogTitle, { className: classes.title },
-                React.createElement(Typography, { component: "div" },
-                    React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW) },
-                        React.createElement(Icon, null, "arrow_back"))),
-                React.createElement(Box, null,
-                    React.createElement(FormattedMessage, { id: "ui.locationAutocomplete.title", defaultMessage: "ui.locationAutocomplete.title" })),
-                React.createElement(Box, null,
-                    React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: "ui.composer.done", defaultMessage: "ui.composer.done" }) },
-                        React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW), color: "inherit" },
-                            React.createElement(Icon, null, "check"))))),
-            React.createElement(DialogContent, { className: classNames(classes.content, classes.locationContent) },
-                React.createElement(LocationAutocomplete, { onChange: handleChange('location'), defaultValue: location ? { full_address: location.location } : '' }))));
-    };
-    const renderMainView = () => {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(DialogTitle, { className: classes.title },
-                React.createElement(Box, null,
-                    React.createElement(FormControl, { className: classes.types },
-                        React.createElement(Select, { value: type, onChange: handleChangeType, input: React.createElement(TypeInput, null), disabled: editMode }, composerTypes.map((t) => (React.createElement(MenuItem, { value: t, key: t },
-                            React.createElement(FormattedMessage, { id: `ui.composer.type.${t}`, defaultMessage: `ui.composer.type.${t}` }))))))),
-                React.createElement(Box, null, !scUserContext.user ? React.createElement(Avatar, { className: classes.avatar }) : React.createElement(Avatar, { className: classes.avatar, src: scUserContext.user.avatar })),
-                React.createElement(Box, null,
-                    React.createElement(IconButton, { onClick: handleClose },
-                        React.createElement(Icon, null, "close")))),
-            React.createElement(DialogContent, { className: classes.content },
-                type === COMPOSER_TYPE_DISCUSSION && (React.createElement("div", { className: classes.block },
-                    React.createElement(TextField, { inputRef: titleRef, label: React.createElement(FormattedMessage, { id: "ui.composer.title.label", defaultMessage: "ui.composer.title.label" }), fullWidth: true, variant: "outlined", value: title, multiline: true, onChange: handleChange('title'), InputProps: {
-                            endAdornment: React.createElement(Typography, { variant: "body2" }, COMPOSER_TITLE_MAX_LENGTH - title.length)
-                        }, error: Boolean(titleError), helperText: titleError, disabled: isSubmitting }))),
-                React.createElement(Editor, Object.assign({ ref: editorRef }, _EditorProps, { key: `${key}-editor`, className: classNames(classes.block, classes.editor), onChange: handleChangeText, onFocus: () => setEditorFocused(true), defaultValue: text, editable: !isSubmitting })),
-                React.createElement(Box, { className: classes.medias },
-                    React.createElement(MediasPreview, { medias: medias, mediaObjectTypes: mediaObjectTypes.map((mediaObjectType) => {
-                            return Object.assign(Object.assign({}, mediaObjectType), { previewProps: { adornment: mediaObjectType.editButton !== null ? renderMediaAdornment(mediaObjectType) : null, gallery: false } });
-                        }) })),
-                poll && React.createElement(PollPreview, { pollObject: poll }),
-                React.createElement(Stack, { spacing: 2, className: classes.audience, direction: "row" },
-                    location && (React.createElement(Chip, { icon: React.createElement(Icon, null, "add_location_alt"), label: location.location, onDelete: handleDeleteLocation, onClick: handleChangeView(LOCATION_VIEW) })),
-                    audience === AUDIENCE_TAG &&
-                        addressing &&
-                        addressing.map((t) => (React.createElement(TagChip, { key: t.id, tag: t, onDelete: handleDeleteTag(t.id), icon: React.createElement(Icon, null, "label"), onClick: handleChangeView(AUDIENCE_VIEW) })))),
-                React.createElement("div", { className: classes.block },
-                    React.createElement(CategoryAutocomplete, { multiple: true, key: `${key}-categories`, onChange: handleChange('categories'), defaultValue: categories, disabled: isSubmitting })),
-                error && (React.createElement(Typography, { className: classes.block, color: "error" },
-                    React.createElement(FormattedMessage, { id: "ui.composer.error.generic", defaultMessage: "ui.composer.error.generic" })))),
-            React.createElement(DialogActions, { className: classes.actions, onClick: () => setEditorFocused(false) },
-                React.createElement(Typography, { className: classes.mediaActions },
-                    mediaObjectTypes
-                        .filter((mediaObjectType) => mediaObjectType.editButton !== null)
-                        .map((mediaObjectType) => (React.createElement(mediaObjectType.editButton, { key: mediaObjectType.name, onClick: handleChangeView(mediaObjectType.name), disabled: isSubmitting || hasMediaShare, color: medias.filter(mediaObjectType.filter).length > 0 ? 'primary' : 'default' }))),
-                    (preferences[SCPreferences.ADDONS_POLLS_ENABLED] || UserUtils.isStaff(scUserContext.user)) && (React.createElement(IconButton, { "aria-label": "add poll", color: poll ? 'primary' : 'default', disabled: isSubmitting, onClick: handleChangeView(POLL_VIEW) },
-                        React.createElement(Badge, { className: classes.badgeError, badgeContent: pollError ? ' ' : null, color: "error" },
-                            React.createElement(Icon, null, "bar_chart"))))),
-                React.createElement(Typography, { className: classes.filterActions },
-                    preferences[SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED] && (React.createElement(IconButton, { disabled: isSubmitting, onClick: handleChangeView(LOCATION_VIEW), color: location !== null ? 'primary' : 'default' },
-                        React.createElement(Icon, null, "add_location_alt"))),
-                    scPrefernces.features.includes(SCFeatureName.TAGGING) && scAddressingTags.length > 0 && (React.createElement(IconButton, { disabled: isSubmitting, onClick: handleChangeView(AUDIENCE_VIEW) }, audience === AUDIENCE_TAG ? React.createElement(Icon, null, "label") : React.createElement(Icon, null, "public")))),
-                React.createElement(LoadingButton, { onClick: handleSubmit, color: "primary", variant: "contained", disabled: !canSubmit(), loading: isSubmitting },
-                    React.createElement(FormattedMessage, { id: "ui.composer.submit", defaultMessage: "ui.composer.submit" })))));
-    };
-    let child = null;
-    switch (_view) {
-        case MAIN_VIEW:
-            child = renderMainView;
-            break;
-        case POLL_VIEW:
-            child = renderPollView;
-            break;
-        case AUDIENCE_VIEW:
-            child = renderAudienceView;
-            break;
-        case LOCATION_VIEW:
-            child = renderLocationView;
-            break;
-        default:
-            const media = mediaObjectTypes
-                .filter((mediaObjectType) => mediaObjectType.editComponent !== null)
-                .find((mv) => mv.name === _view);
-            child = media ? renderMediaView(media) : renderMainView;
-    }
-    if (editMode && isLoading) {
-        child = () => React.createElement(ComposerSkeleton, null);
-    }
-    else if (editMode && loadError) {
-        child = () => (React.createElement(Alert, { severity: "error", onClose: handleClose },
-            React.createElement(AlertTitle, null,
-                React.createElement(FormattedMessage, { id: "ui.composer.edit.error.title", defaultMessage: "ui.composer.edit.error.title" })),
-            React.createElement(FormattedMessage, { id: "ui.composer.edit.error.content", defaultMessage: "ui.composer.edit.error.content" })));
-    }
-    const _maxWidth = useMemo(() => (maxWidth ? maxWidth : type === COMPOSER_TYPE_DISCUSSION ? 'md' : 'sm'), [maxWidth, type]);
+    const content = useMemo(() => {
+        if (editMode && isLoading) {
+            return React.createElement(ComposerSkeleton, null);
+        }
+        else if (editMode && loadError) {
+            return (React.createElement(Alert, { severity: "error", onClose: handleClose },
+                React.createElement(AlertTitle, null,
+                    React.createElement(FormattedMessage, { id: "ui.composer.edit.error.title", defaultMessage: "ui.composer.edit.error.title" })),
+                React.createElement(FormattedMessage, { id: "ui.composer.edit.error.content", defaultMessage: "ui.composer.edit.error.content" })));
+        }
+        switch (type) {
+            case COMPOSER_TYPE_POLL:
+                return React.createElement(ContentPoll, { key: key, onChange: handleChangePoll, value: { html, categories, addressing, medias, poll, location }, error: pollError, disabled: isSubmitting });
+            case SCContributionType.DISCUSSION:
+                return React.createElement(ContentDiscussion, { 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) });
+            default:
+                return React.createElement(ContentPost, { key: key, value: { html, categories, 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]);
     if (!scUserContext.user && !(scUserContext.loading && open)) {
         return null;
     }
-    return (React.createElement(Root, Object.assign({ maxWidth: _maxWidth, TransitionComponent: DialogTransition, keepMounted: true, onClose: handleClose }, rest, { className: classNames(classes.root, { [classes.writing]: editorFocused, [classes.ios]: isIOS }), fullScreen: fullScreen }),
-        editorFocused && fullScreen && (React.createElement(Box, { className: classes.titleDense },
-            React.createElement(IconButton, { onClick: () => setEditorFocused(false) },
-                React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: "ui.composer.editorFullScreen.close", defaultMessage: "ui.composer.editorFullScreen.close" }) },
-                    React.createElement(Icon, null, "zoom_out_map"))),
-            React.createElement(IconButton, { onClick: handleClose },
-                React.createElement(Icon, null, "close")))),
-        child()));
+    return (React.createElement(Root, Object.assign({ ref: dialogRef, TransitionComponent: DialogTransition, keepMounted: true, onClose: handleClose }, rest, { className: classNames(classes.root, { [classes.ios]: isIOS }), scroll: "body", fullScreen: fullScreen }),
+        React.createElement("form", { onSubmit: handleSubmit, method: "post" },
+            React.createElement(DialogTitle, { className: classes.title },
+                React.createElement(IconButton, { onClick: handleClosePrompt },
+                    React.createElement(Icon, null, "close")),
+                React.createElement(LoadingButton, { size: "small", type: "submit", color: "secondary", variant: "contained", disabled: !canSubmit, loading: isSubmitting },
+                    React.createElement(FormattedMessage, { id: "ui.composer.submit", defaultMessage: "ui.composer.submit" }))),
+            React.createElement(DialogContent, { className: classes.content },
+                React.createElement(Attributes, { value: { categories, addressing, location }, className: classes.attributes, onChange: handleChangeAttributes, onClick: handleClickAttributes }),
+                content,
+                medias && medias.length > 0 && React.createElement(Box, { className: classes.medias }, mediaObjectTypes.map((mediaObjectType) => {
+                    if (mediaObjectType.previewComponent) {
+                        return React.createElement(mediaObjectType.previewComponent, { key: mediaObjectType.name, value: medias, onChange: handleChangeMedias });
+                    }
+                    else if (mediaObjectType.displayComponent) {
+                        return React.createElement(mediaObjectType.displayComponent, { key: mediaObjectType.name, value: medias });
+                    }
+                }))),
+            !canSubmit && !editMode && React.createElement(TypeSwitchButtonGroup, { className: classes.types, onChange: handleChangeType, size: "small", value: type }),
+            React.createElement(DialogActions, { className: classes.actions },
+                mediaObjectTypes
+                    .filter((mediaObjectType) => mediaObjectType.triggerButton !== null)
+                    .map((mediaObjectType) => {
+                    const props = mediaObjectType.layerComponent ? { onClick: handleMediaTriggerClick(mediaObjectType) } : { onAdd: handleAddMedia };
+                    return (React.createElement(mediaObjectType.triggerButton, Object.assign({ key: mediaObjectType.name, disabled: isSubmitting || hasMediaShare, color: medias.filter(mediaObjectType.filter).length > 0 ? 'primary' : 'default' }, props)));
+                }),
+                React.createElement(IconButton, { disabled: isSubmitting, onClick: handleAddCategoryLayer },
+                    React.createElement(Icon, null, "category")),
+                React.createElement(IconButton, { disabled: isSubmitting || !features.includes(SCFeatureName.TAGGING), onClick: handleAddAudienceLayer }, addressing === null || addressing.length === 0 ? React.createElement(Icon, null, "public") : React.createElement(Icon, null, "label")),
+                preferences[SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED] && (React.createElement(IconButton, { disabled: isSubmitting, onClick: handleAddLocationLayer, color: location !== null ? 'primary' : 'default' },
+                    React.createElement(Icon, null, "add_location_alt"))))),
+        layer && React.createElement(LayerTransitionRoot, { className: classes.layerTransitionRoot, in: true, container: dialogRef.current, direction: "left" },
+            React.createElement(layer.Component, Object.assign({}, layer.ComponentProps)))));
 }