We Keep Coding

Inertia ProgessBar show under Appbar React MUI

i have inertia progress bar initialized in my app.js
app.js
import React from "react";
import { render } from "react-dom";
import { createInertiaApp } from "#inertiajs/inertia-react";
import { InertiaProgress } from "#inertiajs/progress";
createInertiaApp({
resolve: (name) => require(`./Pages/${name}`),
setup({ el, App, props }) {
render(<App {...props} />, el);
},
});
InertiaProgress.init({
// The color of the progress bar.
color: "red",
// Whether the NProgress spinner will be shown.
showSpinner: true,
});
but the progressbar won't appear every time I render the appbar in the layout, its only the layout file, because if I render without it The progressbar will appear as usual
here is my Layout.tsx
import {
Button,
Container,
ListItem,
ListItemIcon,
ListItemText,
useTheme,
} from "#mui/material";
import React from "react";
import { styled, ThemeProvider } from "#mui/material/styles";
import CssBaseline from "#mui/material/CssBaseline";
import MuiDrawer from "#mui/material/Drawer";
import Box from "#mui/material/Box";
import MuiAppBar, { AppBarProps as MuiAppBarProps } from "#mui/material/AppBar";
import Toolbar from "#mui/material/Toolbar";
import List from "#mui/material/List";
import Typography from "#mui/material/Typography";
import Divider from "#mui/material/Divider";
import IconButton from "#mui/material/IconButton";
import MenuIcon from "#mui/icons-material/Menu";
import ChevronLeftIcon from "#mui/icons-material/ChevronLeft";
import { listItems } from "./ListItems";
import { usePage } from "#inertiajs/inertia-react";
import { Inertia } from "#inertiajs/inertia";
import route from "ziggy-js";
import FlashMessage from "./FlashMessage";
import { withStyles } from "#mui/styles";
const Layout = ({
children,
title,
}: {
children: React.ReactNode;
title: React.ReactNode;
}) => {
const theme = useTheme();
const authUser: any = usePage().props.user;
const drawerWidth: number = 240;
interface AppBarProps extends MuiAppBarProps {
open?: boolean;
}
const [open, setOpen] = React.useState(false);
const toggleDrawer = () => {
setOpen(!open);
};
const handleLogout = () => {
if (confirm("are you sure want to logout?")) {
Inertia.post(route("logout"));
}
};
return (
<ThemeProvider theme={theme}>
<Box sx={{ display: "flex" }}>
<CssBaseline />
<AppBar position="absolute" open={open}>
<Toolbar
sx={{
pr: "24px", // keep right padding when drawer closed
}}
>
<IconButton
edge="start"
color="inherit"
aria-label="open drawer"
onClick={toggleDrawer}
sx={{
marginRight: "36px",
...(open && { display: "none" }),
}}
>
<MenuIcon />
</IconButton>
<Typography
component="h1"
variant="h6"
color="inherit"
noWrap
sx={{ flexGrow: 1, marginLeft: 2 }}
>
{title}
</Typography>
<Button
{...(authUser ? { display: "none" } : { sx: {} })}
variant="text"
color="inherit"
onClick={handleLogout}
>
Logout
</Button>
</Toolbar>
</AppBar>
<Drawer variant="permanent" open={open}>
<Toolbar
sx={{
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
px: [1],
}}
>
<IconButton onClick={toggleDrawer}>
<ChevronLeftIcon />
</IconButton>
</Toolbar>
<Divider />
<List>{listItems}</List>
</Drawer>
<Box
component="main"
}}
>
<Toolbar />
<FlashMessage />
<Container sx={{ marginTop: "50px" }}>{children}</Container>
</Box>
</Box>
</ThemeProvider>
);
};
export default Layout;
I think my progressbar appears under the appbar, is there any solution to this problem?

Just find out what the zIndex for your AppBar is (1100 by default I think)
console.log(Theme.zIndex.appBar)
Then on your CSS file, add a line to make the zIndex of the progress bar higher:
#nprogress .bar {
z-index: 1101!important;
}

React.js: How to convert class based component to functional?

