Add IconButton, user is signed out when token expires

Author: ryan-haskell

src/Components/Button.elm

@@ -2,6 +2,7 @@ module Components.Button exposing
     ( Button, new
     , view
     , withOnClick, withHref
+    , withId
     , withStyleSecondary
     , withIcon
     )
@@ -12,6 +13,7 @@ module Components.Button exposing
 @docs view
 
 @docs withOnClick, withHref
+@docs withId
 @docs withStyleSecondary
 
 -}
@@ -30,6 +32,7 @@ import Html.Events
 type Button msg
     = Button
         { label : String
+        , id : Maybe String
         , onClick : Maybe (Action msg)
         , style : Style
         , icon : Maybe Icon
@@ -55,6 +58,7 @@ new props =
     Button
         { label = props.label
         , onClick = Nothing
+        , id = Nothing
         , style = Primary
         , icon = Nothing
         }
@@ -79,6 +83,11 @@ withHref url (Button props) =
     Button { props | onClick = Just (OpenUrl url) }
 
 
+withId : String -> Button msg -> Button msg
+withId id (Button props) =
+    Button { props | id = Just id }
+
+
 withIcon : Icon -> Button msg -> Button msg
 withIcon icon (Button props) =
     Button { props | icon = Just icon }
@@ -97,6 +106,12 @@ view (Button props) =
 
           else
             Attr.classList []
+        , case props.id of
+            Just id ->
+                Attr.id id
+
+            Nothing ->
+                Attr.classList []
         ]
         [ case props.icon of
             Just icon ->

src/Components/Dialog.elm

@@ -17,6 +17,7 @@ module Components.Dialog exposing
 
 import Components.Button
 import Components.Icon
+import Components.IconButton
 import Css
 import Html exposing (..)
 import Html.Attributes as Attr
@@ -94,16 +95,11 @@ view (Dialog props) =
         viewCloseButton : Html msg
         viewCloseButton =
             form [ Attr.method "dialog" ]
-                [ button
-                    [ Css.pad_8
-                    , Css.border
-                    , Css.radius_8
-                    , Css.bg_background
-                    , Css.controls
-                    , Attr.attribute "aria-label" "Close dialog"
-                    ]
-                    [ Components.Icon.view16 Components.Icon.Close
-                    ]
+                [ Components.IconButton.new
+                    { label = "Close dialog"
+                    , icon = Components.Icon.Close
+                    }
+                    |> Components.IconButton.view
                 ]
     in
     node "dialog"
@@ -127,7 +123,9 @@ view (Dialog props) =
             , Css.border
             , Css.radius_16
             , Css.pad_32
+            , Css.gap_32
             ]
             [ viewHeader
+            , div [ Css.fill ] props.content
             ]
         ]

src/Components/EmptyState.elm

@@ -8,7 +8,8 @@ import Svg.Attributes
 
 
 viewCreateYourFirstProject :
-    { onClick : msg
+    { id : String
+    , onClick : msg
     }
     -> Html msg
 viewCreateYourFirstProject props =
@@ -18,6 +19,7 @@ viewCreateYourFirstProject props =
         , subtitle = "Welcome to Jangle! Let's get started by connecting to any existing GitHub repository."
         , button =
             { label = "Create new project"
+            , id = props.id
             , onClick = props.onClick
             }
         }
@@ -31,7 +33,11 @@ viewEmptyStateWithOptions :
     { image : Html msg
     , title : String
     , subtitle : String
-    , button : { label : String, onClick : msg }
+    , button :
+        { id : String
+        , label : String
+        , onClick : msg
+        }
     }
     -> Html msg
 viewEmptyStateWithOptions props =
@@ -58,6 +64,7 @@ viewEmptyStateWithOptions props =
             ]
         , Components.Button.new { label = props.button.label }
             |> Components.Button.withOnClick props.button.onClick
+            |> Components.Button.withId props.button.id
             |> Components.Button.view
         ]
 

src/Components/IconButton.elm

@@ -0,0 +1,62 @@
+module Components.IconButton exposing
+    ( IconButton, new
+    , withOnClick
+    , view
+    )
+
+{-|
+
+@docs IconButton, new
+@docs withOnClick
+
+@docs view
+
+-}
+
+import Components.Icon exposing (Icon)
+import Css
+import Html exposing (..)
+import Html.Attributes as Attr
+import Html.Events
+
+
+type IconButton msg
+    = IconButton
+        { label : String
+        , icon : Icon
+        , onClick : Maybe msg
+        }
+
+
+new : { label : String, icon : Icon } -> IconButton msg
+new props =
+    IconButton
+        { label = props.label
+        , icon = props.icon
+        , onClick = Nothing
+        }
+
+
+withOnClick : msg -> IconButton msg -> IconButton msg
+withOnClick onClick (IconButton props) =
+    IconButton { props | onClick = Just onClick }
+
+
+view : IconButton msg -> Html msg
+view (IconButton props) =
+    button
+        [ Css.pad_8
+        , Css.border
+        , Css.radius_8
+        , Css.bg_background
+        , Css.controls
+        , Attr.attribute "aria-label" props.label
+        , case props.onClick of
+            Just onClick ->
+                Html.Events.onClick onClick
+
+            Nothing ->
+                Attr.classList []
+        ]
+        [ Components.Icon.view16 props.icon
+        ]

