From 46c7eaa46bdf1878e3a2033b2dc7cee658ac07bd Mon Sep 17 00:00:00 2001 From: Rok Garbas Date: Mon, 6 Jul 2020 14:27:37 +0200 Subject: [PATCH] Some UX fixes for showing suggestions (#112) * focus on query input when showing page * less visible reloading of suggestions when typing --- src/Page/Options.elm | 10 ++++-- src/Page/Packages.elm | 10 ++++-- src/Search.elm | 83 ++++++++++++++++++++++++++++++------------- 3 files changed, 75 insertions(+), 28 deletions(-) diff --git a/src/Page/Options.elm b/src/Page/Options.elm index 3f4d435..a3359aa 100644 --- a/src/Page/Options.elm +++ b/src/Page/Options.elm @@ -75,8 +75,14 @@ init : -> Maybe Int -> Maybe Model -> ( Model, Cmd Msg ) -init = - Search.init +init channel query show from size model = + let + ( newModel, newCmd ) = + Search.init channel query show from size model + in + ( newModel + , Cmd.map SearchMsg newCmd + ) diff --git a/src/Page/Packages.elm b/src/Page/Packages.elm index df77d90..95182fc 100644 --- a/src/Page/Packages.elm +++ b/src/Page/Packages.elm @@ -110,8 +110,14 @@ init : -> Maybe Int -> Maybe Model -> ( Model, Cmd Msg ) -init = - Search.init +init channel query show from size model = + let + ( newModel, newCmd ) = + Search.init channel query show from size model + in + ( newModel + , Cmd.map SearchMsg newCmd + ) diff --git a/src/Search.elm b/src/Search.elm index d76151a..3e0871c 100644 --- a/src/Search.elm +++ b/src/Search.elm @@ -29,7 +29,6 @@ import Html , form , h1 , h4 - , i , input , li , p @@ -40,6 +39,7 @@ import Html import Html.Attributes exposing ( attribute + , autofocus , class , classList , href @@ -64,10 +64,6 @@ import Task import Url.Builder -type alias Char = - String - - type alias Model a = { channel : String , query : Maybe String @@ -123,14 +119,6 @@ type alias ResultItem a = } -itemHtml : Char -> Html Never -itemHtml char = - div [] - [ i [ class "fa fa-rebel" ] [] - , text (" " ++ char) - ] - - init : Maybe String -> Maybe String @@ -138,7 +126,7 @@ init : -> Maybe Int -> Maybe Int -> Maybe (Model a) - -> ( Model a, Cmd msg ) + -> ( Model a, Cmd (Msg a) ) init channel query show from size model = let defaultChannel = @@ -162,7 +150,19 @@ init channel query show from size model = |> Debouncer.Messages.settleWhenQuietFor (Just <| Debouncer.Messages.fromSeconds 0.6) |> Debouncer.Messages.toDebouncer , query = query - , querySuggest = RemoteData.NotAsked + , querySuggest = + query + |> Maybe.map + (\selected -> + if String.endsWith "." selected then + model + |> Maybe.map .querySuggest + |> Maybe.withDefault RemoteData.NotAsked + + else + RemoteData.NotAsked + ) + |> Maybe.withDefault RemoteData.NotAsked , querySelectedSuggestion = Nothing , result = model @@ -172,7 +172,7 @@ init channel query show from size model = , from = Maybe.withDefault defaultFrom from , size = Maybe.withDefault defaultSize size } - , Cmd.none + , Browser.Dom.focus "search-query-input" |> Task.attempt (\_ -> NoOp) ) @@ -189,7 +189,7 @@ type Msg a | QueryInput String | QueryInputSuggestionsSubmit | QueryInputSuggestionsResponse (RemoteData.WebData (SearchResult a)) - | QuerySubmit + | QueryInputSubmit | QueryResponse (RemoteData.WebData (SearchResult a)) | ShowDetails String | SuggestionsMoveDown @@ -262,7 +262,22 @@ update path navKey result_type options decodeResultItemSource msg model = (QueryInputDebounce (Debouncer.Messages.provideInput QueryInputSuggestionsSubmit)) { model | query = Just query - , querySuggest = RemoteData.NotAsked + , querySuggest = + case model.querySuggest of + RemoteData.Success result -> + let + suggestions = + getSuggestions (Just "XXXX") model.querySuggest + |> List.map .text + in + if List.member (Just query) suggestions then + RemoteData.NotAsked + + else + model.querySuggest + + _ -> + RemoteData.NotAsked , querySelectedSuggestion = Nothing } |> Tuple.mapSecond @@ -304,7 +319,17 @@ update path navKey result_type options decodeResultItemSource msg model = ) in ( { model - | querySuggest = RemoteData.Loading + | querySuggest = + model.query + |> Maybe.map + (\selected -> + if String.endsWith "." selected then + model.querySuggest + + else + RemoteData.NotAsked + ) + |> Maybe.withDefault RemoteData.NotAsked , querySelectedSuggestion = Nothing } , makeRequest @@ -324,7 +349,7 @@ update path navKey result_type options decodeResultItemSource msg model = , Cmd.none ) - QuerySubmit -> + QueryInputSubmit -> ( { model | result = RemoteData.Loading } , createUrl path @@ -395,16 +420,24 @@ update path navKey result_type options decodeResultItemSource msg model = Nothing -> ( model - , Cmd.none + , Task.attempt (\_ -> QueryInputSubmit) (Task.succeed ()) ) SuggestionsClickSelect selected -> ( { model - | querySuggest = RemoteData.NotAsked + | querySuggest = + if String.endsWith "." selected then + model.querySuggest + + else + RemoteData.NotAsked , querySelectedSuggestion = Nothing , query = Just selected } - , Task.attempt (\_ -> QueryInputSuggestionsSubmit) (Task.succeed ()) + , Cmd.batch + [ Task.attempt (\_ -> QueryInputSuggestionsSubmit) (Task.succeed ()) + , Task.attempt (\_ -> QueryInputSubmit) (Task.succeed ()) + ] ) SuggestionsClose -> @@ -658,7 +691,7 @@ view path title model viewSuccess outMsg = , ( "with-suggestions-loading", RemoteData.isLoading model.querySuggest ) ] ] - [ form [ onSubmit (outMsg QuerySubmit) ] + [ form [ onSubmit (outMsg QueryInputSubmit) ] [ p [] [ strong [] @@ -691,6 +724,8 @@ view path title model viewSuccess outMsg = ] [ input ([ type_ "text" + , id "search-query-input" + , autofocus True , onInput (\x -> outMsg (QueryInput x)) , value <| Maybe.withDefault "" model.query ]