From 168cd5a01b99edbd1b61157921094b4d29bdebf2 Mon Sep 17 00:00:00 2001 From: Paul Kaplan Date: Mon, 17 May 2021 11:02:48 -0400 Subject: [PATCH] Update the curator invitation component --- src/views/studio/l10n.json | 3 ++ src/views/studio/lib/studio-member-actions.js | 4 +- src/views/studio/studio-curator-invite.jsx | 45 ++++++++++++++++--- src/views/studio/studio-curators.jsx | 10 ++--- src/views/studio/studio.jsx | 2 + src/views/studio/studio.scss | 34 ++++++++++++++ 6 files changed, 84 insertions(+), 14 deletions(-) diff --git a/src/views/studio/l10n.json b/src/views/studio/l10n.json index e8e934ae3..e14b9cea7 100644 --- a/src/views/studio/l10n.json +++ b/src/views/studio/l10n.json @@ -39,7 +39,10 @@ "studio.inviteCuratorsHeader": "Invite Curators", "studio.inviteCurator": "Invite", "studio.inviteCuratorPlaceholder": "Scratch Username", + "studio.curatorInvitationAccepted": "Congratulations! You are now a curator of this studio.", + "studio.curatorInvitation": "You’ve been invited to become a curator of this studio.", "studio.curatorAcceptInvite": "Accept Invite", + "studio.curatorInvitationError": "Something went wrong, try again later.", "studio.curatorsEmptyCanAdd1": "You don’t have curators right now.", "studio.curatorsEmptyCanAdd2": "Add some curators to collaborate with!", "studio.curatorsEmpty1": "This studio has no curators right now.", diff --git a/src/views/studio/lib/studio-member-actions.js b/src/views/studio/lib/studio-member-actions.js index 894cb5354..5e4b7a8b7 100644 --- a/src/views/studio/lib/studio-member-actions.js +++ b/src/views/studio/lib/studio-member-actions.js @@ -168,7 +168,9 @@ const acceptInvitation = () => ((dispatch, getState) => new Promise((resolve, re // Note: this assumes that the user items from the curator endpoint // are the same structure as the single user data returned from /users/:username dispatch(curators.actions.create(userBody, true)); - dispatch(setRoles({invited: false, curator: true})); + setTimeout(() => { + dispatch(setRoles({invited: false, curator: true})); + }, 5 * 1000); return resolve(); }); }); diff --git a/src/views/studio/studio-curator-invite.jsx b/src/views/studio/studio-curator-invite.jsx index 7fe1a129a..9995367c7 100644 --- a/src/views/studio/studio-curator-invite.jsx +++ b/src/views/studio/studio-curator-invite.jsx @@ -6,15 +6,42 @@ import classNames from 'classnames'; import {FormattedMessage} from 'react-intl'; import {acceptInvitation} from './lib/studio-member-actions'; +import {selectShowCuratorInvite} from '../../redux/studio-permissions'; -const StudioCuratorInvite = ({onSubmit}) => { +const StudioCuratorInvite = ({showCuratorInvite, onSubmit}) => { const [submitting, setSubmitting] = useState(false); - const [error, setError] = useState(null); + const [accepted, setAccepted] = useState(false); + const [error, setError] = useState(false); + + if (!showCuratorInvite) return null; + + if (error) { + return ( +
+
+ +
+
+ ); + } + + if (accepted) { + return ( +
+
+ +
+
+ ); + } return ( -
+
+
+ +
- {error &&
{error}
}
); }; StudioCuratorInvite.propTypes = { + showCuratorInvite: PropTypes.func, onSubmit: PropTypes.func }; -const mapStateToProps = () => ({}); +const mapStateToProps = state => ({ + showCuratorInvite: selectShowCuratorInvite(state) +}); const mapDispatchToProps = ({ onSubmit: acceptInvitation diff --git a/src/views/studio/studio-curators.jsx b/src/views/studio/studio-curators.jsx index 089eb5549..1d77e2319 100644 --- a/src/views/studio/studio-curators.jsx +++ b/src/views/studio/studio-curators.jsx @@ -8,12 +8,11 @@ import {curators} from './lib/redux-modules'; import Debug from './debug.jsx'; import {CuratorTile} from './studio-member-tile.jsx'; import CuratorInviter from './studio-curator-inviter.jsx'; -import CuratorInvite from './studio-curator-invite.jsx'; import {loadCurators} from './lib/studio-member-actions'; -import {selectCanInviteCurators, selectShowCuratorInvite} from '../../redux/studio-permissions'; +import {selectCanInviteCurators} from '../../redux/studio-permissions'; const StudioCurators = ({ - canInviteCurators, showCuratorInvite, items, error, loading, moreToLoad, onLoadMore + canInviteCurators, items, error, loading, moreToLoad, onLoadMore }) => { useEffect(() => { if (items.length === 0) onLoadMore(); @@ -24,7 +23,6 @@ const StudioCurators = ({

{canInviteCurators && } - {showCuratorInvite && } {error && ({ ...curators.selector(state), - canInviteCurators: selectCanInviteCurators(state), - showCuratorInvite: selectShowCuratorInvite(state) + canInviteCurators: selectCanInviteCurators(state) }), { onLoadMore: loadCurators diff --git a/src/views/studio/studio.jsx b/src/views/studio/studio.jsx index 2d4bd65c4..dddd41ff2 100644 --- a/src/views/studio/studio.jsx +++ b/src/views/studio/studio.jsx @@ -22,6 +22,7 @@ import StudioManagers from './studio-managers.jsx'; import StudioCurators from './studio-curators.jsx'; import StudioComments from './studio-comments.jsx'; import StudioActivity from './studio-activity.jsx'; +import StudioCuratorInvite from './studio-curator-invite.jsx'; import { projects, @@ -53,6 +54,7 @@ const StudioShell = ({studioLoadFailed}) => {
+ diff --git a/src/views/studio/studio.scss b/src/views/studio/studio.scss index d48a2bfbb..e2082e3ac 100644 --- a/src/views/studio/studio.scss +++ b/src/views/studio/studio.scss @@ -349,6 +349,40 @@ $radius: 8px; } } +.studio-invitation { + margin-top: 1rem; + padding: 1rem; + box-sizing: border-box; + min-height: 85px; /* So the box doesn't change height after being accepted */ + + display: flex; + justify-content: space-between; + align-items: center; + + @media #{$intermediate-and-smaller} { + flex-direction: column; + .studio-invitation-msg { + margin-top: .5rem; + margin-bottom: 1rem; + } + } +} + +.studio-info-box { + border-radius: 4px; + background: $ui-blue-10percent; + border: 1px solid $ui-blue-25percent; + + &.studio-info-box-success { + background: #CEF2E8; + border: 1px solid rgba(15, 189, 140, 0.5); + } + &.studio-info-box-error { + background: #FFF0DF; + border: 1px solid $ui-dark-orange; + } +} + /* Modification classes for different interaction states */ .mod-fetching { /* When a field has no content to display yet */ position: relative;