Skip to content

HTTP request send twice if route changed back #196

Open
@AndrejSperling

Description

@AndrejSperling

I have a strange behavior maybe someone can help.
Currently I have a router component, that is loading all pages.
On the StartPage I have a form that can POST some entries.

Now, if I made an POST request and switched from '/start' to '/feed' and back to '/start' the POST request is send a second time.

const routedComponent = (sources) => ({path, value}) => value({...sources, router: sources.router.path(path)});

const routes = {
    '/start': StartPage,
    '/feed': UnderConstructionPage,
    '*': NotFoundPage,
};

export function Router(sources: AppSources): AppSinks {
 const routes$: Stream<SwitchPathReturn> = sources.router.define(routes);
    const page$ = routes$.map(routedComponent(sources));

    const redirectStartpage$ = sources.router.history$
        .filter(loc => loc.pathname === '/')
        .mapTo('/start');

    return {
        DOM: page$.map(c => c.DOM || xs.empty()).flatten(),
        HTTP: page$.map(c => c.HTTP || xs.empty()).flatten(),
        router: xs.merge(page$.map(c => c.router || xs.empty()).flatten(), redirectStartpage$),
        onion: page$.map(c => c.onion || xs.empty()).flatten(),
    };
}

On the StartPage I have a intent that is listen to a HTTP stream.
And if the response is successfull I show a message.

export function intent(sources: AppSources) {

    const {DOM,HTTP} = sources;

    return {
        newSetClick$: DOM.select(ID_NEW_SET_BTN).events('click').debug('CLICK'),
        refreshSetList$: xs.of(GetSetsApi.buildRequest()),
        newSetResponse$: HTTP.select(PostSetApi.ID).flatten()
    };

}

function reducer(action: any) {

    const initReducer$ = xs.of(function initReducer(state) {
        return {
            showNewCardMessage: false,
            newCardMessage: {}
        }
    });

    const newCardMessageReducer$ = action.newSetResponse$
        .filter(response => response.ok)
        .map(res => ({
            id: res.body._id,
            title: res.body.title
        }))
        .map(res => function cardMessageReducer(state) {
            return {
                ...state,
                showNewCardMessage: true,
                newCardMessage: {
                    id: res.id,
                    title: res.title
                }
            }
        });


    return xs.merge(initReducer$, newCardMessageReducer$);
}

The request is send by Startpage itself but only if the submit button was clicked.
Now if I remove the "Intent" the behavior disapears.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions