Lag en hyggelig URL til alle matvarene

Co-authored-by: Magnar Sveen <magnar.sveen@mattilsynet.no>

src/matvaretabellen/pages.clj

@@ -51,7 +51,8 @@
      [:div.search-input-wrap
       (SearchInput {:label "Søk i Matvaretabellen"
                     :button {:text "Søk"}
-                    :input {:name "my-search"}})]])))
+                    :input {:name "foods-search"}
+                    :autocomplete-id "foods-results"})]])))
 
 (defn render-page [context page]
   (let [db (:foods/db context)]

src/matvaretabellen/ui/main.cljs

@@ -1,7 +1,8 @@
 (ns ^:figwheel-hooks matvaretabellen.ui.main
   (:require [clojure.string :as str]
             [matvaretabellen.search :as search]
-            [matvaretabellen.ui.foods-search :as foods-search]))
+            [matvaretabellen.ui.foods-search :as foods-search]
+            [matvaretabellen.urls :as urls]))
 
 (defonce search-engine (atom {:index-status :pending
                               :foods-status :pending}))
@@ -33,7 +34,7 @@
                   (js/console.error e)
                   (swap! search-engine assoc :foods-status :error))))))
 
-(defn handle-autocomplete-input-event [e element]
+(defn handle-autocomplete-input-event [e element locale]
   (let [q (.-value (.-target e))]
     (if (< (.-length q) 3)
       (set! (.-innerHTML element) "")
@@ -43,7 +44,7 @@
               ["<ol class='mvt-ac-results'>"
                (for [result (take 10 (foods-search/search @search-engine q))]
                  ["<li class='mvt-ac-result'>"
-                  ["<a href=''>" (:name result) "</a>"]
+                  ["<a href='" (urls/get-url locale (:name result)) "'>" (:name result) "</a>"]
                   "</li>"])
                "</ol>"]))))))
 
@@ -81,10 +82,10 @@
   (when-let [selected (.querySelector (.-target e) ".mvt-ac-selected a")]
     (set! js/window.location (.-href selected))))
 
-(defn initialize-foods-autocomplete [dom-element]
+(defn initialize-foods-autocomplete [dom-element locale]
   (let [element (js/document.createElement "div")]
     (.appendChild dom-element element)
-    (.addEventListener dom-element "input" #(handle-autocomplete-input-event % element))
+    (.addEventListener dom-element "input" #(handle-autocomplete-input-event % element locale))
     (.addEventListener dom-element "keyup" #(handle-autocomplete-key-event % element))
     (.addEventListener (.closest dom-element "form") "submit" #(handle-autocomplete-submit-event %))))
 
@@ -93,7 +94,9 @@
 
 (defn boot []
   (main)
-  (initialize-foods-autocomplete (js/document.querySelector ".mvt-autocomplete")))
+  (initialize-foods-autocomplete
+   (js/document.querySelector ".mvt-autocomplete")
+   (keyword js/document.documentElement.lang)))
 
 (defonce ^:export kicking-out-the-jams (boot))
 

src/matvaretabellen/urls.cljc

@@ -0,0 +1,26 @@
+(ns matvaretabellen.urls
+  (:require [clojure.string :as str])
+  #?(:clj (:import (java.text Normalizer))))
+
+(defn remove-diacritics [s]
+  (-> #?(:clj (Normalizer/normalize s java.text.Normalizer$Form/NFD)
+         :cljs (.normalize s "NFD"))
+      (str/replace #"[\u0300-\u036F]" "")
+      (str/replace #"æ" "ae")
+      (str/replace #"ø" "o")))
+
+(defn slugify [s]
+  (-> (str/lower-case s)
+      remove-diacritics
+      (str/replace #"\W+" "-")))
+
+(defn get-url [locale food-name]
+  (str (when-not (= :nb locale)
+         (str "/" (name locale)))
+       "/" (slugify food-name) "/"))
+
+(comment
+
+  (slugify "Müsli og grøt fra ørten 5gr D12 vitamin kål")
+
+  )

ui/src/mt_designsystem/components/search_input.cljc

@@ -1,15 +1,19 @@
 (ns mt-designsystem.components.search-input)
 
-(defn SearchInput [{:keys [label button input results]}]
+(defn SearchInput [{:keys [label button input results autocomplete-id]}]
   [:form.form-layout
    [:label.form-label {:for (:name input)} label]
    [:div.mvt-autocomplete
     [:div.search-wrap
      [:input.form-field.input-search.hasButton
-      {:id (:name input)
-       :name (:name input)
-       :type "search"
-       :autocomplete "off"}]
+      (cond-> {:id (:name input)
+               :name (:name input)
+               :type "search"}
+        autocomplete-id
+        (assoc :aria-autocomplete "list"
+               :autocomplete "off"
+               :aria-controls autocomplete-id
+               :aria-haspopup "menu"))]
      [:button.button.button--flat.form-field.button-search-primary.icon--search-before-beige
       {:type "submit"} (:text button)]]
     (when (seq results)