improved laziness re: dropdown, added keying to gallery

FayCarsons · Feb 13, 2024 · e739afe · e739afe
1 parent fdafdc1
commit e739afe
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 44 deletions.
diff --git a/frontend/src/Components/Dropdown.elm b/frontend/src/Components/Dropdown.elm
@@ -1,10 +1,11 @@
 module Components.Dropdown exposing (..)
 
+{- import Html.Events exposing (onClick) -}
+
 import Components.Icons exposing (Palette(..), burger)
 import Html exposing (Html, a, div, text)
 import Html.Attributes as Attr
-{- import Html.Events exposing (onClick) -}
-import Messages exposing (Msg(..), Route(..))
+import Messages exposing (Menu(..), Msg(..), Route(..))
 
 
 leftDropdownClass : String
@@ -17,23 +18,28 @@ rightDropdownClass =
     "bg-kiggygreen flex flex-col items-start top-0 right-0 p-4 md:p-0 md:opacity-0 md:w-0 transition-all duration-300 ease-in-out"
 
 
-dropdown : { click : Maybe Msg, class : String } -> Html Msg
-dropdown { click, class } =
-    div [ Attr.class class ]
-        [ click
-            |> (burger
-                    { click = click
-                    , class = "absolute top-4 right-4 md:hidden"
-                    , size = "24"
-                    , color = Pink
-                    }
-                    |> Just
-                    |> always
-                    |> Maybe.andThen
-               )
-            |> Maybe.withDefault (text "")
-        , div [ Attr.class "flex flex-col justify-center border-t border-kiggypink pt-2 mb-4" ]
-            [ a [ Attr.href "/checkout" ] [ text "Checkout" ]
-            , a [ Attr.href "/about" ] [ text "About" ]
-            ]
-        ]
+dropdown : { showMenu : Menu, click : Maybe Msg, class : String } -> Html Msg
+dropdown { showMenu, click, class } =
+    case showMenu of
+        Open ->
+            div [ Attr.class class ]
+                [ click
+                    |> (burger
+                            { click = click
+                            , class = "absolute top-4 right-4 md:hidden"
+                            , size = "24"
+                            , color = Pink
+                            }
+                            |> Just
+                            |> always
+                            |> Maybe.andThen
+                       )
+                    |> Maybe.withDefault (text "")
+                , div [ Attr.class "flex flex-col justify-center border-t border-kiggypink pt-2 mb-4" ]
+                    [ a [ Attr.href "/checkout" ] [ text "Checkout" ]
+                    , a [ Attr.href "/about" ] [ text "About" ]
+                    ]
+                ]
+
+        Closed ->
+            text ""
diff --git a/frontend/src/Components/Gallery.elm b/frontend/src/Components/Gallery.elm
@@ -6,36 +6,35 @@ import Components.Header exposing (header)
 import Dict
 import Html exposing (Html, a, div, h2, img, p, text)
 import Html.Attributes as Attr
+import Html.Lazy
+import Html.Keyed
 import Lib exposing (getQuantityElement, titleToPath)
 import Messages as Msg
 import Stock exposing (ItemId, Product, Stock)
 
 
