Add Host Storage component and interactive from Home Page

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

@@ -2,7 +2,7 @@
 
 exports[`<Footer /> should render and match the snapshot 1`] = `
 <footer
-  className="Wrapper-wcfdfo-0 dPvBog"
+  className="Wrapper-sc-1vkup9x-0 gVYxNQ"
 >
   <section>
     <span>
@@ -11,10 +11,10 @@ exports[`<Footer /> should render and match the snapshot 1`] = `
   </section>
   <section>
     <div
-      className="Wrapper-xnjoq9-0 dNmQIR"
+      className="Wrapper-yfxp35-0 crqZXP"
     >
       <select
-        className="Select-sc-1sm01tk-0 wIjFa"
+        className="Select-sc-1oowrq7-0 cyZXPE"
         onChange={[Function]}
         value="en"
       >
@@ -28,6 +28,11 @@ exports[`<Footer /> should render and match the snapshot 1`] = `
         >
           de
         </option>
+        <option
+          value="ja"
+        >
+          ja
+        </option>
       </select>
     </div>
   </section>
@@ -36,10 +41,10 @@ exports[`<Footer /> should render and match the snapshot 1`] = `
 
       Made with love by 
       <a
-        className="A-br8h0y-0 dwVNvo"
-        href="https://twitter.com/mxstbr"
+        className="A-sc-157y2lo-0 fRhCyO"
+        href="https://twitter.com/danactive"
       >
-        Max Stoiber
+        Dan BROOKS
       </a>
       .
 

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

@@ -2,33 +2,23 @@
 
 exports[`<Header /> should render a div 1`] = `
 <div>
-  <a
-    class="A-br8h0y-0 A-p44m4v-0 cYguYL"
-    href="https://www.reactboilerplate.com/"
-  >
-    <img
-      alt="react-boilerplate - Logo"
-      class="Img-sc-9pa8on-0 eepIiv"
-      src="IMAGE_MOCK"
-    />
-  </a>
   <div
-    class="NavBar___default-sc-3b48xb-0 VAzAd"
+    class="NavBar___default-sc-12wxsw5-0 dklQqU"
   >
     <a
-      class="HeaderLink___default-sc-1mtyaiv-0 ljfKqy"
+      class="HeaderLink___default-tt8z9q-0 cgWetd"
       href="/"
     >
       <span>
         Home
       </span>
     </a>
     <a
-      class="HeaderLink___default-sc-1mtyaiv-0 ljfKqy"
-      href="/features"
+      class="HeaderLink___default-tt8z9q-0 cgWetd"
+      href="/admin"
     >
       <span>
-        Features
+        Admin
       </span>
     </a>
   </div>

ui/app/components/HostStorage/Loadable.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import loadable from '../../utils/loadable';
+import LoadingIndicator from '../LoadingIndicator';
+
+export default loadable(() => import('./index'), {
+  fallback: <LoadingIndicator />,
+});

ui/app/components/HostStorage/index.jsx

@@ -0,0 +1,83 @@
+import { Formik, Field, Form } from 'formik';
+import React, { memo, useState } from 'react';
+import styled from 'styled-components';
+
+import { FormattedMessage } from 'react-intl';
+
+import { hostCase } from '../../utils/strings';
+import messages from './messages';
+
+const ErrorMessage = styled.span`
+  color: red;
+`;
+
+function isUrl(value) {
+  const pattern = /((http|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?)|((http|https):\/\/(localhost)+([:0-9]{2,5})?)/g;
+  return new RegExp(pattern).test(value);
+}
+
+function isToken(value) {
+  const pattern = /^[0-9a-z_]{10,}$/gi;
+  return new RegExp(pattern).test(value);
+}
+
+function HostStorage({ host, dispatchEventOnStore }) {
+  const [stored, setStored] = useState(false);
+  const hostName = hostCase(host);
+
+  function handleTokenValidation(value) {
+    const isValid = isUrl(value) || isToken(value);
+
+    if (isValid) {
+      return null;
+    }
+
+    setStored(false);
+    return 'Invalid token (min 10 char) or URL';
+  }
+
+  function handleSubmit({ token }) {
+    localStorage.setItem(`host-${host}`, token);
+    setStored(true);
+    if (dispatchEventOnStore) {
+      dispatchEventOnStore(host, token);
+    }
+  }
+
+  return (
+    <Formik initialValues={{ token: '' }} onSubmit={handleSubmit}>
+      {({ errors, touched, isValidating }) => (
+        <Form data-testid="form">
+          <FormattedMessage
+            {...messages.instruction}
+            values={{
+              host: hostName,
+            }}
+          />
+          <Field
+            type="text"
+            name="token"
+            aria-label="Token input"
+            validate={handleTokenValidation}
+          />
+          {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"
+          />
+          {stored && (
+            <span role="img" aria-label="success">
+              ✅
+            </span>
+          )}
+        </Form>
+      )}
+    </Formik>
+  );
+}
+
+export default memo(HostStorage);

ui/app/components/HostStorage/messages.js

@@ -0,0 +1,10 @@
+import { defineMessages } from 'react-intl';
+
+export const scope = 'app.components.HostStorage';
+
+export default defineMessages({
+  instruction: {
+    id: `${scope}.instruction`,
+    defaultMessage: '{host} token/path for loading gallery/media',
+  },
+});

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

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<HostStorage /> Should render and match the snapshot 1`] = `
+<form
+  action="#"
+  data-testid="form"
+>
+  <span>
+     token/path for loading gallery/media
+  </span>
+  <input
+    aria-label="Token input"
+    name="token"
+    type="text"
+    value=""
+  />
+  <input
+    aria-label="Submit button"
+    type="submit"
+    value="Store in browser"
+  />
+</form>
+`;

