I have a component, that's actually a modal dialog.
When I am done with that dialog and press the "Ok" button, I want to stay on the stay page from where I opened that dialog.
Which isn't difficult.
But the problem is that the dialog changes the data (I am getting data through a REST call) so I need to refresh the route that I already am on to reflect the data changes.
Since, I am calling it from a component, I don't have Route so can't call route.refresh().
I tried to get the router:
this.set('router', Ember.getOwner(this).lookup('router:main'));
and did transition to the same page:
_this.get('router').transitionTo('my-route')
But since the route hasn't changed (I only opened a dialog), transitionTo doesn't get triggered!
Is there a way I can force trigger transitionTo or refresh the page that I am on?
Thank you!
First, you can easily get the current route name by injecting the routing service to the component.
Then, you can get the current route instance and apply its refresh method:
// app/components/a-component.js
import Component from "ember-component";
import service from "ember-service/inject";
import getOwner from "ember-owner/get";
export default Component.extend({
routing: service("-routing"),
actions: {
refresh() {
const currentRouteName = this.get("routing.currentRouteName");
const currentRouteInstance = getOwner(this).lookup(`route:${currentRouteName}`);
currentRouteInstance.refresh();
}
}
});
For this, define refreshCurrentRoute method in nearest route or in application route file.
actions:{
refreshCurrentRoute(){
this.refresh();
}
}
From your component, you need to call refreshCurrentRoute action. either you can use ember-route-action-helper or by passing the closure action.
Related
For a given route localhost:3000/my-link, component MyLink is rendered.
In MyLink component, ajax request is fired in componentDidMount() which then sets the state object of the MyLink class and renders the component.
But when navigating to some other route and switching back to /my-link ajax is fired again. In short, whole state previously populated is lost. Can there be a way to check if the previous state is already populated, then prevent componentDidMount to be called?
componentDidMount() is invoked immediately everytime a component is mounted in the DOM. What you're trying to do can be achieved by integrating react redux store. Call the Ajax call according to store state variable. On firing the AJAX requests Dispatch the action to make the variable true.
componentDidMount() {
if(!this.props.variable)
{
//AJAX CALL
dispatch({ type: 'SET_VARIABLE', value: true });
}
}
Once it sets to true, it won't be called next time you navigate to this route.
When you switch from your existing route localhost:3000/my-link to any other page like localhost:3000/other-link, Your MyLink component got unmounted but at the same time, your data fetched in MyLink component is still in your redux store.
Here's what you can do;
If the data which you are fetching in MyLink is frequently changing then it is a good idea to fetch it again when you visit the same link again. Means, You need to clear the state when your component unmounts.
componentWillUnmount() {
// resetData is an action which will clear the data in your MyLink reducer.
this.resetData();
}
So, When you visit the same link again, The component won't have any previous data and it will fetch the fresh data.
If that data is not frequently changing and you're okay with getting it just one time then you can make a conditional call to your action.
componentDidMount() {
// this.props.data is a state from redux store.
if(!this.props.data){
this.getData();
}
}
I'm new in React and I was asked to implement this feature in an App mostly done. So, I don't want to destroy everything.
I have a modal containing components login/register/activation/password-recovery/password-reset according the situation. This modal can appear on every single public page. It's possible to navigate in the modal from login to register, from login to password-recovery, from password-reset to login.
We can access to the modal from a link in he header and from other links through the site. The modal appears with an animated transition.
I was asked to change the URL according to the modal content displayed.
The URLs must be:
site.com/en/login
site.com/en/register
site.com/en/activation
site.com/en/password-recovery
site.com/en/password-reset
The page behind the modal should remains even if the URL was site.com/en/page1/info1/[...] or the homepage should be displayed by default behind the modal on direct URL access/refresh.
I found many pieces for this puzzle on the web, but pieces don't seem to fit together. I just want to know the best way to achieve this task.
I don't have convincing code to show right now.
If that can help, it's a React-Redux App using JSX on NodeJS server.
if your component is rendered via Router you can use history.push(), else you can wrap your component with withRouter from react-router-dom and then use history.push(),
import { withRouter } from 'react-router'
const myComponent = () => {
...
}
// by this history is going to be available from props in this component
export default withROuter(myComponent)
if neither of then was not working , you still have location object from window of browser left , try that....
Maybe the 'history' library can help you easily
https://www.npmjs.com/package/history
import createHistory from 'history/createBrowserHistory'
const history = createHistory()
history.listen((location, action) => {
// location is an object like window.location
console.log(action, location.pathname, location.state)
})
I'm trying to re-render the first screen of the StackNavigator after saving the data for a new listItem. After a successful save, I call this.props.navigation.dispatch(NavigationActions.back())
and I want to re-render the page with a a this._updateData function. I tried a solution mentioned here: https://github.com/react-navigation/react-navigation/issues/922 by beausmith where the this._updateData function gets passed to this.props.navigation.navigate like so:
this.props.navigation.navigate('ScreenB', {
onNavigateBack: this._updateData
})
And then on ScreenB you would do this:
this.props.navigation.state.params.onNavigateBack()
And
this.props.navigation.dispatch(NavigationActions.back())
With a StackNavigator, you don't need to call this.props.navigation.navigate, as it is already built into the header. I tried adding this._updateData to this.props.navigation.state.params in the ComponentDidMount hook of screenA and then calling it as I had above in ScreenB but that didn't seem to do anything (No error message, but no refresh). Any idea where I'm going wrong?
when u seem to require forward in reactjs we used to put a Link or button ,and then consumer click it ,then the page reload corresponding path of router . Now,I want the page turn to other path of router when I request a post and the status of response is 200. It can't use a link or button ,could reactjs use code to do this? like : CertainComponent.setPath(otherPath); CertainComponent.turn;
My English is poor , it may be not clear to delive the function which i want to do.
Thanks！
I think you want to use this.context.router.push('/users/12')
https://github.com/reactjs/react-router/blob/master/docs/API.md#routercontext
First of all the component you are using has to be a container, which means you have to create it with connect() so it has access on store and dispatch:
let MyComponent = ({ dispatch, store }) => {
store.routing.push('url');
}
export default connect()(MyComponent)
And this depends how you named the router key on your store when you combined the routing reducer from redux-router on your store.
There is also another alternative, where you could do
import { hashHistory } from 'react-router';
hashHistory.push('next-url');
Here's the route:
import Ember from 'ember';
export default Ember.Route.extend({
actions: {
closeModal: function () {
alert('asdf');
}
}
});
And the component js code:
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
closeModal: function () {
this.sendAction('closeModal');
}
}
});
What I'd like to do is to (as the code may suggest ;) ) send an action from component to route, so that the route could act upon it. However the code above doesn't work - component properly handles the action, but the sendAction call inside it's method doesn't do anything.
EDIT:
I solved this problem using:
this._controller.send('closeModal'); inside component's action method however this solution doesn't satisfy me. Ember authors are saying that controllers will be removed in ember 2.0, so in my code I don't want to have any references to them. Suggestions?
A component has a isolated context. So it knows nothing about anything (route or controller) outside of the component. In order to send an action from your component to your route, you should pass the route's action to the component in your template like so:
// your template
{{your-component closeModal="closeModal"}}
Now when you call this.sendAction('closeModal') in your component, it will trigger the action given to the component within your template, which in this case is the closeModal action of your route.
For more information, see the docs (http://emberjs.com/api/classes/Ember.Component.html#method_sendAction)
UPDATE August 3 2016
For those who encountered closure actions in newer versions of Ember, you might also make use of such actions here by doing:
// your template
{{your-component closeModal=(action "closeModal")}}
This action helper will point to an action of your controller, in your component you can call this.attrs.closeModal() or this.get('closeModal')() to trigger the action instead of calling sendAction.
The benefit of these actions is that the action might return a value which can be used in the component. In case of a modal this can for example be used to determine if a modal may be closed or not if the closeAction is called, if it returns false for example you might decide to prevent the modal from closing.
As a side note, the closure actions always point to your controller, in order to let it point to a route action, you might take a look at this addon:
https://github.com/DockYard/ember-route-action-helper