add query suggestion to android-view showcase

aallam · aallam · commit 888abd80975c · 2022-03-29T14:49:36.000+02:00
diff --git a/guides/src/main/kotlin/com/algolia/instantsearch/guides/querysuggestion/QuerySuggestionViewModel.kt b/guides/src/main/kotlin/com/algolia/instantsearch/guides/querysuggestion/QuerySuggestionViewModel.kt
@@ -23,7 +23,7 @@ class QuerySuggestionViewModel : ViewModel() {
     val multiSearcher = MultiSearcher(client)
     val productSearcher = multiSearcher.addHitsSearcher(
         indexName = IndexName("STAGING_native_ecom_demo_products")
-    ) // TODO: native guide + guide screenshots
+    ) 
     val suggestionSearcher = multiSearcher.addHitsSearcher(
         indexName = IndexName("STAGING_native_ecom_demo_products_query_suggestions")
     )
diff --git a/showcase/android-view/build.gradle b/showcase/android-view/build.gradle
@@ -42,13 +42,13 @@ dependencies {
     implementation "com.algolia:instantsearch-android-paging3:$instantsearch"
     implementation "com.algolia:instantsearch-android-loading:$instantsearch"
 
-    implementation "androidx.lifecycle:lifecycle-extensions:$lifecycle_version"
-    implementation "androidx.lifecycle:lifecycle-common-java8:$lifecycle_version"
-    implementation "androidx.constraintlayout:constraintlayout:2.1.2"
-    implementation "com.google.android.material:material:1.4.0"
+    implementation "androidx.fragment:fragment-ktx:1.4.1"
+    implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:2.4.1"
+    implementation "androidx.lifecycle:lifecycle-livedata-ktx:2.4.1"
+    implementation "androidx.constraintlayout:constraintlayout:2.1.3"
+    implementation "com.google.android.material:material:1.5.0"
     implementation "com.github.bumptech.glide:glide:4.10.0"
     implementation "io.apptik.widget:multislider:1.3"
-    implementation 'androidx.appcompat:appcompat:1.4.0'
     debugImplementation "com.squareup.leakcanary:leakcanary-android:$canary"
 
     testImplementation 'junit:junit:4.12'
diff --git a/showcase/android-view/src/main/AndroidManifest.xml b/showcase/android-view/src/main/AndroidManifest.xml
@@ -120,6 +120,10 @@
             android:name="com.algolia.instantsearch.showcase.filter.facet.dynamic.DynamicFacetShowcase"
             android:parentActivityName=".directory.DirectoryShowcase" />
 
+        <activity
+            android:name="com.algolia.instantsearch.showcase.suggestion.QuerySuggestionShowcase"
+            android:parentActivityName=".directory.DirectoryShowcase" />
+
         <activity
             android:name=".customdata.TemplateActivity"
             android:exported="true">
diff --git a/showcase/android-view/src/main/kotlin/com/algolia/instantsearch/showcase/Demo.kt b/showcase/android-view/src/main/kotlin/com/algolia/instantsearch/showcase/Demo.kt
@@ -26,12 +26,12 @@ import androidx.core.text.bold
 import androidx.core.text.buildSpannedString
 import androidx.recyclerview.widget.LinearLayoutManager
 import androidx.recyclerview.widget.RecyclerView
-import com.algolia.instantsearch.core.connection.ConnectionHandler
-import com.algolia.instantsearch.core.searcher.Searcher
 import com.algolia.instantsearch.android.filter.clear.FilterClearViewImpl
 import com.algolia.instantsearch.android.list.autoScrollToStart
 import com.algolia.instantsearch.android.searchbox.SearchBoxViewAppCompat
 import com.algolia.instantsearch.android.stats.StatsTextViewSpanned
+import com.algolia.instantsearch.core.connection.ConnectionHandler
+import com.algolia.instantsearch.core.searcher.Searcher
 import com.algolia.instantsearch.filter.clear.FilterClearConnector
 import com.algolia.instantsearch.filter.clear.connectView
 import com.algolia.instantsearch.filter.state.FilterGroupID
@@ -179,6 +179,16 @@ fun AppCompatActivity.configureRecyclerView(
     }
 }
 
