We Keep Coding

Required Details not showing

I am trying to display a large version of my post in the postDetail.jsx file but it shows blank when i Open it on my web browser. the application is being fetched properly as shown on my network tab in developer option and no form of error is printed on the console.
import React, { useEffect } from 'react';
import { Paper, Typography, CircularProgress, Divider } from '#material-ui/core/';
import { useDispatch, useSelector } from 'react-redux';
import moment from 'moment'; //js library for time
import { useParams, useHistory } from 'react-router-dom';
import { getPost } from '../../actions/posts';
import useStyles from './styles'
const PostDetails = () => {
const { post, posts, isLoading } = useSelector((state) => state.posts);
const dispatch = useDispatch();
const history = useHistory();
const classes = useStyles();
const { id } = useParams();
useEffect(() => {
dispatch(getPost(id));
}, [id]);
if(!post) return null;
//if this return this else return jsx
if(isLoading) {
return (
<Paper elevation={6} className={classes.loadingPaper}>
<CircularProgress size="7em" />
</Paper>
);
}
return (
<Paper style={{ padding: '20px', borderRadius: '15px' }} elevation={6}>
<div className= {classes.card}>
<div className={classes.section}>
<Typography variant="h3" component="h2">{post.title}</Typography>
<Typography gutterBottom variant="h6" color="textSecondary" component="h2">{ post.tags }</Typography>
<Typography gutterBottom variant="body 1" component="p"> {post.message} </Typography>
<Typography variant="h6"> Created by:{post.name} </Typography>
<Typography variant="body 1">{moment(post.createdAt).fromNow()}</Typography>
<Divider style={{ margin: "20px 0" }} />
<Typography variant="body1"><strong>Realtime Chat - coming soon !</strong></Typography>
<Divider style={{ margin: '20px 0px'}}/>
<Typography variant="body 1"><strong>Comments - coming soon !</strong></Typography>
<Divider style={{ margin: '20px 0px' }}/>
</div>
<div className={ classes.imageSection }>
<img className={ classes.media } src={post.selectedFile} alt={post.title} />
</div>
</div>
</Paper>
)
}
export default PostDetails;
This is the styles used for the code.. I used Material-Ui
import { makeStyles } from '#material-ui/core/styles';
export default makeStyles((theme) => ({
media: {
borderRadius: '20px',
objectFit: 'cover',
width: '100%',
maxHeight: '600px',
},
card: {
display: 'flex',
width: '100%',
[theme.breakpoints.down('sm')]: {
flexWrap: 'wrap',
flexDirection: 'column',
},
},
section: {
borderRadius: '20px',
margin: '10px',
flex: 1,
},
imageSection: {
marginLeft: '20px',
[theme.breakpoints.down('sm')]: {
marginLeft: 0,
},
},
recommendedPosts: {
display: 'flex',
[theme.breakpoints.down('sm')]: {
flexDirection: 'column',
},
},
loadingPaper: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
padding: '20px',
borderRadius: '15px',
height: '39vh',
},
commentsOuterContainer: {
display: 'flex',
justifyContent: 'space-between',
},
commentsInnerContainer: {
height: '200px',
overflowY: 'auto',
marginRight: '30px',
},
}));
Original image Containing the post before a specific id is clicked
[Image of the postDetails when clicked on the original post which contains the specific id i.e /posts/:1d]

how to add drop down list in material-UI Search component in navbar, for search results

