Merge pull request #5 from culturecreates/enhancement/issue-13

Enhancement/issue 13

src/Candidate.js

@@ -15,11 +15,37 @@ export default class Candidate extends React.Component {
      }
 
      renderDescription() {
-        let description = this.props.candidate.description;
-        if (description !== undefined) {
-          return (<div><div className="candidateField">Description</div><div className="candidateValue">{description}</div></div>);
-        }
-     }
+      const description = this.props.candidate?.description;
+
+      if (description) {
+        return (
+          <div>
+            <div className="candidateField">Description</div>
+            <div className='candidate-description-wrapper'>
+              {description?.values?.length > 0 &&
+              Array.isArray(description?.values)
+                ? description.values.map((value, index) => (
+                    <span key={index} className="candidate-main-title">
+                      <span className="candidate-main-title-str">
+                        {value.str}
+                      </span>
+                      <span className="candidate-main-title-lang">
+                        {value.lang}
+                      </span>
+                    </span>
+                  ))
+                : typeof description === "string" && (
+                    <span className="candidate-main-title-str">
+                      {description}
+                    </span>
+                  )}
+            </div>
+          </div>
+        );
+      }
+
+      return null;
+    }
 
      renderTypes() {
         let types = this.props.candidate.type;
@@ -45,10 +71,29 @@ export default class Candidate extends React.Component {
      }
 
      render() {
-        let candidate = this.props.candidate;
-        return (<ListGroupItem key={candidate.id} header={candidate.name} active={candidate.match}>
+      let candidate = this.props.candidate;
+       const nameValues = candidate?.name?.values;
+       const hasValues = nameValues?.length > 0;
+       const mainTitle = hasValues ? nameValues[0]?.str : candidate?.name;
+       const lang = hasValues ? nameValues[0]?.lang : "";
+        return (<ListGroupItem
+         key={candidate.id}
+         header={
+           <span className="candidate-main-title">
+             <span className="candidate-main-title-str-bold">{mainTitle}</span>
+             {hasValues && (
+               <span className="candidate-main-title-lang-bold">{lang}</span>
+             )}
+           </span>
+         }
+         active={candidate.match}
+       >
+
+                <div className="candidateMultilingualNames">{candidate?.name?.values?.slice(1)?.map(value=>{
+                  return <span className='candidate-main-title'><span className='candidate-main-title-str'>{value?.str}</span><span className='candidate-main-title-lang'>{value?.lang}</span></span>
+                })}</div>
+                <div>   
                 <Badge style={{float: 'right'}}>{this.props.candidate.score}</Badge>
-                <div>
                   <div><div className="candidateField">ID</div><div className="candidateValue">
                 <a href={this.url}>{candidate.id}</a></div></div>
                 {this.renderDescription()}

src/TestBench.js

@@ -19,11 +19,11 @@ import PreviewRenderer from './PreviewRenderer.js';
 import DataExtensionTab from './DataExtensionTab.js';
 import JSONTree from 'react-json-tree';
 import { getSchema } from './JsonValidator.js';
-import { jsonTheme } from './utils.js';
+import { jsonTheme, specVersions } from './utils.js';
 
 export default class TestBench extends React.Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
 
     this.state = {
         reconQuery: '',
@@ -36,6 +36,12 @@ export default class TestBench extends React.Component {
     };
   }
 
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps?.service?.endpoint !== this.props.service.endpoint) {
+        this.formulateReconQuery(this.props.service.manifest.versions)
+    }
+}
+
   onReconQueryChange = (e) => {
     this.setState({
         reconQuery: e.currentTarget.value
@@ -113,11 +119,11 @@ export default class TestBench extends React.Component {
      }
      this.setState({reconResults: 'fetching'});
      let fetcher = this.props.service.postFetcher();
-     fetcher({url:this.props.service.endpoint,queries:JSON.stringify({q0: this.formulateReconQuery()})})
+     fetcher({url:this.props.service.endpoint,queries:JSON.stringify(this.formulateReconQuery(this.props.service.manifest.versions)),manifestVersion:this.props.service.manifest.versions})
         .then(result => result.json())
         .then(result =>
            this.setState({
-              reconResults: result.q0.result,
+              reconResults: result?.results?.[0]?.candidates ?? result?.q0?.result ?? [],
               reconResponseValidationErrors: this.validateServiceResponse('reconciliation-result-batch', result)
         }))
         .catch(e => {
@@ -189,33 +195,58 @@ export default class TestBench extends React.Component {
      }
   }
 
-  formulateReconQuery() {
-     let query = {
-        query: this.state.reconQuery,
-     };
-     if (this.state.reconType === 'custom-type' && this.state.reconCustomType !== undefined) {
-        query.type = this.state.reconCustomType.id;
-     } else if (this.state.reconType !== 'no-type') {
-        query.type = this.state.reconType;
-     }
-     if (this.state.reconProperties.length > 0) {
-        query.properties = this.state.reconProperties
-           .filter(m => m !== undefined && m.property && m.value)
-           .map(m => {return {pid: m.property.id, v: m.value}})
-     }
-     if (!isNaN(parseInt(this.state.reconLimit))) {
-        query.limit = parseInt(this.state.reconLimit);
-     }
-     return query;
-  }
+  formulateReconQuery(manifestVersion) {
+    const isCustomType = this.state.reconType === "custom-type" && this.state.reconCustomType !== undefined;
+    const isNotNoType = this.state.reconType !== "no-type";
+    const hasReconProperties = this.state.reconProperties.length > 0;
+    const reconLimit = parseInt(this.state.reconLimit);
+    const isLimitValid = !isNaN(reconLimit);
+
+    const buildConditions = () => {
+        let conditions = [{ matchType: "name", v: this.state.reconQuery }];
+        if (hasReconProperties) {
+            const properties = this.state.reconProperties
+                .filter(m => m && m.property && m.value)
+                .map(m => ({ matchType: "property", pid: m.property.id, v: m.value }));
+            conditions = conditions.concat(properties);
+        }
+        return conditions;
+    };
+
+    const buildQuery = () => {
+        const query = { query: this.state.reconQuery };
+        if (isCustomType) query.type = this.state.reconCustomType.id;
+        else if (isNotNoType) query.type = this.state.reconType;
+        if (hasReconProperties) {
+            query.properties = this.state.reconProperties
+                .filter(m => m && m.property && m.value)
+                .map(m => ({ pid: m.property.id, v: m.value }));
+        }
+        if (isLimitValid) query.limit = reconLimit;
+        return query;
+    };
+
+    if (manifestVersion?.includes(specVersions["0.3"])) {
+        return {
+            queries: [{
+                ...(isCustomType ? { type: this.state.reconCustomType.id } : isNotNoType ? { type: this.state.reconType } : {}),
+                ...(isLimitValid && { limit: this.state.reconLimit }),
+                conditions: buildConditions()
+              }]
+        };
+    } else {
+        return { q0: buildQuery() };
+    }
+}
 
   formulateQueryUrl() {
      let baseUrl = this.props.service.endpoint;
      if (!baseUrl) {
         return '#';
      }
+
      let params = {
-        queries: JSON.stringify({q0: this.formulateReconQuery()})
+        queries: JSON.stringify( this.formulateReconQuery(this.props.service.manifest.versions))
      };
      let url = new URL(baseUrl);
      Object.keys(params).forEach(key => url.searchParams.append(key, params[key]));
@@ -311,7 +342,7 @@ export default class TestBench extends React.Component {
                 <Col sm={3}>
                     <JSONTree
                             theme={jsonTheme}
-                            data={this.formulateReconQuery()}
+                            data={this.formulateReconQuery(this.props.service.manifest.versions)}
                             getItemString={(type, data, itemType, itemString) => ''}
                             shouldExpandNode={(keyName, data, level) => true}
                             hideRoot={true} />

src/style.css

@@ -86,3 +86,25 @@ div .radio label {
 .candidateValue {
     margin-left: 1.5em;
 }
+
+.candidateMultilingualNames{
+   display: grid;
+   margin-left: 1.5em;
+}
+
+.candidate-main-title{
+   display: flex;
+   gap:8px
+}
+
+.candidate-main-title-lang-bold,.candidate-main-title-str-bold{
+   font-weight: bold;
+}
+
+.candidate-main-title-lang-bold,.candidate-main-title-lang{
+   color:#ababab
+}  
+
+.candidate-description-wrapper{
+   margin-left: 1.5em;
+}

src/utils.js

@@ -1,6 +1,12 @@
 
 import fetchJsonp from 'fetch-jsonp';
 
+export const specVersions={
+"0.1":"0.1",
+"0.2":"0.2",
+"0.3":"0.3",
+"draft":"draft",
+}
 const addParams = (baseUrl, params) => {
    let url = new URL(baseUrl);
    if (params) {
@@ -30,17 +36,45 @@ export const postJsonpParams = ({url,queries}) => {
 }
 
 
-export const postParams = ({url,queries}) => {
-   return fetch(url, {
-   method:"POST",
-   headers: {
-     'Content-Type': 'application/x-www-form-urlencoded'
-   },
-   body: new URLSearchParams({
-     queries
-   })
-});
-}
+export const postParams = ({
+   url,
+   queries,
+   manifestVersion = [specVersions["0.2"]],
+ }) => {
+   let currentManifestVersion = specVersions["0.2"];
+   if(manifestVersion?.includes(specVersions["0.3"])) currentManifestVersion = specVersions["0.3"];
+   switch (currentManifestVersion) {
+
+     case "0.2":
+       return fetch(url, {
+         method: "POST",
+         headers: {
+           "Content-Type": "application/x-www-form-urlencoded",
+         },
+         body: new URLSearchParams({
+           queries,
+         }),
+       });
+     case "0.3":
+       return fetch(url, {
+         method: "POST",
+         headers: {
+           "Content-Type": "application/json",
+         },
+         body:queries,
+       });
+       default:
+         return fetch(url, {
+           method: "POST",
+           headers: {
+             "Content-Type": "application/x-www-form-urlencoded",
+           },
+           body: new URLSearchParams({
+             queries,
+           }),
+         });
+   }
+ };
 
 export const jsonTheme = {
     scheme: 'monokai',