From ccd9848210bae9c421ec38291e62eb7093c5cedc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vi=CC=81ctor=20CG?= <victorcg@empathy.co>
Date: Mon, 24 Jun 2024 16:09:56 +0200
Subject: [PATCH] feat(search): build a test search component

---
 packages/_vue3-migration-test/src/App.vue     | 11 ++-
 .../src/components/index.ts                   |  1 +
 .../src/components/test-search.vue            | 59 ++++++++++++
 packages/_vue3-migration-test/src/main.ts     | 93 +++++--------------
 packages/_vue3-migration-test/src/router.ts   |  8 +-
 .../src/x-modules/search/x-module.ts          | 16 ++--
 .../src/x-modules/search/store/emitters.ts    | 20 +++-
 7 files changed, 124 insertions(+), 84 deletions(-)
 create mode 100644 packages/_vue3-migration-test/src/components/test-search.vue

diff --git a/packages/_vue3-migration-test/src/App.vue b/packages/_vue3-migration-test/src/App.vue
index dadc1fe5ac..627b5fdf38 100644
--- a/packages/_vue3-migration-test/src/App.vue
+++ b/packages/_vue3-migration-test/src/App.vue
@@ -12,7 +12,16 @@
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import { provide } from 'vue';
+  import { baseSnippetConfig } from '../../x-components/src/views/base-config';
+
+  /**
+   * TODO: remove when x-instaler is migrated and used in this Playground.
+   * X-instaler's `createApp` fn should provide the snippet config.
+   */
+  provide('snippetConfig', baseSnippetConfig);
+</script>
 
 <style lang="scss" scoped>
   #app {
diff --git a/packages/_vue3-migration-test/src/components/index.ts b/packages/_vue3-migration-test/src/components/index.ts
index 66a0cf6ff6..c906f27899 100644
--- a/packages/_vue3-migration-test/src/components/index.ts
+++ b/packages/_vue3-migration-test/src/components/index.ts
@@ -15,3 +15,4 @@ export { default as TestBaseKeyboardNavigation } from './test-base-keyboard-navi
 export { default as TestBaseEventsModal } from './modals/test-base-events-modal.vue';
 export { default as TestBaseIdModal } from './modals/test-base-id-modal.vue';
 export { default as TestExtraParams } from './extra-params/test-extra-params.vue';
+export { default as TestSearch } from './test-search.vue';
diff --git a/packages/_vue3-migration-test/src/components/test-search.vue b/packages/_vue3-migration-test/src/components/test-search.vue
new file mode 100644
index 0000000000..6d43b4235c
--- /dev/null
+++ b/packages/_vue3-migration-test/src/components/test-search.vue
@@ -0,0 +1,59 @@
+<template>
+  <SnippetConfigExtraParams />
+  <SearchInput />
+  <ClearSearchInput />
+  <SearchButton />
+  <!--  No Results Message  -->
+  <div
+    v-if="_$x.noResults && !_$x.fromNoResultsWithFilters"
+    class="x-p-28 x-flex x-flex-col x-gap-8 x-items-center x-bg-lead-25 x-my-8"
+    data-test="no-results-message"
+  >
+    <p>
+      There are no results for
+      <span class="x-font-bold">{{ _$x.query.search }}</span>
+    </p>
+  </div>
+  <ResultsList>
+    <BaseVariableColumnGrid
+      style="--x-size-min-width-grid-item: 150px"
+      class="x-gap-12"
+      :columns="4"
+    >
+      <template #result="{ item: result }">
+        <BaseResultImage
+          :result="result"
+          class="x-result__picture x-picture-zoom"
+          :loadAnimation="CrossFade"
+        >
+          <template #placeholder>
+            <div style="padding-top: 100%; background-color: lightgray"></div>
+          </template>
+          <template #fallback>
+            <div style="padding-top: 100%; background-color: lightsalmon"></div>
+          </template>
+        </BaseResultImage>
+        <BaseResultLink :result="result">
+          <h1 class="x-text1 x-text1-lg">{{ result.name }}</h1>
+        </BaseResultLink>
+      </template>
+    </BaseVariableColumnGrid>
+  </ResultsList>
+</template>
+
+<script setup lang="ts">
+  import SnippetConfigExtraParams from '../../../x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue';
+  import SearchInput from '../../../x-components/src/x-modules/search-box/components/search-input.vue';
+  import ResultsList from '../../../x-components/src/x-modules/search/components/results-list.vue';
+  import BaseResultImage from '../../../x-components/src/components/result/base-result-image.vue';
+  import BaseResultLink from '../../../x-components/src/components/result/base-result-link.vue';
+  import BaseVariableColumnGrid from '../../../x-components/src/components/base-variable-column-grid.vue';
+  import ClearSearchInput from '../../../x-components/src/x-modules/search-box/components/clear-search-input.vue';
+  import SearchButton from '../../../x-components/src/x-modules/search-box/components/search-button.vue';
+  import CrossFade from '../../../x-components/src/components/animations/cross-fade.vue';
+  import { use$x } from '../../../x-components/src/composables/use-$x';
+  // TODO `$x` name cannot be used while XPlugin defines its own `this.$x` in the mixin
+  const _$x = use$x();
+</script>
+
+<style></style>
diff --git a/packages/_vue3-migration-test/src/main.ts b/packages/_vue3-migration-test/src/main.ts
index 80f0c05f47..9442c41d78 100644
--- a/packages/_vue3-migration-test/src/main.ts
+++ b/packages/_vue3-migration-test/src/main.ts
@@ -1,16 +1,7 @@
-import { QuerySuggestionsRequest, XComponentsAdapter } from '@empathyco/x-types';
 import { Component, configureCompat, createApp } from 'vue';
 import { createStore } from 'vuex';
