React - Conditional mounting/unmounting of a component - javascript

Context
Let's say I have page that displays a list of employees, along with many other buttons and components. and whenever I click on an employee, a side panel appears with a bunch of information about that employee. If I click on any other employee while an employee is selected, the side panel remains intact with only the information inside it being re-fetched and updated.
I can also, change the employee's information from that side panel by editing the different fields and clicking Update which bulk updates every updated fields.
Problem Statement
Whenever an employee's information is being edited, I can also click on another employee, which, of course, means that the edited data for the previous employee is lost.
Objective
What I need to do in this case is that, whenever an employee's information is being edited from the side panel (a flag is present to denote that), and if any other component/buttons apart from Update is clicked, then I need to show a modal which states that everything that is unsaved would be lost. If the user selects Ok, the component that was clicked should mount/rendered/perform whatever it does. Otherwise, the user should go back to the previous state.
I initially tried to achieve that by using componentWillUnmount of the sidepanel, but it didn't really work because that component will unmount anyway. What I am thinking is that, I need to put a onClick handler in every button/component now apart from that 'Update' which checks if any information is being edited, if yes it will render that component, if not it will render that modal, and the user decides what to do in that modal. I am very skeptic about this as well by placing checks everywhere for a minor thing.
Anyone with experience about related to this use case ? Any insights would be highly appreciated. :)

First Put isEdited state isEdited: false Then when you edit the post then set isEdited to true. When user clicks update then set isEdited back to false. When user clicks button other than update then check isEdited if isEdited is true then dispay modal with message and button when button of model is click set isEdited to false.
Hopefully this will help

There are a few ways I can think to do this.
Add a check at the start of the function for each buttons onClick. As you've mentioned already, this is tedious, especially if there are lots of buttons that should affect the state.
Create a function that wraps the onClick functions, to perform this check. Similar to 1, however a bit easier to repeat:
const myOnClick = newEmployeeNumber => {
myState.employeeToView = newEmployeeNumber;
}
const checkUserWantsToContinue = (onClickToRunWhenContinued) => {
if (myAppState.isEdited) {
promptUserToSaveFirst();
} else {
onClickToRunWhenContinued();
}
}
return (
<div onClick={checkUserWantsToContinue(myOnClick)} />
);
You mentioned that you are trying to put this into the componentWillUnmount function. That implies that something is making the component unmount. Can you add the check in there? So rather than checking with the user before the component unmounts, check with them before the action that makes the component unmount.

Related

How do I get an input with v-model to update when the Vue route changes?

