Add l10n file to studios view and replace text with formatted message.

This commit is contained in:
Karishma Chadha 2021-05-07 17:04:14 -04:00
parent fdf05f9430
commit b065ff86d4
13 changed files with 68 additions and 26 deletions

View file

@ -248,6 +248,7 @@
"thumbnail.by": "by",
"report.error": "Something went wrong when trying to send your message. Please try again.",
"report.project": "Report Project",
"report.studio": "Report Studio",
"report.projectInstructions": "When you send a report, it lets the Scratch Team know about projects that break the {CommunityGuidelinesLink}. Does something in this project break the {CommunityGuidelinesLink}? If you think it does, please tell us more.",
"report.CommunityGuidelinesLinkText": "Scratch Community Guidelines",
"report.reasonPlaceHolder": "Select a reason",

View file

@ -0,0 +1,28 @@
{
"studio.tabNavProjects": "Projects",
"studio.tabNavCurators": "Curators",
"studio.tabNavComments": "Comments",
"studio.tabNavActivity": "Activity",
"studio.title": "Title",
"studio.description": "Description",
"studio.thumbnail": "Thumbnail",
"studio.projectsHeader": "Projects",
"studio.addProjectsHeader": "Add Projects",
"studio.addProject": "Add",
"studio.creatorRole": "Studio Creator",
"studio.managersHeader": "Managers",
"studio.unfollowStudio": "Unfollow Studio",
"studio.followStudio": "Follow Studio",
"studio.curatorsHeader": "Curators",
"studio.inviteCuratorsHeader": "Invite Curators",
"studio.inviteCurator": "Invite",
"studio.curatorAcceptInvite": "Accept Invite",
"studio.commentsHeader": "Comments"
}

View file

@ -56,7 +56,7 @@ const StudioComments = ({
return (
<div>
<h2>Comments</h2>
<h2><FormattedMessage id="studio.commentsHeader" /></h2>
{canEditCommentsAllowed && <StudioCommentsAllowed />}
<div>
{shouldShowCommentComposer && commentsAllowed &&

View file

@ -3,6 +3,7 @@ import React, {useState} from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import classNames from 'classnames';
import {FormattedMessage} from 'react-intl';
import {acceptInvitation} from './lib/studio-member-actions';
@ -26,7 +27,7 @@ const StudioCuratorInvite = ({onSubmit}) => {
setSubmitting(false);
});
}}
>Accept invite</button>
><FormattedMessage id="studio.curatorAcceptInvite" /></button>
{error && <div>{error}</div>}
</div>
);

View file

@ -3,6 +3,7 @@ import React, {useState} from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import classNames from 'classnames';
import {FormattedMessage} from 'react-intl';
import {inviteCurator} from './lib/studio-member-actions';
@ -13,7 +14,7 @@ const StudioCuratorInviter = ({onSubmit}) => {
return (
<div className="studio-adder-section">
<h3> Invite Curators</h3>
<h3><FormattedMessage id="studio.inviteCuratorsHeader" /></h3>
<input
disabled={submitting}
type="text"
@ -34,7 +35,7 @@ const StudioCuratorInviter = ({onSubmit}) => {
.catch(e => setError(e))
.then(() => setSubmitting(false));
}}
>Invite</button>
><FormattedMessage id="studio.inviteCurator" /></button>
{error && <div>{error}</div>}
</div>
);

View file

