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

use radio button values in report

Browse source
This commit is contained in:
Eric Rosenbaum 2021-05-14 14:51:17 -04:00
parent 28a5ee47aa
commit 3a9742c77e
4 changed files with 66 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/redux/studio-report.js
View file

@ -29,7 +29,7 @@ const Errors = keyMirror({
const getInitialState = () => ({
status: Status.IDLE,
field: Fields.TITLE,
field: null,
error: null,
isOpen: false
});

6
src/views/studio/studio-report-tile.jsx
View file

@ -9,6 +9,8 @@ const StudioReportTile = props =>
<input
type="radio"
name="studio-report"
value={props.value}
onChange={props.handleChange}
/>
{props.heading}
</div>
@ -32,7 +34,9 @@ const StudioReportTile = props =>
StudioReportTile.propTypes = {
heading: PropTypes.string,
text: PropTypes.string,
image: PropTypes.string
handleChange: PropTypes.func,
image: PropTypes.string,
value: PropTypes.string
};
export default StudioReportTile;

104
src/views/studio/studio-report.jsx
View file

@ -34,55 +34,63 @@ const StudioReport = ({
handleOpen,
handleClose,
handleSubmit
}) => (
<div>
{canReport && (
<button onClick={handleOpen}><FormattedMessage id="general.report" /></button>
)}
{isOpen && (
<Modal
isOpen
className="studio-report-modal"
onRequestClose={handleClose}
>
<ModalTitle
className="studio-report-title"
title={intl.formatMessage({id: 'studio.reportThisStudio'})}
/>
<ModalInnerContent
className="studio-report-inner"
}) => {
const handleChange = event => handleSetField(event.target.value);
return (
<div>
{canReport && (
<button onClick={handleOpen}><FormattedMessage id="general.report" /></button>
)}
{isOpen && (
<Modal
isOpen
className="studio-report-modal"
onRequestClose={handleClose}
>
<h3><FormattedMessage id="studio.reportThisStudio" /></h3>
<p><FormattedMessage id="studio.reportPleaseExplain" /></p>
<form onSubmit={handleSubmit}>
<StudioReportTile
heading={intl.formatMessage({id: 'studio.title'})}
text={title}
value={Fields.TITLE}
/>
<StudioReportTile
heading={intl.formatMessage({id: 'studio.description'})}
text={description}
value={Fields.DESCRIPTION}
/>
<StudioReportTile
heading={intl.formatMessage({id: 'studio.thumbnail'})}
image={image}
value={Fields.THUMBNAIL}
/>
<p><FormattedMessage id="studio.reportAreThereComments" /></p>
<button
className="button"
>
<FormattedMessage id="report.send" />
</button>
</form>
</ModalInnerContent>
</Modal>
)}
</div>
);
<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>
<form onSubmit={handleSubmit}>
<StudioReportTile
handleChange={handleChange}
heading={intl.formatMessage({id: 'studio.title'})}
text={title}
value={Fields.TITLE}
/>
<StudioReportTile
handleChange={handleChange}
heading={intl.formatMessage({id: 'studio.description'})}
text={description}
value={Fields.DESCRIPTION}
/>
<StudioReportTile
handleChange={handleChange}
heading={intl.formatMessage({id: 'studio.thumbnail'})}
image={image}
value={Fields.THUMBNAIL}
/>
<p><FormattedMessage id="studio.reportAreThereComments" /></p>
<button
className="button"
type="submit"
disabled={field === null || isSubmitting}
>
{isSubmitting && <FormattedMessage id="report.sending" />}
{!isSubmitting && <FormattedMessage id="report.send" />}
</button>
</form>
</ModalInnerContent>
</Modal>
)}
</div>
);
};
StudioReport.propTypes = {
canReport: PropTypes.bool,

4
src/views/studio/studio.scss
View file

@ -75,6 +75,10 @@ $radius: 8px;
padding: 2rem;
}
.button:disabled {
background-color: $active-dark-gray;
}
.studio-report-tile {
background: $ui-light-gray;
width: 200px;