src/Effect.elm

@@ -4,7 +4,7 @@ port module Effect exposing
     , sendCmd, sendMsg
     , pushRoute, replaceRoute, loadExternalUrl
     , map, toCmd
-    , saveOAuthResponse
+    , saveOAuthResponse, clearOAuthResponse
     , fetchSupabaseUser
     , showDialog
     )
@@ -21,7 +21,7 @@ port module Effect exposing
 
 ## Custom effects
 
-@docs saveOAuthResponse
+@docs saveOAuthResponse, clearOAuthResponse
 @docs fetchSupabaseUser
 
 -}
@@ -145,6 +145,14 @@ saveOAuthResponse oauthResponse =
         }
 
 
+clearOAuthResponse : Effect msg
+clearOAuthResponse =
+    Save
+        { key = "oAuthResponse"
+        , value = Json.Encode.null
+        }
+
+
 
 -- SUPABASE
 

src/Pages/Home_.elm

@@ -2,6 +2,7 @@ module Pages.Home_ exposing (..)
 
 import Auth
 import Components.Button
+import Components.Dialog
 import Components.EmptyState
 import Components.Icon
 import Components.Layout
@@ -24,7 +25,7 @@ page user shared route =
         { init = init
         , update = update
         , subscriptions = subscriptions
-        , view = view route.path
+        , view = view user
         }
         |> Page.withLayout
             (\_ ->
@@ -64,7 +65,7 @@ update msg model =
     case msg of
         ClickedCreateFirstProject ->
             ( { model | isDialogOpen = True }
-            , Effect.none
+            , Effect.showDialog { id = ids.createProjectDialog }
             )
 
 
@@ -81,15 +82,49 @@ subscriptions model =
 -- VIEW
 
 
-view : Path -> Model -> View Msg
-view path model =
+ids :
+    { createProjectDialog : String
+    , createFirstProjectButton : String
+    }
+ids =
+    { createProjectDialog = "dialog__create-project"
+    , createFirstProjectButton = "button__create-first-project"
+    }
+
+
+view : Auth.User -> Model -> View Msg
+view user model =
     { title = "Jangle | Dashboard"
     , body =
         [ div [ Css.col, Css.fill, Css.align_center ]
             [ Components.EmptyState.viewCreateYourFirstProject
-                { onClick = ClickedCreateFirstProject
+                { id = ids.createFirstProjectButton
+                , onClick = ClickedCreateFirstProject
                 }
             , div [ Css.h_96 ] []
             ]
+        , Components.Dialog.new
+            { title = "Create a project"
+            , content =
+                [ div [ Css.col, Css.gap_12, Css.sidebar_link, Css.color_textSecondary ]
+                    [ p [ Css.line_140 ]
+                        [ text
+                            ("Hey ${name}! 👋 This form isn't quite ready yet..."
+                                |> String.replace "${name}"
+                                    (String.split " " user.name
+                                        |> List.head
+                                        |> Maybe.withDefault user.name
+                                    )
+                            )
+                        ]
+                    , p [ Css.line_140 ]
+                        [ text "Try hitting the ESC key or clicking the \"X\" icon in the top-right corner!"
+                        ]
+                    ]
+                ]
+            }
+            |> Components.Dialog.withSubtitle "Connect to an existing GitHub repository"
+            |> Components.Dialog.withId ids.createProjectDialog
+            |> Components.Dialog.view
         ]
     }

src/Shared.elm

@@ -100,8 +100,8 @@ update : Route () -> Msg -> Model -> ( Model, Effect Msg )
 update route msg model =
     case msg of
         Shared.Msg.SupabaseUserApiResponded (Err httpError) ->
-            ( model
-            , Effect.none
+            ( { model | user = Auth.User.NotSignedIn }
+            , Effect.clearOAuthResponse
               -- |> Debug.log "TODO: Report this error to Sentry"
             )
 

src/Stories/EmptyState.elm

@@ -19,9 +19,7 @@ decoder =
             { id = "variant"
             , options =
                 [ ( "CreateYourFirstProject"
-                  , Components.EmptyState.viewCreateYourFirstProject
-                        { onClick = ClickedCreateNewProject
-                        }
+                  , viewCreateYourFirstProject
                   )
                 ]
             }
@@ -50,6 +48,11 @@ view controls =
             viewSelectedEmptyState
 
         Nothing ->
-            Components.EmptyState.viewCreateYourFirstProject
-                { onClick = ClickedCreateNewProject
-                }
+            viewCreateYourFirstProject
+
+
+viewCreateYourFirstProject =
+    Components.EmptyState.viewCreateYourFirstProject
+        { id = "button__create-first-project"
+        , onClick = ClickedCreateNewProject
+        }