-
 gallery : Stock -> Msg.Menu -> Html Msg.Msg
 gallery stock menu =
     div []
         [ div [ Attr.class "relative flex bg-slate-50" ]
-            [ Dropdown.dropdown { click = Nothing, class = Dropdown.leftDropdownClass }
+            [ Dropdown.dropdown { showMenu = Msg.Open, click = Nothing, class = Dropdown.leftDropdownClass }
             , div [ Attr.class "flex-1 max-w-full" ]
                 [ header Msg.FlipMenu menu
-                , div [ Attr.class "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 p-4" ]
-                    (Dict.toList stock |> List.map productCard)
+                , Html.Keyed.node "div" [ Attr.class "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 p-4" ]
+                    (Dict.toList stock |> List.map keyedProductCard)
                 , footer ()
                 ]
-            , case menu of
-                Msg.Open ->
-                    Dropdown.dropdown { click = Just Msg.FlipMenu, class = Dropdown.rightDropdownClass }
-
-                Msg.Closed ->
-                    text ""
+            , Html.Lazy.lazy Dropdown.dropdown { showMenu = menu, click = Just Msg.FlipMenu, class = Dropdown.rightDropdownClass }
             ]
         ]
 
+keyedProductCard : (ItemId, Product) -> (String, Html Msg.Msg)
+keyedProductCard ((id, _) as pair) = 
+    (String.fromInt id, Html.Lazy.lazy productCard pair)
 
-productCard : ( ItemId, Product ) -> Html Msg.Msg
+productCard : ( Int, Product ) -> Html Msg.Msg
 productCard ( id, { title, kind, quantity } ) =
-    a [ Attr.class "max-w-full overflow-hidden shadow-lg transition duration-300 transform hover:scale-105 aspect-square", Attr.href ("/products/" ++ String.fromInt id) ]
+     a [ Attr.class "max-w-full overflow-hidden shadow-lg transition duration-300 transform hover:scale-105 aspect-square", Attr.href ("/products/" ++ String.fromInt id) ]
         [ img [ Attr.src (titleToPath title), Attr.class "w-full h-full object-cover transition duration-300 ease-in-out hover:scale-105" ] []
         , div [ Attr.class "absolute inset-0 flex flex-col items-center justify-center bg-white bg-opacity-0 transition duration-300 opacity-0 hover:opacity-100 hover:bg-opacity-75" ]
             [ h2 [ Attr.class "text-kiggypink text-4xl font-semibold mb-2 opacity-100" ] [ text title ]

diff --git a/frontend/src/Components/Product.elm b/frontend/src/Components/Product.elm
@@ -6,6 +6,7 @@ import Components.Header exposing (header)
 import Html exposing (Html, button, div, h1, img, p, text)
 import Html.Attributes as Attr
 import Html.Events exposing (onClick)
+import Html.Lazy
 import Lib exposing (getQuantityElement, titleToPath)
 import Messages as Msg exposing (Msg)
 import Stock exposing (ItemId, Product)
@@ -14,16 +15,11 @@ import Stock exposing (ItemId, Product)
 product : ItemId -> Product -> Msg.Menu -> Html Msg
 product id item menu =
     div [ Attr.class "relative flex min-h-screen bg-slate-50" ]
-        [ Dropdown.dropdown { click = Nothing, class = Dropdown.leftDropdownClass }
+        [ Dropdown.dropdown { showMenu = Msg.Open, click = Nothing, class = Dropdown.leftDropdownClass }
         , div [ Attr.class "flex flex-col min-h-screen" ]
             [ header Msg.FlipMenu menu
             , productPage id item
-            , case menu of
-                Msg.Open ->
-                    text ""
-
-                Msg.Closed ->
-                    Dropdown.dropdown { click = Just Msg.FlipMenu, class = Dropdown.rightDropdownClass }
+            , Html.Lazy.lazy Dropdown.dropdown { showMenu = menu, click = Just Msg.FlipMenu, class = Dropdown.rightDropdownClass }                    
             ]
         ]
 

diff --git a/frontend/src/Stock.elm b/frontend/src/Stock.elm
@@ -24,7 +24,7 @@ type alias ItemId =
 
 
 type alias Stock =
-    Dict ItemId Product
+    Dict Int Product
 
 
 type alias StockResult =

diff --git a/frontend/tests/App.elm b/frontend/tests/App.elm
@@ -7,8 +7,6 @@ import Json.Decode exposing (decodeString)
 import Stock exposing (stockDecoder)
 import Test exposing (..)
 import Stock exposing (kindDecoder)
-import Html.Attributes exposing (kind)
-import Stock exposing (ProductKind)
 import Stock exposing (kindToPrice)