I was using material ui search bar into navbar from app-bar-with-search-field official documnets from MUI in my react app. but this article it does not mention how to add dropdown list on selecting search input field.
I was tried many ways including Menu, List components from MUI for implement drop menu but didn't work for me. please help me to figure it out how i can add dropdown list of width of serach bar for showing a search results.
codesendbox link
code in my App.js
import "./styles.css";
import * as React from "react";
import { styled, alpha } from "#mui/material/styles";
import Box from "#material-ui/core/Box";
import InputBase from "#mui/material/InputBase";
import SearchIcon from "#mui/icons-material/Search";
const Search = styled("div")(({ theme }) => ({
position: "relative",
borderRadius: theme.shape.borderRadius,
backgroundColor: alpha(theme.palette.common.black, 0.15),
"&:hover": {
backgroundColor: alpha(theme.palette.common.black, 0.25)
},
marginTop: "5px",
marginLeft: 0,
width: "100%",
[theme.breakpoints.up("sm")]: {
marginLeft: theme.spacing(1),
width: "auto"
}
}));
const SearchIconWrapper = styled("div")(({ theme }) => ({
padding: theme.spacing(0, 2),
height: "100%",
position: "absolute",
pointerEvents: "none",
display: "flex",
alignItems: "center",
justifyContent: "center"
}));
const StyledInputBase = styled(InputBase)(({ theme }) => ({
color: "red",
"& .MuiInputBase-input": {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)})`,
transition: theme.transitions.create("width"),
width: "100%",
[theme.breakpoints.up("sm")]: {
width: "12ch",
"&:focus": {
width: "20ch"
}
},
[theme.breakpoints.down("sm")]: {
width: "0ch",
"&:focus": {
width: "12ch"
}
}
}
}));
export default function App() {
return (
<div className="App">
<div>
<nav
id="navbar"
className=" pt-0 pb-0 ps-3 container-row navbar-dark navbar navbar-expand-lg nav-div fixed-top"
>
<div className="container">
<div className="navbar-brand">
<h1 className="logo-text mt-1 text-dark">project logo</h1>
</div>
<div className="nav-list">
<ul className="nav navbar-nav ms-auto mb-2 mb-lg-0">
<React.Fragment>
<Box
sx={{
display: "flex",
alignItems: "center",
textAlign: "center"
}}
>
<Search>
<SearchIconWrapper>
<SearchIcon />
</SearchIconWrapper>
<StyledInputBase
placeholder="Search Organization ..."
inputProps={{ "aria-label": "search" }}
/>
</Search>
</Box>
</React.Fragment>
</ul>
</div>
</div>
</nav>
</div>
</div>
);
}
thank you.

Like suggestion from #rupesh patil, you should change to Autocomplete, or you also can make List show under Search input when your input search is focused and catch keyup event to search for result manually.
import "./styles.css";
import * as React from "react";
import { styled, alpha } from "#mui/material/styles";
import Box from "#material-ui/core/Box";
import InputBase from "#mui/material/InputBase";
import SearchIcon from "#mui/icons-material/Search";
import TextField from '#mui/material/TextField';
import Autocomplete from '#mui/material/Autocomplete';
const options = ['Option 1', 'Option 2'];
const Search = styled("div")(({ theme }) => ({
position: "relative",
borderRadius: theme.shape.borderRadius,
backgroundColor: alpha(theme.palette.common.black, 0.15),
"&:hover": {
backgroundColor: alpha(theme.palette.common.black, 0.25)
},
marginTop: "5px",
marginLeft: 0,
width: "100%",
[theme.breakpoints.up("sm")]: {
marginLeft: theme.spacing(1),
width: "auto"
}
}));
const SearchIconWrapper = styled("div")(({ theme }) => ({
padding: theme.spacing(0, 2),
height: "100%",
position: "absolute",
pointerEvents: "none",
display: "flex",
alignItems: "center",
justifyContent: "center"
}));
const StyledInputBase = styled(InputBase)(({ theme }) => ({
color: "red",
"& .MuiInputBase-input": {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)})`,
transition: theme.transitions.create("width"),
width: "100%",
[theme.breakpoints.up("sm")]: {
width: "12ch",
"&:focus": {
width: "20ch"
}
},
[theme.breakpoints.down("sm")]: {
width: "0ch",
"&:focus": {
width: "12ch"
}
}
}
}));
export default function ControllableStates() {
const [value, setValue] = React.useState(options[0]);
const [inputValue, setInputValue] = React.useState('');
return (
<div className="App">
<div>
<nav
id="navbar"
className=" pt-0 pb-0 ps-3 container-row navbar-dark navbar navbar-expand-lg nav-div fixed-top"
>
<div className="container">
<div className="navbar-brand">
<h1 className="logo-text mt-1 text-dark">project logo</h1>
</div>
<div className="nav-list">
<ul className="nav navbar-nav ms-auto mb-2 mb-lg-0">
<React.Fragment>
<Box
sx={{
display: "flex",
alignItems: "center",
textAlign: "center"
}}
>
<Search>
<SearchIconWrapper>
<SearchIcon />
</SearchIconWrapper>
{/* <StyledInputBase
placeholder="Search Organization ..."
inputProps={{ "aria-label": "search" }}
/> */}
<Autocomplete
value={value}
onChange={(event, newValue) => {
setValue(newValue);
}}
inputValue={inputValue}
onInputChange={(event, newInputValue) => {
setInputValue(newInputValue);
}}
id="controllable-states-demo"
options={options}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Search Organization ..." />}
/>
</Search>
</Box>
</React.Fragment>
</ul>
</div>
</div>
</nav>
</div>
</div>
);
}

