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!
Related
I've been playing around with React and Azure App Insights.
const appInsights = useAppInsightsContext();
For Events and Metrics only, there seems to be 2 ways of doing things. Why is this? And why is it only for these 2 things only ie for PageViews or exceptions you can only use the second way (appInsights.trackPageView, appInsights.trackException)
//first way
const trackEventHook = useTrackEvent(
appInsights,
"AppInsightsPage Track Event Hook",
{ extraData: "some extra data important to this" },
false
);
trackEventHook({ extraData: "function call extra data" });
//2nd way
appInsights.trackEvent({ name: "AppInsightsPage Custom Event" }, undefined);
While using Application Insight, we use TrackEvent in our code to count various events. How often users choose a particular feature or maybe how often they make particular choices.
For Example, we want to understand the user behavior on a site and we want to know about specific actions like clicking the Add to Cart button.
This can be done by two ways :
Using trackEvent Method
appInsights.trackEvent({ name: 'EventName', properties: { anyProperty } })
We use appInsights object that we are exporting and pass some data to trackEvent, the name of the event we are tracking and any custom properties we want to include in the event.
Using React Plugin useTrackEvent Hook
const trackEventName = useTrackEvent(appInsights, "Event Name", condition);
The useTrackEvent Hook is used to track any custom event that an application may need to track, such as a button click or other API call. It takes four arguments:
Application Insights instance (which can be obtained from the useAppInsightsContext Hook).
Name for the event.
Event data object that encapsulates the changes that has to be tracked.
skipFirstRun (optional) flag to skip calling the trackEvent call on initialization. Default value is set to true.
trackExpection is used to log exception which are related to API, we don't know when they will happen and for trackPageView, page view telemetry is sent by default when each screen or page is loaded. So, in trackExpection and trackPageView we don't have any data object to track any changes. That's why we don't use useTrackEvent hook for this two.
For more information please check the following Microsoft Documents:
React Plugins for Application Insights.
Application Insight API.
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.
How to call back the effect operation when clicking the prev button using method or function with fullcalendar4 in react?
At present, I can only think of this way:
componentDidMount(){
document.querySelector('.fc-prev-button').addEventListener('click', e => {console.log(e)})
}
componentDidMount(){
document.querySelector('.fc-prev-button').addEventListener('click', e => {console.log(e)})
}
Looks like it works with React. Have you read some docs here about callbacks, or here specifically working with react and the underlying calendar's ref?
I've created a simple code sandbox that uses the callback style you try, and also using the API. Between the two, your method seems less recommended, but IMO is a little cleaner as it uses all the existing in-place UI, but is susceptible to being a little more brittle as the class names could potentially change, whereas using the API for next/prev these are calling methods directly so less likely to change.
I guess it depends a lot on what exactly you're trying to accomplish here, but what you have will "piggyback" off the button click, so if you're just trying to do something on the side it'll work.
I'm using react-apollo as a client to communicate with a GraphQL server that I created. I managed to successfully get subscriptions working with the data.subscribeToMore() function as detailed in the Apollo documentation and the up-to-date data shows up when I run my web application inside of two windows. What I'm trying to do is make it so that an notification alert gets displayed when another client changes data that I'm currently looking at so that I can tell that something changed in case I wasn't paying attention? What would be the correct way of doing this?
update method?
updateQueries method?
The dataFromObjectId and refetchQueries fields did not seem relevant for what I was trying to do. Since I'm using redux, is there a way I could dispatch actions directly from my subscription? Would notification alerts be something that I have to use client.subscribe() with?
Assuming you're using the latest version of Apollo, you should be handing the component a prop named "updateQuery" that contains logic for handling the data.
http://dev.apollodata.com/react/subscriptions.html#subscribe-to-more
This section goes over what you need to do, but essentially your "updateQuery" function should do the following:
Take in an object of structure argumentName.data which contains the new information.
Adds the new object to the results by creating a new object.
Returns the new results object.
so it might look something like this:
(prev, { subscriptionData }) => {
if (!subscription.data) {
//If no new data, return old results
return prev;
}
var newResults = Object.assign(
{},
prev,
queryName: { [subscriptionData.data, ...prev[queryName]] }
);
return newResults;
I'm facing a bit of confusion in the planning of my ReactJS/Flux app. It will be hooking into the WP Api which has the following endpoints:
/api/stores/
/api/posts/
/api/settings/
What would be the best approach from a build perspective? My thoughts currently are to have the following:
API -> ActionCreator -> Store -> ActionCreator -> View(s)
Meaning that in some cases each view will contain change listeners for up to three stores and the potential for a lot of duplicated code.
Another alternative is one actionCreator to many stores, but I am not sure which is the best for scalability.
Can anyone help on this?
ActionCreator is not involved between stores and views just between server/store or views/server
API -> ActionCreator -> Store ---binding_eventChange---> View(s) --actionCreator-->request ...etc
For my api I use one store for each endpoint of the api which are one type of data.
A view will be indeed binded to many stores (3,4,5stores ...etc) that's why I cut the view in several subviews, each subview is binded to one type of data/store.
So I have a big parent view wich render several sub tiny views, it allows to have simple (sub)views easy to read and it also make the code very modular, you can easily make composition of subviews.
Edit:
In your example in comment what you want to do is: 1.Loading your view 2.Your view is requesting a type of data 3.your store receive the asked data. 4.Your view, binded to the store, updates using the new data.
I'll write it quickly in pseudo-code:
1.In your view:
componentDidMount() {
//calling your actioncreator to init the first call to the server
ActionCreator.requestSomeTypeofData();
// Set your store listener so your view can update when the data are here
SomeTypeofDataStore.on('change', handler);
}
handler: function() {
var data = SomeTypeofDataStore.getAll();
this.setState({ data:data });
}
In your actionCreator:
actionCreator.requestSomeTypeofData = function() {
MakeAjaxCall({
success: function(data) {
Dispatcher.handleViewAction({
actionType:"SomeTypeofData",
result: data
});
}
}
Store: when the ajax call is done, new data are dispatched to the store
Basically you are using Dispatcher.register and a switch to select the right action for your store (I let you look at the flux tutorial for that but I guess you know that already).
You also bind a 'change' event when you register new data (see tutorial and how they use EventEmitter that's easy). (example here: https://facebook.github.io/flux/docs/todo-list.html#creating-stores)
Your view receive the update event, call the handler register new state and rerender with your new data
I hope it's clear :)