add l10n in missing areas

src/components/SavedItemPane.jsx

@@ -1,10 +1,9 @@
 import { h, Component } from 'preact';
 import { log } from '../utils';
 import { trackEvent } from '../analytics';
-import { itemService } from '../itemService';
-import { alertsService } from '../notifications';
-import { deferred } from '../deferred';
 import { ItemTile } from './ItemTile';
+import { Trans, NumberFormat, t } from '@lingui/macro';
+import { I18n } from '@lingui/react';
 
 export default class SavedItemPane extends Component {
 	constructor(props) {
@@ -113,7 +112,9 @@ export default class SavedItemPane extends Component {
 			} catch (exception) {
 				log(exception);
 				alert(
-					'Oops! Selected file is corrupted. Please select a file that was generated by clicking the "Export" button.'
+					i18n._(
+						t`'Oops! Selected file is corrupted. Please select a file that was generated by clicking the "Export" button.`
+					)
 				);
 			}
 		});
@@ -154,69 +155,92 @@ export default class SavedItemPane extends Component {
 		{ filteredItems = this.state.items, items = [] }
 	) {
 		return (
-			<div
-				id="js-saved-items-pane"
-				class={`saved-items-pane ${isOpen ? 'is-open' : ''}`}
-				onKeyDown={this.keyDownHandler.bind(this)}
-				aria-hidden={isOpen}
-			>
-				<button
-					onClick={this.onCloseIntent.bind(this)}
-					class="btn  saved-items-pane__close-btn"
-					id="js-saved-items-pane-close-btn"
-					aria-label="Close saved creations pane"
-				>
-					X
-				</button>
-				<div class="flex flex-v-center" style="justify-content: space-between;">
-					<h3>My Library ({filteredItems.length})</h3>
-
-					<div>
+			<I18n>
+				{({ i18n }) => (
+					<div
+						id="js-saved-items-pane"
+						class={`saved-items-pane ${isOpen ? 'is-open' : ''}`}
+						onKeyDown={this.keyDownHandler.bind(this)}
+						aria-hidden={isOpen}
+					>
 						<button
-							onClick={exportBtnClickHandler}
-							class="btn--dark hint--bottom-left hint--rounded hint--medium"
-							aria-label="Export all your creations into a single importable file."
+							onClick={this.onCloseIntent.bind(this)}
+							class="btn  saved-items-pane__close-btn"
+							id="js-saved-items-pane-close-btn"
+							aria-label={i18n._(t`Close saved creations pane`)}
 						>
-							Export
+							X
 						</button>
-						<button
-							onClick={this.importBtnClickHandler.bind(this)}
-							class="btn--dark hint--bottom-left hint--rounded hint--medium"
-							aria-label="Import your creations. Only the file that you export through the 'Export' button can be imported."
+						<div
+							class="flex flex-v-center"
+							style="justify-content: space-between;"
 						>
-							Import
-						</button>
-					</div>
-				</div>
-				<input
-					autocomplete="off"
-					type="search"
-					id="searchInput"
-					class="search-input"
-					onInput={this.searchInputHandler.bind(this)}
-					placeholder="Search your creations here..."
-				/>
+							<h3>
+								<Trans>My Library ({filteredItems.length})</Trans>
+							</h3>
 
-				<div id="js-saved-items-wrap" class="saved-items-pane__container">
-					{!filteredItems.length && items.length ? (
-						<div class="mt-1">No match found.</div>
-					) : null}
-					{filteredItems.map(item => (
-						<ItemTile
-							item={item}
-							onClick={this.itemClickHandler.bind(this, item)}
-							onForkBtnClick={this.itemForkBtnClickHandler.bind(this, item)}
-							onRemoveBtnClick={this.itemRemoveBtnClickHandler.bind(this, item)}
-						/>
-					))}
-					{!items.length ? (
-						<div class="tac">
-							<h2 class="opacity--30">Nothing saved here.</h2>
-							<img style="max-width: 80%; opacity:0.4" src="assets/empty.svg" />
+							<div>
+								<button
+									onClick={exportBtnClickHandler}
+									class="btn--dark hint--bottom-left hint--rounded hint--medium"
+									aria-label={i18n._(
+										t`Export all your creations into a single importable file.`
+									)}
+								>
+									<Trans>Export</Trans>
+								</button>
+								<button
+									onClick={this.importBtnClickHandler.bind(this)}
+									class="btn--dark hint--bottom-left hint--rounded hint--medium"
+									aria-label={i18n._(
+										t`Import your creations. Only the file that you export through the 'Export' button can be imported.`
+									)}
+								>
+									<Trans>Import</Trans>
+								</button>
+							</div>
 						</div>
-					) : null}
-				</div>
-			</div>
+						<input
+							autocomplete="off"
+							type="search"
+							id="searchInput"
+							class="search-input"
+							onInput={this.searchInputHandler.bind(this)}
+							placeholder={i18n._(t`Search your creations here...`)}
+						/>
+
+						<div id="js-saved-items-wrap" class="saved-items-pane__container">
+							{!filteredItems.length && items.length ? (
+								<div class="mt-1">
+									<Trans>No match found.</Trans>
+								</div>
+							) : null}
+							{filteredItems.map(item => (
+								<ItemTile
+									item={item}
+									onClick={this.itemClickHandler.bind(this, item)}
+									onForkBtnClick={this.itemForkBtnClickHandler.bind(this, item)}
+									onRemoveBtnClick={this.itemRemoveBtnClickHandler.bind(
+										this,
+										item
+									)}
+								/>
+							))}
+							{!items.length ? (
+								<div class="tac">
+									<h2 class="opacity--30">
+										<Trans>Nothing saved here.</Trans>
+									</h2>
+									<img
+										style="max-width: 80%; opacity:0.4"
+										src="assets/empty.svg"
+									/>
+								</div>
+							) : null}
+						</div>
+					</div>
+				)}
+			</I18n>
 		);
 	}
 }