Merge pull request #464 from danactive/danactive/add-ja

Update Japanese for Host Storage component

README.md

@@ -5,7 +5,7 @@ Your personal **history** storyboarded with photo and video albums. Associate ph
 * Plot thumbnails on a map
 * Includes administration tools for XML generation
 
-[Demonstration site http://history.domaindesign.ca/](http://history.domaindesign.ca/)
+[Demonstration site https://history.domaindesign.ca/](https://history.domaindesign.ca/)
 ## Project Status:
 | Service | Status |
 |---|---|

ui/app/components/Button/tests/index.test.jsx

@@ -4,7 +4,7 @@ import { fireEvent, render } from '@testing-library/react';
 import Button from '../index';
 
 const handleRoute = () => {};
-const href = 'http://mxstbr.com';
+const href = 'https://history.domaindesign.ca';
 const children = <h1>Test</h1>;
 const renderComponent = (props = {}) => {
   const utils = render(

ui/app/components/HostStorage/Remove.jsx

@@ -1,4 +1,5 @@
 import React, { memo, useEffect } from 'react';
+import { FormattedMessage } from 'react-intl';
 
 import { getHostToken, hostCase } from '../../utils/host';
 import { remove as removeFromStorage } from '../../utils/localStorage';
@@ -7,6 +8,7 @@ import Button from '../Button';
 import GenericList from '../GenericList/Loadable';
 import H3 from '../H3';
 import ListItem from '../ListItem';
+import messages from './messages';
 
 function Remove({
   showHeader = true,
@@ -43,7 +45,11 @@ function Remove({
 
   return (
     <section>
-      {showHeader && <H3>Clear tokens from browser storage</H3>}
+      {showHeader && (
+        <H3>
+          <FormattedMessage {...messages.clearHeader} />
+        </H3>
+      )}
       <GenericList
         loading={false}
         error={false}

ui/app/components/HostStorage/index.jsx

@@ -1,8 +1,7 @@
 import { Formik, Field, Form } from 'formik';
 import React, { memo, useState } from 'react';
-import styled from 'styled-components';
-
 import { FormattedMessage } from 'react-intl';
+import styled from 'styled-components';
 
 import { hostCase } from '../../utils/host';
 import { update as updateStorage } from '../../utils/localStorage';
@@ -64,12 +63,16 @@ function HostStorage({ host, storageUpdated }) {
           {errors.token && touched.token && (
             <ErrorMessage aria-label="Token error">{errors.token}</ErrorMessage>
           )}
-          <input
-            type="submit"
-            aria-label="Submit button"
-            disabled={isValidating}
-            value="Store in browser"
-          />
+          <FormattedMessage {...messages.saveButton}>
+            {msg => (
+              <input
+                type="submit"
+                aria-label="Submit button"
+                disabled={isValidating}
+                value={msg}
+              />
+            )}
+          </FormattedMessage>
           {stored && (
             <span role="img" aria-label="success">
               ✅

ui/app/components/HostStorage/messages.js

@@ -3,8 +3,16 @@ import { defineMessages } from 'react-intl';
 export const scope = 'app.components.HostStorage';
 
 export default defineMessages({
+  clearHeader: {
+    id: `${scope}.clearHeader`,
+    defaultMessage: 'Clear tokens from browser storage',
+  },
   instruction: {
     id: `${scope}.instruction`,
-    defaultMessage: '{host} token/path for loading gallery/media',
+    defaultMessage: '{host} token for loading photo gallery',
+  },
+  saveButton: {
+    id: `${scope}.saveButton`,
+    defaultMessage: 'Save in browser',
   },
 });

ui/app/components/HostStorage/tests/__snapshots__/index.test.jsx.snap

@@ -6,7 +6,7 @@ exports[`<HostStorage /> Should render and match the snapshot 1`] = `
   data-testid="form"
 >
   <span>
-     token/path for loading gallery/media
+     token for loading photo gallery
   </span>
   <input
     aria-label="Token input"
@@ -17,7 +17,7 @@ exports[`<HostStorage /> Should render and match the snapshot 1`] = `
   <input
     aria-label="Submit button"
     type="submit"
-    value="Store in browser"
+    value="Save in browser"
   />
 </form>
 `;

ui/app/components/ThumbImg/tests/index.test.jsx

@@ -33,7 +33,7 @@ describe('Component - <ThumbImg />', () => {
   test('should not adopt a srcset attribute', () => {
     const { container } = render(<ThumbImg srcset="test-HD.png 2x" />);
     const received = container.querySelector('img').srcset;
-    const expected = 'null';
+    const expected = '';
     expect(received).toEqual(expected);
   });
 });

ui/app/containers/AlbumViewPage/tests/saga.test.js

@@ -1,5 +1,5 @@
 import { Dropbox } from 'dropbox';
-import 'whatwg-fetch';
+import { fetch } from 'whatwg-fetch';
 
 import { call, put, select } from 'redux-saga/effects';
 
@@ -27,7 +27,7 @@ describe('AlbumViewPage Saga', () => {
         expect.hasAssertions();
         const received = generator.next().value;
         const expected = call(
-          [new Dropbox(), 'filesGetTemporaryLink'],
+          [new Dropbox({ fetch }), 'filesGetTemporaryLink'],
           argsAlbumXmlPath(fixtures),
         );
         // Unit test cannot reproduce global fetch so delete
@@ -103,7 +103,7 @@ describe('AlbumViewPage Saga', () => {
         expect.hasAssertions();
         const received = generator.next().value;
         const expected = call(
-          [new Dropbox(), 'filesGetTemporaryLink'],
+          [new Dropbox({ fetch }), 'filesGetTemporaryLink'],
           argsAlbumXmlPath(fixtures),
         );
         expect(received).toEqual(expected);

ui/app/containers/App/tests/__snapshots__/index.test.jsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<App /> should render and match the snapshot 1`] = `
-<ForwardRef(App__AppWrapper)>
+<App__AppWrapper>
   <Helmet
     defaultTitle="History"
     defer={true}
@@ -53,6 +53,6 @@ exports[`<App /> should render and match the snapshot 1`] = `
     />
   </Switch>
   <Footer />
-  <UNDEFINED />
-</ForwardRef(App__AppWrapper)>
+  <Memo(GlobalStyleComponent) />
+</App__AppWrapper>
 `;

ui/app/translations/de.json

@@ -4,6 +4,9 @@
   "app.components.Footer.license.message": "Dieses Projekt wird unter der MIT-Lizenz veröffentlicht.",
   "app.components.Header.admin": "Eigenschaften",
   "app.components.Header.home": "Zuhause",
+  "app.components.HostStorage.clearHeader": "Token aus dem Browserspeicher löschen",
+  "app.components.HostStorage.instruction": "{host}-Token zum Laden der Fotogalerie",
+  "app.components.HostStorage.saveButton": "Im Browser speichern",
   "app.containers.NotFoundPage.header": "Seite nicht gefunden.",
   "app.containers.AdminLandingPage.header": "Eigenschaften",
   "app.containers.HomePage.galleries.header": "Fotogalerien",

ui/app/translations/en.json

@@ -4,6 +4,9 @@
   "app.components.Footer.license.message": "This project is licensed under the MIT license.",
   "app.components.Header.admin": "Admin",
   "app.components.Header.home": "Home",
+  "app.components.HostStorage.clearHeader": "Clear tokens from browser storage",
+  "app.components.HostStorage.instruction": "{host} token for loading photo gallery",
+  "app.components.HostStorage.saveButton": "Save in browser",
   "app.containers.NotFoundPage.header": "Page not found.",
   "app.containers.AdminLandingPage.header": "Admin",
   "app.containers.HomePage.galleries.header": "Photo galleries",

ui/app/translations/ja.json

@@ -4,6 +4,9 @@
   "app.components.Footer.license.message": "このプロジェクトは、MITライセンスの下でライセンスされています。",
   "app.components.Header.admin": "特徴",
   "app.components.Header.home": "ホーム",
+  "app.components.HostStorage.clearHeader": "あなたのWebブラウザストレージからトークンを削除しましょう",
+  "app.components.HostStorage.instruction": "ギャラリー／メディアを読み込むための{host}トークン",
+  "app.components.HostStorage.saveButton": "ブラウザに保存",
   "app.containers.NotFoundPage.header": "ページが見つかりません",
   "app.containers.AdminLandingPage.header": "特徴",
   "app.containers.HomePage.galleries.header": "写真ギャラリー",

ui/app/utils/localStorage.js

@@ -5,8 +5,15 @@ const logError = (...message) => console.error(...message);
 
 export function get(host) {
   try {
-    const json = JSON.parse(localStorage.getItem(hostKey));
-    return json[host];
+    if (localStorage) {
+      const json = JSON.parse(localStorage.getItem(hostKey));
+
+      if (json) {
+        return json[host];
+      }
+    }
+
+    return null;
   } catch (e) {
     logError(`Failed to get ${host} to localStorage ${hostKey}`, e);
     return null;
@@ -15,9 +22,14 @@ export function get(host) {
 
 export function update(host, value) {
   try {
-    const json = JSON.parse(localStorage.getItem(hostKey));
-    json[host] = value;
-    localStorage.setItem(hostKey, JSON.stringify(json));
+    if (localStorage) {
+      const json = JSON.parse(localStorage.getItem(hostKey));
+      if (json) {
+        json[host] = value;
+        localStorage.setItem(hostKey, JSON.stringify(json));
+        return;
+      }
+    }
   } catch (e) {
     const json = { [host]: value };
     localStorage.setItem(hostKey, JSON.stringify(json));
@@ -27,9 +39,11 @@ export function update(host, value) {
 
 export function remove(host) {
   try {
-    const json = JSON.parse(localStorage.getItem(hostKey));
-    delete json[host];
-    localStorage.setItem(hostKey, JSON.stringify(json));
+    if (localStorage) {
+      const json = JSON.parse(localStorage.getItem(hostKey));
+      delete json[host];
+      localStorage.setItem(hostKey, JSON.stringify(json));
+    }
   } catch (e) {
     logError(`Failed to remove ${host} from localStorage ${hostKey}`, e);
   }

ui/internals/templates/containers/App/tests/__snapshots__/index.test.jsx.snap

@@ -12,6 +12,6 @@ exports[`<App /> should render and match the snapshot 1`] = `
       component={[Function]}
     />
   </Switch>
-  <UNDEFINED />
+  <Memo(GlobalStyleComponent) />
 </div>
 `;