ui/app/components/HostStorage/tests/index.stories.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import HostStorage from '../Loadable';
+
+export default {
+  title: 'HostStorage',
+  component: HostStorage,
+};
+
+export const Dropbox = () => <HostStorage host="dropbox" />;
+export const Local = () => <HostStorage host="local" />;

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { fireEvent, render, act } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+
+import HostStorage from '../index';
+import { apiPort } from '../../../../../config.json';
+import { DEFAULT_LOCALE } from '../../../locales';
+
+describe('<HostStorage />', () => {
+  test('Expect to not log errors in console', () => {
+    const spy = jest.spyOn(global.console, 'error');
+    render(
+      <IntlProvider locale={DEFAULT_LOCALE}>
+        <HostStorage />
+      </IntlProvider>,
+    );
+    expect(spy).not.toHaveBeenCalled();
+  });
+
+  test('Should render and match the snapshot', () => {
+    const {
+      container: { firstChild },
+    } = render(
+      <IntlProvider locale={DEFAULT_LOCALE}>
+        <HostStorage />
+      </IntlProvider>,
+    );
+    expect(firstChild).toMatchSnapshot();
+  });
+
+  test('Form validation should prevent blank', async () => {
+    const { getByLabelText, getByTestId } = render(
+      <HostStorage host="local" />,
+    );
+
+    await act(async () => {
+      fireEvent.change(getByLabelText('Token input'), {
+        target: { value: '' },
+      });
+    });
+
+    await act(async () => {
+      fireEvent.submit(getByTestId('form'));
+    });
+
+    expect(getByLabelText('Token error').innerHTML).toBe(
+      'Invalid token (min 10 char) or URL',
+    );
+  });
+
+  test('Should allow a localhost URL', async () => {
+    const { getByLabelText, getByTestId } = render(
+      <HostStorage host="local" />,
+    );
+
+    await act(async () => {
+      fireEvent.change(getByLabelText('Token input'), {
+        target: { value: `http://localhost:${apiPort}` },
+      });
+    });
+
+    await act(async () => {
+      fireEvent.submit(getByTestId('form'));
+    });
+
+    expect(getByLabelText('success').innerHTML).toBe('✅');
+  });
+});

ui/app/components/Img/index.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 function Img({ alt, className, src }) {
+  if (!alt) console.error('Missing ALT attribute on IMG'); // eslint-disable-line no-console
   return <img className={className} src={src} alt={alt} />;
 }