Fix IDN URL display (#16)

* Extract URL display into new component URLField

* Adjust CSS

* Remove unused import

.gitignore

@@ -20,6 +20,9 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+# cache
+/proxy-cache
+
 # secret key we never want to share
 /secrets
 /test-certs

src/SiteDetailsPage.css

@@ -15,6 +15,10 @@
   font-family: 'Arvo', sans-serif;
 }
 
+.SiteDetailsPage .URLField {
+  font-size: 120%;
+}
+
 .SiteDetailsPage {
   margin-bottom: 3rem;
 }

src/SiteDetailsPage.js

@@ -2,9 +2,9 @@ import React, { Component } from 'react';
 import LocationLabel from './LocationLabel';
 import ScoreField from './ScoreField';
 import { TypeField, StateField } from './LocationLabel';
+import URLField from './URLField';
 import './SiteDetailsPage.css';
 import axios from 'axios';
-import punycode from 'punycode';
 
 
 class SiteDetailsPage extends Component {
@@ -116,7 +116,7 @@ class SiteDetailsPage extends Component {
                          state={this.state.site.meta.state} />
           </h1>
 
-          <p><SiteIcon site={this.state.site} /> <a href={ this.state.url } rel='noopener noreferrer' target='_blank'>{ punycode.toUnicode(this.state.url) }</a></p>
+          <p><SiteIcon site={this.state.site} /> <URLField url={ this.state.url } showScheme={true} showPath={true} /></p>
 
           <hr />
 

src/SitesSearch.css

@@ -25,7 +25,7 @@ a.SitesSearch:hover {
   color: #666;
 }
 
-.URLField {
+.SiteSearch .URLField {
   display: block;
   font-size: 90%;
   color: #999;

src/SitesSearch.js

@@ -6,9 +6,9 @@ import React, { Component } from 'react';
 import { Link } from "react-router-dom";
 import LocationLabel from './LocationLabel';
 import ScoreField from './ScoreField';
+import URLField from './URLField';
 import './SitesSearch.css';
 import history from './history';
-import punycode from 'punycode';
 
 
 class SitesSearch extends Component {
@@ -41,7 +41,7 @@ class SitesSearch extends Component {
             <div className='SitesSearch row'>
               <div className='col-9 col-sm-10 col-md-10'>
                 <LocationLabel level={element.meta.level} type={element.meta.type} district={element.meta.district} city={element.meta.city} state={element.meta.state} truncate={true} />
-                <URLField inputURL={element.input_url} canonicalURLs={element.resulting_urls} />
+                <URLField url={element.input_url} link={false} />
               </div>
               <div className='col-3 col-sm-2 col-md-2 d-flex'>
                 <ScoreField score={element.score} maxScore={13} />
@@ -195,20 +195,5 @@ class SearchFieldPlaceholder extends Component {
   }
 }
 
-class URLField extends Component {
-  displayURL(url) {
-    var match = url.match(/:\/\/(www[0-9]?\.)?(.[^/:]+)/i);
-    if (match != null && match.length > 2 && typeof match[2] === 'string' && match[2].length > 0) {
-      return match[2];
-    }
-    return null;
-  }
-
-  render() {
-    var labelURL = this.displayURL(punycode.toUnicode(this.props.inputURL));
-    return <span className='URLField text-truncate'>{ labelURL }</span>;
-  }
-}
-
 
 export default SitesSearch;

src/URLField.js

@@ -0,0 +1,63 @@
+/**
+ * The URLField is used to display a site URL.
+ * 
+ * IDN domains (punycode notation) are converted to Unicode for displaying.
+ * 
+ * Props configuration:
+ * 
+ * - link boolean: If true, the URL is actually linked with the URL target (default = true).
+ * - showScheme: If true, the schema of the URL will be visible. (default = false)
+ * - showPath: If true, the Path part is displayed. Otherwise only the domain will be shown. (default = false)
+ */
+
+import React, { Component } from 'react';
+import punycode from 'punycode';
+
+
+class URLField extends Component {
+  parseURL(url) {
+    let parts = url.split("://", 2);
+    let scheme = parts[0];
+    let rest = parts[1];
+    
+    parts = rest.split("/");
+    let domain = parts[0];
+    let path = null;
+
+    if (parts.length > 1) {
+      path = "/" + parts[1];
+    }
+    
+    if (parts.length > 3) {
+      path = parts[3]
+    }
+    return {
+      scheme: scheme,
+      domain: domain,
+      path: path,
+    };
+  }
+
+  render() {
+    let parsed = this.parseURL(this.props.url);
+
+    let labelURL = '';
+
+    if (this.props.showScheme === true) {
+      labelURL += parsed.scheme + "://";
+    }
+
+    labelURL += punycode.toUnicode(parsed.domain);
+
+    if (this.props.schowPath) {
+      labelURL += parsed.path;
+    }
+
+    if (this.props.link !== null && this.props.link !== false) {
+      return <span className='URLField text-truncate'><a href={this.props.url} target="_blank" rel="noopener noreferrer">{ labelURL }</a></span>;
+    }
+    return <span className='URLField text-truncate'>{ labelURL }</span>;
+  }
+}
+
+export default URLField;