I have an AppBar component and I want to combine it with a drawer, this is the AppBar code:
import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "material-ui/styles";
import AppBar from "material-ui/AppBar";
import Toolbar from "material-ui/Toolbar";
import Typography from "material-ui/Typography";
import Button from "material-ui/Button";
import IconButton from "material-ui/IconButton";
import MenuIcon from "material-ui-icons/Menu";
import TemporaryDrawer from "./Drawer";
const styles = {
root: {
width: "100%"
},
flex: {
flex: 1
},
menuButton: {
marginLeft: -12,
marginRight: 20
},
};
function ButtonAppBar(props) {
const { classes } = props;
return (
<div className={classes.root}>
<TemporaryDrawer/>
<AppBar position="static">
<Toolbar>
<IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
<MenuIcon />
</IconButton>
<Typography variant="title" color="inherit" className={classes.flex}>
Title
</Typography>
<Button color="inherit">Drawer</Button>
</Toolbar>
</AppBar>
</div>
);
}
ButtonAppBar.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(ButtonAppBar);
Currently I'm using material-ui v1.0.0-beta.33, what I want is to open a drawer on the left side when click on the Button I have in AppBar but I have no idea how to do this.
I'll appreciate the help on this.
If I understand you correctly you can do it this way - store the boolean value that indicates is the drawer is opened in the state of your component:
state = { drawerIsOpen: false }
You will change it when user clicks on your Button:
handleDrawerOpen = () => {
this.setState({ drawerIsOpen: true });
};
Your render method should look like this:
render() {
const { classes } = this.props;
return (
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
<MenuIcon />
</IconButton>
<Typography variant="title" color="inherit" className={classes.flex}>
Title
</Typography>
<Button onClick={this.handleDrawerOpen} color="inherit">Drawer</Button>
</Toolbar>
</AppBar>
<Drawer
variant="persistent"
classes={{
paper: classes.drawerPaper,
}}
open={this.state.drawerIsOpen}
>
<div className={classes.drawerHeader}>
<IconButton onClick={this.handleDrawerClose}>
<ChevronLeftIcon />
</IconButton>
</div>
<div className={classes.drawerInner}>
<p>drawer content</p>
</div>
</Drawer>
</div>
);
}
Check this simplified demo (see demo.js file).
Related
I'm experiencing an issue with the <Link> component from react-router-dom.
The above error occurred in the <Link> component:
at LinkWithRef (http://localhost:3000/react-portfolio/static/js/bundle.js:64573:7)
at button
at http://localhost:3000/react-portfolio/static/js/bundle.js:3642:66
at ButtonBase (http://localhost:3000/react-portfolio/static/js/bundle.js:9678:82)
at http://localhost:3000/react-portfolio/static/js/bundle.js:3642:66
at Button (http://localhost:3000/react-portfolio/static/js/bundle.js:9381:59)
at div
at div
at http://localhost:3000/react-portfolio/static/js/bundle.js:3642:66
at Toolbar (http://localhost:3000/react-portfolio/static/js/bundle.js:20646:82)
at header
at http://localhost:3000/react-portfolio/static/js/bundle.js:3642:66
at Paper (http://localhost:3000/react-portfolio/static/js/bundle.js:18055:82)
at http://localhost:3000/react-portfolio/static/js/bundle.js:3642:66
at AppBar (http://localhost:3000/react-portfolio/static/js/bundle.js:8771:83)
at div
at http://localhost:3000/react-portfolio/static/js/bundle.js:3642:66
at Box (http://localhost:3000/react-portfolio/static/js/bundle.js:23577:72)
at div
at Navbar (http://localhost:3000/react-portfolio/static/js/bundle.js:629:5)
at div
at PortfolioContainer (http://localhost:3000/react-portfolio/static/js/bundle.js:1060:88)
at div
at App
at Router (http://localhost:3000/react-portfolio/static/js/bundle.js:66149:15)
at BrowserRouter (http://localhost:3000/react-portfolio/static/js/bundle.js:64481:5)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError # react-dom.development.js:18687
I'm guessing that this is located in my Navbar file somewhere, which you can see below:
import * as React from 'react';
import AppBar from '#mui/material/AppBar';
import Box from '#mui/material/Box';
import Toolbar from '#mui/material/Toolbar';
import Typography from '#mui/material/Typography';
import Button from '#mui/material/Button';
import { Link } from 'react-router-dom';
import IconButton from '#mui/material/IconButton';
import Menu from '#mui/material/Menu';
import MenuIcon from '#mui/icons-material/Menu';
import MenuItem from '#mui/material/MenuItem';
import '../styles/root.css';
import useWindowDimension from '../utils/windowDimensions';
import About from '../pages/About';
import Contact from '../pages/Contact';
import Portfolio from '../pages/Portfolio';
import Resume from '../pages/Resume';
export default function Navbar({ handlePageChange }) {
const { height, width } = useWindowDimension();
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const [anchorElNav, setAnchorElNav] = React.useState(null);
const openNav = Boolean(anchorElNav);
const handleOpenNavMenu = (event) => {
setAnchorElNav(event.currentTarget);
};
const handleCloseNavMenu = () => {
setAnchorElNav(null);
}
const handleClose = () => {
setAnchorEl(null);
};
return (
<div>
<Box sx={{ flexGrow: 1, width: "100%" }} >
<AppBar position="static" id="navbar">
<Toolbar>
<Typography
id="nav-logo"
variant="h6"
component="div"
sx={{ flexGrow: 1 }}
fontFamily="reklame-script, sans-serif"
fontWeight="700"
fontStyle="normal"
fontSize="36px"
// onClick={() => handlePageChange('About')}
>
My Portfolio
</Typography>
{width >= 900
?
<div
style={{ display: "flex", direction: "row", flexWrap: "wrap", justifyContent: "space-evenly", alignContent: "center", fontWeight: "bold" }}
>
<Button
color="inherit"
onClose={handleClose}
// onClick={() => handlePageChange('About')}
>
<Link to={<About />}>
About Me
</Link>
</Button>
<Button
color="inherit"
onClose={handleClose}
// onClick={() => handlePageChange('Portfolio')}
>
<Link to={<Portfolio />}>
Portfolio
</Link>
</Button>
<Button
color="inherit"
onClose={handleClose}
// onClick={() => handlePageChange('Contact')}
>
<Link to={<Contact />}>
Contact Me
</Link>
</Button>
<Button
color="inherit"
onClose={handleClose}
// onClick={() => handlePageChange('Contact')}
>
<Link to={<Resume />}>
Resume
</Link>
</Button>
</div>
:
// Mobile Hamburger Menu
<Box id='hamburger-menu' sx={{ flexGrow: 1, display: { xs: "flex", md: "none" }, justifyContent: "right" }}>
<IconButton
id="menu-button"
size="large"
aria-controls={openNav ? 'menu-appbar' : undefined}
aria-haspopup="true"
aria-expanded={openNav ? 'true' : undefined}
onClick={handleOpenNavMenu}
color="inherit"
>
<MenuIcon />
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorElNav}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
open={openNav}
onClose={handleCloseNavMenu}
sx={{
display: { xs: 'block', md: 'none' },
}}
>
<div>
<MenuItem className='mobileMenuItem' onClick={handleCloseNavMenu}>
<Button color="inherit" >
<Link style={{ textDecoration: "none", color: "black" }} to="/" onClose={handleClose}>
About Me
</Link>
</Button>
</MenuItem>
<MenuItem className='mobileMenuItem' onClick={handleCloseNavMenu}>
<Button color="inherit" onClose={handleClose}>
<Link style={{ textDecoration: "none", color: "black" }} to={"/portfolio"}>
Portfolio
</Link>
</Button>
</MenuItem>
<MenuItem className='mobileMenuItem' onClick={handleCloseNavMenu}>
<Button color="inherit" onClose={handleClose}>
<Link style={{ textDecoration: "none", color: "black" }} to="/contact">
Contact Me
</Link>
</Button>
</MenuItem>
<MenuItem className='mobileMenuItem' onClick={handleCloseNavMenu}>
<Button color="inherit" onClose={handleClose}>
<Link style={{ textDecoration: "none", color: "black" }} to="/resume">
Resume
</Link>
</Button>
</MenuItem>
<Menu
id="basic-menu"
anchorEl={anchorEl}
open={open}
MenuListProps={{
'aria-labelledby': 'basic-button',
}}
onClick={handleClick}
onClose={handleClose}
>
</Menu>
</div>
</Menu>
</Box>
}
</Toolbar>
</AppBar>
</Box>
</div>
);
}
If it's not there, perhaps it's in my PortfolioContainer file? This can be seen below.
import React, { useState } from "react";
import About from "../pages/About";
import Portfolio from "../pages/Portfolio";
import Contact from "../pages/Contact";
import Resume from "../pages/Resume";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
export default function PortfolioContainer() {
const [currentPage, setCurrentPage] = useState('');
const renderPage = () => {
if (currentPage === '/') {
return <About />
}
if (currentPage === '/resume') {
return <Resume />;
}
if (currentPage === '/portfolio') {
return <Portfolio />;
}
if (currentPage === '/contact') {
return <Contact />;
}
// return <About />;
};
const handlePageChange = (page) => setCurrentPage(page);
return (
<div id="portfolioContainer">
<Navbar currentPage={currentPage} handlePageChange={handlePageChange} />
{renderPage()}
<Footer />
</div>
);
};
Thank you in advance for any and all help!
I assumed you are useing react-router-dom#6.6.1 (latest version). "to" prop from component expect a string but you provide the component. That's why you get cyclic object error. I took your code an defined a router in index.js file like this
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import App from "./App";
import Resume from "./Resume";
const router = createBrowserRouter([
{
path: "/",
element: <App />
},
{
path: "/resume",
element: <Resume />
}
]);
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<RouterProvider router={router} />
</StrictMode>
);
and in my App.js file I used Link component like this
<Button
color="inherit"
onClose={handleClose}
>
<Link to="/resume">Resume</Link>
</Button>
The issue it seems is that you aren't using react-router to its fullest. The Link component should be specifying a to prop that matches a URL pathname that you are rendering a Route component for. PortfolioContainer should be rendering the routes you are trying to link to from the Navbar component.
Example:
PortfolioContainer
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import About from "../pages/About";
import Portfolio from "../pages/Portfolio";
import Contact from "../pages/Contact";
import Resume from "../pages/Resume";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
export default function PortfolioContainer() {
return (
<BrowserRouter>
<div id="portfolioContainer">
<Navbar />
<Routes>
<Route path="/" element={<About />} />
<Route path="/resume" element={<Resume />} />
<Route path="/portfolio" element={<Portfolio />} />
<Route path="/contact" element={<Contact />} />
</Routes>
<Footer />
</div>
</BrowserRouter>
);
};
Navbar
...
<Link to="/">
About Me
</Link>
...
<Link to="/portfolio">
Portfolio
</Link>
...
This is Header.js where I have the button <ReactSvg>, inside <IconButton> when you click it, it will change the page theme with the switchTheme() function. When you hover over the button it also has a popover where it declares the function of the button (ex. switch theme).
For some reason I hover the button the popover comes out but doesn't let me click on the button even if I click very fast and vigorously. Somehow the popover has disabled the button.
Header file where the button is rendered:
import React, { useState } from 'react'
import ReactSvg from './reactSvg'
import { Box, Typography, Link, Container, IconButton } from '#material-ui/core'
import PhoneIcon from '#material-ui/icons/Phone'
import EmailIcon from '#material-ui/icons/Email'
import GitHubIcon from '#material-ui/icons/GitHub'
import LinkedInIcon from '#material-ui/icons/LinkedIn'
import { useStyles } from '../styles/customStyles'
import Image from 'material-ui-image'
import PopOver from './PopOver'
const styles = {
image: {
maxWidth: 200,
minWidth: 200,
},
}
export default function Header({ switchTheme }) {
const classes = useStyles()
const [anchorEl, setAnchorEl] = useState(null)
const handleTheme = () => {
switchTheme()
}
const handleHover = (e) => {
setAnchorEl(e.currentTarget)
}
return (
<>
<Box>
<IconButton onClick={() => handleTheme()} onMouseOver={(e) => handleHover(e)}>
<ReactSvg />
</IconButton>
<Typography variant="h3" color="primary">
Staz Christodoulakis
</Typography>
<Typography variant="body1" color="primary">
Software Engineer ยท Web/App
</Typography>
<hr className="solid" />
<Box
display="flex"
alignItems="center"
justifyContent="center"
className={classes.root}
flexWrap="wrap"
>
<Link color="secondary" variant="body1" href="tel: 650-409-6202">
<Box display="flex">
<PhoneIcon /> 650 409 6202
</Box>
</Link>
<Link color="secondary" variant="body1" href="mailto: staz.christo#gmail.com">
<Box display="flex">
<EmailIcon /> staz.christo#gmail.com
</Box>
</Link>
<Link href="https://github.com/stazcp" color="secondary" variant="body1">
<Box display="flex">
<GitHubIcon /> github.com/stazcp
</Box>
</Link>
<Link href="https://www.linkedin.com/in/staz-christo" color="secondary" variant="body1">
<Box display="flex">
<LinkedInIcon /> linkedin.com/in/staz-christo
</Box>
</Link>
</Box>
</Box>
<PopOver anchorEl={anchorEl} setAnchorEl={setAnchorEl} />
</>
)
}
Popover:
import React, { useState, useEffect } from 'react'
import { makeStyles } from '#material-ui/core/styles'
import Popover from '#material-ui/core/Popover'
import Typography from '#material-ui/core/Typography'
import Button from '#material-ui/core/Button'
const useStyles = makeStyles((theme) => ({
typography: {
padding: theme.spacing(2),
},
}))
export default function SimplePopover({ anchorEl, setAnchorEl }) {
const classes = useStyles()
const handleClose = () => {
setAnchorEl(null)
}
const open = Boolean(anchorEl)
const id = open ? 'simple-popover' : undefined
return (
<div>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
>
<Typography className={classes.typography}>
Click on React Symbol to change theme!
</Typography>
</Popover>
</div>
)
}
Why is that the onMouseOver event blocking the onClick event?
Can you try stopPropagation?
const handleHover = (e) => {
e.stopPropagation();
setAnchorEl(e.currentTarget)
}
So I found a solution to my problem by using a Tooltip provided by Material UI.
https://material-ui.com/components/tooltips/
Like this:
<Tooltip title="Click Me!" placement="right" arrow>
<IconButton
onClick={() => handleTheme()}
// onMouseOver={(e) => handleHover(e)}
>
<GetIcon icon={reactLogo} className="reactLogo" />
</IconButton>
</Tooltip>
if anyone has managed to use different methods for mouse events on Material UI buttons please post here.
Thanks!
Hey guys I am very new to React and was following a tutorial about hooks and wanted to try it out, I don't know the code is correct as of now as I am getting error in the if statement condition to check the logged in state. This is the error that pops up.
./src/components/Header.js
Line 50:20: Parsing error: Unexpected token, expected ","
48 |
49 | return (
> 50 | {if(loggedIn === true) {
| ^
51 | return (
52 | <React.Fragment>
53 | <CssBaseline />
This is the Header.js
import React, {useEffect, useState} from 'react';
import Link from '#material-ui/core/Link';
import AppBar from '#material-ui/core/AppBar';
import Button from '#material-ui/core/Button';
import Toolbar from '#material-ui/core/Toolbar';
import Typography from '#material-ui/core/Typography';
import CssBaseline from '#material-ui/core/CssBaseline';
import { makeStyles } from '#material-ui/core/styles';
import {NavLink} from 'react-router-dom';
// import Grid from '#material-ui/core/Grid';
const useStyles = makeStyles((theme) => ({
appBar: {
borderBottom: `1px solid ${theme.palette.divider}`,
minHeight: 100,
background : '#1e202c',
},
toolbar: {
flexWrap: 'wrap',
color: 'white',
},
toolbarTitle: {
flexGrow: 1,
color: 'white',
},
link: {
margin: theme.spacing(1, 1.5),
},
}))
function Header() {
const classes = useStyles();
const [logState, setLogState] = useState({
loggedIn: false,
})
useEffect(() => {
if (sessionStorage.getItem('jwt')) {
setLogState({ loggedIn: true });
}
}, [setLogState]);
return (
{if(loggedIn === true) {
return (
<React.Fragment>
<CssBaseline />
<AppBar position="fixed" color="default" elevation={0} className={classes.appBar}>
<Toolbar className={classes.toolbar}>
<Typography variant="h6" color="inherit" noWrap className={classes.toolbarTitle}>
TestWebsite
</Typography>
<nav>
<Link component={NavLink} variant="button" color="inherit" href="#" to= "/" className={classes.link}>
Home
</Link>
<Link variant="button" color="inherit" href="#" className={classes.link}>
Accounts
</Link>
</nav>
<Button component={NavLink} href="#" color="inherit" variant="outlined" to="/logout/" className={classes.link} >
Logout
</Button>
</Toolbar>
</AppBar>
</React.Fragment>
)
} else {
return (
<React.Fragment>
<CssBaseline />
<AppBar position="fixed" color="default" elevation={0} className={classes.appBar}>
<Toolbar className={classes.toolbar}>
<Typography variant="h6" color="inherit" noWrap className={classes.toolbarTitle}>
TestWebsite
</Typography>
<nav>
</nav>
<Button href="#" component={NavLink} color="inherit" variant="outlined"
to="/signup/" className={classes.link} >
SignUp
</Button>
<Button component={NavLink} href="#" color="inherit" variant="outlined" to="/login/" className={classes.link} >
Login
</Button>
</Toolbar>
</AppBar>
</React.Fragment>
)
}
}
)
}
export default Header
Is this the correct way to do it?
Thanks
You don't need the return ({ }) around your isLoggedIn condition.
Also you should test logState.loggedIn instead of loggedIn
Try substituting if with ternary operator:
return loggedIn : Elem1 ? Elem2
It seems that there is a needless return in the Header, try this
function Header() {
const classes = useStyles();
const [logState, setLogState] = useState({
loggedIn: false,
});
useEffect(() => {
if (sessionStorage.getItem("jwt")) {
setLogState({ loggedIn: true });
}
}, [setLogState]);
if (logState.loggedIn === true) {
return (
<React.Fragment>
<CssBaseline />
<AppBar
position="fixed"
color="default"
elevation={0}
className={classes.appBar}
>
<Toolbar className={classes.toolbar}>
<Typography
variant="h6"
color="inherit"
noWrap
className={classes.toolbarTitle}
>
TestWebsite
</Typography>
<nav>
<Link
component={NavLink}
variant="button"
color="inherit"
href="#"
to="/"
className={classes.link}
>
Home
</Link>
<Link
variant="button"
color="inherit"
href="#"
className={classes.link}
>
Accounts
</Link>
</nav>
<Button
component={NavLink}
href="#"
color="inherit"
variant="outlined"
to="/logout/"
className={classes.link}
>
Logout
</Button>
</Toolbar>
</AppBar>
</React.Fragment>
);
}
return (
<React.Fragment>
<CssBaseline />
<AppBar
position="fixed"
color="default"
elevation={0}
className={classes.appBar}
>
<Toolbar className={classes.toolbar}>
<Typography
variant="h6"
color="inherit"
noWrap
className={classes.toolbarTitle}
>
TestWebsite
</Typography>
<nav></nav>
<Button
href="#"
component={NavLink}
color="inherit"
variant="outlined"
to="/signup/"
className={classes.link}
>
SignUp
</Button>
<Button
component={NavLink}
href="#"
color="inherit"
variant="outlined"
to="/login/"
className={classes.link}
>
Login
</Button>
</Toolbar>
</AppBar>
</React.Fragment>
);
}
try using conditionals using ternary operator if using js inside return
conditon(if true)?<Element1/>:<Element2/>
I'm having issues with changing <AppBar> background color. I'm using the Container component to set the maximum screen size.
This causes issues when the screen size is bigger than the maximum screen size. The AppBar background color is expected the rest is white.
How do I remove the white color and make it match the <AppBar> background color?
How do I get it so that white color to match the <AppBar> color so that the navigation looks consistent?
This is what I have so far:
import React from 'react';
import {CssBaseline, Container} from '#material-ui/core/';
import { makeStyles } from '#material-ui/core/styles';
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';
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1,
},
}));
export default function ButtonAppBar() {
const classes = useStyles();
return (
<div className={classes.root}>
<CssBaseline />
<Container maxWidth="sm">
<AppBar position="static">
<Toolbar>
<IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
<MenuIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>
News
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
</Container>
</div>
);
}
What am I missing?
The navigation looks wired because it's surrounded by white.
You can go in your css file and add:
body {
background-color: #FF0000;
}
Place the AppBar outside the div with the class of root or remove the width from root class.
ADDED:
<div>
<AppBar position="static">
<Toolbar style={{ maxWidth: 1280 }}>
// ...
</Toolbar>
</AppBar>
<Container>
// ...
</Container>
</div>
If I click to remove the first like on the first goal, I can see the Redux action firing (using Redux DevTools) for the like being updated. But the number beside is not updating. When I check the console it doesn't appear that anything is refreshing. When I refresh the page, it shows the updated number that was previously liked (the 0 becomes a 1), but I have to refresh the page to see this update. How can I get the number to update in real time without having to refresh the page?
import React, { useEffect } from "react";
import Moment from "react-moment";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { addLike, removeLike } from "../../actions/goal";
import { getGoals } from "../../actions/goal";
import Spinner from "../layout/Spinner";
import Navbar from "../dashboard/Navbar";
import ThumbUpAltIcon from "#material-ui/icons/ThumbUpAlt";
import ThumbDownAltIcon from "#material-ui/icons/ThumbDownAlt";
import ChatIcon from "#material-ui/icons/Chat";
import DeleteIcon from "#material-ui/icons/Delete";
import DoneIcon from "#material-ui/icons/Done";
import {
Typography,
Container,
CssBaseline,
makeStyles,
Grid,
Avatar,
Paper,
Button
} from "#material-ui/core";
const useStyles = makeStyles(theme => ({
paper: {
height: "auto",
marginBottom: theme.spacing(3)
},
actionButtons: {
marginTop: "3vh"
},
profileHeader: {
textAlign: "center",
marginBottom: 20
},
avatar: {
width: theme.spacing(7),
height: theme.spacing(7)
}
}));
const Goals = ({
getGoals,
auth,
addLike,
removeLike,
goal: { goals, user, loading }
}) => {
useEffect(() => {
getGoals();
}, [getGoals]);
const classes = useStyles();
return loading ? (
<>
<Navbar />
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Spinner />
</div>
</Container>
</>
) : (
<>
<CssBaseline />
<Navbar />
<main>
<Container>
<Typography variant="h2" className={classes.profileHeader}>
Goals
</Typography>
{/* parent grid */}
<Grid container spacing={4}>
{goals.map(singleGoal => (
<Grid
className={classes.paper}
key={singleGoal._id}
spacing={1}
container
item
direction="row"
alignItems="center"
component={Paper}
>
<Grid
item
container
direction="column"
justify="center"
alignItems="center"
xs={3}
>
<Avatar className={classes.avatar} src={singleGoal.avatar} />
<Typography variant="caption">
{singleGoal.first_name} {singleGoal.last_name}
</Typography>
<Typography variant="caption" className={classes.postedOn}>
Posted on{" "}
<Moment format="MM/DD/YYYY">{singleGoal.date}</Moment>
</Typography>
</Grid>
<Grid container item direction="column" xs={9}>
<Typography variant="body1">{singleGoal.text}</Typography>
<Grid item className={classes.actionButtons}>
<Button size="small" onClick={e => addLike(singleGoal._id)}>
<ThumbUpAltIcon />
</Button>
<Typography variant="caption">
{singleGoal.likes.length}
</Typography>
<Button
size="small"
onClick={e => removeLike(singleGoal._id)}
>
<ThumbDownAltIcon />
</Button>
<Button href={`/goal/${singleGoal._id}`} size="small">
<ChatIcon />
</Button>
{!auth.loading && singleGoal.user === auth.user._id && (
<Button size="small">
<DoneIcon />
</Button>
)}
{!auth.loading && singleGoal.user === auth.user._id && (
<Button size="small">
<DeleteIcon />
</Button>
)}
</Grid>
</Grid>
</Grid>
))}
</Grid>
</Container>
</main>
</>
);
};
Goals.propTypes = {
getGoals: PropTypes.func.isRequired,
goal: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
goal: state.goal,
auth: state.auth
});
export default connect(mapStateToProps, { getGoals, addLike, removeLike })(
Goals
);
I will need to see the rest of your code to be sure, but it seems you are dispatching your action but you are not updating your store, it could be a mistake in your reducer.