Show error and status in PUP

2025-10-30 23:47:56 +03:00 · 2017-05-17 22:11:33 +05:00 · 2017-05-17 22:11:33 +05:00 · 82a2994dcc
commit 82a2994dcc
parent 94bbb92764
6 changed files with 163 additions and 44 deletions
--- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/App.js
+++ b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/App.js
@ -3,28 +3,152 @@ import Component from 'inferno-component';
 import createElement from 'inferno-create-element';

 import getNotControlledWarning from './NotControlledWarning';
-import getTabPannel from './TabPannel';
+import getTabPanel from './TabPanel';
 import getPacChooser from './PacChooser';
-
 import getFooter from './Footer';

 export default function getApp(theState) {

+  const NotControlledWarning = getNotControlledWarning(theState);
+  const TabPanel = getTabPanel(theState);
+  const PacChooser = getPacChooser(theState);
+  const Footer = getFooter(theState);
+
  return class App extends Component {

+    constructor(props) {
+
+      super(props);
+      this.state = {
+        status: 'Загрузка...',
+        areInputsDisabled: false,
+      };
+
+    }
+
+    componentDidMount() {
+
+      this.showErrors({ message: 'PANIC!' });
+
+    }
+
+    setStatusTo(msg) {
+
+      this.setState(
+        {
+          status: msg,
+        }
+      );
+
+    }
+
+    showErrors(err, ...warns) {
+
+      const warningHtml = warns
+        .map(
+          (w) => w && w.messageHtml || ''
+        )
+        .filter( (m) => m )
+        .map( (m) => '✘ ' + m )
+        .join('<br/>');
+
+      let messageHtml = '';
+      if (err) {
+        let wrapped = err.wrapped;
+        messageHtml = err.message || '';
+
+        while( wrapped ) {
+          const deeperMsg = wrapped && wrapped.message;
+          if (deeperMsg) {
+            messageHtml = messageHtml + ' &gt; ' + deeperMsg;
+          }
+          wrapped = wrapped.wrapped;
+        }
+      }
+      messageHtml = messageHtml.trim();
+      if (warningHtml) {
+        messageHtml = messageHtml ? messageHtml + '<br/>' + warningHtml : warningHtml;
+      }
+      this.setStatusTo(
+        (<span>
+          <span style="color:red">
+            {err ? <span><span class="emoji">🔥</span> Ошибка!</span> : 'Некритичная oшибка.'}
+          </span>
+          <br/>
+          <span style="font-size: 0.9em; color: darkred" dangerouslySetInnerHTML={{__html: messageHtml}}></span>
+          {err && <a href="" onClick={(evt) => {
+
+            this.props.apis.errorHandlers.viewError('pup-ext-err', err);
+            evt.preventDefault();
+
+          }}> [Техн.детали]</a>}
+        </span>)
+      );
+
+    }
+
+    switchInputs(val) {
+
+      this.setState({
+        areInputsDisabled: val === 'off' ? true : false,
+      });
+      /*
+      const inputs = document.querySelectorAll('input');
+      for ( let i = 0; i < inputs.length; i++ ) {
+        const input = inputs[i];
+        if (val === 'off') {
+          input.dataset.previousDisabledValue = input.disabled;
+          input.disabled = true;
+        } else {
+          input.disabled = input.dataset.previousDisabledValue === 'true';
+        }
+      }
+      */
+
+    }
+
+    conduct(
+      beforeStatus, operation, afterStatus,
+      onSuccess = () => {}, onError = () => {}
+    ) {
+
+      this.setStatusTo(beforeStatus);
+      this.switchInputs('off');
+      operation((err, res, ...warns) => {
+
+        warns = warns.filter( (w) => w );
+        if (err || warns.length) {
+          showErrors(err, ...warns);
+        } else {
+          this.setStatusTo(afterStatus);
+        }
+        this.switchInputs('on');
+        if (!err) {
+          onSuccess(res);
+        } else {
+          onError(err);
+        }
+
+      });
+
+    }
+
    render(props) {

-      return createElement('div', {
-        onClick: () => console.log('DDDDDCLICK'),
-        onDick: () => console.log('DICK!'),
-        ondick: () => console.log('dddDICK!'),
-      }, [
-        createElement(getNotControlledWarning(theState), props),
-        createElement(getTabPannel(theState), {
+      props = Object.assign({}, props, {
+        funs: {
+          setStatusTo: this.setStatusTo,
+          conduct: this.conduct,
+        },
+      });
+
+      return createElement('div', null, [
+        createElement(NotControlledWarning, props),
+        createElement(TabPanel, {
          tabs:[
            {
              label: 'PAC-скрипт',
-              content: createElement(getPacChooser(theState), props),
+              content: createElement(PacChooser, props),
            },
            {
              label: 'Исключения',
@ -44,7 +168,7 @@ export default function getApp(theState) {
            }
          ]
        }),
-        createElement(getFooter(theState), props),
+        createElement(Footer, Object.assign({ status: this.state.status }, props)),
      ]);

    }
--- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/Footer.js
+++ b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/Footer.js
@ -6,24 +6,24 @@ export default function getFooter() {

  const scopedCss = css`

-    #statusRow {
+    .statusRow {
      padding: 0 0.3em 1em;
    }
-    #status {
+    .status {
      display: inline-block;
    }
-
    .controlRow {
      margin: 1em 0 1em 0;
    }
+
  `;

  return function (props) {

    return (
      <div class="horPadded">
-        <section id="statusRow">
-          <div id="status" style="will-change: contents">{props.status}</div>
+        <section class={scopedCss.statusRow}>
+          <div clss={scopedCss.status} style="will-change: contents">{props.status}</div>
        </section>

        <footer class={scopedCss.controlRow + ' horFlex nowrap'}>
--- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/InfoLi.js
+++ b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/InfoLi.js
@ -98,12 +98,11 @@ export default function getInfoRow() {

    render(props) {

-      // Object.assign is left-associative, let's make it right.
-      Object.assign(props, Object.assign({
+      props = Object.assign({}, {
        idPrefix: '',
        ifDashify: false,
        htmlAfterLabel: '',
-      }, props));
+      }, props);

      const iddy = props.idPrefix + ( props.ifDashify ? camelToDash(props.conf.key) : props.conf.key );
      return (
--- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/PacChooser.js
+++ b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/PacChooser.js
@ -1,5 +1,6 @@
 import Inferno from 'inferno';
 import Component from 'inferno-component';
+import createElement from 'inferno-create-element';
 import css from 'csjs-inject';

 import getInfoLi from './InfoLi';
@ -103,55 +104,48 @@ export default function getPacChooser(...args) {

    render(props) {

-      const date = this.getDate(props.antiCensorRu);
+      const date = this.getDate(props.apis.antiCensorRu);
      return (<div>Обновлялись: <span class="updateDate" title={date.title}>{ date.text }</span></div>);

    }

  }

-  const updatePac = function updatePac() {
-    conduct(
-      'Обновляем...', (cb) => antiCensorRu.syncWithPacProviderAsync(cb),
-      'Обновлено.'
-    );
-    return false;
-  };
-
  const InfoLi = getInfoLi(...args);

-  function emit(e) {
-
-    const event = new Event('dick');
-    e.target.dispatchEvent(event);
-
-  }
-
  return class PacChooser extends Component {

    render(props) {

-      const checkedIddy = props.antiCensorRu.getCurrentPacProviderKey() || 'none';
+      const updatePac = function updatePac() {
+        props.funs.conduct(
+          'Обновляем...',
+          (cb) => props.apis.antiCensorRu.syncWithPacProviderAsync(cb),
+          'Обновлено.'
+        );
+      };
+
+      const checkedIddy = props.apis.antiCensorRu.getCurrentPacProviderKey() || 'none';
      return (
        <div>
          {props.flags.ifInsideOptionsPage && (<header>PAC-скрипт:</header>)}
          <ul>
            {
-              props.antiCensorRu.getSortedEntriesForProviders().map((provConf) =>
+              props.apis.antiCensorRu.getSortedEntriesForProviders().map((provConf) =>
                (<InfoLi
                  conf={provConf}
                  type="radio"
                  name="pacProvider"
                  checked={checkedIddy === provConf.key}
                >
-                  &nbsp;<a href="" class={scopedCss.updateButton} onClick={(evt) => { evt.preventDefault(); emit(evt) }}>[обновить]</a>
+                  &nbsp;<a href="" class={scopedCss.updateButton} onClick={(evt) => { evt.preventDefault(); updatePac(); }}>[обновить]</a>
                </InfoLi>)
              )
            }
            <InfoLi type="radio" name="pacProvider" conf={{key: 'none', label: 'Отключить'}} checked={checkedIddy === 'none'}/>
          </ul>
          <div id="updateMessage" class="horFlex" style="align-items: center">
-            <LastUpdateDate antiCensorRu={props.antiCensorRu}/>
+            { createElement(LastUpdateDate, props) }
            <div class={scopedCss.fullLineHeight}>
              {
                props.flags.ifMini
--- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/TabPannel.js
+++ b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/TabPannel.js
@ -25,6 +25,9 @@ export default function getTabsPannel({ flags }) {
    .underlined {
      border-bottom: 1px solid var(--cr-options-headline);
    }
+    :root.ifInsideOptionsPage .navLabels {
+      display: none;
+    }

    /* HIDE starts. */

@ -113,7 +116,6 @@ export default function getTabsPannel({ flags }) {
    constructor(props) {

      super(props);
-      console.log('CONSTRUCTOR');
      this.state = {
        chosenTabIndex: 0,
      };
@ -126,7 +128,6 @@ export default function getTabsPannel({ flags }) {
        if (/^#tab(\d+)$/.test(window.location.hash)) {
          const inputIndex = RegExp.$1;
          if (inputIndex < this.props.tabs.length) {
-            console.log('SET STATE');
            this.setState({chosenTabIndex: inputIndex});
          }
        }
@ -137,6 +138,9 @@ export default function getTabsPannel({ flags }) {

      return (<div ref={(dom) => {

+                if (!dom) {
+                  return /* Unmounting. */;
+                }
                const target = dom.querySelector(`.${scopedCss.mainNav} *:target`);
                if (target) {
                  const tabIndex = parseInt(target.id.replace('tab', ''));
--- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/index.js
+++ b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/index.js
@ -26,14 +26,12 @@ chrome.runtime.getBackgroundPage( (backgroundPage) =>

        theState = {
          utils: backgroundPage.utils,
-          antiCensorRu: backgroundPage.apis.antiCensorRu,
-          errorHandlers: apis.errorHandlers,
+          apis: backgroundPage.apis,
          flags: {
            /* Shortcuts to boolean values. */
            ifNotControlled: !apis.errorHandlers.ifControllable,
            ifMini: apis.version.ifMini,
          },
-          status: 'Хорошего настроения Вам!',
        };
      }