I'm building an app using function based component. I found the sidebar menu template from Material Ui in classes and want to convert it to functional component. But after converting click button doesn't work. I've only changed the menu icon to another.
Any help will be appreciated.
Here is the default component in classes
import React from "react";
import AppBar from "#material-ui/core/AppBar";
import Toolbar from "#material-ui/core/Toolbar";
import Typography from "#material-ui/core/Typography";
import Button from "#material-ui/core/Button";
import IconButton from "#material-ui/core/IconButton";
import MenuIcon from "#material-ui/icons/Menu";
import { NavDrawer } from "./NavDrawer";
class NavBar extends React.Component {
constructor(props) {
super(props);
this.state = {
drawerOpened: false
};
}
toggleDrawer = booleanValue => () => {
this.setState({
drawerOpened: booleanValue
});
};
render() {
return (
<div className="App">
<AppBar position="static">
<Toolbar>
<IconButton
color="secondary"
aria-label="Menu"
onClick={this.toggleDrawer(true)}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" color="inherit">
News
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
<NavDrawer
drawerOpened={this.state.drawerOpened}
toggleDrawer={this.toggleDrawer}
/>
</div>
);
}
}
export default NavBar
Here I'm trying to convert
import React, { useState } from 'react'
import AppBar from '#material-ui/core/AppBar'
import Toolbar from '#material-ui/core/Toolbar'
import Typography from '#material-ui/core/Typography'
import IconButton from '#material-ui/core/IconButton'
import NavDrawer from './NavDrawer'
import AddShoppingCartIcon from '#material-ui/icons/AddShoppingCart'
function NavBar(props) {
const [drawerOpened, setDrawerOpened] = useState(false)
const toggleDrawer = booleanValue => () => {
setDrawerOpened(booleanValue)
}
return (
<div className="App">
<AppBar position="static">
<Toolbar>
<IconButton
aria-label="AddShoppingCartIcon"
onClick={() => toggleDrawer(true)}
>
<AddShoppingCartIcon style={{ fontSize: 30 }} color="secondary" />
</IconButton>
<Typography variant="h6" color="inherit"></Typography>
</Toolbar>
</AppBar>
<NavDrawer drawerOpened={drawerOpened} toggleDrawer={toggleDrawer} />
</div>
)
}
export default NavBar

Have a look at React hooks, there ae two approaches:
const [toggleDrawer, setToggleDrawer] = useState(false); // set variable
<button onClick={() => setToggleDrawer(!toggleDrawer}>
Of you can useEffect to perform some logic after the component is initially rendered, preventing a max error:
const toggleDrawer = false;
useEffect(() => { // update variable
checkDrawOpened(toggleDrawer)
}, toggleDrawer);]
With the one click
onClick={toggleDrawer} // use variable

You can do this instead for toggling actions.
const toggleDrawer = () => {
setDrawerOpened(!drawerOpened)
}
And in the return
onClick={toggleDrawer}
Your function is stacking. On onclick, you try to call function to call function. Just use the const instead.
on toggleDrawer const, you should set setDrawerOpened to whenever the opposite of value it is to get toggling effect.

React: ProgressiveMobileStepper handleNext function does not work (Material UI)