+fun RecyclerView.configure(
+    recyclerViewAdapter: RecyclerView.Adapter<*>
+) {
+    visibility = View.VISIBLE
+    layoutManager = LinearLayoutManager(context)
+    adapter = recyclerViewAdapter
+    itemAnimator = null
+    autoScrollToStart(recyclerViewAdapter)
+}
+
 val Intent.indexName: IndexName get() = IndexName(extras!!.getString(KeyIndexName)!!)
 
 fun <R> AppCompatActivity.configureSearchBox(
@@ -244,11 +254,21 @@ public fun Set<FilterGroup<*>>.highlight(
             val string = converter(setOf(group))
 
             it.append(string)
-            it.setSpan(ForegroundColorSpan(color), begin, it.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+            it.setSpan(
+                ForegroundColorSpan(color),
+                begin,
+                it.length,
+                Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
+            )
             if (index < size - 1) {
                 begin = it.length
                 it.append(" AND ")
-                it.setSpan(StyleSpan(Typeface.BOLD), begin, it.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+                it.setSpan(
+                    StyleSpan(Typeface.BOLD),
+                    begin,
+                    it.length,
+                    Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
+                )
             }
             begin = it.length
         }
diff --git a/showcase/android-view/src/main/kotlin/com/algolia/instantsearch/showcase/directory/Directory.kt b/showcase/android-view/src/main/kotlin/com/algolia/instantsearch/showcase/directory/Directory.kt
@@ -28,6 +28,7 @@ import com.algolia.instantsearch.showcase.search.SearchAutoCompleteTextView
 import com.algolia.instantsearch.showcase.search.SearchOnSubmitShowcase
 import com.algolia.instantsearch.showcase.sortby.SortByShowcase
 import com.algolia.instantsearch.showcase.stats.StatsShowcase
+import com.algolia.instantsearch.showcase.suggestion.QuerySuggestionShowcase
 import com.algolia.search.model.ObjectID
 
 val showcases = mapOf(
@@ -60,4 +61,5 @@ val showcases = mapOf(
     ObjectID("query_rule_custom_data") to QueryRuleCustomDataShowcase::class,
     ObjectID("filter_rating") to RatingShowcase::class,
     ObjectID("dynamic_facets") to DynamicFacetShowcase::class,
+    ObjectID("query_suggestions") to QuerySuggestionShowcase::class,
 )
diff --git a/showcase/android-view/src/main/kotlin/com/algolia/instantsearch/showcase/list/suggestion/Suggestion.kt b/showcase/android-view/src/main/kotlin/com/algolia/instantsearch/showcase/list/suggestion/Suggestion.kt
@@ -0,0 +1,20 @@
+package com.algolia.instantsearch.showcase.list.suggestion
+
+import com.algolia.instantsearch.core.highlighting.HighlightedString
+import com.algolia.instantsearch.highlighting.Highlightable
+import com.algolia.search.model.Attribute
+import com.algolia.search.model.ObjectID
+import com.algolia.search.model.indexing.Indexable
+import kotlinx.serialization.Serializable
+import kotlinx.serialization.json.JsonObject
+
+@Serializable
+data class Suggestion(
+    val query: String,
+    override val objectID: ObjectID,
+    override val _highlightResult: JsonObject?
+) : Indexable, Highlightable {
+
+    val highlightedQuery: HighlightedString?
+        get() = getHighlight(Attribute("query"))
+}
diff --git a/showcase/android-view/src/main/kotlin/com/algolia/instantsearch/showcase/suggestion/QuerySuggestionShowcase.kt b/showcase/android-view/src/main/kotlin/com/algolia/instantsearch/showcase/suggestion/QuerySuggestionShowcase.kt
@@ -0,0 +1,62 @@
+package com.algolia.instantsearch.showcase.suggestion
+
+import android.os.Bundle
+import androidx.activity.viewModels
+import androidx.appcompat.app.AppCompatActivity
+import androidx.appcompat.widget.SearchView
+import androidx.fragment.app.commit
+import androidx.fragment.app.replace
+import com.algolia.instantsearch.android.searchbox.SearchBoxViewAppCompat
+import com.algolia.instantsearch.core.connection.ConnectionHandler
+import com.algolia.instantsearch.searchbox.connectView
+import com.algolia.instantsearch.showcase.R
+import com.algolia.instantsearch.showcase.suggestion.product.ProductFragment
+import com.algolia.instantsearch.showcase.suggestion.suggestion.SuggestionFragment
+
+class QuerySuggestionShowcase : AppCompatActivity() {
+
+    private val viewModel by viewModels<QuerySuggestionViewModel>()
+    private val connection = ConnectionHandler()
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContentView(R.layout.showcase_query_suggestion)
+
+        // Setup search box
+        val searchView = findViewById<SearchView>(R.id.searchView)
+        val searchBoxView = SearchBoxViewAppCompat(searchView)
+        connection += viewModel.searchBox.connectView(searchBoxView)
+
+        // Switch fragments on search box focus
+        searchView.setOnQueryTextFocusChangeListener { _, hasFocus ->
+            if (hasFocus) showSuggestions() else showProducts()
+        }
+
+        // Observe suggestions
+        viewModel.suggestions.observe(this) { searchBoxView.setText(it.query, true) }
+
+        // Initially show products view
+        showProducts()
+    }
+
+    /** display suggestions fragment */
+    private fun showSuggestions() {
+        supportFragmentManager.commit {
+            replace<SuggestionFragment>(R.id.container)
+            setReorderingAllowed(true)
+        }
+    }
+
+    /** display products fragment */
+    private fun showProducts() {
+        supportFragmentManager.commit {
+            replace<ProductFragment>(R.id.container)
+            setReorderingAllowed(true)
+        }
+    }
+
+    override fun onDestroy() {
+        super.onDestroy()
+        connection.clear()
+    }
+}
diff --git a/showcase/android-view/src/main/kotlin/com/algolia/instantsearch/showcase/suggestion/QuerySuggestionViewModel.kt b/showcase/android-view/src/main/kotlin/com/algolia/instantsearch/showcase/suggestion/QuerySuggestionViewModel.kt
@@ -0,0 +1,40 @@
+package com.algolia.instantsearch.showcase.suggestion
+
+import androidx.lifecycle.MutableLiveData
+import androidx.lifecycle.ViewModel
+import com.algolia.instantsearch.core.connection.ConnectionHandler
+import com.algolia.instantsearch.searchbox.SearchBoxConnector
+import com.algolia.instantsearch.searcher.hits.addHitsSearcher
+import com.algolia.instantsearch.searcher.multi.MultiSearcher
+import com.algolia.instantsearch.showcase.list.suggestion.Suggestion
+import com.algolia.search.client.ClientSearch
+import com.algolia.search.model.APIKey
+import com.algolia.search.model.ApplicationID
+import com.algolia.search.model.IndexName
+import io.ktor.client.features.logging.*
+
+class QuerySuggestionViewModel : ViewModel() {
+
+    private val client = ClientSearch(
+        applicationID = ApplicationID("latency"),
+        apiKey = APIKey("927c3fe76d4b52c5a2912973f35a3077"),
+        logLevel = LogLevel.ALL
+    )
+    val multiSearcher = MultiSearcher(client)
+    val productSearcher = multiSearcher.addHitsSearcher(
+        indexName = IndexName("STAGING_native_ecom_demo_products")
+    )
+    val suggestionSearcher = multiSearcher.addHitsSearcher(
+        indexName = IndexName("STAGING_native_ecom_demo_products_query_suggestions")
+    )
+    val searchBox = SearchBoxConnector(multiSearcher)
+    private val connection = ConnectionHandler(searchBox)
+
+    val suggestions = MutableLiveData<Suggestion>()
+
+    override fun onCleared() {
+        multiSearcher.cancel()
+        connection.clear()
+        client.close()
+    }
+}
diff --git a/showcase/android-view/src/main/kotlin/com/algolia/instantsearch/showcase/suggestion/product/Product.kt b/showcase/android-view/src/main/kotlin/com/algolia/instantsearch/showcase/suggestion/product/Product.kt
@@ -0,0 +1,30 @@
+package com.algolia.instantsearch.showcase.suggestion.product
+
+import com.algolia.instantsearch.core.highlighting.HighlightedString
+import com.algolia.instantsearch.highlighting.Highlightable
+import com.algolia.search.model.Attribute
+import com.algolia.search.model.ObjectID
+import com.algolia.search.model.indexing.Indexable
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+import kotlinx.serialization.json.JsonObject
+
+@Serializable
+data class Product(
+    val name: String,
+    @SerialName("image_urls") val images: List<String>,
+    val price: Price,
+    val description: String,
+    override val objectID: ObjectID,
+    override val _highlightResult: JsonObject?
+) : Indexable, Highlightable {
+
+    val highlightedName: HighlightedString?
+        get() = getHighlight(Attribute("name"))
+}
+
+@Serializable
+data class Price(
+    val currency: String,
+    val value: String,
+)
diff --git a/showcase/android-view/src/main/kotlin/com/algolia/instantsearch/showcase/suggestion/product/ProductAdapter.kt b/showcase/android-view/src/main/kotlin/com/algolia/instantsearch/showcase/suggestion/product/ProductAdapter.kt
@@ -0,0 +1,45 @@
+package com.algolia.instantsearch.showcase.suggestion.product
+
+import android.view.View
+import android.view.ViewGroup
+import android.widget.TextView
+import androidx.recyclerview.widget.DiffUtil
+import androidx.recyclerview.widget.ListAdapter
+import androidx.recyclerview.widget.RecyclerView
+import com.algolia.instantsearch.android.highlighting.toSpannedString
+import com.algolia.instantsearch.android.inflate
+import com.algolia.instantsearch.core.hits.HitsView
+import com.algolia.instantsearch.showcase.R
+import com.algolia.instantsearch.showcase.suggestion.product.ProductAdapter.ProductViewHolder
+import com.bumptech.glide.Glide
+
+class ProductAdapter : ListAdapter<Product, ProductViewHolder>(ProductDiffUtil), HitsView<Product> {
+
+    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) =
+        ProductViewHolder(parent.inflate(R.layout.list_item_large))
+
+    override fun onBindViewHolder(holder: ProductViewHolder, position: Int) =
+        holder.bind(getItem(position))
+
+    override fun setHits(hits: List<Product>) = submitList(hits)
+
+    class ProductViewHolder(private val view: View) : RecyclerView.ViewHolder(view) {
+
+        fun bind(item: Product) {
+            view.findViewById<TextView>(R.id.itemTitle).text =
+                item.highlightedName?.toSpannedString() ?: item.name
+            view.findViewById<TextView>(R.id.itemSubtitle).text = item.price.value
+            Glide
+                .with(view.context)
+                .load(item.images.first())
+                .into(view.findViewById(R.id.itemImage))
+        }
+    }
+
+    private object ProductDiffUtil : DiffUtil.ItemCallback<Product>() {
+        override fun areItemsTheSame(oldItem: Product, newItem: Product) =
+            oldItem.objectID == newItem.objectID
+
+        override fun areContentsTheSame(oldItem: Product, newItem: Product) = oldItem == newItem
+    }
+}
diff --git a/showcase/android-view/src/main/kotlin/com/algolia/instantsearch/showcase/suggestion/product/ProductFragment.kt b/showcase/android-view/src/main/kotlin/com/algolia/instantsearch/showcase/suggestion/product/ProductFragment.kt
@@ -0,0 +1,38 @@
+package com.algolia.instantsearch.showcase.suggestion.product
+
+import android.os.Bundle
+import android.view.View
+import androidx.fragment.app.Fragment
+import androidx.fragment.app.activityViewModels
+import androidx.recyclerview.widget.RecyclerView
+import com.algolia.instantsearch.core.connection.ConnectionHandler
+import com.algolia.instantsearch.core.hits.connectHitsView
+import com.algolia.instantsearch.showcase.R
+import com.algolia.instantsearch.showcase.configure
+import com.algolia.instantsearch.showcase.suggestion.QuerySuggestionViewModel
+import com.algolia.search.helper.deserialize
+
+class ProductFragment : Fragment(R.layout.list_items) {
+
+    private val viewModel: QuerySuggestionViewModel by activityViewModels()
+    private val connection = ConnectionHandler()
+
+    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+        super.onViewCreated(view, savedInstanceState)
+
+        // Configure products view
+        val productAdapter = ProductAdapter()
+        view.findViewById<RecyclerView>(R.id.items).configure(productAdapter)
+        connection += viewModel.productSearcher.connectHitsView(productAdapter) {
+            it.hits.deserialize(Product.serializer())
+        }
+
+        // Run initial search
+        viewModel.multiSearcher.searchAsync()
+    }
+
+    override fun onDestroyView() {
+        super.onDestroyView()
+        connection.clear()
+    }
+}
diff --git a/showcase/android-view/src/main/kotlin/com/algolia/instantsearch/showcase/suggestion/suggestion/SuggestionAdapter.kt b/showcase/android-view/src/main/kotlin/com/algolia/instantsearch/showcase/suggestion/suggestion/SuggestionAdapter.kt
@@ -0,0 +1,46 @@
+package com.algolia.instantsearch.showcase.suggestion.suggestion
+
+import android.view.View
+import android.view.ViewGroup
+import android.widget.TextView
+import androidx.recyclerview.widget.DiffUtil
+import androidx.recyclerview.widget.ListAdapter
+import androidx.recyclerview.widget.RecyclerView
+import com.algolia.instantsearch.android.highlighting.toSpannedString
+import com.algolia.instantsearch.android.inflate
+import com.algolia.instantsearch.core.hits.HitsView
+import com.algolia.instantsearch.showcase.R
+import com.algolia.instantsearch.showcase.list.suggestion.Suggestion
+import com.algolia.instantsearch.showcase.suggestion.suggestion.SuggestionAdapter.SuggestionViewHolder
+
+class SuggestionAdapter(private val onSuggestionClick: ((Suggestion) -> Unit)) :
+    ListAdapter<Suggestion, SuggestionViewHolder>(SuggestionAdapter),
+    HitsView<Suggestion> {
+
+    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) =
+        SuggestionViewHolder(parent.inflate(R.layout.list_item_suggestion))
+
+    override fun onBindViewHolder(holder: SuggestionViewHolder, position: Int) {
+        val item = getItem(position)
+        holder.bind(item, onSuggestionClick)
+    }
+
+    override fun setHits(hits: List<Suggestion>) = submitList(hits)
+
+    class SuggestionViewHolder(private val view: View) : RecyclerView.ViewHolder(view) {
+
+        fun bind(item: Suggestion, onClick: ((Suggestion) -> Unit)) {
+            view.setOnClickListener { onClick(item) }
+            view.findViewById<TextView>(R.id.itemName).text =
+                item.highlightedQuery?.toSpannedString() ?: item.query
+        }
+    }
+
+    companion object : DiffUtil.ItemCallback<Suggestion>() {
+        override fun areItemsTheSame(oldItem: Suggestion, newItem: Suggestion) =
+            oldItem.objectID == newItem.objectID
+
+        override fun areContentsTheSame(oldItem: Suggestion, newItem: Suggestion): Boolean =
+            oldItem == newItem
+    }
+}
diff --git a/showcase/android-view/src/main/kotlin/com/algolia/instantsearch/showcase/suggestion/suggestion/SuggestionFragment.kt b/showcase/android-view/src/main/kotlin/com/algolia/instantsearch/showcase/suggestion/suggestion/SuggestionFragment.kt
diff --git a/showcase/android-view/src/main/res/drawable/ic_arrow_up_right.xml b/showcase/android-view/src/main/res/drawable/ic_arrow_up_right.xml
diff --git a/showcase/android-view/src/main/res/layout/list_item_suggestion.xml b/showcase/android-view/src/main/res/layout/list_item_suggestion.xml
diff --git a/showcase/android-view/src/main/res/layout/list_items.xml b/showcase/android-view/src/main/res/layout/list_items.xml
diff --git a/showcase/android-view/src/main/res/layout/showcase_query_suggestion.xml b/showcase/android-view/src/main/res/layout/showcase_query_suggestion.xml

Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ class QuerySuggestionViewModel : ViewModel() {`
`23`	`23`	`val multiSearcher = MultiSearcher(client)`
`24`	`24`	`val productSearcher = multiSearcher.addHitsSearcher(`
`25`	`25`	`indexName = IndexName("STAGING_native_ecom_demo_products")`
`26`		`- ) // TODO: native guide + guide screenshots`
	`26`	`+ )`
`27`	`27`	`val suggestionSearcher = multiSearcher.addHitsSearcher(`
`28`	`28`	`indexName = IndexName("STAGING_native_ecom_demo_products_query_suggestions")`
`29`	`29`	`)`