mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-02-17 08:31:23 -05:00
move studio report modal into modals dir
This commit is contained in:
Eric Rosenbaum
parent
dc1316c8ff
commit
47c12aefa3
3 changed files with 166 additions and 133 deletions
149
src/views/studio/modals/studio-report-modal.jsx
Normal file
149
src/views/studio/modals/studio-report-modal.jsx
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
/* eslint-disable react/jsx-no-bind */
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {connect} from 'react-redux';
|
||||
import {FormattedMessage, injectIntl, intlShape} from 'react-intl';
|
||||
|
||||
import {selectStudioTitle, selectStudioDescription, selectStudioImage} from '../../../redux/studio';
|
||||
|
||||
import Modal from '../../../components/modal/base/modal.jsx';
|
||||
import ModalTitle from '../../../components/modal/base/modal-title.jsx';
|
||||
import ModalInnerContent from '../../../components/modal/base/modal-inner-content.jsx';
|
||||
import StudioReportTile from './studio-report-tile.jsx';
|
||||
|
||||
import '../studio.scss';
|
||||
|
||||
import {
|
||||
Fields,
|
||||
actions,
|
||||
selectors
|
||||
} from '../../../redux/studio-report';
|
||||
|
||||
const StudioReportModal = ({
|
||||
description,
|
||||
error,
|
||||
field,
|
||||
image,
|
||||
intl,
|
||||
isSubmitting,
|
||||
previouslyReported,
|
||||
title,
|
||||
handleSetField,
|
||||
handleClose,
|
||||
handleSubmit
|
||||
}) => {
|
||||
const handleChange = event => handleSetField(event.target.value);
|
||||
return (
|
||||
<div>
|
||||
{error && (
|
||||
<div>
|
||||
<div>There was an error. Try again later?</div>
|
||||
<div><code><pre>{error}</pre></code></div>
|
||||
</div>
|
||||
)}
|
||||
{previouslyReported ? (
|
||||
<Modal
|
||||
isOpen
|
||||
className="studio-report-modal"
|
||||
onRequestClose={handleClose}
|
||||
>
|
||||
<ModalTitle
|
||||
className="studio-report-title"
|
||||
/>
|
||||
<ModalInnerContent
|
||||
className="studio-report-inner"
|
||||
>
|
||||
<h2><FormattedMessage id="studio.reportThanksForLettingUsKnow" /></h2>
|
||||
<p><FormattedMessage id="studio.reportYourFeedback" /></p>
|
||||
</ModalInnerContent>
|
||||
</Modal>
|
||||
) : (
|
||||
<Modal
|
||||
isOpen
|
||||
className="studio-report-modal"
|
||||
onRequestClose={handleClose}
|
||||
>
|
||||
<ModalTitle
|
||||
className="studio-report-title"
|
||||
title={intl.formatMessage({id: 'studio.reportThisStudio'})}
|
||||
/>
|
||||
<ModalInnerContent
|
||||
className="studio-report-inner"
|
||||
>
|
||||
<h3><FormattedMessage id="studio.reportThisStudio" /></h3>
|
||||
<p><FormattedMessage id="studio.reportPleaseExplain" /></p>
|
||||
<div className="studio-report-tile-container">
|
||||
<StudioReportTile
|
||||
handleChange={handleChange}
|
||||
heading={intl.formatMessage({id: 'studio.title'})}
|
||||
selected={field === Fields.TITLE}
|
||||
title={title}
|
||||
value={Fields.TITLE}
|
||||
/>
|
||||
<StudioReportTile
|
||||
handleChange={handleChange}
|
||||
heading={intl.formatMessage({id: 'studio.description'})}
|
||||
selected={field === Fields.DESCRIPTION}
|
||||
description={description}
|
||||
value={Fields.DESCRIPTION}
|
||||
/>
|
||||
<StudioReportTile
|
||||
handleChange={handleChange}
|
||||
heading={intl.formatMessage({id: 'studio.thumbnail'})}
|
||||
selected={field === Fields.THUMBNAIL}
|
||||
image={image}
|
||||
value={Fields.THUMBNAIL}
|
||||
/>
|
||||
</div>
|
||||
<p><FormattedMessage id="studio.reportAreThereComments" /></p>
|
||||
<div
|
||||
className="studio-report-button-row"
|
||||
>
|
||||
<button
|
||||
className="button"
|
||||
disabled={field === null || isSubmitting}
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
{isSubmitting && <FormattedMessage id="report.sending" />}
|
||||
{!isSubmitting && <FormattedMessage id="report.send" />}
|
||||
</button>
|
||||
</div>
|
||||
</ModalInnerContent>
|
||||
</Modal>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
StudioReportModal.propTypes = {
|
||||
description: PropTypes.string,
|
||||
error: PropTypes.string,
|
||||
field: PropTypes.string,
|
||||
intl: intlShape,
|
||||
isSubmitting: PropTypes.bool,
|
||||
previouslyReported: PropTypes.bool,
|
||||
handleClose: PropTypes.func,
|
||||
handleSetField: PropTypes.func,
|
||||
handleSubmit: PropTypes.func,
|
||||
image: PropTypes.string,
|
||||
title: PropTypes.string
|
||||
};
|
||||
|
||||
export default connect(
|
||||
state => ({
|
||||
description: selectStudioDescription(state),
|
||||
error: selectors.selectStudioReportError(state),
|
||||
field: selectors.selectStudioReportField(state),
|
||||
image: selectStudioImage(state),
|
||||
isOpen: selectors.selectStudioReportOpen(state),
|
||||
isSubmitting: selectors.selectStudioReportSubmitting(state),
|
||||
previouslyReported: selectors.selectStudioReportSubmitted(state),
|
||||
title: selectStudioTitle(state)
|
||||
}),
|
||||
{
|
||||
handleOpen: actions.openStudioReport,
|
||||
handleClose: actions.closeStudioReport,
|
||||
handleSetField: actions.setStudioReportField,
|
||||
handleSubmit: actions.submitStudioReport
|
||||
}
|
||||
)(injectIntl(StudioReportModal));
|
||||
|
|
@ -2,160 +2,44 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {connect} from 'react-redux';
|
||||
import {FormattedMessage, injectIntl, intlShape} from 'react-intl';
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
|
||||
import {selectStudioTitle, selectStudioDescription, selectStudioImage} from '../../redux/studio';
|
||||
|
||||
import Modal from '../../components/modal/base/modal.jsx';
|
||||
import ModalTitle from '../../components/modal/base/modal-title.jsx';
|
||||
import ModalInnerContent from '../../components/modal/base/modal-inner-content.jsx';
|
||||
import StudioReportTile from './studio-report-tile.jsx';
|
||||
import StudioReportModal from './modals/studio-report-modal.jsx';
|
||||
|
||||
import './studio.scss';
|
||||
|
||||
import {
|
||||
Fields,
|
||||
actions,
|
||||
selectors
|
||||
} from '../../redux/studio-report';
|
||||
|
||||
const StudioReport = ({
|
||||
canReport,
|
||||
description,
|
||||
error,
|
||||
field,
|
||||
image,
|
||||
intl,
|
||||
isOpen,
|
||||
isSubmitting,
|
||||
previouslyReported,
|
||||
title,
|
||||
handleSetField,
|
||||
handleOpen,
|
||||
handleClose,
|
||||
handleSubmit
|
||||
}) => {
|
||||
const handleChange = event => handleSetField(event.target.value);
|
||||
return (
|
||||
<div>
|
||||
{error && (
|
||||
<div>
|
||||
<div>There was an error. Try again later?</div>
|
||||
<div><code><pre>{error}</pre></code></div>
|
||||
</div>
|
||||
)}
|
||||
{canReport && (
|
||||
<button onClick={handleOpen}><FormattedMessage id="general.report" /></button>
|
||||
)}
|
||||
{isOpen && (
|
||||
previouslyReported ? (
|
||||
<Modal
|
||||
isOpen
|
||||
className="studio-report-modal"
|
||||
onRequestClose={handleClose}
|
||||
>
|
||||
<ModalTitle
|
||||
className="studio-report-title"
|
||||
/>
|
||||
<ModalInnerContent
|
||||
className="studio-report-inner"
|
||||
>
|
||||
<h2><FormattedMessage id="studio.reportThanksForLettingUsKnow" /></h2>
|
||||
<p><FormattedMessage id="studio.reportYourFeedback" /></p>
|
||||
</ModalInnerContent>
|
||||
</Modal>
|
||||
) : (
|
||||
<Modal
|
||||
isOpen
|
||||
className="studio-report-modal"
|
||||
onRequestClose={handleClose}
|
||||
>
|
||||
<ModalTitle
|
||||
className="studio-report-title"
|
||||
title={intl.formatMessage({id: 'studio.reportThisStudio'})}
|
||||
/>
|
||||
<ModalInnerContent
|
||||
className="studio-report-inner"
|
||||
>
|
||||
<h3><FormattedMessage id="studio.reportThisStudio" /></h3>
|
||||
<p><FormattedMessage id="studio.reportPleaseExplain" /></p>
|
||||
<div className="studio-report-tile-container">
|
||||
<StudioReportTile
|
||||
handleChange={handleChange}
|
||||
heading={intl.formatMessage({id: 'studio.title'})}
|
||||
selected={field === Fields.TITLE}
|
||||
title={title}
|
||||
value={Fields.TITLE}
|
||||
/>
|
||||
<StudioReportTile
|
||||
handleChange={handleChange}
|
||||
heading={intl.formatMessage({id: 'studio.description'})}
|
||||
selected={field === Fields.DESCRIPTION}
|
||||
description={description}
|
||||
value={Fields.DESCRIPTION}
|
||||
/>
|
||||
<StudioReportTile
|
||||
handleChange={handleChange}
|
||||
heading={intl.formatMessage({id: 'studio.thumbnail'})}
|
||||
selected={field === Fields.THUMBNAIL}
|
||||
image={image}
|
||||
value={Fields.THUMBNAIL}
|
||||
/>
|
||||
</div>
|
||||
<p><FormattedMessage id="studio.reportAreThereComments" /></p>
|
||||
<div
|
||||
className="studio-report-button-row"
|
||||
>
|
||||
<button
|
||||
className="button"
|
||||
disabled={field === null || isSubmitting}
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
{isSubmitting && <FormattedMessage id="report.sending" />}
|
||||
{!isSubmitting && <FormattedMessage id="report.send" />}
|
||||
</button>
|
||||
</div>
|
||||
</ModalInnerContent>
|
||||
</Modal>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
handleOpen
|
||||
}) => (
|
||||
<div>
|
||||
{canReport && (
|
||||
<button onClick={handleOpen}><FormattedMessage id="general.report" /></button>
|
||||
)}
|
||||
{isOpen && (
|
||||
<StudioReportModal />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
StudioReport.propTypes = {
|
||||
canReport: PropTypes.bool,
|
||||
description: PropTypes.string,
|
||||
error: PropTypes.string,
|
||||
field: PropTypes.string,
|
||||
intl: intlShape,
|
||||
isOpen: PropTypes.bool,
|
||||
isSubmitting: PropTypes.bool,
|
||||
previouslyReported: PropTypes.bool,
|
||||
handleOpen: PropTypes.func,
|
||||
handleClose: PropTypes.func,
|
||||
handleSetField: PropTypes.func,
|
||||
handleSubmit: PropTypes.func,
|
||||
image: PropTypes.string,
|
||||
title: PropTypes.string
|
||||
handleOpen: PropTypes.func
|
||||
};
|
||||
|
||||
export default connect(
|
||||
state => ({
|
||||
canReport: selectors.selectCanReportStudio(state),
|
||||
description: selectStudioDescription(state),
|
||||
error: selectors.selectStudioReportError(state),
|
||||
field: selectors.selectStudioReportField(state),
|
||||
image: selectStudioImage(state),
|
||||
isOpen: selectors.selectStudioReportOpen(state),
|
||||
isSubmitting: selectors.selectStudioReportSubmitting(state),
|
||||
previouslyReported: selectors.selectStudioReportSubmitted(state),
|
||||
title: selectStudioTitle(state)
|
||||
isOpen: selectors.selectStudioReportOpen(state)
|
||||
}),
|
||||
{
|
||||
handleOpen: actions.openStudioReport,
|
||||
handleClose: actions.closeStudioReport,
|
||||
handleSetField: actions.setStudioReportField,
|
||||
handleSubmit: actions.submitStudioReport
|
||||
handleOpen: actions.openStudioReport
|
||||
}
|
||||
)(injectIntl(StudioReport));
|
||||
)(StudioReport);
|
||||
|
|
|
|||
Loading…
Reference in a new issue