Giter VIP home page Giter VIP logo

mvu's People

Contributors

granicz avatar jand42 avatar jooseppi12 avatar steiner2001 avatar tarmil avatar teo-tsirpanis avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

mvu's Issues

How to create new Websharper.MVU project?

It may sound like a trivial question, but if you go over documentation, Templates, etc
there is no clear answer - how to create a new empty MVU project you can start working on?

If there is not a specific template for MVU applications, which of the existing 6 templates would be a good starting point?

App.CreatePaged not working

No page navigation occurs.

I see that there is a second Var<Model> created for the Pager, living in parallel with the Var<Model> in the App instance and this is causing the problem: the Pager.Doc is watching this second Var which is never changing from initial state.

As a quick fix, I am removing this duplication and tie the Pager to the app.View

[Question] How to dispatch/fire messages not related to JS events?

Hi,

I'm new to Websharper, so maybe my question will be super easy, that case, all the better :-)

I'm using Websharper.Mvu, with F#.
And now I am trying to integrate auth0 authentication.

I wrap the auth0 javascript library like this (some details left out for brevity):

module Authentication

type Auth()=
    [<Name("isAuthenticated")>]
    [<Stub>]
    member this.IsLoggedIn(): Promise<bool>= X<_> 
    [<Name("loginWithRedirect")>]
    [<Stub>]
    member this.Login(options: LoginOptions): Promise<unit>= X<_>
    [<Name("logout")>]
    [<Stub>]
    member this.Logout(options: LogoutOptions): Promise<unit>= X<_>
    [<Name("handleRedirectCallback")>]
    [<Stub>]
    member this.finishLogin() : Promise<unit>= X<_>
	
[<Direct("createAuth0Client($options)")>]
let create(options: CreateOptions): Promise<Auth>= X<_>

let setup domain clientId=
    async {
        let! a= create({Domain= domain; ClientId=clientId}).AsAsync()
		// ...
    }

When I add a button Setup and bind its click event to a message, then I can do in my update function

let update msg (state: State) : Action<Message, State> =
    match msg with
	// ...
	| SetupAuth ->
	CommandAsync (fun _ -> Authentication.setup "myDomain" "myClientId")

So far so good. But actually I want to trigger this upon application startup. And I can't seem to find a way
to dispatch a message without binding it to a JS-event.

Another example is finishLogin():

When auth0 is done with login, it calls a configured callback route. I got routing set up like this:

let Main () =
    let router = Router.Infer<Site.Route>()

    App.CreatePaged (Site.init()) Site.update Site.pageFor
    |> App.WithCustomRouting router Site.routeForState Site.goto
	// ...

with

module Site

let goto (route: Route) (state: State) : State =
    match route with
    | Welcome -> {state with Route=route; Screen= WelcomeScreen}
	// ...
    | AuthLoggedIn -> 
        // HERE
        state

let routeForState state = state.Route

In the AuthLoggedInBranch, I'd like to trigger a call to Authentication.finishLogin().
So again, I'd like to fire a message LoginFinished or similar to which I could react in my update function like this:

    match msg with
	// ...
	| LoginFinished ->
	CommandAsync (fun _ -> Authentication.finishLogin())

So, in both cases it's really the same question:

how can I fire/dispatch a message from within code, instead of from JS-events?

While I'm pretty sure the answer must be simple, I've been looking at the samples in github, at trywebsharper examples, googling for two weekends now (this is my personal hobby project, so I get to work on it only on the weekends), without any success.

So, please, can anyone help or provide me with a pointer to relevant documentation/samples/info?

Many thanks,
Mark

Update: so by looking into the code here, in App.fs, I found that I can solve the first issue I mention by using WithInitMessage, but that still does not solve the more general question.

Add Action.Map

We need a function to wrap an action from a child update in a parent update, see https://forums.websharper.com/topic/87100:

module Action =

    let rec Map (wrapMsg: 'ChildMessage -> 'ParentMessage)
                (currentModel: 'ParentModel)
                (wrapModel: 'ParentModel -> 'ChildModel -> 'ParentModel)
                (unwrapModel: 'ParentModel -> 'ChildModel)
                (action: Action<'ChildMessage, 'ChildModel>)
                : Action<'ParentMessage, 'ParentModel> =
        match action with
        | DoNothing -> DoNothing
        | SetModel childModel -> UpdateModel (fun parent -> wrapModel parent childModel)
        | UpdateModel f -> UpdateModel (fun parent -> unwrapModel parent |> f |> wrapModel parent)
        | Command cmd -> Command (fun dispatch -> cmd (wrapMsg >> dispatch))
        | CommandAsync cmd -> CommandAsync (fun dispatch -> cmd (wrapMsg >> dispatch))
        | CombinedAction actions -> CombinedAction (List.map (Map wrapMsg currentModel wrapModel unwrapModel) actions)

// Use:
let update msg (state: State) : Action<Message, State> =
    match msg with
    | TagListMessage m -> 
        let updatedTagList= Tags.update m state.TagList
        SetModel {state with TagList=updatedTagList}
    | AuthMessage m ->
        Authentication.update m state.UserInfo
        |> Action.Map AuthMessage state (fun s i -> { s with UserInfo = i }) (fun s -> s.UserInfo)

We could also provide a "magic" macro, somewhat similar to Lens, that would allow passing this:

|> Action.MagicMap AuthMessage state.UserInfo

and would expand to the same as above:

|> Action.Map AuthMessage state (fun s i -> { s with UserInfo = i }) (fun s -> s.UserInfo)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.