Dear community I am currently writing a website and its user onboarding using the ProrgressiveMobileStepper using Material UI. You can find my website here:
https://konekto-eeioq6hwh.now.sh/first_use
Apart from the formatting being screwed up (for which I would also appreciate your help), I am mainly concerned that the next button does not work. I have structured that the several screens are conditionally rendered in index.js depending on the state and the handleNext function should be called from ProgressiveMobileStepper when the button is clicked. However, the screen does not update then.
index.js file:
import React from 'react';
import { Grid, Container } from '#material-ui/core';
import { Header } from '../Layout';
import logo from './android-icon-192x192.png';
import { withStyles } from '#material-ui/core/styles';
import ExplanationAboutProcess0 from './Explanation0';
import ExplanationAboutProcess1 from './ExplanationProcess1';
import ExplanationAboutProcess2 from './ExplanationProcess2';
import ExplanationAboutProcess3 from './ExplanationProcess3';
import ProgressiveMobileStepper from './ProgressiveMobileStepper';
const styles = theme => ({
container: {
alignItems: 'center',
border: 'black',
'border-width': 'medium',
'margin-top': '80px',
background: 'rgba(255, 255, 255, 0.8)',
'border-radius': '20px'
},
picture: { display: 'block', margin: '0 auto' },
box: { width: '230px' }
});
class FirstUse extends React.Component {
constructor(props) {
super(props);
this.classes = props.classes;
this.state = {
componentType: 'explanationaboutprocess0'
};
this.handleNext = this.handleNext.bind(this);
this.handleBack = this.handleBack.bind(this);
}
fun() {
//this.props.history.push('/settings');
}
handleNext(e) {
console.log(e);
console.log(this.componentType);
if (this.componentType == 'explanationaboutprocess0')
this.setState({ componentType: 'explanationaboutprocess1' });
}
handleBack(e) {
console.log(e);
if (this.componentType == 'explanationaboutprocess1')
this.setState({ componentType: 'explanationaboutprocess0' });
}
render() {
let component;
if (this.state.componentType == 'explanationaboutprocess0') {
component = (
<ExplanationAboutProcess0
handleNext={this.handleNext}
handleBack={this.handleBack}
/>
);
} else if (this.state.componentType == 'explanationaboutprocess1') {
component = (
<ExplanationAboutProcess1
handleComponentType={this.handleComponentType}
handleBack={this.handleBack}
/>
);
} else if (this.state.componentType == 'explanationaboutprocess2') {
component = (
<ExplanationAboutProcess2
handleComponentType={this.handleComponentType}
handleBack={this.handleBack}
/>
);
} else if (this.state.componentType == 'explanationaboutprocess3') {
component = (
<ExplanationAboutProcess3
handleComponentType={this.handleComponentType}
handleBack={this.handleBack}
/>
);
}
return (
<React.Fragment>
<Header title="Learn how to send SOS" />
<Grid
container
className={this.classes.container}
direction="column"
spacing={2}
>
<Grid item sm={12} className={this.classes.item}>
<img src={logo} alt="Logo" />
</Grid>
<Grid item sm={12} className={this.classes.item} />
<Container component="main" maxWidth="sm">
{component}
</Container>
</Grid>
<Grid item sm={12} className={this.classes.item}>
<ProgressiveMobileStepper />
</Grid>
</React.Fragment>
);
}
}
export default withStyles(styles)(FirstUse);
ProgressiveMobileStepper.js file:
import React from 'react';
import { makeStyles, useTheme } from '#material-ui/core/styles';
import MobileStepper from '#material-ui/core/MobileStepper';
import Button from '#material-ui/core/Button';
import KeyboardArrowLeft from '#material-ui/icons/KeyboardArrowLeft';
import KeyboardArrowRight from '#material-ui/icons/KeyboardArrowRight';
const useStyles = makeStyles({
root: {
maxWidth: 400,
flexGrow: 1
}
});
export default function ProgressMobileStepper(props) {
const classes = useStyles();
const theme = useTheme();
const [activeStep, setActiveStep] = React.useState(0);
return (
<MobileStepper
variant="progress"
steps={6}
position="static"
className={classes.root}
nextButton={
<Button
size="small"
onClick={props.handleNext}
disabled={activeStep === 5}
>
Next
{theme.direction === 'rtl' ? (
<KeyboardArrowLeft />
) : (
<KeyboardArrowRight />
)}
</Button>
}
backButton={
<Button
size="small"
onClick={props.handleBack}
disabled={activeStep === 0}
>
{theme.direction === 'rtl' ? (
<KeyboardArrowRight />
) : (
<KeyboardArrowLeft />
)}
Back }
</Button>
}
/>
);
}
Just as an example, you can see two of the screens, which should be conditionally rendered below:
Explanation0.js file:
import React from 'react';
import { Typography } from '#material-ui/core';
export default class ExplanationAboutProcess1 extends React.Component {
constructor(props) {
super(props);
this.classes = props.classes;
this.state = {};
}
render() {
return (
<React.Fragment>
<Typography>
Konnekto allows you to send an emergency request from you phone
without requiring a celluar connection. Please enter your personal
information.
</Typography>
</React.Fragment>
);
}
}
ExplanationProcess1.js file:
import React from 'react';
export default class ExplanationAboutProcess1 extends React.Component {
constructor(props) {
super(props);
this.classes = props.classes;
this.state = {};
}
render() {
return (
<React.Fragment>
<p>
To explain you how you would use the app in case of emergency, we
guide you through which questions we ask you:
<br />
0.1 Are you affected yourself?
<br />
0.2 How do you want to contact?
</p>
</React.Fragment>
);
}
}
I would really appreciate your help!

TypeError: enterPage is undefined in OnsenUI 2 React navigator