How to lock the position of close button with paper component of modal in material ui for responsive screen?

I had built a cards page where I'm rendering multiple cards on a page. On clicking each card a popup card renders aka modal component but my close button is not responsive to the card.
Here is an image. See the button is going the wrong position when I open it to inspect.
Here is my link to complete code at codesandbox.
imagePopup.js modal component with close button
import React from "react";
import { makeStyles } from "#material-ui/core";
import Modal from "#material-ui/core/Modal";
import Backdrop from "#material-ui/core/Backdrop";
import Fade from "#material-ui/core/Fade";
import ActionButton from "./ActionButton";
import { CloseOutlined } from "#material-ui/icons";
const useStyles = makeStyles((theme) => ({
modal: {
display: "flex",
alignItems: "center",
justifyContent: "center"
},
paper: {
backgroundColor: theme.palette.background.paper,
boxShadow: theme.shadows[5]
},
actionBtn: {
position: "absolute",
right: 555,
top: 85
}
}));
export default function ImagePopup(props) {
const classes = useStyles();
const { openModal, setOpenModal, handleOpen, handleClose, img } = props;
return (
<div>
<Modal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
className={classes.modal}
open={openModal}
onClose={handleClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500
}}
>
<Fade in={openModal}>
<div>
<div className={classes.actionBtn}>
<ActionButton
// to edit icon functionality
color="secondary"
onClick={handleClose}
>
<CloseOutlined fontSize="small" />
</ActionButton>
</div>
<div className={classes.paper}>
<img src={img} height="500" />
</div>
</div>
</Fade>
</Modal>
</div>
);
}

Adjust your actionBtn bloc style like this:
actionBtn: {
position: "absolute",
marginLeft: 352,
marginTop: -5,
borderRadius: 0,
'& > button': {
background: "transparent" // If you want button to be transparent
}
}

How to change React Appbar links from purple

I have a React web app where my Appbar options have links associated with them, which underlined and turned the font purple. I also have a scroll function that changes the text color to black once I have scrolled down from the top position on the page.
I can't figure out how to make the text color white, while keeping the color change functionality on change.
Header
import React, { useEffect, useState } from 'react';
import { makeStyles } from '#material-ui/core/styles';
import { AppBar, IconButton, Toolbar, Collapse } from '#material-ui/core';
import ExpandMoreIcon from '#material-ui/icons/ExpandMore';
import { Link as Scroll } from 'react-scroll';
import ScrollToColor from './ColorChangeOnScroll';
import Button from '#material-ui/core/Button';
const useStyles = makeStyles((theme) => ({
root: {
fontFamily: 'Nunito',
},
appbar: {
position: 'fixed',
zIndex: '9999',
background: 'black',
},
appbarTitle: {
flexGrow: '1',
fontSize: '1vw',
},
appbarTitle2: {
flexGrow: '1',
fontSize: '1vw',
},
appbarWrapper: {
width: '80%',
margin: '0 auto',
},
icon: {
color: '#2bbcd4',
fontSize: '2vw',
},
colorText: {
color: '#2bbcd4',
},
button: {
borderRadius: 30,
background: '#2bbcd4',
},
buttontext: {
fontFamily: 'Nunito',
fontWeight: 'bold',
color: 'white',
},
rightToolbar: {
marginLeft: 'auto',
marginRight: -12,
display: 'flex',
},
}));
export default function Header() {
const classes = useStyles();
const [checked, setChecked] = useState(false);
useEffect(() => {
setChecked(true);
}, []);
return (
<section>
<div className={classes.root} id="header">
<ScrollToColor>
<AppBar className={classes.appbar} elevation={0}>
<Toolbar className={classes.appbarWrapper}>
<a
href="/landing"
>
<h1 className={classes.appbarTitle}>
Logo{' '}
</h1>
</a>
<section className={classes.rightToolbar}>
<a
href="/contact"
>
<h2
className={classes.appbarTitle2}
>
Contact Sales
</h2>
</a>
<a
href="/login"
>
<h2
className={classes.appbarTitle2}
style={{ marginRight: '50px' }}
>
Sign In
</h2>
</a>
<Button
className={classes.button}
size="large"
variant="contained"
href="/signup"
style={{ marginRight: '10px' }}
>
<span className={classes.buttontext}>
Get started for free{' '}
</span>
</Button>
</section>
</Toolbar>
</AppBar>
</ScrollToColor>
</div>
</section>
);
}
Scroll to change font color function:
import React from "react";
import { useScrollTrigger } from "#material-ui/core";
const ScrollHandler = props => {
const trigger = useScrollTrigger({
disableHysteresis: true,
threshold: 0,
target: props.window ? window() : undefined
});
return React.cloneElement(props.children, {
style: {
backgroundColor: trigger ? "white" : "transparent",
color: trigger ? "black" : "white",
transition: trigger ? "0.3s" : "0.5s",
boxShadow: trigger ? "1px 1px 1px #efefef" : "none",
padding: "10px 0px",
icon: trigger ? "black" : "white",
}
});
};
const ScrollToColor01 = props => {
return <ScrollHandler {...props}>{props.children}</ScrollHandler>;
};
export default ScrollToColor01;
I have tried adding inline styling to the text/links, and they do turn the font white & remove the underline, but it prevents the scroll function from working and as I scroll down, the text remains white (and invisible in front of a white background).
<a
href="/login"
style={{ textDecoration: 'none', color: 'white' }}
>
<h2
className={classes.appbarTitle2}
style={{ marginRight: '50px' }}
>
Sign In
</h2>
</a>
Any advice on how to change the font color from purple to white and keep the scroll color functionaility is much appreciated.