@ -1,6 +1,7 @@
import React, {useEffect} from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {FormattedMessage} from 'react-intl';
import {curators} from './lib/redux-modules';
import Debug from './debug.jsx';
@ -18,7 +19,7 @@ const StudioCurators = ({
}, []);
return (<div className="studio-members">
<h2>Curators</h2>
<h2><FormattedMessage id="studio.curatorsHeader" /></h2>
{canInviteCurators && <CuratorInviter />}
{showCuratorInvite && <CuratorInvite />}
{error && <Debug
@ -37,7 +38,7 @@ const StudioCurators = ({
{loading ? <small>Loading...</small> : (
moreToLoad ?
<button onClick={onLoadMore}>
Load more
<FormattedMessage id="general.loadMore" />
</button> :
<small>No more to load</small>
)}

View file

@ -2,6 +2,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {FormattedMessage} from 'react-intl';
import {selectIsFollowing} from '../../redux/studio';
import {selectCanFollowStudio} from '../../redux/studio-permissions';
import {
@ -28,7 +30,9 @@ const StudioFollow = ({
onClick={() => handleFollow(!isFollowing)}
>
{isMutating ? '...' : (
isFollowing ? 'Unfollow Studio' : 'Follow Studio'
isFollowing ?
<FormattedMessage id="studio.unfollowStudio" /> :
<FormattedMessage id="studio.followStudio" />
)}
</button>
{followingError && <div>Error mutating following: {followingError}</div>}

View file

@ -1,6 +1,7 @@
import React, {useEffect} from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {FormattedMessage} from 'react-intl';
import {managers} from './lib/redux-modules';
import {loadManagers} from './lib/studio-member-actions';
@ -15,7 +16,7 @@ const StudioManagers = ({items, error, loading, moreToLoad, onLoadMore}) => {
return (
<div className="studio-members">
<h2>Managers</h2>
<h2><FormattedMessage id="studio.managersHeader" /></h2>
{error && <Debug
label="Error"
data={error}
@ -33,7 +34,7 @@ const StudioManagers = ({items, error, loading, moreToLoad, onLoadMore}) => {
{loading ? <small>Loading...</small> : (
moreToLoad ?
<button onClick={onLoadMore}>
Load more
<FormattedMessage id="general.loadMore" />
</button> :
<small>No more to load</small>
)}

View file

@ -3,6 +3,7 @@ import React, {useState} from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import classNames from 'classnames';
import {FormattedMessage} from 'react-intl';
import {
selectCanRemoveCurators, selectCanRemoveManager, selectCanPromoteCurators
@ -33,7 +34,7 @@ const StudioMemberTile = ({
href={userUrl}
className="studio-member-name"
>{username}</a>
{isCreator && <div className="studio-member-role">Studio Creator</div>}
{isCreator && <div className="studio-member-role"><FormattedMessage id="studio.creatorRole" /></div>}
</div>
{canRemove &&
<button

View file

@ -3,6 +3,7 @@ import React, {useState} from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import classNames from 'classnames';
import {FormattedMessage} from 'react-intl';
import {addProject} from './lib/studio-project-actions';
@ -13,7 +14,7 @@ const StudioProjectAdder = ({onSubmit}) => {
return (
<div className="studio-adder-section">
<h3> Add Projects</h3>
<h3><FormattedMessage id="studio.addProjectsHeader" /></h3>
<input
disabled={submitting}
type="text"
@ -34,7 +35,7 @@ const StudioProjectAdder = ({onSubmit}) => {
.catch(e => setError(e))
.then(() => setSubmitting(false));
}}
>Add</button>
><FormattedMessage id="studio.addProject" /></button>
{error && <div>{error}</div>}
</div>
);

View file

@ -2,6 +2,7 @@ import React, {useEffect} from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import StudioOpenToAll from './studio-open-to-all.jsx';
import {FormattedMessage} from 'react-intl';
import {projects} from './lib/redux-modules';
import {selectCanAddProjects, selectCanEditOpenToAll} from '../../redux/studio-permissions';
@ -19,7 +20,7 @@ const StudioProjects = ({
return (
<div className="studio-projects">
<h2>Projects</h2>
<h2><FormattedMessage id="studio.projectsHeader" /></h2>
{canEditOpenToAll && <StudioOpenToAll />}
{canAddProjects && <StudioProjectAdder />}
{error && <Debug
@ -43,7 +44,7 @@ const StudioProjects = ({
{loading ? <small>Loading...</small> : (
moreToLoad ?
<button onClick={onLoadMore}>
Load more
<FormattedMessage id="general.loadMore" />
</button> :
<small>No more to load</small>
)}

View file

@ -2,6 +2,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {FormattedMessage} from 'react-intl';
import {
Fields,
@ -24,15 +25,15 @@ const StudioReport = ({
<div>
<h3>Reporting</h3>
{canReport && (
<button onClick={handleOpen}>Report</button>
<button onClick={handleOpen}><FormattedMessage id="general.report" /></button>
)}
{isOpen && (
<div style={{padding: '1rem', margin: '1rem', border: '1px solid green'}}>
<div>Report Studio Modal</div>
<div><FormattedMessage id="studio.report.studio" /></div>
{previouslyReported ? (
<React.Fragment>
<div>Submitted the report!</div>
<button onClick={handleClose}>Close</button>
<button onClick={handleClose}><FormattedMessage id="general.close" /></button>
</React.Fragment>
) : (
<React.Fragment>
@ -40,9 +41,9 @@ const StudioReport = ({
value={field}
onChange={e => handleSetField(e.target.value)}
>
<option value={Fields.TITLE}>Title</option>
<option value={Fields.DESCRIPTION}>Description</option>
<option value={Fields.THUMBNAIL}>Thumbnail</option>
<option value={Fields.TITLE}><FormattedMessage id="studio.title" /></option>
<option value={Fields.DESCRIPTION}><FormattedMessage id="studio.description" /></option>
<option value={Fields.THUMBNAIL}><FormattedMessage id="studio.thumbnail" /></option>
</select>
{error && (
<div>
@ -54,9 +55,9 @@ const StudioReport = ({
disabled={isSubmitting}
onClick={handleSubmit}
>
Submit
<FormattedMessage id="report.send" />
</button>
<button onClick={handleClose}>Cancel</button>
<button onClick={handleClose}><FormattedMessage id="general.cancel" /></button>
</React.Fragment>
)}
</div>

View file

@ -1,6 +1,7 @@
import React from 'react';
import {useRouteMatch, NavLink} from 'react-router-dom';
import SubNavigation from '../../components/subnavigation/subnavigation.jsx';
import {FormattedMessage} from 'react-intl';
const StudioTabNav = () => {
const match = useRouteMatch();
@ -15,25 +16,25 @@ const StudioTabNav = () => {
to={`${match.url}`}
exact
>
<li>Projects</li>
<li><FormattedMessage id="studio.tabNavProjects" /></li>
</NavLink>
<NavLink
activeClassName="active"
to={`${match.url}/curators`}
>
<li>Curators</li>
<li><FormattedMessage id="studio.tabNavCurators" /></li>
</NavLink>
<NavLink
activeClassName="active"
to={`${match.url}/comments`}
>
<li> Comments</li>
<li><FormattedMessage id="studio.tabNavComments" /></li>
</NavLink>
<NavLink
activeClassName="active"
to={`${match.url}/activity`}
>
<li>Activity</li>
<li><FormattedMessage id="studio.tabNavActivity" /></li>
</NavLink>
</SubNavigation>
);