I'm try to create a simple SideMenu component with OnsenUI Splitter like below:
import React, { PropTypes, Component } from 'react';
import { Page, Icon, List, ListItem, Splitter, SplitterSide, SplitterContent, Toolbar, ToolbarButton, Modal} from 'react-onsenui';
import page1 from '../pages/page1.jsx';
import page2 from '../pages/page2.jsx';
class SideMenu extends Component {
constructor(props) {
super(props);
this.renderToolbar = this.renderToolbar.bind(this);
this.hide = this.hide.bind(this);
this.show = this.show.bind(this);
this.goto_page1 = this.goto_page1.bind(this);
this.goto_page2 = this.goto_page2.bind(this);
this.state = {
isOpen: false
};
};
renderToolbar() {
return (
<Toolbar>
<div className='left'>
<ToolbarButton onClick={this.show}>
<Icon icon='ion-navicon, material:md-menu' />
</ToolbarButton>
</div>
<div className='center'>{this.props.pageTitle}</div>
</Toolbar>
);
};
hide() {
this.setState({isOpen: false});
};
show() {
this.setState({isOpen: true});
};
goto_page1() {
this.props.navigator.resetPage({
component: page1,
key: 'Page1_Index'
});
};
goto_page2() {
this.props.navigator.resetPage({
component: page2,
key: 'Page2_Index'
});
};
render() {
return (
<Splitter>
<SplitterSide
style={{
boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)'
}}
side='left'
width={200}
collapse={true}
isSwipeable={true}
isOpen={this.state.isOpen}
onClose={this.hide}
onOpen={this.show}
>
<Page>
<List
dataSource={[ 'page one', 'page two']}
renderRow={(title) => {
switch(title) {
case "page one":
return (
<ListItem key={title} onClick={this.goto_page1} tappable>
<div className='left'>{title}</div>
</ListItem>
);
break;
case "page two":
return (
<ListItem key={title} onClick={this.goto_page2} tappable>
<div className='left'>{title}</div>
</ListItem>
);
break;
default:
return (
<ListItem key={title} onClick={this.hide} tappable>
<div className='left'>{title}</div>
</ListItem>
);
break;
}
}}
/>
</Page>
</SplitterSide>
<SplitterContent>
<Page renderToolbar={this.renderToolbar} >
{this.props.children}
</Page>
</SplitterContent>
</Splitter>
);
}
}
SideMenu.propTypes = {
navigator: PropTypes.object.isRequired,
pageTitle: PropTypes.string.isRequired
};
export default SideMenu;
And use it as below:
import React, { PropTypes, Component } from 'react';
import { Icon, List, ListItem, ListHeader} from 'react-onsenui';
import SideMenu from '../components/SideMenu.jsx';
class page1 extends Component {
render() {
return (
<SideMenu navigator={this.props.navigator} pageTitle="page 1 title">
Page content here
</SideMenu>
);
}
}
page1.propTypes = {
navigator: PropTypes.object
};
export default page1;
But unfortunately it's return below error when change page from SideMenu:
TypeError: enterPage is undefined
I also create an online CodePen for it, you can see it here:
https://codepen.io/anon/pen/ObRzLB?editors=0011
I double checked anything where is the issue guys?

Ons.Navigator only admits Ons.Page as children. Try to wrap your SideMenu component with <Ons.Page> ... </Ons.Page> when you render it in page1.

manage splitterSide for use it as reusable component

