Hi guys, i’m a super beginner with Framework7 and React. I’m trying to create a super easy app but I can’t move on.
this is the basic structure:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Framework7 from 'framework7/framework7-bundle';
import Framework7React from 'framework7-react';
import App from './App';
import 'framework7/framework7-bundle.css';
Framework7.use([Framework7React]);
ReactDOM.render(
React.createElement(App),
document.getElementById('app')
);App.js
import React from 'react';
import {App, View} from 'framework7-react';
import Login from './Login.js';
import Home from "./Home";
import Planning from "./Planning/Planning";
const f7params = {
name: "IrideWEB Mobile",
id: 'com.rietectecnici.iride',
routes: [
{
path: '/login/',
component: Login
},
{
path: '/home/',
component: Home
},
{
path: "/planning-ord/:date/",
component: Planning
},
{
path: "/planning-extra/:date/",
component: Planning
},
]
}
const username = localStorage.getItem("username");
const token = localStorage.getItem("access_token");
const app = () => (
<App {...f7params}>
<View main url={username && token ? "/login/" : "/login/"} />
</App>
);
export default app;
Login.js
import React from 'react';
import {
Page,
Block,
BlockTitle,
List,
NavTitle,
Navbar, ListInput, ListButton,
f7,
} from 'framework7-react';
import axios from "axios";
import qs from "qs";
import IWAjax from "./IWAjax";
import Config from "./Config";
class Login extends React.Component{
constructor(props) {
super(props);
this.state = {
username: "",
password: ""
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleClick({f7router}){
const config = new Config();
const self = this;
console.log(this);
const formData1 = {
username: self.state.username,
password: self.state.password,
codicecliente: config.codicecliente
};
axios({
method: 'POST',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
data: qs.stringify(formData1),
url: config.iride_url + "/ajax.php?JSON=1&object=IWUser&tipoview=login"
}).then(res => res.data.ret === "true").then(function(ret){
if(!ret)
{
f7.dialog.alert("Credenziali Errate");
return false;
}
localStorage.setItem("username", self.state.username);
IWAjax({
app: f7,
route: "getRietecAppCredenziali",
success: function (res) {
return f7router.navigate("/home/");
}
});
})
}
handleInputChange(event){
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
render() {
return (
<Page name="login">
<Navbar>
<NavTitle>IrideWeb</NavTitle>
</Navbar>
<Block>
<BlockTitle>Area Riservata</BlockTitle>
<List noHairlinesMd>
<ListInput
type="text"
placeholder="Username"
name="username"
clearButton
onChange={this.handleInputChange}
/>
<ListInput
type="password"
placeholder="Password"
name="password"
clearButton
onChange={this.handleInputChange}
/>
</List>
<List inset>
<ListButton title="Login" type="submit" onClick={this.handleClick.bind(this)}/>
</List>
</Block>
</Page>When I’m trying to login and it fails instead of opening the popup i receive an error:
Unhandled Rejection (TypeError): framework7_react__WEBPACK_IMPORTED_MODULE_1__.f7.dialog is undefined
Can you tell me please why? Thanks!