Skip to content

Commit

Permalink
Mark strings for translation
Browse files Browse the repository at this point in the history
  • Loading branch information
@jocelyn-stericker
jocelyn-stericker committed Sep 20, 2018
1 parent e867d02 commit 347e842
Show file tree
Hide file tree
Showing 23 changed files with 921 additions and 298 deletions.
2 changes: 2 additions & 0 deletions package.json
View file
Expand Up @@ -12,6 +12,7 @@
"makelily": "hacklily/makelily#3d2b9bb6d4fde27bdc41eaf667cf0984b939d0a4",
"monaco-editor": "0.14.3",
"react-dom": "16.5.1",
"react-intl": "2.5.0",
"react-modal": "3.5.1",
"react-monaco-editor": "0.18.0",
"react": "16.5.1"
Expand All @@ -32,6 +33,7 @@
"@types/react-dom": "16.0.7",
"@types/react-dom-factories": "^1.0.2",
"@types/react-modal": "3.2.1",
"@types/react-intl": "2.3.11",
"@types/text-encoding": "0.0.33",
"@types/webpack": "4.4.11",
"autoprefixer": "9.1.5",
Expand Down
150 changes: 116 additions & 34 deletions src/App.tsx
View file
Expand Up @@ -23,6 +23,7 @@ import Makelily from "makelily"; // note: use for types only
import * as monacoEditor from "monaco-editor";
import React from "react";