Hi guys I want to create a new SideMenu component based on OnsenUI splitterSide demo I try this but I don't know how I can manage my sates and props. I'm new in React.js. Can someone help me to improve (fix) this?
This is my component code now:
import React, { PropTypes, Component } from 'react';
import { Page, Icon, List, ListItem, Splitter, SplitterSide, SplitterContent} from 'react-onsenui';
import page1 from '../pages/page1.jsx';
import page2 from '../pages/page2.jsx';
class SideMenu extends Component {
constructor(props) {
super(props);
this.hide = this.hide.bind(this);
this.show = this.show.bind(this);
this.page1 = this.page1.bind(this);
this.page2 = this.page2.bind(this);
};
hide() {
this.props.isOpen = false;
};
show() {
this.props.isOpen = true;
};
goto_page1() {
this.props.navigator.resetPage({
component: page1,
key: 'Page1_Index'
});
};
goto_page2() {
this.props.navigator.resetPage({
component: page2,
key: 'Page2_Index'
});
};
render() {
return (
<Splitter>
<SplitterSide
style={{
boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)'
}}
side='left'
width={200}
collapse={true}
isSwipeable={true}
isOpen={this.props.isOpen}
onClose={this.hide}
onOpen={this.show}
>
<Page>
<List
dataSource={['page one', 'page two']}
renderRow={(title) => {
switch(title) {
case "page one":
return (
<ListItem key={title} onClick={this.goto_page1} tappable>
<div>{title}</div>
</ListItem>
);
break;
case "page two":
return (
<ListItem key={title} onClick={this.goto_page2} tappable>
<div>{title}></div>
</ListItem>
);
break;
default:
return (
<ListItem key={title} onClick={this.hide} tappable>
<div>{title}</div>
</ListItem>
);
break;
}
}}
/>
</Page>
</SplitterSide>
<SplitterContent>
{this.props.children}
</SplitterContent>
</Splitter>
);
}
}
SideMenu.propTypes = {
navigator: PropTypes.object
};
export default SideMenu;
And this is Page1 code:
import React, { PropTypes, Component } from 'react';
import { Page, Toolbar, ToolbarButton, Icon} from 'react-onsenui';
import SideMenu from '../components/SideMenu.jsx';
class page1 extends Component {
constructor(props) {
super(props);
this.renderToolbar = this.renderToolbar.bind(this);
this.hide = this.hide.bind(this);
this.show = this.show.bind(this);
this.state = {
isOpen: false
};
};
renderToolbar() {
return (
<Toolbar>
<div className='left'>
<ToolbarButton onClick={this.show}>
<Icon icon='ion-navicon, material:md-menu' />
</ToolbarButton>
</div>
<div className='center'>Page One Title</div>
</Toolbar>
);
};
hide() {
this.setState({isOpen: false});
};
show() {
this.setState({isOpen: true});
};
render() {
return (
<SideMenu navigator={this.props.navigator} isOpen={this.state.isOpen}>
<Page renderToolbar={this.renderToolbar}>
Page content here
</Page>
</SideMenu>
);
}
}
page1.propTypes = {
navigator: PropTypes.object
};
export default page1;
Is my code style is correct? (is my props is states valid?)
How to prevent two time declaration of show and hide function?
New Version:
I change my code as bellow any idea or improvement??
import { Meteor } from 'meteor/meteor';
import React, { PropTypes, Component } from 'react';
import { Page, Icon, List, ListItem, Splitter, SplitterSide, SplitterContent, Toolbar, ToolbarButton, Modal} from 'react-onsenui';
import { Random } from 'meteor/random';
import page1 from '../pages/page1.jsx';
import page2 from '../pages/page2.jsx';
class SideMenu extends Component {
constructor(props) {
super(props);
this.renderToolbar = this.renderToolbar.bind(this);
this.hide = this.hide.bind(this);
this.show = this.show.bind(this);
this.goto_page1 = this.goto_page1.bind(this);
this.goto_page2 = this.goto_page2.bind(this);
this.state = {
isOpen: false
};
};
renderToolbar() {
return (
<Toolbar>
<div className='left'>
<ToolbarButton onClick={this.show}>
<Icon icon='ion-navicon, material:md-menu' />
</ToolbarButton>
</div>
<div className='center'>{this.props.pageTitle}</div>
</Toolbar>
);
};
hide() {
this.setState({isOpen: false});
};
show() {
this.setState({isOpen: true});
};
goto_page1() {
this.props.navigator.resetPage({
component: page1,
key: 'Page1_Index'
});
};
goto_page2() {
this.props.navigator.resetPage({
component: page2,
key: 'Page2_Index'
});
};
render() {
return (
<Splitter>
<SplitterSide
style={{
boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)'
}}
side='left'
width={200}
collapse={true}
isSwipeable={true}
isOpen={this.state.isOpen}
onClose={this.hide}
onOpen={this.show}
>
<Page>
<List
dataSource={[ 'page one', 'page two']}
renderRow={(title) => {
switch(title) {
case "page one":
return (
<ListItem key={title} onClick={this.goto_page1} tappable>
<div className='left'>{title}</div>
</ListItem>
);
break;
case "page two":
return (
<ListItem key={title} onClick={this.goto_page2} tappable>
<div className='left'>{title}</div>
</ListItem>
);
break;
default:
return (
<ListItem key={title} onClick={this.hide} tappable>
<div className='left'>{title}</div>
</ListItem>
);
break;
}
}}
/>
</Page>
</SplitterSide>
<SplitterContent>
<Page renderToolbar={this.renderToolbar} >
{this.props.children}
</Page>
</SplitterContent>
</Splitter>
);
}
}
SideMenu.propTypes = {
navigator: PropTypes.object.isRequired,
pageTitle: PropTypes.string.isRequired
};
export default SideMenu;
I also change my Page1 to:
import React, { PropTypes, Component } from 'react';
import { Icon, List, ListItem, ListHeader} from 'react-onsenui';
import SideMenu from '../components/SideMenu.jsx';
class page1 extends Component {
render() {
return (
<SideMenu navigator={this.props.navigator} pageTitle="page 1 title">
Page content here
</SideMenu>
);
}
}
page1.propTypes = {
navigator: PropTypes.object
};
export default page1;

How to prevent two time declaration of show and hide function?
You could use your methods this way:
<YourComponent method={ () => this.hide() }
And then you won't need the binding in the c-tor.
Or use a library called "autobind-decorator” and add #autobind before each class:
#autobind
class YourComponent extends React.Component {….}