When clicking on an icon in the AppBar that's supposed to take me to my Profile page there is some weirdness. The contents of the Profile page immediately show up on top of the previous page and then a second later the Profile page loads and everything is fine. Same thing happens when going back from Profile page to the previous page.
Here is a link to the screen recording https://vimeo.com/user99110764/review/339241883/a39312e6d8
Below is the code for the Profile button that is in the AppBar
class ProfileButton extends StatelessWidget {
final store = AppStore.store;
#override
Widget build(BuildContext context) {
return IconButton(
onPressed: () async {
if (store.state.userState.user == null) {
AppNavigator.signInPage();
} else {
AppNavigator.profilePage();
}
},
tooltip: 'Profile',
icon: Icon(Icons.person),
);
}
}
EDIT:
static profilePage() {
navigator.currentState.pushNamed('/profile');
}
static signInPage() {
navigator.currentState.pushNamed('/sign_in');
}
Since the video is not working I'll try to explain what's happening. I'm on the main page of the app that has a list view. I click on the profile button in the AppBar after I've already signed in so it navigates to the Profile page, but what happens is that the contents of the Profile page (image + logout button) get immediately rendered on top of the main page and after about a second, the background of the Profile page loads and everything looks how it's supposed to.
An async function uses the await expression. Hopefully, this could help...Dart asynchronous programming
Related
I'm working on a page fetching data and then showing a list of results. I have a main App component with a navbar and 3 possible sub-pages. The first is the home, where you can also do a research as i mentioned. When you do that, i made it so that the beginning of the list scrolls to the top of the browser window (banner, navbar and such get out of the screen, on the top). Now, if you click one of the results, you get to a detailed page about that.
What i'm trying to achieve is to call the page scroll i mentioned also when you get back to the home, by using "previous page" button or even by clicking home in the navbar. The results list is still there, so i want to scroll it again on the top.
The function i use for the scroll is
const scrollPage = () => {
setTimeout(function () {
const element = document.getElementById("comment");
element.scrollIntoView({
behavior: "smooth",
block: "start",
});
}, 1000); }
and this works when i do the research, since i call it inside the search function. i tried calling the same function with useEffect() but it didn't work, also i tried like
useEffect(() => {
window.addEventListener('load', scrollPage);
return () => {
window.removeEventListener('load', scrollPage);
}}, []);
but it doesn't work. if i click home in the navbar it goes on top of the page and if i use the "previous page" button i get back at the same Y of the list and the beginning of the list doesn't get scrolled.
The background page of modal window in Unsplash is really unique.
Emulation:
click on photo from feed
then click to another photo on modal page to watch effect
refresh page
click to go back on browser
notice the route of background location on modal window
So my question is how to create this background location properly?
Ciao, my personal point of view is that when you go back, Unsplash page re-triggers the modal window you open before. Unspalsh is written in React so, for example, code could be like that:
function Page() {
const [state, setState] = useState({...});
useEffect(() => {
// get data from cache
if (data) {
// (re)open dialog with photo
}
}, [state]); // state in deps so useEffect will be re-triggered each time you enter in Page
}
I don't want to be reductive but this could be a start point.
So I want to show user a popup when they try to leave the page. The popup will have to buttons - on to save content and leave and another to just leave without saving.
I'm using router 3.2.1
I tried to make use of routeLeaveHook functionallity, and it works to open the dialog.
But the problem I'm facing right now is I'm not sure how to handle two functions which should run on button clicks? Should I push to history in them to navigate to the clicked page? How can I get nextLocation there? Or should I use routeLeaveHook somehow? Or is there another way to do all of it?
Thank you for your help!
class MyDialog extends React.Component {
componentDidMount(): void {
const { route, routeLeaveHook} = this.props;
routeLeaveHook(route, this.routerWillLeave);
}
routerWillLeave = (nextLocation: string): any => {
if (dataToSave) {
...open dialog
}
return false;
}
render () {
<div open={isOpen}>
...some content
<button onClick={this.saveAndLeave}>
Save and leave
</button>
<button onClick={this.leave}>
Leave
</button>
</div>
}
}
UPDATE
Right now I think I should move my routerWillLeave logic to container of Dialog instead of putting it inside the dialog
https://codesandbox.io/s/myw173jyq8
hey check this code sandbox for navigation away using react router prompt with custom dialogue.
How can I go to a specific tab when backed from a screen? Lets say I am in newForm screen and when I touch the back button, I'll go to Home screen. There are 4 tabs in homeScreen and I want to go to 3rd tab as soon as I've backed to home.
Home class
Tabs tabs = new Tabs(Component.BOTTOM);
tabs.addTab("Home", icon, homeContainer);
tabs.addTab("Home1", icon1, home1Container);
tabs.addTab("Home2", icon2, home2Container);
tabs.addTab("Home3", icon3, home3Container);
add(BorderLayout.CENTER, tabs);
Button newForm = new Button("New Form");
newForm.addActionListener(e=>{
new NewForm(res).show();
});
NewForm class:
Command back = new Command("") {
#Override
public void actionPerformed(ActionEvent ev) {
new Home(res).show();
}
};
.setBackCommand(back);
I would suggest keeping an instance of the Home form and just using Home.getInstance().showBack(). This will mean that the last selected tab would remain "as is".
If you want to select a specific index use: tabs.setSelectedIndex(idx, false).
Notice that the index starts at 0.
I need to check between Facebook's expiration date and the current date when I enter in two different components. Dashboard and Pages. Both have this:
componentWillMount() {
const { linkedAccount, clearLinkedAccounts, getFacebookPages } = this.props
const now = moment().format('YYYY-MM-DD HH:mm:ss')
if (linkedAccount) {
if (now < linkedAccount.expiresIn) {
getFacebookPages()
} else {
clearLinkedAccounts()
}
}
}
componentWillUnmount() {
const { linkedAccount, clearLinkedAccounts } = this.props
const now = moment().format('YYYY-MM-DD HH:mm:ss')
if (linkedAccount && now > linkedAccount.expiresIn) {
clearLinkedAccounts()
}
}
But only when refreshing the page manually, the clearLinkedAccounts() is executed, by running componentWillMount, but before leaving it, it doesn't. I want it to be executed, if necessary, before entering in another route.
Refreshing the page is not like going from a page to another page inside the same single app context. React router allows you to go from a page to another within a React single app with tag like Link. It is why react router is so useful!
When you click on a link to go to another page with Link, the React single app is still active. As a result, componentWillUnmount wil lbe called because the single app is able to unmount component.
When you refresh the page (F5), a new page is loaded. As a result, the entire existing single app is removed and given to the browser garbage collector. In that case, you have no control on React component. So impossible to call componentWillUnmount because there is no more components at all.