import { FormattedMessage, InjectedIntl, injectIntl } from "react-intl";
import { Auth, checkLogin, redirectToLogin, revokeGitHubAuth } from "./auth";
import DownloadModal from "./DownloadModal";
import Editor from "./Editor";
Expand Down Expand Up @@ -177,6 +178,9 @@ interface Props extends QueryProps {
*/
hideUnstable219Notification: boolean;

// Translation methods from react-intl.
intl: InjectedIntl;

isStandalone: boolean;

/**
Expand Down Expand Up @@ -259,31 +263,42 @@ interface State {
makelilyInsertCB?(ly: string): void;
}

const DEFAULT_SONG: string = `\\header {
title = "Untitled"
composer = "Composer"
}
\\score {
\\relative c' {
c4
}
\\layout {}
\\midi {}
}`;

/**
* Root component of Hacklily. This renders everything on the page.
*
* Receives props from the query (URL) as well as localStorage -- see index.tsx for how that works.
*/
export default class App extends React.PureComponent<Props, State> {
class App extends React.PureComponent<Props, State> {
state: State = {
cleanSongs: {
null: {
baseSHA: null,
src: DEFAULT_SONG,
src: this.props.intl.formatMessage({
id: "App.defaultSong",
description: "The song the user sees when first opening Hacklily.",
defaultMessage: `\\\\header \\\{
title = "Untitled"
composer = "Composer"
\\}
\\\\score \\{
<<
\\\\new Staff <<
\\\\new Voice \\{
\\\\clef treble
\\\\key c \\\\major
\\\\relative c' \\{
c4
\\}
\\}
>>
>>
\\\\layout \\{\\}
\\\\midi \\{\\}
\\}
`,
}),
},
},
connectToGitHubReason: null,
Expand Down Expand Up @@ -464,6 +479,7 @@ export default class App extends React.PureComponent<Props, State> {
<div className="content">
<Editor
ref={this.setEditor}
intl={this.props.intl}
code={song ? song.src : undefined}
colourScheme={this.props.colourScheme}
mode={mode}
Expand Down Expand Up @@ -552,7 +568,12 @@ export default class App extends React.PureComponent<Props, State> {
);

if (req.status >= 400) {
alert("Could not fetch the requested song.");
alert(
this.props.intl.formatMessage({
id: "App.couldNotFetchSong",
defaultMessage: "Could not fetch the requested song.",
}),
);

return;
}
Expand Down Expand Up @@ -631,6 +652,7 @@ export default class App extends React.PureComponent<Props, State> {
this.setState({
interstitialChanges: null,
});
// Not translated, since all modern browsers ignore this.
ev.returnValue = "Changes you made have not been saved.";
}
};
Expand Down Expand Up @@ -706,8 +728,12 @@ export default class App extends React.PureComponent<Props, State> {
const { midi } = this.state;
if (!midi) {
alert(
"No MIDI data found. Make sure you have " +
"a \\midi {} and a \\layout {} in your \\score {}.",
this.props.intl.formatMessage({
id: "App.noMIDI",
defaultMessage:
"No MIDI data found. Make sure you have " +
"a \\midi \\{\\} and a \\layout \\{\\} in your \\score \\{\\}.",
}),
);
return;
}
Expand All @@ -726,13 +752,24 @@ export default class App extends React.PureComponent<Props, State> {
private handleExportPDF = async (): Promise<void> => {
const song = this.song();
if (!song) {
alert("Could not export PDF.");
alert(
this.props.intl.formatMessage({
id: "App.noPDF",
defaultMessage: "Could not export PDF.",
}),
);
return;
}

const rpc = this.rpc;
if (!rpc) {
alert("Could not connect to server");
alert(
this.props.intl.formatMessage({
id: "App.noPDFServer",
defaultMessage:
"Could not export PDF. Check your Internet connection.",
}),
);
return;
}

Expand All @@ -752,7 +789,12 @@ export default class App extends React.PureComponent<Props, State> {

this.triggerDownload(`${name}.pdf`, "data:text/plain;base64," + pdf);
} catch (err) {
alert("Could not export PDF.");
alert(
this.props.intl.formatMessage({
id: "App.noPDF",
defaultMessage: "Could not export PDF.",
}),
);
}

this.setState({
Expand All @@ -765,7 +807,12 @@ export default class App extends React.PureComponent<Props, State> {
private handleExportLy = (): void => {
const song = this.song();
if (!song) {
alert("Could not export lilypond source.");
alert(
this.props.intl.formatMessage({
id: "App.noLY",
defaultMessage: "Could not export original source.",
}),
);
return;
}

Expand Down Expand Up @@ -1079,7 +1126,10 @@ export default class App extends React.PureComponent<Props, State> {

if (!this.props.auth && !isClean) {
this.setState({
connectToGitHubReason: "Connect to GitHub to save this song\u2026",
connectToGitHubReason: this.props.intl.formatMessage({
id: "App.loginToSafe",
defaultMessage: "Connect to GitHub to save this song\u2026",
}),
login: true,
});
} else {
Expand All @@ -1093,7 +1143,10 @@ export default class App extends React.PureComponent<Props, State> {
private handleShowPublish = (): void => {
if (!this.props.auth) {
this.setState({
connectToGitHubReason: "Connect to GitHub to share this song\u2026",
connectToGitHubReason: this.props.intl.formatMessage({
id: "App.loginToShare",
defaultMessage: "Connect to GitHub to share this song\u2026",
}),
login: true,
});
} else if (this.props.edit) {
Expand All @@ -1108,8 +1161,10 @@ export default class App extends React.PureComponent<Props, State> {
private handleShowSaveAs = (): void => {
if (!this.props.auth) {
this.setState({
connectToGitHubReason:
"Connect to GitHub to save a copy of this song\u2026",
connectToGitHubReason: this.props.intl.formatMessage({
id: "App.loginToCopy",
defaultMessage: "Connect to GitHub to save a copy of this song\u2026",
}),
login: true,
});
this.props.setQuery(
Expand Down Expand Up @@ -1139,7 +1194,13 @@ export default class App extends React.PureComponent<Props, State> {
const { auth } = this.props;

if (!this.rpc) {
alert("Cannot sign out because you are not connected to the server.");
alert(
this.props.intl.formatMessage({
id: "App.cannotLogOutBecauseServer",
defaultMessage:
"Cannot sign out because you are not connected to the server.",
}),
);

return;
}
Expand All @@ -1151,7 +1212,7 @@ export default class App extends React.PureComponent<Props, State> {
}
const token: string = auth.accessToken;
localStorage.clear();
revokeGitHubAuth(this.rpc, token);
revokeGitHubAuth(this.rpc, token, this.props.intl);
};

private handleUpdateGitHub = async (): Promise<void> => {
Expand Down Expand Up @@ -1255,7 +1316,13 @@ export default class App extends React.PureComponent<Props, State> {
true,
);
} catch (err) {
alert(err.message || "Could not log you in");
alert(
err.message ||
this.props.intl.formatMessage({
id: "App.couldNotLogIn",
defaultMessage: "Could not log you in",
}),
);
this.props.setQuery(
{
code: undefined,
Expand All @@ -1270,7 +1337,13 @@ export default class App extends React.PureComponent<Props, State> {
auth.repoDetails = await getOrCreateRepo(auth);
this.props.setAuth(auth);
} catch (err) {
alert(err.message || "Could not get GitHub repo details.");
alert(
err.message ||
this.props.intl.formatMessage({
id: "App.couldNotGetRepo",
defaultMessage: "Could not get GitHub repo details.",
}),
);
}
}
this.setState({
Expand Down Expand Up @@ -1506,6 +1579,7 @@ export default class App extends React.PureComponent<Props, State> {
mode === MODE_BOTH ? "50%" : mode === MODE_VIEW ? "100%" : "0",
}}
>
{/* Not translating: dev-only */}
<div className={css(APP_STYLE.sheetMusicError)}>
Could not connect to server because the{" "}
<code>REACT_APP_BACKEND_WS_URL</code> environment variable was not
Expand All @@ -1526,10 +1600,16 @@ export default class App extends React.PureComponent<Props, State> {
>
<div className={css(APP_STYLE.sheetMusicError)}>
<i className="fa fa-exclamation-triangle" aria-hidden={true} />{" "}
Could not connect to server.
<FormattedMessage
id="App.couldNotConnectToServer"
defaultMessage="Could not connect to server."
/>
<br />
Trying again in {reconnectTimeout}
&hellip;
<FormattedMessage
id="App.reconnectTimeout"
defaultMessage="Trying again in {reconnectTimeout}&hellip;"
values={{ reconnectTimeout }}
/>
</div>
</div>
);
Expand Down Expand Up @@ -1682,3 +1762,5 @@ export default class App extends React.PureComponent<Props, State> {
}
};
}

export default injectIntl(App);

0 comments on commit 347e842

Please sign in to comment.