-import { getRelatedTagsStub } from '../../x-components/src/__stubs__/related-tags-stubs.factory';
-import { getQuerySuggestionsStub } from '../../x-components/src/__stubs__/query-suggestions-stubs.factory';
-import {
-  createResultStub,
-  getBannersStub,
-  getNextQueriesStub,
-  getPromotedsStub,
-  getResultsStub
-} from '../../x-components/src/__stubs__/index';
-import { XInstaller } from '../../x-components/src/x-installer/x-installer/x-installer';
+import { platformAdapter } from '../../x-adapter-platform/src/platform.adapter';
+import { xPlugin } from '../../x-components/src/plugins/x-plugin';
 import App from './App.vue';
 import router from './router';
 import {
@@ -45,69 +36,31 @@ if (VUE_COMPAT_MODE === 2) {
   });
 }
 
-const adapter = {
-  relatedTags: () =>
-    new Promise(resolve => {
-      resolve({ relatedTags: getRelatedTagsStub(10) });
-    }),
-  querySuggestions: (request: QuerySuggestionsRequest) =>
-    new Promise(resolve => {
-      resolve({ suggestions: getQuerySuggestionsStub(request.query, 5) });
-    }),
-  nextQueries: () =>
-    new Promise(resolve => {
-      resolve({
-        nextQueries: [
-          ...getNextQueriesStub(),
-          {
-            facets: [],
-            isCurated: false,
-            modelName: 'NextQuery',
-            query: 'next_query_preview',
-            results: getResultsStub(10),
-            totalResults: 10
-          }
-        ]
-      });
-    }),
-  search: () =>
-    new Promise(resolve => {
-      resolve({
-        results: getResultsStub(10),
-        totalResults: 50,
-        promoteds: getPromotedsStub(),
-        banners: getBannersStub()
-      });
-    }),
-  identifierResults: () =>
-    new Promise(resolve =>
-      resolve({ results: ['123A', '123B', '123C', '123D'].map(id => createResultStub(id)) })
-    )
-} as unknown as XComponentsAdapter;
+const adapter = platformAdapter;
 
 const store = createStore({});
 
-createApp(App as Component)
-  .use(router)
-  .use(store)
-  .mount('#app');
-
 window.initX = {
   instance: 'empathy',
   lang: 'en'
 };
