Skip to content

GitLab

S
scratch-www
Commit 60b98908 authored by seotts's avatar seotts
Browse files
Options

use selectIsMuted to determine whether to show error

parent 2cc413f8
Hide whitespace changes
Inline Side-by-side
Showing with 127 additions and 80 deletions
src/views/preview/subactions.jsx
View file @ 60b98908
......@@ -8,90 +8,132 @@ const Button = require('../../components/forms/button.jsx');
const AddToStudioModal = require('./add-to-studio.jsx');
const SocialModal = require('../../components/modal/social/container.jsx');
const ReportModal = require('../../components/modal/report/modal.jsx');
const {connect} = require('react-redux');
const {useState} = require('react');
const projectShape = require('./projectshape.jsx').projectShape;
import {selectIsMuted, selectNewStudiosLaunched} from '../../redux/session.js';
import StudioMuteEditMessage from '../studio/studio-mute-edit-message.jsx';
require('./subactions.scss');
const Subactions = props => (
<FlexRow className="subactions">
<div className="share-date">
<div className="copyleft">&copy;</div>
{' '}
{/* eslint-disable react/jsx-sort-props */}
{props.shareDate ? (
<FormattedDate
value={Date.parse(props.shareDate)}
day="2-digit"
month="short"
year="numeric"
/>
) : 'Unshared'}
{/* eslint-enable react/jsx-sort-props */}
</div>
<FlexRow className="action-buttons">
{(props.canReport) &&
<React.Fragment>
<Button
className="action-button report-button"
key="report-button"
onClick={props.onReportClicked}
>
<FormattedMessage id="general.report" />
</Button>
{props.reportOpen && (
<ReportModal
isOpen
key="report-modal"
type="project"
onReport={props.onReportSubmit}
onRequestClose={props.onReportClose}
/>
)}
</React.Fragment>
}
{props.canAddToStudio &&
<React.Fragment>
<Button
className="action-button studio-button"
key="add-to-studio-button"
onClick={props.onAddToStudioClicked}
>
<FormattedMessage id="addToStudio.title" />
</Button>
{props.addToStudioOpen && (
<AddToStudioModal
isOpen
isAdmin={props.isAdmin}
key="add-to-studio-modal"
userOwnsProject={props.userOwnsProject}
onRequestClose={props.onAddToStudioClosed}
onToggleStudio={props.onToggleStudio}
/>
)}
</React.Fragment>
}
{/* only show copy link button, modal if project is shared */}
{props.isShared && props.projectInfo && props.projectInfo.id && (
<React.Fragment>
<Button
className="action-button copy-link-button"
onClick={props.onSocialClicked}
>
<FormattedMessage id="general.copyLink" />
</Button>
{props.socialOpen && (
<SocialModal
isOpen
key="social-modal"
projectId={props.projectInfo && props.projectInfo.id}
onRequestClose={props.onSocialClosed}
/>
)}
</React.Fragment>
)}
const Subactions = ({
addToStudioOpen,
canAddToStudio,
canReport,
isAdmin,
isShared,
onAddToStudioClicked,
onAddToStudioClosed,
onReportClicked,
onReportClose,
onReportSubmit,
onSocialClicked,
onSocialClosed,
onToggleStudio,
projectInfo,
reportOpen,
shareDate,
showAddToStudioMuteError,
socialOpen,
userOwnsProject
}) => {
const [showMuteMessage, setShowMuteMessage] = useState(false);
return (
<FlexRow className="subactions">
<div className="share-date">
<div className="copyleft">&copy;</div>
{' '}
{/* eslint-disable react/jsx-sort-props */}
{shareDate ? (
<FormattedDate
value={Date.parse(shareDate)}
day="2-digit"
month="short"
year="numeric"
/>
) : 'Unshared'}
{/* eslint-enable react/jsx-sort-props */}
</div>
<FlexRow className="action-buttons">
{(canReport) &&
<React.Fragment>
<Button
className="action-button report-button"
key="report-button"
onClick={onReportClicked}
>
<FormattedMessage id="general.report" />
</Button>
{reportOpen && (
<ReportModal
isOpen
key="report-modal"
type="project"
onReport={onReportSubmit}
onRequestClose={onReportClose}
/>
)}
</React.Fragment>
}
{canAddToStudio &&
<React.Fragment>
<div
style={{position: 'relative'}}
/* eslint-disable react/jsx-no-bind */
onMouseEnter={() => showAddToStudioMuteError && setShowMuteMessage(true)}
onMouseLeave={() => showAddToStudioMuteError && setShowMuteMessage(false)}
/* eslint-enable react/jsx-no-bind */
>
<Button
className="action-button studio-button"
disabled={showAddToStudioMuteError}
key="add-to-studio-button"
onClick={showMuteMessage ? null : onAddToStudioClicked}
>
<FormattedMessage id="addToStudio.title" />
</Button>
{showMuteMessage && <StudioMuteEditMessage
className="studio-button-error"
messageId="project.mutedAddToStudio"
/>}
</div>
{addToStudioOpen && (
<AddToStudioModal
isOpen
isAdmin={isAdmin}
key="add-to-studio-modal"
userOwnsProject={userOwnsProject}
onRequestClose={onAddToStudioClosed}
onToggleStudio={onToggleStudio}
/>
)}
</React.Fragment>
}
{/* only show copy link button, modal if project is shared */}
{isShared && projectInfo && projectInfo.id && (
<React.Fragment>
<Button
className="action-button copy-link-button"
onClick={onSocialClicked}
>
<FormattedMessage id="general.copyLink" />
</Button>
{socialOpen && (
<SocialModal
isOpen
key="social-modal"
projectId={projectInfo && projectInfo.id}
onRequestClose={onSocialClosed}
/>
)}
</React.Fragment>
)}
</FlexRow>
</FlexRow>
</FlexRow>
);
);
};
Subactions.propTypes = {
addToStudioOpen: PropTypes.bool,
......@@ -110,8 +152,13 @@ Subactions.propTypes = {
projectInfo: projectShape,
reportOpen: PropTypes.bool,
shareDate: PropTypes.string,
showAddToStudioMuteError: PropTypes.bool,
socialOpen: PropTypes.bool,
userOwnsProject: PropTypes.bool
};
module.exports = Subactions;
module.exports = connect(
state => ({
showAddToStudioMuteError: selectNewStudiosLaunched(state) && selectIsMuted(state)
})
)(Subactions);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment