We Keep Coding

How to reload a webpage once routed to using react-router-dom

Re-asking from a previous questions as this could be a work around.
I have a widget I'm using from a software provider (Mindbody) it needs to load some data using a <script> tag which I have in the head of my app. The page is being routed to using react-router-dom. The problem the js data only loads when you refresh the page.
What is a good method to reloading a page as soon as the page is routed to. I tried window.location.refresh(); but this loads infinite time.
import * as React from 'react';
import { Stack, Box, Typography, Modal, Backdrop } from '#mui/material';
import ButtonV2 from './ButtonV2';
import PurchaseWidget from './PurchaseWidget';
const style = {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 400,
bgcolor: 'background.paper',
boxShadow: 24,
borderRadius: 3,
transition: "5s ease-in-out"
};
const PurchaseLanding = () => {
const [show, setShow] = React.useState(true);
const handleClose = () => setShow(false);
return (
<div>
<Modal
open={show}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
disableAutoFocus="true"
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}>
<Box sx={style}>
<div>
{/* full width image */}
<img style={{borderRadius: "10px 10px 0 0"}} src="https://res.cloudinary.com/djjb1vyjm/image/upload/v1660541084/1_uxhi8p.png" width="100%" alt="" />
</div>
<Box p={2}>
{/* title */}
<Typography align="center" id="modal-modal-title" variant="h5" component="h2">
<span className='space-font-heavy'>Buy your [10-pack]</span>
</Typography>
{/* onboarding message */}
<Stack pb={3} alignItems="center" justifyContent="center" direction="row" spacing={2}>
<Typography px={1} align="center" id="modal-modal-description" sx={{ mt: 2 }}>
<span className='space-font-light'>Once completed download the Mindbody app to add, update, and book your workouts!</span>
</Typography>
</Stack>
{/* button group left/right */}
<Stack direction="row" justifyContent="center" alignItems="center">
<ButtonV2 />
</Stack>
</Box>
</Box>
</Modal>
</div>
);
}
export default PurchaseLanding

useRef takes full control of an outer component instead of the component being used in

I am creating a Appbar with material UI. When I use a custom hook. to control the child component it also controls the whole parent component...
My purpose is to use this hook to disappear the component whenever a click is made outside of the component
Here is my custom hook
useListener.js
import { useEffect, useState, useRef } from "react";
export const useListener = (active, ref) => {
ref = useRef();
const [open, setOpen] = useState((active = false));
useEffect(() => {
function handleClickOutside(event) {
if (ref.current && !ref.current.contains(event.target)) {
setOpen(!open);
return;
}
}
// Bind the event listener
document.body.addEventListener("click", handleClickOutside);
return () => {
// Unbind the event listener on clean up
document.body.removeEventListener("click", handleClickOutside);
};
}, [open, ref]);
return [open, ref];
};
when I use it in the component by destructing it with
const [open, ref] = useListener()
and use it inside the component, I set open to appear and disappear the component, with CSS..
display: open ? 'block' : 'none'
Now when I use this component in which this hook is being used, When I click on this component it appears, and when I click outside of the component (any where else in the body) it disappears, which is totally fine...
But the issue is when I click on the parent component in with this component is being used it also makes appear this child component...
Here is my child component...
Profile.js
import React from "react";
import Paper from "#mui/material/Paper";
import Box from "#mui/material/Box";
import cover from "../assets/cover.webp";
import profilepic from "../assets/profilepic.webp";
import Button from "#mui/material/Button";
import Typography from "#mui/material/Typography";
import { LogoutIcon } from "../assets/LogoutIcon";
import { ChangePasswordIcon } from "../assets/ChangePasswordIcon";
import { useListener } from "../../../hooks/useListener";
const logout = () => {
localStorage.removeItem("authorization");
localStorage.removeItem("user");
localStorage.removeItem("permissions");
window.location.reload(false);
};
const Profile = () => {
const [open, profileRef] = useListener();
console.log(profileRef.current);
return (
<Box
ref={profileRef}
sx={{
display: open ? "inline" : "none",
width: "190px",
}}
>
<Paper elevation={2}>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
<img src={cover} alt="Cover" style={{ width: "190px" }}></img>
<img
src={profilepic}
alt="Profile"
style={{ height: "62px", width: "62px", borderRadius: "50%" }}
></img>
<Typography variant="button" display="block" gutterBottom>
Username
</Typography>
<Button>
<Box sx={{ display: "flex", flexDirection: "row" }}>
<ChangePasswordIcon sx={{ height: "18px", width: "18px" }} />
<Typography variant="body1" gutterBottom>
Change password
</Typography>
</Box>
</Button>
<Button onClick={logout}>
<Box sx={{ display: "flex", flexDirection: "row" }}>
<LogoutIcon sx={{ width: "16px", height: "16px" }} />
<Typography variant="body1" gutterBottom>
Logout
</Typography>
</Box>
</Button>
</Box>
</Paper>
</Box>
);
};
export default Profile;
And this is the parent component...
TopbarContents.js
import React, { useState } from "react";
import Box from "#mui/material/Box";
import Button from "#mui/material/Button";
import Typography from "#mui/material/Typography";
import profilepic from "../assets/profilepic.webp";
import Profile from "./Profile";
export const TopbarContents = () => {
const [profileActive, toggleProfile] = useState(false);
const openProfile = () => {
toggleProfile(true);
};
return (
<Box sx={{ width: "100%" }}>
<Box
sx={{
width: "100%",
display: "flex",
alignItems: "center",
}}
>
<Box sx={{ flexGrow: 1 }}>
<Typography
sx={{ color: "#494343" }}
variant="h6"
noWrap
component="div"
>
Dashboard
</Typography>
</Box>
<Box
sx={{
height: "45px",
width: "160px",
borderRadius: 2,
display: "flex",
flexDirection: "column",
justifyContent: "center",
border: "1px solid #e0e0e0",
pl: "8px",
}}
>
<Typography sx={{ color: "#2E4299", pt: 1 }} variant="caption">
Case study
</Typography>
<Typography sx={{ color: "#494343" }} variant="overline">
Trial ID: NC48023194
</Typography>
</Box>
<Button
color="guava"
variant="contained"
size="medium"
sx={{ fontFamily: "Poppins", mr: 6, ml: 3 }}
>
Case Study
</Button>
<Button onClick={openProfile}>
<img
src={profilepic}
alt="Profile"
style={{ height: "62px", width: "62px", borderRadius: "50%" }}
></img>
</Button>
</Box>
<Box
sx={{
display: profileActive ? "inline" : "none",
flexDirection: "column",
}}
>
<Profile />
</Box>
</Box>
);
};

MUI Cards are not rendering with style

I am importing the Card component from MUI but the component does not have any style.
import * as React from "react";
import Box from "#mui/material/Box";
import Card from "#mui/material/Card";
import CardActions from "#mui/material/CardActions";
import CardContent from "#mui/material/CardContent";
import Button from "#mui/material/Button";
import Typography from "#mui/material/Typography";
const bull = (
<Box
component="span"
sx={{ display: "inline-block", mx: "2px", transform: "scale(0.8)" }}
>
•
</Box>
);
export default function BasicCard() {
return (
<Card sx={{ minWidth: 275 }}>
<CardContent>
<Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
Word of the Day
</Typography>
<Typography variant="h5" component="div">
be{bull}nev{bull}o{bull}lent
</Typography>
<Typography sx={{ mb: 1.5 }} color="text.secondary">
adjective
</Typography>
<Typography variant="body2">
well meaning and kindly.
<br />
{'"a benevolent smile"'}
</Typography>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
);
}
What the component is supposed to look like:
MUI Component
What the component actually looks like:
Imported Component
How can I add styling?

You probably have text-align: center set somewhere in the parent. This usually happens when you create a react project with a template like CRA that has some CSS files like this:
.App {
text-align: center;
}
You can fix it by finding and removing that text-align property or reset it in your Card:
<Card sx={{ minWidth: 275, textAlign: "initial" }}>
If what you mean is the dark background, you can achieve it by setting the theme mode to dark:
import { ThemeProvider, createTheme } from "#mui/material/styles";
const theme = createTheme({
palette: {
mode: "dark"
}
});
<ThemeProvider theme={theme}>
<Card sx={{ minWidth: 275 }}>
{...}
</Card>
</ThemeProvider>

Material-UI Drawer acts different on tablets

I'm getting some weird problems with the Material-UI drawer component. It scrolls horizontal on my iPad, compared to my MacBook and Android Phone, which actually scroll vertically..
Result on MacBook (how it's supposed to be..):
As you can see, it scrolls down and it overflows vertically, just like on my phone
Result on iPad (how it's not supposed to be..):
However, as you can see.. on my iPad it overflows horizontally..?
The code for the drawer:
<Drawer
anchor="right"
open={open}
onClose={HandleClose}
classes={{ paper: classes.drawerPaper }}>
<Toolbar />
<Typography className={classes.title}>Selecteer actieve regio's</Typography>
<FormControl component="fieldset" className={classes.formControl}>
<FormGroup>
{regios.map(regio => (
<FormControlLabel
control={
<Checkbox
checked={geselecteerdeRegios.includes(regio.ID)}
onChange={e => handleRegioChange(regio.ID, e.target.checked)}
/>
}
name={regio.Naam}
label={regio.Naam}
key={regio.Naam}
/>
))}
</FormGroup>
</FormControl>
</Drawer>
And these are the styles for the drawer
drawerPaper: {
width: 320
},
Why is this happening? And how can I prevent this and only allow vertical scroll/overflow instead of horizontal..?
Edit: codesandbox:
https://codesandbox.io/s/elated-khayyam-t6klg?file=/src/Drawer.js
Thanks in advance! :-)

This appears to be related to the default styles on FormGroup:
/* Styles applied to the root element. */
root: {
display: 'flex',
flexDirection: 'column',
flexWrap: 'wrap',
},
You can override this to nowrap to prevent the wrapping (as shown below with classes.formGroup in a modified version of your sandbox). I have not taken the time to understand why this behaves differently on iPads than on other devices.
import React from "react";
import {
Drawer,
FormControl,
FormGroup,
FormControlLabel,
Checkbox,
Toolbar,
Typography,
makeStyles
} from "#material-ui/core";
const useStyles = makeStyles(theme => ({
drawerPaper: {
width: 320
},
formGroup: {
flexWrap: "nowrap"
}
}));
export default () => {
let items = [];
for (let i = 0; i < 25; i++) items.push("foobarfazboo" + i);
const classes = useStyles();
return (
<Drawer anchor="right" open={true} classes={{ paper: classes.drawerPaper }}>
<Toolbar />
<Typography className={classes.title}>
Selecteer actieve regio's
</Typography>
<FormControl component="fieldset" className={classes.formControl}>
<FormGroup className={classes.formGroup}>
{items.map(item => (
<FormControlLabel
control={<Checkbox />}
name={item}
label={item}
key={item}
/>
))}
</FormGroup>
</FormControl>
</Drawer>
);
};
Unfortunately, this still leaves some odd behavior on the iPad. It seems to try to fit all of the content in the Drawer without scrolling (e.g. if I add 100 items instead of 25, they still are all forced to fit and become an unreadable, squished mess).
I don't fully understand what is happening, but it appears to be an interplay between the height and display: flex on the Drawer Paper. Changing the display from flex to block fixes this. I don't see any obvious new problems caused by this, but I haven't taken a lot of time to look at what other effects this change causes. With this change, the above "nowrap" change appears unnecessary.
import React from "react";
import {
Drawer,
FormControl,
FormGroup,
FormControlLabel,
Checkbox,
Toolbar,
Typography,
makeStyles
} from "#material-ui/core";
const useStyles = makeStyles(theme => ({
drawerPaper: {
width: 320,
display: "block"
}
}));
export default () => {
let items = [];
for (let i = 0; i < 25; i++) items.push("foobarfazboo" + i);
const classes = useStyles();
return (
<Drawer anchor="right" open={true} classes={{ paper: classes.drawerPaper }}>
<Toolbar />
<Typography className={classes.title}>
Selecteer actieve regio's
</Typography>
<FormControl component="fieldset" className={classes.formControl}>
<FormGroup>
{items.map(item => (
<FormControlLabel
control={<Checkbox />}
name={item}
label={item}
key={item}
/>
))}
</FormGroup>
</FormControl>
</Drawer>
);
};

Is there a way to show a Material-UI Drawer nested inside a Grid component?

I'm creating a web application using Material-UI. The main page is divided in 3 grids, each with a height of 500px. I wanted to display a drawer with some options of actions inside the middle grid. Is that possible? The way I have it so far I can only display it in relation to the whole screen.
Here's my main component with the grid elements:
import React, { Fragment } from 'react';
import Grid from '#material-ui/core/Grid';
import Paper from '#material-ui/core/Paper';
const style = {
Paper: {
padding: 10,
marginTop: 5,
marginBottom: 5,
height: 500,
overflowY: 'auto',
position: 'relative',
},
Fab: {
position: 'absolute',
top: 5,
left: 5
},
}
export default () => {
return (
<Fragment>
<Grid container spacing={1}>
<Grid item xs={12} sm={4} md={4} lg={2}>
<Paper style={style.Paper}>
</Paper>
</Grid>
<Grid item xs={12} sm={8} md={8} lg={4}>
<Paper style={style.Paper}>
<ToolbarDrawer />
</Paper>
</Grid>
<Grid item xs={12} sm={12} md={12} lg={6}>
<Paper style={style.Paper}>
</Paper>
</Grid>
</Grid>
</Fragment>
);
}
Here's my drawer component which I would like to be displayed nested inside the middle grid:
javascript
import React, { Fragment } from 'react';
import IconButton from '#material-ui/core/IconButton';
import ChevronRightIcon from '#material-ui/icons/ChevronRight';
import ChevronLeftIcon from '#material-ui/icons/ChevronLeft';
import InboxIcon from '#material-ui/icons/MoveToInbox';
import MailIcon from '#material-ui/icons/Mail';
import { makeStyles } from '#material-ui/core/styles';
import clsx from 'clsx';
import Drawer from '#material-ui/core/Drawer';
import Divider from '#material-ui/core/Divider';
import ListItem from '#material-ui/core/ListItem';
import ListItemIcon from '#material-ui/core/ListItemIcon';
import ListItemText from '#material-ui/core/ListItemText';
import List from '#material-ui/core/List';
import CssBaseline from '#material-ui/core/CssBaseline';
const drawerWidth = 240;
const useStyles = makeStyles(theme => ({
drawer: {
width: drawerWidth,
flexShrink: 0,
whiteSpace: 'nowrap',
},
drawerOpen: {
width: drawerWidth,
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
drawerClose: {
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
overflowX: 'hidden',
width: theme.spacing(6) + 1,
[theme.breakpoints.up('sm')]: {
width: theme.spacing(7) + 1,
},
},
toolbar: {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: theme.spacing(0, 1),
...theme.mixins.toolbar,
}
}));
export default () => {
const classes = useStyles();
const [open, setOpen] = React.useState(false);
function handleToolbarClose() {
setOpen(!open);
}
return (
<Fragment>
<CssBaseline />
<Drawer
anchor="right"
variant="permanent"
className={clsx(classes.drawer, {
[classes.drawerOpen]: open,
[classes.drawerClose]: !open,
})}
classes={{
paper: clsx({
[classes.drawerOpen]: open,
[classes.drawerClose]: !open,
}),
}}
open={open}
>
<div className={classes.toolbar}>
<IconButton onClick={handleToolbarClose}>
{(open) ? <ChevronRightIcon /> : <ChevronLeftIcon />}
</IconButton>
</div>
<Divider />
<List>
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
<Divider />
<List>
{['All mail', 'Trash', 'Spam'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
</Drawer>
</Fragment>
)
}

It looks like you're going to have to build a makeshift drawer component for this. Here is an example you could use to get started:
Live demo can be found here
MakeshiftDrawer using List component and Slide transition component:
export default function MakeshiftDrawer({ open }) {
const classes = useStyles();
const [selectedIndex, setSelectedIndex] = React.useState(1);
function handleListItemClick(event, index) {
setSelectedIndex(index);
}
return (
<Slide direction="right" in={open} mountOnEnter unmountOnExit>
<div className={classes.root}>
<List component="nav" aria-label="main mailbox folders">
<ListItem
button
selected={selectedIndex === 0}
onClick={event => handleListItemClick(event, 0)}
>
<ListItemIcon>
<InboxIcon />
</ListItemIcon>
<ListItemText primary="Inbox" />
</ListItem>
<ListItem
button
selected={selectedIndex === 1}
onClick={event => handleListItemClick(event, 1)}
>
<ListItemIcon>
<DraftsIcon />
</ListItemIcon>
<ListItemText primary="Drafts" />
</ListItem>
</List>
<Divider />
<List component="nav" aria-label="secondary mailbox folder">
<ListItem
button
selected={selectedIndex === 2}
onClick={event => handleListItemClick(event, 2)}
>
<ListItemText primary="Trash" />
</ListItem>
<ListItem
button
selected={selectedIndex === 3}
onClick={event => handleListItemClick(event, 3)}
>
<ListItemText primary="Spam" />
</ListItem>
</List>
</div>
</Slide>
);
}
MakeshiftDrawer in use:
function App() {
const [isOpen, setIsOpen] = useState(true);
const toggle = () => {
setIsOpen(!isOpen);
}
return (
<div>
<Grid container direction="row" style={topGridStyle}>
</Grid>
<Grid container direction="row" style={midGridStyle}>
<Grid item>
<Button variant="contained" color="primary" onClick={toggle}>Toggle</Button>
<MakeshiftDrawer open={isOpen} />
</Grid>
</Grid>
<Grid container direction="row" style={botGridStyle}>
</Grid>
</div>
);
}
Rendered: