I'm wondering how I can pass non-string data between two pages in Ionic 5 using ReactRouter.
All solutions I could find used Ionic and Angular or just passed one string as URL parameter.
These are my components so far:
App.tsx
const App: React.FC = () => {
return (
<IonApp>
<IonReactRouter>
<IonSplitPane contentId="main">
<Menu />
<IonRouterOutlet id="main">
<Route path="/page/Home" component={Home} exact />
<Route path="/page/DataEntry" component={DataEntry} exact />
<Route path="/page/Request" component={Request} exact />
<Route path="/page/ResultMap" component={ResultMap} exact />
<Redirect from="/" to="/page/Home" exact />
</IonRouterOutlet>
</IonSplitPane>
</IonReactRouter>
</IonApp>
);
};
Page 1 here collects user input data (strings, objects, arrays) and I want to call the route '/page/ResultMap' on Button click and pass the data, so the next page can handle it:
<IonGrid>
<IonRow>
<IonCol class="ion-text-center">
<IonButton text-center="ion-text-center" color="primary" size="default" routerLink='/page/ResultMap'>Erkunden!</IonButton>
</IonCol>
</IonRow>
</IonGrid>
Page 2, which should receive the Data:
const ResultMap: React.FC = () => {
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonMenuButton />
</IonButtons>
<IonTitle>Map</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
</IonContent>
</IonPage>
);
};
I understand the React principle about props and state, I just dont know how to combine it with Ionic in this case.
I appreciate your help!
Edit:
As suggested I changed the button onClick like this:
<IonButton text-center="ion-text-center" color="primary" size="default" onClick={e => {
e.preventDefault();
history.push({
pathname: '/page/ResultMap',
state: { time: transportTime }
})}}>
And try to receive the data on the ResultMap page like this:
let time = history.location.state.time;
But I get the error:
Object is of type 'unknown'. TS2571
7 | let history = useHistory();
8 |
> 9 | let time = history.location.state.time;
| ^
How do I access the passed object on the new page?
as for react-router I know you can use this:
history.push({
pathname: '/template',
state: { detail: response.data }
})
in this situation you can pass data without URL Params
can also use history.replace
if you redirect and want the back button work properly to the end user
and for the history do the following
let history = useHistory();
Check this link for a great understand how to implement the useHistory type
Related
const ImageDetail = ({ record = {} }) => {
return (
<div>
<Avatar style={{ backgroundColor: colour() }}>
{record.MemberFirstName && record.MemberFirstName.charAt(0)}
{record.MemberLastName && record.MemberLastName.charAt(0)}
</Avatar>
</div>
)
}
This is my Avatar code.
<List>
<Datagrid>
<ImageField label="Image" source="MemberImage.src" />
<ImageDetail source="" label="Image" />
</Datagrid>
</List>
Now I'm using both but I need only one at a time if the user uploads an image show the image otherwise it shows an avatar.
It is enough to pass the image source to the <Avatar/>: src prop and it will do the rest - display the image if available or the default avatar image if not.
<List>
<Datagrid>
<AvatarField label="Image" source="MemberImage.src"/>
</Datagrid>
</List>
...
const AvatarField = ({record, source}) => {
return <Avatar src={record && record[source]}/>
}
Though if you really want to access nested property of the record - e.g. MemberImage["src"] - you might need to swap record[source] with lodash's get utility method -> get(record, source)
const ImageDetail = ({ source, record = {} }) => {
return (
<div>
{(record.MemberImage != undefined && record.MemberImage.src != undefined) ? (
<img width='35' height='35' src={`${record.MemberImage.src}`} />)
: (<Avatar style={{ backgroundColor: colour() }}>
{record.MemberFirstName && record.MemberFirstName.charAt(0)}
{record.MemberLastName && record.MemberLastName.charAt(0)}
</Avatar>)
}
</div >
)
}
I am trying to get the filename of my image from a fetch to my rest service. But React tries to require the image before the call has the filename so ofcourse it can't find the image and gives me a 500 error back.
Is there any way to solve or work around this?
I am trying to get the filename from a json which it gets back from the fetch.
The function in which this is supposed to happen
nextPerson = () => {
var numberOfPersons = Object.keys(this.state.peopleList).length;
if (this.state.personIndex < numberOfPersons) {
person = this.state.peopleList[this.state.personIndex]
this.setState({currentPerson:person});
this.setState({image : require('../img/' + Object(this.state.currentPerson.gebruikerFoto).url)});
this.state.personIndex++;
}
}
The render of my component
render() {
var img = this.state.image;
return (
<View style={styles.container}>
<Image style={styles.image} source={img} />
<Text style={styles.persoonNaam}>{this.state.currentPerson.gebruikerNaam}</Text>
<Text style={styles.persoonBio}>{this.state.currentPerson.biografie}</Text>
<TouchableOpacity onPress={this.likePersoon}>
<Text>Like</Text>
</TouchableOpacity>
</View>
);
}
You need to keep your component in loading state, by rendering a shimmer component (react-native-shimmer) or just use ActivityIndicator from react native, until your api call finishes. Once the data is available you can render the Image component.
render() {
if (!this.state.imageUri) return <ActivityIndicator />; // keep showing the loader until the api call is done. Update the state once the call is successful.
return (
<Image /> // your image component
)
see this example:
renderItem = ({item})=>{
return(
<TouchableOpacity onPress={ () => this._openViewPage(item.id, item.cat_id,this.state.token)} style={styles.boxContainer}>
<View style={styles.BoxLeft}>
<H1>{item.title}</H1>
<H2 style={{flexWrap: 'wrap', textAlign: 'right',}}>{item.short_description}</H2>
</View>
<View style={styles.boxRight}>
<Image source={{uri: item.image}} style={{width: 100, height: 100 }} />
</View>
</TouchableOpacity>
)
}
annd in the render of your component you can use it:
<FlatList
data= {this.state.dataSource}
renderItem={this.renderItem}
keyExtractor = { (item, index) => index.toString() }
style={{marginBottom:100}}
/>
I'm trying to use Material UI Tabs for navigation. However, there are routes in my application that match none of the tabs. When I pass a value to the Tabs component that does not match any of the child tab values, I get a warning about an invalid value.
I created a hidden tab will a value of null as a work-around.
Is it possible to disable this warning about an invalid tab value?
Can tabs in Material UI have no selection?
Thanks
The value of the currently selected Tab. If you don't want any selected Tab, you can set this property to false.
From: https://material-ui.com/api/tabs/
What I ended up doing is creating a switch statement with valid tab values, and if windows.location.pathname doesn't match any of them have the default return false.
Example Routes:
class Routes extends Component {
render() {
return (
<Switch>
<Route path={'/test2'} component={Test2} />
<Route path={'/test3'} component={Test3} />
<Route exact path={'/'} component={Test} />
</Switch>
);
}
}
Example NavBar:
checkPathnameValue() {
const { pathname } = window.location;
switch (pathname) {
case '/test2':
case '/test3':
break;
default:
return false;
}
return pathname;
}
render() {
const { classes } = this.props;
const tabValue = this.checkPathnameValue();
return (
<div className={classes.root}>
<AppBar position={'static'}>
<Toolbar>
<Tabs value={tabValue}>
<Tab
label={'Test 2'}
value={'/test2'}
to={'/test2'}
component={Link}
/>
<Tab
label={'Test 3'}
value={'/test3'}
to={'/test3'}
component={Link}
/>
</Tabs>
</Toolbar>
</AppBar>
</div>
);
}
Seems like setting the value property of Tabs to false will not show any warning and will deselect all the tabs correctly.
Philip's solution works perfectly, here I am just removing the need for the switch case.
In my case, I only had one tab (Login) where I wanted no tab to be selected since it is a button rather than a tab.
Here's what I did to solve this:
<Tabs value={this.state.content !== "login" ? this.state.content : false} onChange={(event, newValue) => { this.setState({content: newValue}) }}>
<Tab value="home" label="Home" wrapped />
<Tab value="tab1" label="Tab 1" />
<Tab value="tab2" label="Tab 2" />
</Tabs>
on another part of my AppBar I had a Login button:
<Button onClick={(event, newValue) => { this.setState({content: "login"}) }}>Login</Button >
Similarly to Philips's answer, the key is in {this.state.content !== "login" ? this.state.content : false} which prevents Tabs from being rendered with "login" value. Instead, it is given the value "false" which is allowed and does not invoke the warning.
I also experienced this issue a while back and follow the same pattern.
E.g.,
return <Tabbar value={value ?? false} onChange={(event: React.ChangeEvent<{}>, value: any) => onChange(value)}>{tabs}</Tabbar>
Toggle Effect
To get a toggle effect the listener will need to be placed on the individual <Tab onClick/> events as <Tabs onChange> will not trigger when clicking the same button multiple times.
const Container = ()=>{
const [currentTab,setCurrentTab] = React.useState<string|false>('a')
const handleChange = (val: string) =>
setCurrentTab(val === currentTab ? false : val)
return <Tabs value={currentTab}>
<Tab value='a' label='a' onClick={()=>handleChange('a')}/>
<Tab value='b' label='b' onClick={()=>handleChange('b')}/>
</Tabs>
}
I am working on an application using admin-on-rest framework. For editing an entry on a Resource we provide XXXEdit, XXXShow, XXXCreate props to it. My requirement is that when I click on an Edit button in List view on any entry I should get a Dialog box with the parameters in XXXEdit instead of going to a new page. I tried doing this by using a Dialog in XXXEdit component
<Edit title={<RoleTitle />} {...props}>
<SimpleForm>
<Dialog
title="Dialog With Actions"
actions={actions}
modal={false}
open={true}
>
<TextInput source="id" />
<TextInput source="name" validate={required} />
.
.//some more fields
</Dialog>
</SimpleForm>
</Edit>
I get errors like The TextInput component wasn't called within a redux-form
If I use a DisabledInput then I get an error cannot read value of undefined
How do I go on with this?
I do not think you can use Simpleform for this. You will need to create a custom Form using Redux-Form. Look at the bottom answer that documents the final answer.
This might help you
How to richly style AOR Edit page
Instead of creating a page. You are creating a component that connects to the Redux state and displays as a dialog box.
I tried to resolve this using HOC and react-router.
I created a button using AOR button and provided a containerElement
containerElement={
<Link
key={record.id}
to={{
...{
pathname: `${basePath}/${encodeURIComponent(record.id)}`
},
...{ state: { modal: true } }
}}
/>
}
I created a route like this where DialogRoleEdit is an AOR edit component wrapped with a dialog HOC below .
<Route
exact
path="/roles/:id"
render={routeProps => {
return !!(
routeProps.location.state && routeProps.location.state.modal
) ? (
<Restricted authClient={authClient} location={routeProps.location}>
<div>
<RoleList resource={"roles"} {...routeProps} />
<DialogRoleEdit resource={"roles"} {...routeProps} />
</div>
</Restricted>
) : (
<Restricted authClient={authClient} location={routeProps.location}>
<RoleEdit resource={"roles"} {...routeProps} />
</Restricted>
);
}}
/>
Finally an HOC
handleClose = () => {
this.props.history.goBack();
};
render() {
const actions = [
<FlatButton label="Cancel" primary={true} onClick={this.handleClose} />
];
return (
<Dialog>
<WrappedComponent/>
</Dialog>
)
}
We need to provide edit prop for this resource in App.js
edit={DialogUserEdit}
I am experimenting on custom admin view page and do have one question about the behavior.
The current logic at the moment is:
If the user in not authenticated and tries to visit /admin-panel or its children he/she gets redirected to /& login page.
If user in logged in and visits /& (login page) he/she gets redirected to /admin-panel
The problem is when the user is lodded in and is on /admin-panel and reloads the page the following occurs:
First /& page loads
Then /& redirects user to /admin-panel
If the user was on or /admin-panel/child_component after reload he/she will be on /admin-panel and will have to navigate again to /child_component
Can you please explain what is the cause of current behavior and if there is some way to make user stay on the page the reload was initiated and can the constant redirection be avoided?
The login page /&
import React, { Component } from 'react';
import { Link, browserHistory } from 'react-router';
import { Tracker } from 'meteor/tracker'
class Backdoor extends Component {
onSubmit(event) {
event.preventDefault();
// Collecting user input
const self = this;
const email = $(event.target).find('[name=email]').val();
const password = $(event.target).find('[name=password]').val();
Meteor.loginWithPassword(email, password, function (err) {
browserHistory.push('admin-panel');
});
}
componentWillMount(){
Tracker.autorun(() => {
if (Meteor.user()) {
browserHistory.push('/admin-panel')
} else if(!Meteor.user()) {
browserHistory.push('/&')
}
})
}
render() {
return (
// Login form
);
}
}
export default Backdoor;
React-router paths':
const routes = (
<Router history={browserHistory}>
<Route path='/' component={App}>
<Router path='about' component={About} />
</Route>
<Route path='&' component={Backdoor} />
<Route path='admin' component={AdminPanel}>
<Router path='/admin/admin_component' component={AdminChild} />
</Route>
</Router>
I would change your routes file in the following way:
const routes = (
<Router history={browserHistory}>
<Route path='/' component={App}>
<Route path='about' component={About} />
<Route path='&' component={Backdoor} />
<Route path='admin' component={Admin} />
<Route path='admin/admin_component' component={AdminChild} />
<Route path='admin/admin_panel' component={AdminPanel} />
</Route>
</Router>
);
So we got rid of the nested "Router" components that you had in there and added a "AdminPanel" component.
One of the things I usually do is assign an IndexRoute to my apps. You can look that up and it might provides some benefit, I didn't add it in since you didn't have it in your code.
Another efficiency (IMO) is to nest your admin routes as such:
const routes = (
<Router history={browserHistory}>
<Route path='/' component={App}>
<Router path='about' component={About} />
<Route path='&' component={Backdoor} />
<Route path='admin' component={Admin}>
<Route path='/admin_component' component={AdminChild} />
<Route path='/admin_panel' component={AdminPanel} />
</Route>
</Route>
</Router>
);
Note that the admin panel is nested in the admin route so to get there it would be /admin/admin_panel. Also, I would use "" quotes instead of ''.
First of all I've got rid of /& route and now the Admin Authentication routes look like that:
const newRoutes = (
<Router history={browserHistory}>
<Route path='/' component={App}>
<Router path='about' component={About} />
</Route>
<Route path='/admin' component={Admin} >
<Route path='/admin/admin_child' component={AdminChild} />\
// Feel free to add more routes here
</Route>
</Router>
);
So inside the admin route you define if statement for checking if user is logged in. The hole component looks like that:
export class Admin extends Component {
componentWillMount(){
Tracker.autorun(() => {
if(!Meteor.userId()) {
browserHistory.push('/admin')
}
})
}
render(props) {
if (Meteor.userId()){
return (<div><JuliaNav />{this.props.children}</div>)
} else {
return (<div><Backdoor /></div>)
}
}
}
So if the admin is not logged in React returns log-in form, and if he/she is logged in the component returns AdminNavigation for further interaction with data.
Tracker checks the state of user and if the button Log Off (inside AdminNavigation) will be clicked the page will be reloaded (with browserHistory.push) and AdminNavigation component will be replaced with the log-in form.