I have some custom logic in react admin comonent (actually try to implement DatePicker). So i need to use useRefresh and pass some payload inside. But something goes wrong(it seems that useRefresh do not accept any arguments). How could i achieve this?
for simplify logic below is simple code:
const refresh = useRefresh()
<Button onClick={()=>{myFunc(start_date, end_date)}}>
const myFunc = (start_date, end_date) => {
refresh ({filter:{start_date:start_date, end_date:end_date}}) // Could i pass variables inside refresh() or how i could achive this ?
}
Related
I am creating a function that handles some logic from a switch change, but the follow doesn't work, but when I add the arrow part it does, but I don't understand what the arrow is doing in this context????
Underlying logic that is getting triggered to call my function
const [verbose, setVerbose] = useState(false)
<Switch
trackColor={{ false: "#767577", true: "#81b0ff" }}
thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
ios_backgroundColor="#3e3e3e"
onValueChange={userChangedVb}
value={verbose}
/>
What doesn't work:
function userChangedVb(vb) {
//other logic
setVerbose(!vb )
}
What does work:
function userChangedVb(vb) {
//other logic
setVerbose(vb => !vb )
}
Can someone explain why? I guess I don't know what the arrow is doing inside the set state call? I'm still new to react native and usually when I use or see the arrow its something like this () => to generate a new function.
EDIT: This is mostly from the example here, which has the expo emulator so its really easy to try/experiment this code: https://reactnative.dev/docs/switch#onchange
EDIT: part of the problem is the vb parameter comming in has already been changed, so if I use:
function userChangedVb(vb) {
//other logic
setVerbose(vb )
}
It works as intend.
I'm using i18n for localization in my project but whenever i change the language, all page's translate is okay except grid header names! Its getting normal when i refresh the page.How can fix this situation without refresh ?
You can fix this by calling the refreshHeader function on the reader API.
try this :
this.gridApi.refreshHeader();
where the gridApi is the API object you get from the onGridReady event params.
EDIT, how to get the gridApi :
the gridApi u get from the params of the onGridReady method being called by the AgGrid component.
if you are using reactJs, an attribute named onGridReady in your agGrid component would accept that function.
onGridReady = params => {
this.gridApi = params.api
this.gridColumnApi = params.columnApi
...
}
If you are using headerName, maybe try to use computed() function to get ColDef
Ex:
const colDef = computed(() => // coldef here)
I am using Nuxt.js with Vuex and I would like to trigger a mutation when somebody enters in my web with a certain parameter (ex: https://example.com/?param=abc), and pass the parameter to a state.
I tried to check the documentation of the watchQuery property https://nuxtjs.org/api/pages-watchquery, but there’s no examples about how to do this, I just found this How to watch on Route changes with Nuxt and asyncData but I can’t see any way of how to write an action in Vuex store with watchQuery.
I tried writing:
actions: {
watchQuery: true,
asyncData ({ query, app }) {
const { start } = query
const queryString = start ? `?start=${start}` : ''
return app.$axios.$get(`apps/${queryString}`)
.then(res => {
commit('setParam',res.data);
})
},
}
But that syntax is not allowed.
Any help would be welcome, thanks in advance!
From my understanding watchQuery sets a watcher for query string, meaning it's waiting for the query to change while the page is already rendered making it possible to call methods like asyncData() again.
Since you only want to save a certain parameter when the user enters the page and then pass the paramater to a state you just need to move your asyncData method to a page from which you want to get the parameter, you will also need to extract store and query from the context automatically passed into asyncData and then using the store and query save the query parameter into your state.
Here is a simple demonstrantion
// Your page from which you want to save the param
export default {
asyncData({store, query}) { // here we extract the store and query
store.state.somethingForSavingTheParam = query.nameOfTheParamYouWantToSave
// instead of using store.state you could use store.commit(...) if that's what you want
}
}
Trying to figure out which is the way to handle data into react components.
Im actually trying these two ways:
A) The State Way
componentWillReceiveProps(nextProps) {
if (!nextProps.allPostsQuery.loading && !nextProps.allPostsQuery.error) {
this.setState({
postList: nextProps.allPostsQuery.allPosts,
})
}
}
render () {
return (
<FlatList data={this.state.postList}>
)
}
B) The Prop Way
render () {
return (
<FlatList data={this.props.allPostQuery.data}>
)
}
Any suggestions on which/why ?
I imagine that you have implement request from GraphQL because of the apollo-client tag. Hypothesize that if you do not implement Redux, so state way is to make sure the component be refresh because the render method will be triggered. If you already have Redux, so props way is the best way because render method will be trigger when your data change in global state.
you can just use the props way directly. since you're using apollo-client, it is already saved in a redux store. so whenever there's an update in the data from any component, you'll also receive it in this component and thus automatically trigger a re-render.
I'm using a higher-order wrapper component as a root that accomplishes 2 things:
Verify auth (redirect to login or home)
Do the initial load to store once the auth is complete.
I'm finding it hard to do those 2 things in this one wrapper class because I can't find a way to do a one-time initial load trigger if the user is not authenticated(has no existing session)
So for example I trigger a load when there is a session with a callback:
componentWillMount: function() {
LoginStore.addChangeListener(this._onChange);
var authData = AuthAPIUtils.checkForSession();
if(authData !== null) {
WebAPIUtils.loadStores(this.onBootstrapComplete);
}
},
"this.onBootstrapComplete" is a callback that will change the wrapper state
onBootstrapComplete: function() {
console.log("5-the final callback was made - onBootstrapComplete");
//localStorage.setItem( 'gvLoggedIn', true ); This is set true in home
this.setState({
bootstrapComplete: true,
});
},
"this.state.bootstrapComplete" is passed down the child components to switch from a loading spinner to rendering the components
render: function(){
if(this.state.loggedIn) {
var childrenWithProps = React.Children.map(this.props.children,function(child) {
return React.cloneElement(child,{bootstrapComplete : this.state.bootstrapComplete})
},this);
return (
<div className="wrapper-container">
{childrenWithProps}
</div>
)
}
else {
return (
<div className="wrapper-container">
<Login />
</div>
)
}
But when there isn't a session this callback solution for a one-time trigger breaks down.
I looked hard for a solution and the best I've come up with is:
The wrapper can only listen to a "LoginStore" which should only trigger once when there is a login and logout and then use _onChange to check for a log in and trigger the loading then.
Create a handler in the wrapper class and pass it down to the Login class as a callback.
Maybe one of those solutions is just fine(let me know if so) but I wanted to make sure I'm not doing something fundamentally poor to bootstrap my app.
For me it looks like the good approach. Just one point maybe, AuthAPIUtils should be an action file (but maybe it is already) and manage the dispatching. Reading at your code I think you're already using it this way. Otherwise I think your approach
1.The wrapper can only listen to a "LoginStore" which should only trigger once when there is a login and logout and then use _onChange to check for a log in and trigger the loading then.
2.Create a handler in the wrapper class and pass it down to the Login class as a callback.
is good