Merge pull request #50 from trompamusic/feat/postprocess-results

optionally post-process results before displaying them

README.md

@@ -225,6 +225,16 @@ class Example extends Component {
 }
 ```
 
+## Local development
+
+To start the example demo, run
+
+```bash
+yarn start:example
+```
+
+And visit http://localhost:5050 in a browser
+
 ## License
 
 Apache-2.0 ©

example/App.js

@@ -41,6 +41,51 @@ class CustomType {
   `;
 }
 
+class PostprocessCustomType {
+  static name = 'MusicComposition';
+
+  static filters = [];
+
+  static preprocessQuery = query => {
+    return `(?i).*${query}.*`;
+  }
+
+  static searchAllQuery = gql`
+    query($query: String!) {
+      allResults: ItemList(identifier:"e91489d7-a776-40dd-8abf-0c934922bd99") {
+        identifier
+        name
+        itemListElement(filter:{name_regexp:$query}) {
+          identifier
+          name
+        }
+      }
+    }
+  `;
+
+  static searchQuery = gql`
+    query($filter: _ThingInterfaceFilter) {
+      results: ItemList(identifier:"e91489d7-a776-40dd-8abf-0c934922bd99") {
+        identifier
+        name
+        itemListElement(filter: $filter, first: 50) {
+          identifier
+          name
+        }
+      }
+    }
+  `;
+
+  static processSearchResult = result => {
+    // Find the itemListElements of this ItemList, instead of a list of ItemLists
+    if (Array.isArray(result) && result[0]) {
+      return result[0].itemListElement;
+    }
+
+    return [];
+  }
+}
+
 const BlockQuote = ({ children }) => {
   return (
     <div style={{ backgroundColor: '#fff', borderLeft: `6px solid rgb(63 81 181)`, padding: 16, marginBottom: 8 }}>
@@ -126,6 +171,10 @@ const ex6Config = new SearchConfig({
   searchTypes: [CustomType, searchTypes.MusicComposition],
 });
 
+const ex7Config = new SearchConfig({
+  searchTypes: [PostprocessCustomType],
+});
+
 const App = () => {
   const [production, setProduction] = useState(false);
 
@@ -191,6 +240,10 @@ const App = () => {
             return <div onClick={() => onClick(item)}>MusicComposition: {item.title}</div>;
           }}
         />
+        <BlockQuote>
+          As a developer I want to be able to post-process search results.
+        </BlockQuote>
+        <MultiModalComponentSelect config={ex7Config} production={production} />
       </Paper>
       <Paper style={{ padding: 16, backgroundColor: '#f1f1f1', marginBottom: 64 }} color="red" variant="outlined">
         <Typography variant="h6" gutterBottom>Use cases:</Typography>

src/search/SearchConfig.js

@@ -70,22 +70,34 @@ class SearchConfig {
     const { data: { allResults } } = await client.query({
       query    : searchType.searchAllQuery,
       variables: {
-        query,
+        query: searchType.preprocessQuery ? searchType.preprocessQuery(query) : query,
       },
     });
 
+    let processedAllResults = allResults;
+
+    if (typeof searchType.processSearchResult === 'function') {
+      processedAllResults = searchType.processSearchResult(allResults);
+    }
+
     const { data: { results } } = await client.query({
       query    : searchType.searchQuery,
       variables: {
-        filter: generateFilter(query, allResults, filtersState, this.filter),
+        filter: generateFilter(query, processedAllResults, filtersState, this.filter),
       },
     });
 
+    let processedResults = results;
+
+    if (typeof searchType.processSearchResult === 'function') {
+      processedResults = searchType.processSearchResult(results);
+    }
+
     return {
-      typename: searchType.name,
-      total   : results.length,
-      allResults,
-      results,
+      typename  : searchType.name,
+      total     : processedResults.length,
+      allResults: processedAllResults,
+      results   : processedResults,
     };
   }