Pass and parse databases parameter, clear statusTimeout on disconnect.

BurkovBA · BurkovBA · commit 364248f73785 · 2019-06-10T09:01:53.000+03:00
diff --git a/README.md b/README.md
@@ -41,7 +41,7 @@ If you want to include it into CSS directly, follow this minimal example:
   </head>
   <body class="level2">
     <script src="node_modules/@rnacentral/rnacentral-sequence-search-embed/dist/rnacentral-sequence-search.js"></script>
-    <rnacentral-sequence-search databases="['mirbase']"/>
+    <rnacentral-sequence-search databases='["mirbase"]'/>
   </body>
 </html>
 ```
@@ -63,7 +63,7 @@ SequenceSearch component accepts a number of parameters. You pass them as html a
 in curly braces:
 
 ```
-<rnacentral-sequence-search databases="['mirbase']" />
+<rnacentral-sequence-search databases='["mirbase"]' />
 ```
 
 #### databases
diff --git a/dist/RNAcentral-sequence-search.js b/dist/RNAcentral-sequence-search.js
diff --git a/dist/RNAcentral-sequence-search.js.map b/dist/RNAcentral-sequence-search.js.map
diff --git a/index.html b/index.html
@@ -34,7 +34,6 @@
     <meta name="msapplication-TileImage" content="//www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/images/logos/EMBL-EBI/favicons/mstile-144x144.png" />
   </head>
   <body class="level2">
-    <div id="rnacentral-styles"></div>
-    <rnacentral-sequence-search />
+    <rnacentral-sequence-search databases='["mirbase"]'/>
   <script type="text/javascript" src="/rnacentral-sequence-search-embed/dist/RNAcentral-sequence-search.js"></script></body>
 </html>
diff --git a/src/actions/actions.js b/src/actions/actions.js
@@ -93,8 +93,6 @@ export function fetchStatus(jobId) {
   }
 }
 
-// TODO: clear timeout when leaving the page !!!
-
 export function fetchResults(jobId) {
   let state = store.getState();
 
diff --git a/src/app.jsx b/src/app.jsx
@@ -17,16 +17,21 @@ import resultsStyles from 'containers/SequenceSearch/components/Results/index.sc
 
 // Prepare data
 export const store = configureStore();
-export const databases = ['mirbase'];
 
 
 class RNAcentralSequenceSearch extends HTMLElement {
   constructor() {
     super();
 
-    const mountPoint = document.createElement('html');
+    // prepare DOM and shadow DOM
     const shadowRoot = this.attachShadow({mode: 'open'});
+    const mountPoint = document.createElement('html');
     shadowRoot.appendChild(mountPoint);
+
+    // parse arguments
+    const databases = JSON.parse(this.attributes.databases.nodeValue);
+
+    // render React
     ReactDOM.render([
       <style key={ebiGlobal} dangerouslySetInnerHTML={{__html: ebiGlobal}}/>,
       <style key={themeLight} dangerouslySetInnerHTML={{__html: themeLight}}/>,
@@ -42,8 +47,20 @@ class RNAcentralSequenceSearch extends HTMLElement {
       ],
       mountPoint
     );
+
+    // retarget React events to work with shadow DOM
     retargetEvents(shadowRoot);
   }
+
+  connectedCallback() {
+  }
+
+  disconnectedCallback() {
+    let state = store.getState();
+    if (state.statusTimeout) {
+      clearTimeout(state.statusTimeout);
+    }
+  }
 }
 
 customElements.define('rnacentral-sequence-search', RNAcentralSequenceSearch);
diff --git a/src/index.html b/src/index.html
@@ -34,7 +34,6 @@
     <meta name="msapplication-TileImage" content="//www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/images/logos/EMBL-EBI/favicons/mstile-144x144.png" />
   </head>
   <body class="level2">
-    <div id="rnacentral-styles"></div>
-    <rnacentral-sequence-search />
+    <rnacentral-sequence-search databases='["mirbase"]'/>
   </body>
 </html>

Original file line number	Diff line number	Diff line change
`@@ -93,8 +93,6 @@ export function fetchStatus(jobId) {`
`93`	`93`	`}`
`94`	`94`	`}`
`95`	`95`
`96`		`-// TODO: clear timeout when leaving the page !!!`
`97`		`-`
`98`	`96`	`export function fetchResults(jobId) {`
`99`	`97`	`let state = store.getState();`
`100`	`98`