Keep translated message bodies in local storage to avoid re-requests

This commit is contained in:
Ben Gotow 2019-07-31 02:06:05 -05:00
parent 6b53ff6c91
commit 87a4853db9

View file

@ -26,12 +26,17 @@ interface TranslateMessageHeaderState {
let RecentlyTranslatedBodies: { let RecentlyTranslatedBodies: {
id: string; id: string;
translated: string;
enabled: boolean; enabled: boolean;
fromLang: string; fromLang: string;
toLang: string; toLang: string;
}[] = []; }[] = [];
try {
RecentlyTranslatedBodies = JSON.parse(window.localStorage.getItem('translated-index') || '[]');
} catch (err) {
// no saved translations
}
function getPrefs() { function getPrefs() {
return { return {
disabled: AppEnv.config.get('core.translation.disabled') || [], disabled: AppEnv.config.get('core.translation.disabled') || [],
@ -47,7 +52,8 @@ function setPrefs(opts: { disabled: string[]; automatic: string[] }) {
export class TranslateMessageExtension extends MessageViewExtension { export class TranslateMessageExtension extends MessageViewExtension {
static formatMessageBody = ({ message }) => { static formatMessageBody = ({ message }) => {
const result = RecentlyTranslatedBodies.find(o => o.id === message.id); const result = RecentlyTranslatedBodies.find(o => o.id === message.id);
if (result && result.enabled) message.body = result.translated; if (result && result.enabled)
message.body = window.localStorage.getItem(`translated-${message.id}`);
}; };
} }
@ -125,7 +131,7 @@ export class TranslateMessageHeader extends React.Component<
const prefs = getPrefs(); const prefs = getPrefs();
if (prefs.disabled.includes(detected)) return; if (prefs.disabled.includes(detected)) return;
this.setState({ detected }); this.setState({ detected });
if (prefs.automatic.includes(detected)) { if (prefs.automatic.includes(detected) && IdentityStore.hasProFeatures()) {
this._onTranslate('auto'); this._onTranslate('auto');
} }
}); });
@ -155,18 +161,27 @@ export class TranslateMessageHeader extends React.Component<
if (this._mounted) { if (this._mounted) {
this.setState({ translating: false }); this.setState({ translating: false });
} }
if (!translated) return; if (translated) {
this._onPersistTranslation(targetLanguage, translated);
if (RecentlyTranslatedBodies.length > 50) {
RecentlyTranslatedBodies.shift();
} }
};
_onPersistTranslation = (targetLanguage: string, translated: string) => {
const { message } = this.props;
if (RecentlyTranslatedBodies.length > 100) {
const element = RecentlyTranslatedBodies.shift();
localStorage.removeItem(`translated-${element.id}`);
}
RecentlyTranslatedBodies.push({ RecentlyTranslatedBodies.push({
id: message.id, id: message.id,
translated,
enabled: true, enabled: true,
fromLang: this.state.detected, fromLang: this.state.detected,
toLang: targetLanguage, toLang: targetLanguage,
}); });
localStorage.setItem(`translated-${message.id}`, translated);
localStorage.setItem(`translated-index`, JSON.stringify(RecentlyTranslatedBodies));
MessageBodyProcessor.updateCacheForMessage(message); MessageBodyProcessor.updateCacheForMessage(message);
}; };
@ -184,16 +199,19 @@ export class TranslateMessageHeader extends React.Component<
this.forceUpdate(); this.forceUpdate();
}; };
_onAlwaysForLanguage = () => { _onAlwaysForLanguage = async () => {
if (!IdentityStore.hasProFeatures()) { if (!IdentityStore.hasProFeatures()) {
FeatureUsageStore.displayUpgradeModal('translation', { try {
headerText: localized('Translate automatically with Mailspring Pro'), await FeatureUsageStore.displayUpgradeModal('translation', {
rechargeText: `${localized( headerText: localized('Translate automatically with Mailspring Pro'),
"Unfortunately, translation services bill per character and we can't offer this feature for free." rechargeText: `${localized(
)} ${localized('Upgrade to Pro today!')}`, "Unfortunately, translation services bill per character and we can't offer this feature for free."
iconUrl: 'mailspring://translation/assets/ic-translation-modal@2x.png', )} ${localized('Upgrade to Pro today!')}`,
}); iconUrl: 'mailspring://translation/assets/ic-translation-modal@2x.png',
return; });
} catch (err) {
return;
}
} }
const prefs = getPrefs(); const prefs = getPrefs();