scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-28 01:56:00 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Display manager limit modal in two scenarios: if the frontend already knows that the manager limit has been reached, and if we have the promote modal up, but we got response from the server that the manager limit has been reached.

Browse source
This commit is contained in:
Karishma Chadha 2021-06-10 19:20:51 -04:00
parent e0e53b8d73
commit 51858167c9
1 changed files with 38 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
src/views/studio/studio-member-tile.jsx
View file

@ -6,15 +6,19 @@ import classNames from 'classnames';
import {FormattedMessage} from 'react-intl'; import {FormattedMessage} from 'react-intl';
import PromoteModal from './modals/promote-modal.jsx'; import PromoteModal from './modals/promote-modal.jsx';
import ManagerLimitModal from './modals/manager-limit-modal.jsx';
import { import {
selectCanRemoveCurator, selectCanRemoveManager, selectCanPromoteCurators selectCanRemoveCurator, selectCanRemoveManager, selectCanPromoteCurators
} from '../../redux/studio-permissions'; } from '../../redux/studio-permissions';
import { import {
Errors,
promoteCurator, promoteCurator,
removeCurator, removeCurator,
removeManager removeManager
} from './lib/studio-member-actions'; } from './lib/studio-member-actions';
import {selectStudioHasReachedManagerLimit} from '../../redux/studio';
import {useAlertContext} from '../../components/alert/alert-context'; import {useAlertContext} from '../../components/alert/alert-context';
import OverflowMenu from '../../components/overflow-menu/overflow-menu.jsx'; import OverflowMenu from '../../components/overflow-menu/overflow-menu.jsx';
@ -22,11 +26,12 @@ import removeIcon from './icons/remove-icon.svg';
import promoteIcon from './icons/curator-icon.svg'; import promoteIcon from './icons/curator-icon.svg';
const StudioMemberTile = ({ const StudioMemberTile = ({
canRemove, canPromote, onRemove, onPromote, isCreator, // mapState props canRemove, canPromote, onRemove, onPromote, isCreator, hasReachedManagerLimit, // mapState props
username, image // own props username, image // own props
}) => { }) => {
const [submitting, setSubmitting] = useState(false); const [submitting, setSubmitting] = useState(false);
const [modalOpen, setModalOpen] = useState(false); const [modalOpen, setModalOpen] = useState(false);
const [managerLimitReached, setManagerLimitReached] = useState(false);
const {errorAlert, successAlert} = useAlertContext(); const {errorAlert, successAlert} = useAlertContext();
const userUrl = `/users/${username}`; const userUrl = `/users/${username}`;
return ( return (
@ -80,25 +85,35 @@ const StudioMemberTile = ({
</OverflowMenu> </OverflowMenu>
} }
{modalOpen && {modalOpen &&
<PromoteModal ((hasReachedManagerLimit || managerLimitReached) ?
handleClose={() => setModalOpen(false)} <ManagerLimitModal
handlePromote={() => { handleClose={() => setModalOpen(false)}
onPromote(username) /> :
.then(() => { <PromoteModal
successAlert({ handleClose={() => setModalOpen(false)}
id: 'studio.alertManagerPromote', handlePromote={() => {
values: {name: username} onPromote(username)
.then(() => {
successAlert({
id: 'studio.alertManagerPromote',
values: {name: username}
});
})
.catch(error => {
if (error === Errors.MANAGER_LIMIT) {
setManagerLimitReached(true);
setModalOpen(true);
} else {
errorAlert({
id: 'studio.alertManagerPromoteError',
values: {name: username}
});
}
}); });
}) }}
.catch(() => { username={username}
errorAlert({ />
id: 'studio.alertManagerPromoteError', )
values: {name: username}
});
});
}}
username={username}
/>
} }
</div> </div>
); );
@ -111,7 +126,8 @@ StudioMemberTile.propTypes = {
onPromote: PropTypes.func, onPromote: PropTypes.func,
username: PropTypes.string, username: PropTypes.string,
image: PropTypes.string, image: PropTypes.string,
isCreator: PropTypes.bool isCreator: PropTypes.bool,
hasReachedManagerLimit: PropTypes.bool
}; };
const ManagerTile = connect( const ManagerTile = connect(
@ -128,7 +144,8 @@ const ManagerTile = connect(
const CuratorTile = connect( const CuratorTile = connect(
(state, ownProps) => ({ (state, ownProps) => ({
canRemove: selectCanRemoveCurator(state, ownProps.username), canRemove: selectCanRemoveCurator(state, ownProps.username),
canPromote: selectCanPromoteCurators(state) canPromote: selectCanPromoteCurators(state),
hasReachedManagerLimit: selectStudioHasReachedManagerLimit(state)
}), }),
{ {
onRemove: removeCurator, onRemove: removeCurator,