I have the following code:
https://jsfiddle.net/audiodude/pq9aczdu/33/
If you go to the Item View, then jump to page 10, say, it displays "page 10 of ??" (you're on page 10) and the input box agrees.
If you jump to page 20, same thing, so far so good.
However, if you then use the back button in your browser, it says "page 10 of ??" but the input box still says page 20.
I know that the Vue Router likes to reuse components when the path doesn't change, and my understanding is that the "this.page" data value on the ItemPagination component isn't getting updated. But I thought I was following good practice by separating the initialPage prop from the data that is bound to the model.
How do I get the input box to update on the browser BACK action? I can't use onBeforeRouteUpdate on ItemPagination because it's not the top level component being rendered so never receives that event.
Thanks!
Add the following to your ItemPagination component to keep an eye on changes to the route and query parameters
watch: {
$route (to) {
this.page = to.query.page || 1
}
}
See https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes

how can I Re-position after editing a table value in React?

There is an UI I have created using React. There are two text fields to enter value, after entering and saving those values will be populated in a table below the two fields(we are using antd for designing).
However when I click a single record in the table and click edit in that particular record data from that record will be populated to the above mentioned text fields. When this happens I want my app to scroll up and show those two text fields which are ready to be edited.
But currently it stays at the same position after clicked edit, without scrolling up and showing two text fields. Here's an image descripting my experience
Check this answer to find how to control srollTop: https://stackoverflow.com/a/55184755/2360631
But I don't think it's a good idea, maybe you can consider to freeze the edit area otherwise when you finish edit you may need to scroll back again...
Basically you want to set focus to some component after a re-render.
To refer to a particular component, use react refs
make a react ref of whatever you want to set focus to and assign it as a ref prop
constructor() {
super();
this.foo = React.createRef();
}
componentDidUpdate() {
this.foo.current.focus();
}
<Bar ref={this.foo}> .... </Bar>
foo is the name of ref
Bar is the component you want to set focus to
in your case it can be a parent of both input fields or any one of the input fields

React/JSX - how to code an editable input with initial content provided via props that only updates its parent when submitted?

All the examples I have found that keep local state can't provide an initial value for the input. In my case a parent component retrieves field from a server and passes these to my input form where the fields shall be editable. But I don't want to pass each change back up the hierarchy if I can avoid it, rather only when the form is submitted (either via button or by pressing enter)
Update: the usage is as follows. Imagine a todo list. The top level holds the list and the detail component. When I click at the list the detail should update to show the selected todo text. That text should be editable.
So as far the the detail component goes the initial state of the input is the text from the list that gets passed down in props. It needs to change when a different todo in the list is selected. On the other hand I should be able to edit it and when submit triggered that todo text should be passed back up via a callback prop.
So I have to keep local state to collect the input, but I want that state to be initialized with the existing todo text from the list. If I use the Facebook example of an uncontrolled form, I find the edited text remains displayed when I switch to a different todo in the list. Maybe I'm doing it wrong or is it a conceptual problem? Using controlled input initializing the state in the constructor doesn't work either because the constructor only gets called once (not on each re-render)!
I solved the problem by using the lifecycle method componentWillReceiveProps(nextprops) where I can set the state to the new props. This method gets called each time a re-render becomes necessary - in my case because the parent changes the childs props.
See https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops
You can set the initial state based on the property passed in from the parent, then edit that state in the component before submitting with the form submission

proper vueJS way to sync props with data

Consider a VueJS app that allows for showing / editing blogposts.
On clicking "edit blogpost" a modal (Vue component) is shown to edit the current blogpost (just an ordinary js-object).
To this end I pass the current blogpost as a prop to the modal-component.
The Modal component has a couple of form fields that should be populated with the blogpost-attributes.
However, the Vue 'way' is to have a data object on the Modal-component that acts as the model to populate the form fields, and vice-versa, be updated when the user changes the form fields.
The problem: How do I connect the blogpost which is passed as a prop to the data field of the modal-component so that:
the blogpost populates the form fields
the blogpost gets updated when updating the form fields
What's the correct Vue way to accomplish this?
You have three (at least) ways of doing it:
1) Connect the data via the prop attribute, just as you are doing, but add the .sync attribute to it. This way, when the data is modified on the form, it automatically gets modified too on the component. The problem with this solution is that the update is automatic, so if a validation fails, or the user closes the modal without saving the changes, these are saved anyway. An example: https://jsfiddle.net/Lz3aq64f/
2) The other way of doing it is getting the modal to $dispatch an event with the saved information when it's saved. The blogpost element should listen for this event and act accordingly.
On the modal:
this.$dispatch('update-post', this.title, this.author);
On the blogpost:
this.$on('update-post', function(title, author) {
this.title = title;
this.author = author
});
If the blogpost component and the modal component are not in the same hierarchy, things get a little bit more complicated, and probably you need the common parent element to act as a proxy. Think of the modal element dispatching the information up, the #app element catching it via $on, and then doing $broadcast to the blogpost element.
3) Use something like vuex to act as a central repository of state. I don't know how big is your application, but this would be the cleanest way to go: http://vuex.vuejs.org/en/index.html
Good luck!

ReactJS onClick event which disable clicking second time on <a> tag

I'm looking a solution how to prevent to clicking and saving second time the same follower through <a> tag.
This is my code:
<a className={this.followClasses(user.following)}
onClick={this.followUser.bind(this, user.id)}
disabled={user.following}>
<i className="material-icons">person-pin</i>
</a>
onClick runs a function which save to DB a connection between current user and other user that the current user wants to follow second one and change a color from grey to grey. But when I clicked it once there is a possibility to click it twice and this way connection between a users is doubled. As I've checked there is no such attr like disable for <a> so is there any other possible solution to make unable to click it second time?
This is callback function for onClick:
followUser(userId){
UserActions.followUser(userId);
}
You can do it simply like this:
followUser(userId) {
if (!this.followUserClicked) {
this.followUserClicked = true;
UserActions.followUser(userId);
}
}
although it depends on your structure, might be better to consider storing this value in some higher level object to not loose value on view updates.
I would suggest to rather handle that in UserActions than in view.
The problem you can face with your code is that your node is probably not re-rendered after user.following changes, keep user.following value in component's state, track when changes and do this.setState({following: user.following}) after it changes, that will trigger view update.
Ok guys. Ive coped with this problem. I've added following variable to the followUser(userId, following), the same I had used to color <a> tag and it works!
followUser(userId, following){
if(!following){
UserActions.followUser(userId);
}
}

Categories