# Share state across pages

{% hint style="danger" %}
**Only Use Sparsely:** For components within a page, use [reusable views](https://orasund.gitbook.io/elm-cookbook/recipes-1/writing-a-single-page-application/reusable-views) instead.
{% endhint %}

{% tabs %}
{% tab title="Problem" %}

```
import Brwoser.Dom exposing (Viewport)
import Time exposing (Posix)

type Model =
    Loading
        { viewport : Maybe Viewport
        , time : Maybe Posix
        }
    | LoginPage
        { loginForm : LoginForm
        , viewport : Viewport
        , time : Posix
        }
    | AdminPage
        { userId : Int
        , viewport : Viewport
        , time : Posix
        }

tyep Msg =
    UpdatedViewport
    | UpdatedTime
    | ..

update : Msg -> Model -> (Model,Cmd Msg)
update msg Model =
    case Msg of
        UpdatedViewport ->
            --How can i updated the viewport in a scaleable way?
            
        UpdatedTime ->
            --How can i updated the time in a scaleable way?
```

{% endtab %}

{% tab title="Solution" %}

```
import Brwoser.Dom exposing (Viewport)
import Time exposing (Posix)

type alias Config =
    { viewport : Viewport
    , time : Posix
    }

type Page =
    Login { loginForm : LoginForm }
    | Admin { userId : Int }

type Model =
    Loading
        { viewport : Maybe Viewport
        , time : Maybe Posix
        }
    | Ready ( Page , Config )

tyep Msg =
    UpdatedViewport Viewport
    | UpdatedTime Posix
    | ..

update : Msg -> Model -> (Model,Cmd Msg)
update msg model =
    case Msg of
        UpdatedViewport viewport ->
            case model of
                Loading m ->
                    {m | viewport = Just viewport}
                Ready (p,config) ->
                    ( p
                    , { config | viewport = viewport}
                    )
            
        UpdatedTime time->
            case model of
                Loading m ->
                    {m | viewport = Just time}
                Ready (p,config) ->
                    ( p
                    , { config | time = time}
```

{% endtab %}
{% endtabs %}

## Question

How should I handle shared state between pages 

## Answer

Define a config type and separate page definitions from the model definition.