Merge pull request #125 from italia/url-param

Editor will import publiccodes by their remote url
italia · Jun 8, 2020 · 176884d · 176884d
2 parents 8322b02 + f5c196f
commit 176884d
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 28 deletions.
diff --git a/src/app/components/editor.js b/src/app/components/editor.js
@@ -68,6 +68,7 @@ class Index extends Component {
       lastGen: null,
       yamlLoaded: false
     };
+    this.onLoadingRemote = this.props.onLoadingRemote.bind(this);
   }
 
   initBootstrap() {
@@ -82,6 +83,20 @@ class Index extends Component {
     await this.initData();
     this.switchLang("it");
     this.switchCountry("it");
+
+    // checks whether url query parameter
+    // is present in url, if so it will
+    // passed as prop to Sidebar component
+    // which will be rerendered validating
+    // its value.
+    const search = window.location.search;
+    const params = new URLSearchParams(search);
+    const url = params.get('url');
+    if (url) {
+      this.setState({
+        remoteYml: url
+      });
+    }
   }
 
   async initData(country = null) {
@@ -282,9 +297,9 @@ class Index extends Component {
   removeEmpty(obj) {
     // looking forward to replace with bind()
     const that = this;
-    Object.keys(obj).forEach(function(key) {
+    Object.keys(obj).forEach(function (key) {
       (Object.keys(obj[key]).length === 0 && obj[key].constructor === Object) && delete obj[key] ||
-      (obj[key] && typeof obj[key] === 'object') && that.removeEmpty(obj[key])
+        (obj[key] && typeof obj[key] === 'object') && that.removeEmpty(obj[key])
     });
     return obj;
   }
@@ -309,7 +324,7 @@ class Index extends Component {
     let { yaml, yamlLoaded } = this.state;
     let type = "success";
     let msg = "Success";
-    
+
     //was syncErrors
     if (form[APP_FORM].submitErrors) {
       type = "error";
@@ -391,12 +406,14 @@ class Index extends Component {
 
   renderSidebar() {
     //c with state
-    let { yaml, loading, values, allFields } = this.state;
+    let { yaml, loading, values, allFields, remoteYml } = this.state;
     let props = {
       yaml,
       loading,
       values,
       allFields,
+      remoteYml,
+      onLoadingRemote: this.onLoadingRemote,
       onLoad: this.parseYml.bind(this),
       onReset: this.reset.bind(this)
     };
@@ -419,7 +436,7 @@ class Index extends Component {
 
   removeLang(lng) {
     if (!confirm(`Are you sure you want to remove '${lng}'?`)) {
-        return;
+      return;
     }
 
     //has state

diff --git a/src/app/components/sidebar.js b/src/app/components/sidebar.js
@@ -11,7 +11,7 @@ import img_download from "../../asset/img/download.svg";
 import img_dots from "../../asset/img/dots.svg";
 import img_xx from "../../asset/img/xx.svg";
 
-import { getRemoteYml } from "../utils/calls";
+import { passRemoteURLToValidator } from "../utils/calls";
 import { getLabel } from "../contents/data";
 
 function mapStateToProps(state) {
@@ -24,6 +24,7 @@ const mapDispatchToProps = dispatch => {
   };
 };
 
+
 @connect(
   mapStateToProps,
   mapDispatchToProps
@@ -37,6 +38,23 @@ class sidebar extends Component {
     };
   }
 
+  componentWillReceiveProps(prevProps) {
+    const { remoteYml } = prevProps;
+    const funFake = ({
+      preventDefault: () => { }
+    })
+
+    if (remoteYml !== this.props.remoteYml) {
+      console.log("remoteYml:", remoteYml);
+      this.setState({
+        dialog: true,
+        remoteYml: remoteYml
+      }, () => {
+        this.loadRemoteYaml(funFake);
+      });
+    }
+  }
+
   showDialog(dialog) {
     this.setState({ dialog });
   }
@@ -65,11 +83,23 @@ class sidebar extends Component {
 
     let yaml = null;
     try {
-      yaml = await getRemoteYml(remoteYml);
+      this.setState({ loading: true });
+      this.props.onLoadingRemote(true);
+
+      // piping url to validator which will returns a fresh
+      // and validated copy
+      yaml = await passRemoteURLToValidator(remoteYml);
+
       onLoad(yaml);
+
+      this.setState({ loading: false });
+      this.props.onLoadingRemote(false);
     } catch (error) {
+
+      this.setState({ loading: false });
+      this.props.onLoadingRemote(false);
       console.error(error);
-      alert("error parsing remote yaml");
+      this.props.notify({ type: 1, msg: "error parsing remote yaml" });
     }
   }
 
@@ -80,7 +110,6 @@ class sidebar extends Component {
       this.props.notify({ type: 1, msg: "File not found" });
       return;
     }
-    // let ext = files[0].name.split(".")[1];
     let ext = files[0].name.split(/[. ]+/).pop();
     if (ext != "yml" && ext != "yaml") {
       this.props.notify({ type: 1, msg: "File type not supported" });
@@ -92,7 +121,7 @@ class sidebar extends Component {
 
     onReset();
 
-    reader.onload = function() {
+    reader.onload = function () {
       let yaml = reader.result;
       onLoad(yaml);
       document.getElementById("load_yaml").value = "";
@@ -103,9 +132,9 @@ class sidebar extends Component {
 
   download(data) {
     //has dom
-	if (!data || data.length == 0){
-		return;
-	}
+    if (!data || data.length == 0) {
+      return;
+    }
     const blob = new Blob([data], {
       type: "text/yaml;charset=utf-8;"
     });
@@ -117,7 +146,7 @@ class sidebar extends Component {
     tempLink.setAttribute("download", "publiccode.yml");
     document.body.appendChild(tempLink);
     tempLink.click();
-    setTimeout(function() {
+    setTimeout(function () {
       document.body.removeChild(tempLink);
       window.URL.revokeObjectURL(blobURL);
     }, 1000);
@@ -199,7 +228,7 @@ class sidebar extends Component {
                   </button>
                 </div>
               </div>
-              <div className="d-none">
+              <div>
                 <div>Paste remote yaml url</div>
                 <div>
                   <form
@@ -213,7 +242,7 @@ class sidebar extends Component {
                       required={true}
                       onChange={e => this.handleChange(e)}
                     />
-                    <button type="submit" className="btn btn-primary btn-block disabled" disabled>
+                    <button type="submit" className="btn btn-primary btn-block">
                       <img src={img_upload} alt="upload" />Load
                     </button>
                   </form>

diff --git a/src/app/contents/constants.js b/src/app/contents/constants.js
@@ -1,9 +1,10 @@
-let {REPOSITORY, ELASTIC_URL, VALIDATOR_URL} = process.env;
+let {REPOSITORY, ELASTIC_URL, VALIDATOR_URL, VALIDATOR_REMOTE_URL} = process.env;
 
 export const privacyPolicyUrl = `https://developers.italia.it/it/privacy-policy/`;
 export const repositoryUrl = `https://docs.italia.it/italia/developers-italia/publiccodeyml/it/master/`;
 export const versionsUrl = `https://api.github.com/repos/${REPOSITORY}/contents/version`;
-export const sampleUrl = `https://raw.githubusercontent.com/italia/publiccode.yml/master/docs/it/example/publiccode.minimal.yml`;
+export const sampleUrl = `https://raw.githubusercontent.com/italia/pc-web-validator/master/tests/valid.minimal.yml`;
 export const elasticUrl = ELASTIC_URL || '';
 export const validatorUrl = VALIDATOR_URL || '';
+export const validatorRemoteUrl = VALIDATOR_REMOTE_URL || '';
 export const APP_FORM = "appForm";
diff --git a/src/app/utils/calls.js b/src/app/utils/calls.js
@@ -1,4 +1,4 @@
-import { validatorUrl } from "../contents/constants";
+import { validatorUrl, validatorRemoteUrl } from "../contents/constants";
 
 export const getReleases = versionsUrl => {
   return fetch(versionsUrl)
@@ -7,12 +7,29 @@ export const getReleases = versionsUrl => {
     .then(data => data.map(d => d.name));
 };
 
-export const getRemoteYml = url => {
-  //return fetch(url).then(res => res.blob());
-  // return fetch(url).then(res => res.text());
-  return fetch(url)
-    .then(res => res.json())
-    .then(data => atob(data.content));
+export const passRemoteURLToValidator = yamlURL => {
+  const paramsString = "url=" + yamlURL;
+  // let searchParams = new URLSearchParams(paramsString);
+
+  const myHeaders = new Headers({
+    'Accept': 'application/x-yaml',
+    'Content-Type': 'application/x-yaml'
+  });
+  const url = validatorRemoteUrl;
+
+  const myInit = {
+    method: 'POST',
+    headers: myHeaders,
+    mode: 'cors',
+    cache: 'default',
+    // body: searchParams // params are sent in query sting url see below in fetch
+  };
+
+  if (url == '')
+    return Promise.reject(new Error('no validator url specified'));
+
+  return fetch(url + '?' + paramsString, myInit)
+    .then(res => res.text());
 };
 
 export const postDataForValidation = data => {
@@ -29,8 +46,8 @@ export const postDataForValidation = data => {
     cache: 'default',
     body: JSON.stringify(data)
   };
-  
-  if(url=='')
+
+  if (url == '')
     return Promise.reject(new Error('no validator url specified'));
 
   return fetch(url, myInit);

diff --git a/webpack.config.js b/webpack.config.js
@@ -31,7 +31,8 @@ module.exports = env => {
         "process.env": {
           REPOSITORY: JSON.stringify(process.env.REPOSITORY),
           ELASTIC_URL: JSON.stringify(process.env.ELASTIC_URL),
-          VALIDATOR_URL: JSON.stringify(process.env.VALIDATOR_URL)
+          VALIDATOR_URL: JSON.stringify(process.env.VALIDATOR_URL),
+          VALIDATOR_REMOTE_URL: JSON.stringify(process.env.VALIDATOR_REMOTE_URL)
         }
       }),
       new HtmlWebpackPlugin({