Fix part11

part11/ElmHub.elm

@@ -34,9 +34,9 @@ type alias Model =
 
 
 type alias SearchOptions =
-    { sort : String
-    , ascending : Bool
-    , searchInDescription : Bool
+    { minStars : Int
+    , minStarsError : Maybe String
+    , searchIn : String
     , userFilter : String
     }
 
@@ -55,9 +55,9 @@ initialModel =
     , results = []
     , errorMessage = Nothing
     , options =
-        { sort = "stars"
-        , ascending = False
-        , searchInDescription = True
+        { minStars = 0
+        , minStarsError = Nothing
+        , searchIn = "name"
         , userFilter = ""
         }
     }
@@ -73,6 +73,16 @@ subscriptions _ =
     githubResponse decodeResponse
 
 
+viewMinStarsError : Maybe String -> Html msg
+viewMinStarsError message =
+    case message of
+        Nothing ->
+            text " "
+
+        Just errorMessage ->
+            div [ class "stars-error" ] [ text errorMessage ]
+
+
 type Msg
     = Search
     | Options OptionsMsg
@@ -119,6 +129,11 @@ update msg model =
             ( model, Cmd.none )
 
 
+onBlurWithTargetValue : (String -> msg) -> Attribute msg
+onBlurWithTargetValue toMsg =
+    on "blur" (Json.Decode.map toMsg targetValue)
+
+
 tableConfig : Table.Config SearchResult Msg
 tableConfig =
     Table.config
@@ -151,14 +166,19 @@ nameColumn =
 updateOptions : OptionsMsg -> SearchOptions -> SearchOptions
 updateOptions optionsMsg options =
     case optionsMsg of
-        SetSort sort ->
-            { options | sort = sort }
+        SetMinStars minStarsStr ->
+            case String.toInt minStarsStr of
+                Ok minStars ->
+                    { options | minStars = minStars, minStarsError = Nothing }
 
-        SetAscending ascending ->
-            { options | ascending = ascending }
+                Err _ ->
+                    { options
+                        | minStarsError =
+                            Just "Must be an integer!"
+                    }
 
-        SetSearchInDescription searchInDescription ->
-            { options | searchInDescription = searchInDescription }
+        SetSearchIn searchIn ->
+            { options | searchIn = searchIn }
 
         SetUserFilter userFilter ->
             { options | userFilter = userFilter }
@@ -217,9 +237,8 @@ viewSearchResult result =
 
 
 type OptionsMsg
-    = SetSort String
-    | SetAscending Bool
-    | SetSearchInDescription Bool
+    = SetMinStars String
+    | SetSearchIn String
     | SetUserFilter String
 
 
@@ -227,11 +246,11 @@ viewOptions : SearchOptions -> Html OptionsMsg
 viewOptions opts =
     div [ class "search-options" ]
         [ div [ class "search-option" ]
-            [ label [ class "top-label" ] [ text "Sort by" ]
-            , select [ onChange SetSort, value opts.sort ]
-                [ option [ value "stars" ] [ text "Stars" ]
-                , option [ value "forks" ] [ text "Forks" ]
-                , option [ value "updated" ] [ text "Updated" ]
+            [ label [ class "top-label" ] [ text "Search in" ]
+            , select [ onChange SetSearchIn, value opts.searchIn ]
+                [ option [ value "name" ] [ text "Name" ]
+                , option [ value "description" ] [ text "Description" ]
+                , option [ value "name,description" ] [ text "Name and Description" ]
                 ]
             ]
         , div [ class "search-option" ]
@@ -244,13 +263,15 @@ viewOptions opts =
                 ]
                 []
             ]
-        , label [ class "search-option" ]
-            [ input [ type' "checkbox", checked opts.ascending, onCheck SetAscending ] []
-            , text "Sort ascending"
+        , div [ class "search-option" ]
+            [ label [ class "top-label" ] [ text "Minimum Stars" ]
+            , input
+                [ type' "text"
+                , onBlurWithTargetValue SetMinStars
+                , defaultValue (toString opts.minStars)
                 ]
-        , label [ class "search-option" ]
-            [ input [ type' "checkbox", checked opts.searchInDescription, onCheck SetSearchInDescription ] []
-            , text "Search in description"
+                []
+            , viewMinStarsError opts.minStarsError
             ]
         ]
 
@@ -315,22 +336,13 @@ getQueryString model =
         ++ Auth.token
         ++ "&q="
         ++ model.query
-        ++ (if model.options.searchInDescription then
-                "+in:name,description"
-            else
-                "+in:name"
-           )
+        ++ "+in:"
+        ++ model.options.searchIn
+        ++ "+stars:>="
+        ++ (toString model.options.minStars)
         ++ "+language:elm"
         ++ (if String.isEmpty model.options.userFilter then
                 ""
             else
                 "+user:" ++ model.options.userFilter
            )
-        ++ "&sort="
-        ++ model.options.sort
-        ++ "&order="
-        ++ (if model.options.ascending then
-                "asc"
-            else
-                "desc"
-           )

part11/style.css

@@ -91,6 +91,15 @@ button:focus, input:focus {
   outline: none;
 }
 
+.stars-error {
+  background-color: #FF9632;
+  font-size: 16px;
+  padding: 10px;
+  margin-right: 24px;
+  border-radius: 10px;
+  margin-top: 10px;
+}
+
 .error {
   background-color: #FF9632;
   padding: 20px;
@@ -103,21 +112,22 @@ button:focus, input:focus {
 .search-input {
   display: block;
   float: left;
-  width: 50%;
+  width: 42%;
 }
 
 .search-options {
   position: relative;
   float: right;
-  width: 50%;
+  width: 58%;
   box-sizing: border-box;
-  padding: 20px;
+  padding-top: 20px;
 }
 
 .search-option {
   display: block;
   float: left;
-  width: 50%;
+  width: 30%;
+  margin-left: 16px;
   box-sizing: border-box;
 }