-new XInstaller({
-  adapter,
-  store,
-  __PRIVATE__xModules: {
-    facets: facetsXModule,
-    nextQueries: nextQueriesXModule,
-    scroll: scrollXModule,
-    search: searchXModule,
-    queriesPreview: queriesPreviewXModule,
-    semanticQueries: semanticQueriesXModule,
-    recommendations: recommendationsXModule,
-    identifierResults: identifierResultsXModule,
-    popularSearches: popularSearchesXModule
-  }
-}).init();
+
+createApp(App as Component)
+  .use(router)
+  .use(store)
+  .use(xPlugin, {
+    adapter,
+    store,
+    __PRIVATE__xModules: {
+      facets: facetsXModule,
+      nextQueries: nextQueriesXModule,
+      scroll: scrollXModule,
+      search: searchXModule,
+      queriesPreview: queriesPreviewXModule,
+      semanticQueries: semanticQueriesXModule,
+      recommendations: recommendationsXModule,
+      popularSearches: popularSearchesXModule,
+      identifierResults: identifierResultsXModule
+    }
+  })
+  .mount('#app');
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index da58d80ff3..5f033152cc 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -40,10 +40,16 @@ import {
   TestPopularSearches,
   TestNextQueries,
   TestIdentifierResults,
-  TestExtraParams
+  TestExtraParams,
+  TestSearch
 } from './';
 
 const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: TestSearch
+  },
   {
     path: '/animate-width',
     name: 'AnimateWidth',
diff --git a/packages/_vue3-migration-test/src/x-modules/search/x-module.ts b/packages/_vue3-migration-test/src/x-modules/search/x-module.ts
index 4abe995261..1a5d9909dd 100644
--- a/packages/_vue3-migration-test/src/x-modules/search/x-module.ts
+++ b/packages/_vue3-migration-test/src/x-modules/search/x-module.ts
@@ -1,19 +1,15 @@
-import { getResultsStub } from '../../../../x-components/src/__stubs__/results-stubs.factory';
-import { getBannersStub } from '../../../../x-components/src/__stubs__/banners-stubs.factory';
-import { getPromotedsStub } from '../../../../x-components/src/__stubs__/promoteds-stubs.factory';
 import { PrivateXModuleOptions } from '../../../../x-components/src/plugins';
 import { SearchXModule } from '../../../../x-components/src/x-modules/search';
-import { getPartialResultsStub } from '../../../../x-components/src/__stubs__/partials-results-stubs.factory';
 
 export const searchXModule = {
   storeModule: {
     state: {
-      results: getResultsStub(10),
-      promoteds: getPromotedsStub(),
-      banners: getBannersStub(),
-      status: 'success',
-      spellcheckedQuery: 'spellcheckedQuery',
-      partialResults: getPartialResultsStub()
+      results: [],
+      promoteds: [],
+      banners: [],
+      status: 'initial',
+      spellcheckedQuery: '',
+      partialResults: []
     }
   }
 } as PrivateXModuleOptions<SearchXModule>;
diff --git a/packages/x-components/src/x-modules/search/store/emitters.ts b/packages/x-components/src/x-modules/search/store/emitters.ts
index 3e0fc5fc5d..fae5f5bc18 100644
--- a/packages/x-components/src/x-modules/search/store/emitters.ts
+++ b/packages/x-components/src/x-modules/search/store/emitters.ts
@@ -16,8 +16,24 @@ export const searchEmitters = createStoreEmitters(searchXStoreModule, {
   },
   PageChanged: state => state.page,
   ResultsChanged: state => state.results,
-  SearchRequestChanged: (_, getters) => getters.request,
-  SearchRequestUpdated: (_, getters) => getters.request,
+  SearchRequestChanged: state => {
+    return {
+      query: state.query,
+      sort: state.sort,
+      page: state.page,
+      filters: state.selectedFilters,
+      extraParams: state.params
+    };
+  },
+  SearchRequestUpdated: state => {
+    return {
+      query: state.query,
+      sort: state.sort,
+      page: state.page,
+      filters: state.selectedFilters,
+      extraParams: state.params
+    };
+  },
   SearchResponseChanged: {
     selector: (state, getters) => {
       return {