You could set a wrapper for the anchors and change the color of the wrapper instead on your scroll functionality, while setting the color of the anchors to inherit. This way the anchors will always inherit the color you set on the wrapper, even when visited.
const useStyles = makeStyles((theme) => ({
...
links: {
textDecoration: 'none',
color: 'inherit'
},
...
}));
And then for the links you simply add the class:
<a href="/contact" className={classes.links}>
<h2 className={classes.appbarTitle2}>Sales</h2>
</a>
Hope this was helpful.

Why would material-ui's AppBar just break its own css on a few page reloads?

I'll show you exactly what I mean here. (it's a short video demonstrating exactly how this problem is reproduced and the missing css elements)
I also have screenshots of before:
and after:
Via inspect element it's clear that important css elements just straight up disappear, and it doesn't make any sense why that would happen specifically after clicking on a link, coming back, and refreshing.
Has anyone run into a similar problem with material-ui before or think you might know why the css is breaking?
EDIT: console is logging errors only when the search bar is in the wacky position as such:
unfortunately, I'm still not quite sure what to make of it.
I'll also include my appbar component which uses #material-ui/core/styles' makeStyles CSS rendering. If you want the entire repository to play around with I can make it available as well.
import React from 'react';
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import IconButton from '#material-ui/core/IconButton';
import Typography from '#material-ui/core/Typography';
import InputBase from '#material-ui/core/InputBase';
import { fade } from '#material-ui/core/styles/colorManipulator';
import { makeStyles } from '#material-ui/core/styles';
import MenuIcon from '#material-ui/icons/Menu';
import SearchIcon from '#material-ui/icons/Search';
import {connectSearchBox} from 'react-instantsearch-dom';
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1,
display: 'none',
[theme.breakpoints.up('sm')]: {
display: 'block',
},
},
search: {
position: 'relative',
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
'&:hover': {
backgroundColor: fade(theme.palette.common.white, 0.25),
},
marginLeft: 0,
width: '100%',
[theme.breakpoints.up('sm')]: {
marginLeft: theme.spacing(1),
width: 'auto',
},
},
searchIcon: {
width: theme.spacing(7),
height: '100%',
position: 'absolute',
pointerEvents: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
inputRoot: {
color: 'inherit',
},
inputInput: {
padding: theme.spacing(1, 1, 1, 7),
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('sm')]: {
width: 300,
'&:focus': {
width: 400,
},
},
}
}));
function SearchBox({currentRefinement, refine}){
const classes = useStyles();
return(
<InputBase
type="search"
value={currentRefinement}
onChange={event => refine(event.currentTarget.value)}
placeholder="Search by state, park name, keywords..."
classes = {{
root: classes.inputRoot,
input: classes.inputInput,
}}
/>
)
}
const CustomSearchBox = connectSearchBox(SearchBox);
function SearchAppBar() {
const classes = useStyles();
return (
<div className={classes.root}>
<AppBar position="static" color="primary">
<Toolbar>
<IconButton
edge="start"
className={classes.menuButton}
color="inherit"
aria-label="Open drawer"
>
<MenuIcon />
</IconButton>
<Typography className={classes.title} variant="h6" noWrap>
Title
</Typography>
<div className={classes.search}>
<div className={classes.searchIcon}>
<SearchIcon />
</div>
<CustomSearchBox/>
</div>
</Toolbar>
</AppBar>
</div>
);
}
export default SearchAppBar;