ActiveRecordBase has both OnSave and OnUpdate but does not have OnCreate, why and how can it be implemented? I'm using IsUnsaved in OnUpdate to determine if this is a Create or an Edit operation. Is there any better way?
There is no OnCreate because ActiveRecord "events" are based on NHibernate's IInterceptor, and IInterceptor doesn't have any OnCreate.
However, OnSave is called for new persistent objects only, and OnUpdate only for updates, so there is no need to check IsUnsaved anywhere. Here's the test that covers this.
Related
I am using react-bootstrap-typeahead version 5.2.1 with onSearch method to handle async typeahead search. The issue is when user types a long number(eg: 99999180) very slowly or stop typing after 999999 then continue typing 180(you can see the sequence from the network), we cannot get the returned results as the query parameter shows 9999918 only. However, 999999180 does exists in the database. The same codes are working fine with same scenario based on the old react-bootstrap-typeahead version 3.4.7. Not quite sure this is a defect for version 5.2.1? thanks in advance.
const onSearch = async (query) => {
setIsLoading(true);
try {
const data = await typeaheadSearch(query);
......
} finally {
setIsLoading(false);
......
}
};
Got answer from https://github.com/ericgio/react-bootstrap-typeahead/blob/master/docs/Upgrading.md#v50-breaking-changes release notes
AsyncTypeahead rewritten with hooks
This should generally be a transparent change. There is at least one instance where it could break existing code, however: if your onSearch handler is re-instantiated on each render, this will cancel the debounced function and potentially prevent onSearch from being called. To avoid this, either bind the handler in the constructor or use class properties (if using a class component) or use useCallback with a dependency array (if using a functional component):
So I am trying to work with FullCalendar and I want to have the user be able to edit an event details, click update and I locally update the event and then push it up to the server. I have the following code, but the issue is when there are multiple changes, is calling the event callback multiple times. Is there a way I could do this just once to save on many API calls? Here is the code I have
let currentEvent = calendarApi.getEventById(eventId);
currentEvent.setExtendedProp('notes', notes);
currentEvent.setExtendedProp('person', person);
Maybe there is a different method I am just not seeing in the docs?
The undocumented mutate method that's used to implement setExtendedProp accepts an object that can have multiple properties. You could use it like this:
event.mutate({
extendedProps: {
notes: notes,
person: person,
},
})
or, using object property value shorthand:
event.mutate({extendedProps: {notes, person}})
I have absolutely no experience with fullcalender though, so use at your own risk!
I'm working on one of my first react projects and got this question.
What is the best way to handle and store data in react with using this.state?
My current workflow:
fetch data from api in componentDidMount()
storing the data in this.state (for example in this.state.account_data as child object`
using the data in value attributes of controls like <input> in this way: this.state.account_data.username
each control has his own onChange-handler onChange={e => this.onChangeUsername(e)}
The method onChangeUsername(e) changes this.state with this.setState({username: e.target.value}).
So, the problem is: After changing the unsername control value, I have two variants of the username in this.state: this.state.account_data.username and this.state.username. That requires to create another part of code to update this.state.account_data, because I want to send the new data to the API by UserService.update(this.state.account_data).
Is there an easier way or what is the best practice?
According to official documentation, React suggests to use this library to handle data mutations: immutability-helper.
The idea is that in your onChangeUsername(e) you will copy the original part of state you need to update with update function. In this case const myNewAccountData = update( this.state.account_data, ... ) and then you set the new state with this.setState({account_data : myNewAccountData }).
See this answer for an example on updating nested object with immutability-helper.
And Here you can find an explanation on why to avoid nested object as React state or at least why it may be considered not a best practice.
I've just started using Recoil on a new project and I'm not sure if there is a better way to accomplish this.
My app is an interface to basically edit a JSON file containing an array of objects. It reads the file in, groups the objects based on a specific property into tabs, and then a user can navigate the tabs, see the few hundred values per tab, make changes and then save the changes.
I'm using recoil because it allows me to access the state of each input from anywhere in my app, which makes saving much easier - in theory...
In order to generate State for each object in the JSON file, I've created an component that returns null and I map over the initial array, create the component, which creates Recoil state using an AtomFamily, and then also saves the ID to another piece of Recoil state so I can keep a list of everything.
Question 1 Is these a better way to do this? The null component doesn't feel right, but storing the whole array in a single piece of state causes a re-render of everything on every keypress.
To Save the data, I have a button which calls a function. That function just needs to get the ID's, loop through them, get the state of each one, and push them into an Array. I've done this with a Selector too, but the issue is that I can't call getRecoilValue from a function because of the Rules of Hooks - but if I make the value available to the parent component, it again slows everything right down.
Question 2 I'm pretty sure I'm missing the right way to think about storing state and using hooks, but I haven't found any samples for this particular use case - needing to generate the state up front, and then accessing it all again on Save. Any guidance?
Question 1
Get accustomed to null-rendering components, you almost can't avoid them with Recoil and, more in general, this hooks-first React world 😉
About the useRecoilValue inside a function: you're right, you should leverage useRecoilCallback for that kind of task. With useRecoilCallback you have a central point where you can get and set whatever you want at once. Take a look at this working CodeSandbox where I tried to replicate (the most minimal way) your use-case. The SaveData component (a dedicated component is not necessary, you could just expose the Recoil callback without creating an ad-hoc component) is the following
const SaveData = () => {
const saveData = useRecoilCallback(({ snapshot }) => async () => {
const ids = await snapshot.getPromise(carIds);
for (const carId of ids) {
const car = await snapshot.getPromise(cars(carId));
const carIndex = db.findIndex(({ id }) => id === carId);
db[carIndex] = car;
}
console.log("Data saved, new `db` is");
console.log(JSON.stringify(db, null, 2));
});
return <button onClick={saveData}>Save data</button>;
};
as you can see:
it retrieves all the ids through const ids = await snapshot.getPromise(carIds);
it uses the ids to retrieve all the cars from the atom family const car = await snapshot.getPromise(cars(carId));
All of that in a central point, without hooks and without subscribing the component to atoms updates.
Question 2
There are a few approaches for your use case:
creating empty atoms when the app starts, updating them, and saving them in the end. It's what my CodeSandbox does
doing the same but initializing the atoms through RecoilRoot' initialState prop
being updated by Recoil about every atom change. This is possible with useRecoilTransactionObserver but please, note that it's currently marked as unstable. A new way to do the same will be available soon (I guess) but at the moment it's the only solution
The latter is the "smarter" approach but it really depends on your use case, it's up to you to think if you really want to update the JSON at every atom' update 😉
I hope it helps, let me know if I missed something 😊
I am working on an app using React with Alt flux implementation.
Currently, I'm trying to figure out the best way to use data from multiple Alt stores to compose a request to the backend.
Say, I have a SheetDataStore, FiltersStore and a fetchFilteredData method in my DataSource file. To get proper data from backend, i need to pass to fetchFilteredData both some sheet data and filters, but when you call the fetchFilteredData method from one of the stores, you can pass some arguments and the state of just that exact store.
So i see 2 ways of handling this case:
1) I make 2 actions: prepareFilters and fetchData. The prepareFilters is called from a component and gets handled by FilterStore, which prepares all required data and after that calls fetchData action, passing the prepared data as an argument. The SheetDataStore handles the fetchData action and calls the fetchFilteredData having all required data now.
What i don't like here is that it seems to me, Stores should not be calling actions, so that's kind of a hacky solution.
2) I import FilterStore to the SheetDataStore and use FilterStore.getState() inside of one of SheetDataStore methods to get all the data i need. That seems easy, but there might be some pitfalls of coupling the stores like that.
Are there any best practices for such a case? Maybe some of you faced similar issue and can recommend which of the paths to take from your experience?
Do the binding in the component. Say you have FilterComponent then pass the search action SheetDataAction.search to it:
<FilterComponent search={SheetDataAction.search} />
And in the FilterComponent.render() do something like <button onClick={() => this.props.search(this.props.criteria)} />