I'm new to coding, and trying to build a social media application. I'm using react js in which I'm not able to provide styling to the Google Login Button. I have tried to provide style in various ways like from tweking the parent component to doing changes in style js, but none of it seems to work.
This is Auth.js
import React, { useState, useEffect } from 'react';
import { Avatar, Button, Paper, Grid, Typography, Container, TextField } from '#material-ui/core';
import { GoogleOAuthProvider, GoogleLogin, googleLogout } from '#react-oauth/google';
// import {GoogleLogin, googleLogout} from 'react-google-login'
import Icon from './icon';
import LockOutlinedIcon from '#material-ui/icons/LockOutlined';
import useStyles from './styles';
import Input from './Input';
const Auth = () => {
const classes = useStyles();
const [showPassword, setShowPassword] = useState(false);
const [isSignup, setIsSignup] = useState(false);
const handleShowPassword = () => setShowPassword((prevShowPassword) => !prevShowPassword);
const handleSubmit = () => {
};
const handleChange = () => {
}
const switchMode = () => {
setIsSignup((prevIsSignup) => !prevIsSignup);
handleShowPassword(false);
}
function handleCallbackResponse(response) {
console.log("JWT ID Token" + response.credential);
}
useEffect(() => {
/*global google*/
google.accounts.id.initialize({
client_id: '29955464017-7ng0cb3718pnb4lmmhd9tqqf1qqgqn4d.apps.googleusercontent.com',
callback: handleCallbackResponse
});
google.accounts.id.renderButton(
document.getElementById('signInDiv'),
{ theme: 'outline', size: 'large' }
)
}, [])
// const googleSuccess = (res) => {
// console.log(res);
// }
// const googleFailure = () => {
// console.log('Google Sign In was unsuccessful. Try again later');
// }
return (
<Container component='main' maxWidth='xs'>
<Paper className={classes.paper} elevation={3}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
<Typography variant='h5'>{isSignup ? "Sign Up" : "Sign In"}</Typography>
<form className={classes.form} onSubmit={handleSubmit}>
<Grid container spacing={2}>
{isSignup && (
<>
<Input name='firstName' label='First Name' handleChange={handleChange} autoFocus half />
<Input name='firstName' label='First Name' handleChange={handleChange} half />
</>
)}
<Input name='email' label='Email address' handleChange={handleChange} type='email' />
<Input name='password' label='Password' handleChange={handleChange} type={showPassword ? 'text' : 'password'} handleShowPassword={handleShowPassword} />
{isSignup && <Input name='confirmPassword' label='Repeat Password' handleChange={handleChange} type='password' />}
</Grid>
<Button type='submit' fullWidth variant='contained' color='primary' className={classes.submit}>
{isSignup ? "Sign Up" : "Sign In"}
</Button>
<div id='signInDiv'></div>
<Grid container justifyContent='flex-end'>
<Grid item>
<Button onClick={switchMode}>
{isSignup ? 'Already Have an account? Sign In' : "Don't have an account? Sign Up"}
</Button>
</Grid>
</Grid>
</form>
</Paper>
</Container>
)
}
export default Auth
This is Style.js
import { makeStyles } from '#material-ui/core/styles';
import Icon from './icon';
export default makeStyles((theme) => ({
paper: {
marginTop: theme.spacing(8),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: theme.spacing(2),
},
root: {
'& .MuiTextField-root': {
margin: theme.spacing(1),
},
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main,
},
form: {
width: '100%', // Fix IE 11 issue.
marginTop: theme.spacing(3),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
googleButton: {
marginBottom: theme.spacing(2),
},
}));
import { makeStyles } from '#material-ui/core/styles';
import Icon from './icon';
export default makeStyles((theme) => ({
paper: {
marginTop: theme.spacing(8),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: theme.spacing(2),
},
root: {
'& .MuiTextField-root': {
margin: theme.spacing(1),
},
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main,
},
form: {
width: '100%', // Fix IE 11 issue.
marginTop: theme.spacing(3),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
googleButton: {
marginBottom: theme.spacing(2),
},
}));
Please help me understand how can I style the div of Google login button
Related
I have the following component:
import * as React from "react";
import { createTheme, ThemeProvider } from '#mui/material/styles'
import { Box } from '#mui/system';
import { InputBase, TextField, Typography } from "#mui/material";
import ReactQuill from 'react-quill';
import { NoEncryption } from "#mui/icons-material";
type Props = {
issueId: string
}
export default function DialogBox({ issueId }: Props) {
const myTheme = createTheme({
// Set up your custom MUI theme here
})
const [newMsg, setNewMsg] = React.useState("");
const [startNewMsg, setStartNewMsg] = React.useState(false)
const handleNewMsgInput = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
}
const handleKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {
if (event.key === "Escape") {
// setStartNewMsg(false);
setNewMsg((prev) => "");
}
}
return (
<Box flexDirection="column" sx={{ display: "flex", alignItems: "center", backgroundColor: "lightblue", height: "100%", gap: "2rem" }} onKeyPress={(e) => {
handleKeyPress(e)
}}>
<Typography
sx={{
width: "fit-content",
height: "fit-content",
fontFamily: "Amatic SC",
background: "lightblue",
fontSize: "3rem"
}}>
Message board
</Typography>
{startNewMsg ?
<Box sx={{ width: "fit-content", height: "fit-content" }}>
<ReactQuill style={{ backgroundColor: "white", height: "10rem", maxWidth: "30rem", maxHeight: "10rem" }} theme="snow" />
</Box>
:
<TextField id="filled-basic" label="write new message" sx={{ "& fieldset": { border: 'none' }, backgroundColor: "white", borderRadius: "5px" }} variant="filled" fullWidth={true} onClick={(e) => setStartNewMsg((prev) => true)} onChange={(e) => handleNewMsgInput(e)} />}
</Box >
)
}
Which's causing me the following issue of text appearing out of my white textbox:
I notice on inspection the following property which's responsible for the problem:
My question is, what would be the best way to manipulating the values of that element? How should I retrieve them?
Regards!
Use ch units (the size of the text characters) and adjust the size based on the input.
Example:
const Test = () => {
const [text, setText] = useState('');
return (
<div>
<input
value={text}
onChange= {(e) => setText(e.target.value)}
style= {{height: `${text.length}ch`, width: `${text.length}ch`}}
/>
</div>
);
};
^ that is an input box that will grow based on the size of the text.
You don't want:
height: 100%;
as this will only allow the height to be as big as its parent container.
I want to move the content from Form.jsx according to the direction in which the drawer will move. When I click on the menu icon, the Drawer will be expanded but the content inside the body cannot be moved according to the drawer. How to make it enable here?
Before the drawer menu gets clicked:
After the drawer menu gets clicked:
Code is below:
Form.jsx
import { styled } from '#mui/material/styles';
import Box from '#mui/material/Box';
const DrawerHeader = styled('div')(({ theme }) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: theme.spacing(0, 1),
...theme.mixins.toolbar,
}));
export default function Form() {
return (
<Box component="main" sx={{ flexGrow: 1, p: 9 }}>
<DrawerHeader />
<TextField id="outlined-basic" label="Outlined" variant="outlined" />
<TextField id="filled-basic" label="Filled" variant="filled" />
<TextField id="standard-basic" label="Standard" variant="standard" />
</Box>
);
};
Drawer.jsx
import * as React from 'react';
import { styled, createTheme, ThemeProvider } from '#mui/material/styles';
import Box from '#mui/material/Box';
import MuiDrawer from '#mui/material/Drawer';
import MuiAppBar from '#mui/material/AppBar';
import Toolbar from '#mui/material/Toolbar';
import List from '#mui/material/List';
import CssBaseline from '#mui/material/CssBaseline';
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 ChevronRightIcon from '#mui/icons-material/ChevronRight';
import ListItem from '#mui/material/ListItem';
import ListItemButton from '#mui/material/ListItemButton';
import ListItemIcon from '#mui/material/ListItemIcon';
import ListItemText from '#mui/material/ListItemText';
import InboxIcon from '#mui/icons-material/MoveToInbox';
import MailIcon from '#mui/icons-material/Mail';
import { Link } from 'react-router-dom';
const drawerWidth = 240;
const openedMixin = (theme) => ({
width: drawerWidth,
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
overflowX: 'hidden',
});
const closedMixin = (theme) => ({
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
overflowX: 'hidden',
width: `calc(${theme.spacing(7)} + 1px)`,
[theme.breakpoints.up('sm')]: {
width: `calc(${theme.spacing(8)} + 1px)`,
},
});
const DrawerHeader = styled('div')(({ theme }) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: theme.spacing(0, 1),
// necessary for content to be below app bar
...theme.mixins.toolbar,
}));
const AppBar = styled(MuiAppBar, {
shouldForwardProp: (prop) => prop !== 'open',
})(({ theme, open }) => ({
zIndex: theme.zIndex.drawer + 1,
background: "fb8500",
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
...(open && {
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
}),
}));
const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
({ theme, open }) => ({
width: drawerWidth,
flexShrink: 0,
whiteSpace: 'nowrap',
boxSizing: 'border-box',
...(open && {
...openedMixin(theme),
'& .MuiDrawer-paper': openedMixin(theme),
}),
...(!open && {
...closedMixin(theme),
'& .MuiDrawer-paper': closedMixin(theme),
}),
}),
);
export default function MiniDrawer() {
const PageList = [
{
id: 1,
text: "Add new Donee",
to: "/form",
},
{
id: 2,
text: "Donees",
to: "/view",
},
];
// const theme = useTheme();
const theme = createTheme({
palette: {
primary: {
// Purple and green play nicely together.
main: '#ffca3a',
},
secondary: {
// This is green.A700 as hex.
main: '#11cb5f',
},
},
});
const [open, setOpen] = React.useState(false);
const handleDrawerOpen = () => {
setOpen(true);
};
const handleDrawerClose = () => {
setOpen(false);
};
return (
<ThemeProvider theme={theme}>
<Box sx={{ display: 'flex' }}>
<CssBaseline />
<AppBar position="fixed" open={open}>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={handleDrawerOpen}
edge="start"
sx={{
marginRight: 5,
...(open && { display: 'none' }),
}}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap component="div">
Compassion Lanka Data Entry
</Typography>
</Toolbar>
</AppBar>
<Drawer variant="permanent" open={open}>
<DrawerHeader>
<IconButton onClick={handleDrawerClose}>
{theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
</IconButton>
</DrawerHeader>
<Divider />
<List>
{PageList.map((text, index) => (
<ListItem key={text.id} disablePadding sx={{ display: 'block' }}>
<ListItemButton
sx={{
minHeight: 48,
justifyContent: open ? 'initial' : 'center',
px: 2.5,
}}
component={Link} to={text.to}
>
<ListItemIcon
sx={{
minWidth: 0,
mr: open ? 3 : 'auto',
justifyContent: 'center',
}}
>
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text.text} sx={{ opacity: open ? 1 : 0 }} />
</ListItemButton>
</ListItem>
))}
</List>
<Divider />
</Drawer>
</Box>
</ThemeProvider>
);
}
Set margin or padding of <Box component="main"> to the width of the drawer.
I am new to Next js, I want to call the news api in useEffect and dispatch the news array to my store. then filter it based on the user's input in the search bar in the header. problem is once the use effect data fetching is done and user starts typing rather than filtering the news array the screen gets re-render and the data fetching starts again. how to prevent this re-rendering and save the news array?
I tried to use getStaticprops but useDispatch is not allowed in there.
index.js
import { fetchNews } from "../store/actions/newsActions";
import NewsInfo from "../components/NewsInfo";
import { useDispatch, useSelector } from "react-redux";
import CircularProgress from "#material-ui/core/CircularProgress";
export default function Home() {
const dispatch = useDispatch();
const { news } = useSelector((state) => state.news);
React.useEffect(() => {
dispatch(fetchNews());
}, []);
return (
<>
{/* this wrapper cmp will make each headline uniquely accessible */}
{news?.articles ? (
news.articles.map((article) => (
<React.Fragment key={article.publishedAt}>
<NewsInfo headlines={article} />
</React.Fragment>
))
) : (
<CircularProgress />
)}
</>
);
}
Header.js
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, makeStyles } from "#material-ui/core/styles";
import MenuIcon from "#material-ui/icons/Menu";
import SearchIcon from "#material-ui/icons/Search";
import { useDispatch } from "react-redux";
import { filterHeadlines } from "../store/actions/newsActions";
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: {
padding: theme.spacing(0, 2),
height: "100%",
position: "absolute",
pointerEvents: "none",
display: "flex",
alignItems: "center",
justifyContent: "center",
},
inputRoot: {
color: "inherit",
},
inputInput: {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
transition: theme.transitions.create("width"),
width: "100%",
[theme.breakpoints.up("sm")]: {
width: "12ch",
"&:focus": {
width: "20ch",
},
},
},
}));
function SearchAppBar() {
const classes = useStyles();
const dispatch = useDispatch();
const [input, setInput] = React.useState("");
return (
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<IconButton
edge="start"
className={classes.menuButton}
color="inherit"
aria-label="open drawer"
>
<MenuIcon />
</IconButton>
<Typography className={classes.title} variant="h6" noWrap>
Material-UI
</Typography>
<div className={classes.search}>
<div className={classes.searchIcon}>
<SearchIcon />
</div>
<InputBase
placeholder="Search…"
classes={{
root: classes.inputRoot,
input: classes.inputInput,
}}
inputProps={{ "aria-label": "search" }}
value={input}
onChange={(e) => setInput(e.target.value)}
onBlur={() => dispatch(filterHeadlines(input))}
/>
</div>
</Toolbar>
</AppBar>
</div>
);
}
export default SearchAppBar;
you can use store dispatch to getServersideProps, getstaticprops
from your store file
export const rootDispatch = store.dispatch;
I have an application that lets a user to add tasks in a list. The tasks are fetched from the API and are displayed with the "List" component. When a user adds a new task from the "AddButton" component the task is stored in the database.
I want the to re-render the "List" component when the handleSubmit function happens on the "AddButton" component and adds the task to the database. The "addTask" and "getTasks" are fetching data from the API.
Thanks for your help in advance.
List component
import React, { useState, useEffect } from 'react';
import { makeStyles } from '#material-ui/styles';
import List from '#material-ui/core/List';
import ListItem from '#material-ui/core/ListItem';
import ListItemText from '#material-ui/core/ListItemText';
import Moment from 'react-moment';
import { getTasks } from './services/getTasks';
import AddButton from './AddButton';
import './App.css';
const useStyles = makeStyles(theme => ({
root: {
display: 'flex',
flexDirection: 'column',
width: '100%',
justifyContent: 'space-between',
height: '100%',
fontSize: '16px',
},
listItemLinkRoot: {
paddingLeft: theme.spacing(3),
width: '100%',
'&:hover': {
backgroundColor: '#212121',
color: 'white',
},
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
},
buttonContainer: {
display: 'flex',
width: '100%',
flexDirection: 'column',
justifyContent: 'flex-end',
},
list: {
flexGrow: 1,
overflow: 'auto',
},
listItemText: {
marginBottom: 8,
// fontSize: 20,
},
}));
function ListItemLink(props) {
return <ListItem button component="a" {...props} />;
}
export default function TaskList() {
const classes = useStyles();
const [tasks, setTasks] = useState([]);
useEffect(() => {
const fetchData = async () => {
const result = await getTasks();
setTasks(result);
};
fetchData();
}, []);
return (
<div className={classes.root}>
<List classes={{ root: classes.list }}>
{tasks.map(task => (
<ListItemLink
divider
key={task.id}
classes={{ root: classes.listItemLinkRoot }}
href="simple-list"
>
<ListItemText
classes={{ root: classes.listItemText }}
primary={task.description}
/>
<Moment
classes={{ root: classes.listItemDate }}
format="DD/MM/YYYY"
>
{task.createdAt}
</Moment>
</ListItemLink>
))}
</List>
<div className={classes.buttonContainer}>
<AddButton classes={{ root: classes.add }} />
</div>
</div>
);
}
AddButton component
import React, { useState } from 'react';
import { makeStyles } from '#material-ui/core/styles';
import Fab from '#material-ui/core/Fab';
import AddIcon from '#material-ui/icons/Add';
import TextField from '#material-ui/core/TextField';
import { addTask } from './services/postTask';
const useStyles = makeStyles(theme => ({
cont: {
display: 'flex',
flexDirection: 'row',
paddingBottom: '24px',
justifyContent: 'space-between',
backgroundColor: '#e0e0e0',
width: '100%',
alignItems: 'center',
felxGrow: 1,
},
fab: {
marginTop: theme.spacing(2),
marginRight: theme.spacing(2),
width: '100%',
},
textField: {
marginLeft: theme.spacing(3),
marginTop: 0,
marginBottom: 0,
flexGrow: 1,
},
}));
export default function AddButton() {
const classes = useStyles();
const [task, setTask] = useState({
description: '',
completed: false,
});
const handleChange = ev => {
setTask({ ...task, [ev.target.id]: ev.target.value });
};
const handleSubmit = () => {
addTask(task);
};
return (
<div className={classes.cont}>
<TextField
onChange={handleChange}
id="description"
label="Add a task"
rowsMax="4"
className={classes.textField}
margin="normal"
/>
<Fab
onClick={handleSubmit}
variant="extended"
size="small"
color="primary"
aria-label="add"
className={classes.fab}
>
<AddIcon />
Add
</Fab>
</div>
);
}
In your list component you can have your handleSubmit function and pass it down to your child AddButton component:
<AddButton classes={{ root: classes.add }} handleSubmit={handleSubmit} />
One solution I can think of is to move the fetchData function outside of your useEffect hook and pass it to the Button as a prop:
const fetchData = async () => {
const result = await getTasks();
setTasks(result);
};
useEffect(() => {
fetchData();
}, []);
...
<AddButton classes={{ root: classes.add }} refetch={fetchData}/>
Then in AddButton (assuming addTask() is async).
const handleSubmit = () => {
addTask(task)
.then(res => props.refetch())
};
Though it may make more sense to handle all of the state functionality in the parent component.
I'm trying to run a project, but the same is displaying an error in the console related to a function I have, the error is as follows:
"63:25 error Parsing error: Unexpected token, expected (function toggleDrawer = (open) => () => {^ state = {"
My project is this:
import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { withStyles } from 'material-ui/styles';
import AppBar from 'material-ui/AppBar';
import Drawer from 'material-ui/Drawer';
import Button from 'material-ui/Button';
import IconButton from 'material-ui/IconButton';
import Toolbar from 'material-ui/Toolbar';
import MenuIcon from 'material-ui-icons/Menu';
import TextField from 'material-ui/TextField';
import Paper from 'material-ui/Paper';
import Grid from 'material-ui/Grid';
import '../assets/scss/main.scss';
import img from '../assets/images/react.png';
const styles = theme => ({
root: {
width: '100%',
},
flex: {
flex: 1,
},
menuButton: {
marginLeft: -12,
marginRight: 20,
},
inputProps: {
step: 300,
},
button: {
margin: theme.spacing.unit,
},
input: {
display: 'none',
},
paper: {
padding: 50,
textAlign: 'center',
border: '5px solid black',
width: '100%',
},
paper1: {
backgroundColor: 'red',
marginTop: '13%',
},
img: {
width: '45%',
},
appbar: {
marginLeft: '-20.20%',
marginTop: '-20%',
width: '139.99%',
},
});
function ButtonAppBar(props) {
const { classes } = props;
const state = {
inputs: {},
};
function toggleDrawer = (open) => () => {
state={
open:false,
};
this.setState({
open,
});
};
const updateInputValue = (evt) => {
state.inputs[evt.target.name] = evt.target.value;
console.log(state.inputs);
};
const handleSubmit = (event) => {
// console.log('handleSubmit', username, password);
if (!event.target.checkValidity()) {
console.log({ displayErrors: true });
}
event.stopPropagation();
event.preventDefault();
return 0;
};
return (
<div className={styles.root}>
<Grid container spacing={8} alignItems="center" justify="center">
<Paper className={classes.paper}>
<AppBar position="static" className={classes.appbar}>
<Toolbar>
<IconButton onClick={this.toggleDrawer(true)} className={classes.menuButton} color="contrast" aria-label="Menu">
<Drawer open={this.state.open} onClose={this.toggleDrawer('open', false)}>
onClick={this.toggleDrawer('open', false)}
</Drawer>
<MenuIcon />
</IconButton>
</Toolbar>
</AppBar>
<img src={img} alt="React" className={classes.img} /><br />
<form onSubmit={handleSubmit} noValidate>
<TextField id="email" type="email" label="Usuário" className={classes.user} value={state.inputs.username} onChange={evt => updateInputValue(evt)} /><br />
<TextField id="password" type="password" label="Senha" className={classes.senha} value={state.inputs.password} onChange={evt => updateInputValue(evt)} />
<AppBar position="static" className={classes.paper1}>
<Link to="/Orders">
<Button type="submit" color="contrast">Login</Button>
</Link>
</AppBar>
</form>
</Paper>
</Grid>
</div>
);
}
ButtonAppBar.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(ButtonAppBar);
I wonder why this error is happening (I am a beginner in react).
It is a syntax error.
Replace function toggleDrawer = to
const toggleDrawer =