DEV Community: Haruka Kato

How to use an array of colors to change the button background color on the button press using one handleChange (Hooks)

Haruka Kato — Sat, 27 Feb 2021 02:10:24 +0000

I have 6 buttons and I wanted to change the color once pressed separately.

At first, I decided to give useState to each button like this.

    const [color,setColor]=useState('#F5F5F5');
    const [textColor,setTextColor]=useState('black');
    const [color1,setColor1]=useState('#F5F5F5');
    const [textColor1,setTextColor1]=useState('black');
    const [color2,setColor2]=useState('#F5F5F5');
    const [textColor2,setTextColor2]=useState('black');
    const [color3,setColor3]=useState('#F5F5F5');
    const [textColor3,setTextColor3]=useState('black');


    const button = (
        <Button style={{background:color,color:textColor}}
                className={classes.paper}
                onClick={()=>{setColor("purple");setTextColor('white')
                }}>
            asda
        </Button>
    )

    const button1 = (
        <Button style={{background:color1,color:textColor1}}
                className={classes.paper}
                onClick={()=>{setColor1("purple");setTextColor1('white')
                }}>
            asda
        </Button>
    );


    const button2 = (
        <Button style={{background:color2,color:textColor2}}
                className={classes.paper}
                onClick={()=>{setColor2("purple");setTextColor2('white')
                }}>
            asda
        </Button>
    );

But then I thought if there is a way to use less useState, and I decided to use one useState instead of using 12 useState in total.

I saw a lot of articles writing about updating multiple properties using one useState. But I did not see any article talking about updating the property by using an index.

First, you want to create an array of color using one useState. White is the initial color of the buttons.

   const [colors, setColors] = React.useState([
        "white",
        "white",
        "white",
        "white",
        "white",
        "white"
    ]);

Then, you should create a function that has two arguments, index and value. I also had difficulties finding articles handleChange having two arguments.
You can create a new object(newColors this time) to overwrite the existing values.

    const handleChange = (index, value) => {
        const newColors = [...colors];
        newColors[index] = value;
        setColors(newColors);
    };

newColors[index] = value;

This means the new colors will be passed to colors(The array we created before).
For example, colors[0] = "purple".
Finally, you pass the updated color to SetColors.

                    <Button
                        style={{ background: colors[0] }}
                        className={classes.paper}
                        onClick={() => handleChange(0, 'purple')}>
                        asda
                    </Button>

JSX will be like this. You want to specify the index of colors in style, and update the color using handleChange.

I have to tell you another thing here. I used onChange first to call handleChange and the background color didn't change. I found out that onChange doesn't work for some browsers, and you should use onClick.

It took me a week to solve this problem and hope this is helpful for you.

import React, {useState} from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Link } from 'react-router-dom'
import Header from '../BasicComponents/Header';
import Footer from '../BasicComponents/Footer';
import Box from '@material-ui/core/Box';
import Button from '@material-ui/core/Button';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';


const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
    },
    box:{
        position: 'relative',
    },
    button:{
        display: 'block',
        margin: '0 auto',
        marginBottom: 50,
        opacity: 0.7,
        height: 60,
        borderRadius: 50,
    },
    font:{
        textAlign: 'center',
    },
    paper: {
        textAlign: 'center',
        height: 100,
        margin:5,
        width: '100%',
        opacity: 0.7,
    },
    grid:{
        marginTop: 50,
        justifyContent: 'center',
        alignContent:  'center',
    },
    grid1:{
        justifyContent: 'center',
        alignContent:  'center',
        marginBottom: 50,
    },
}));

export default function Question2() {
    const classes = useStyles();

    const [colors, setColors] = React.useState([
        "white",
        "white",
        "white",
        "white",
        "white",
        "white"
    ]);
    const handleChange = (index, value) => {
        const newColors = [...colors];
        newColors[index] = value;
        setColors(newColors);
    };


    const grid = (
        <div>
            <Grid container className={classes.grid} >
                <Grid item xs={6} sm={2} >
                    <Button
                        style={{ background: colors[0] }}
                        className={classes.paper}
                        onClick={() => handleChange(0, 'purple')}>
                        asda
                    </Button>
                </Grid>
                <Grid item xs={6} sm={2}>
                    <Button
                        style={{ background: colors[1] }}
                        className={classes.paper}
                        onClick={() => handleChange(1, 'purple')}>
                        asda
                    </Button>
                </Grid>
                <Grid item xs={6} sm={2}>
                    <Button
                        style={{ background: colors[2] }}
                        className={classes.paper}
                        onClick={() => handleChange(2, 'purple')}>
                        asda
                    </Button>
                </Grid>
            </Grid>
            <Grid container className={classes.grid1}>
                <Grid item xs={6} sm={2}>
                    <Button
                        style={{ background: colors[3] }}
                        className={classes.paper}
                        onClick={() => handleChange(3, 'purple')}>
                        asda
                    </Button>
                </Grid>
                <Grid item xs={6} sm={2}>
                    <Button
                        style={{ background: colors[4] }}
                        className={classes.paper}
                        onClick={() => handleChange(4, 'purple')}>
                        asda
                    </Button>
                </Grid>
                <Grid item xs={6} sm={2}>
                    <Button
                        style={{ background: colors[5] }}
                        className={classes.paper}
                        onClick={() => handleChange(5, 'purple')}>
                        asda
                    </Button>
                </Grid>
            </Grid>
        </div>
    )

    return (
        <React.Fragment>
            <Header/>
            <Box
                className={classes.box}
                style={{
                    color: "#white"
                }}>
                <h2 className={classes.font}>Your customized stress release plan.</h2>
                <p className={classes.font}>100% complete</p>
                <h1 className={classes.font} >How did your stress change over the month?</h1>
                <h3 className={classes.font}>Select all that apply(required)</h3>
                {grid}
                <Button variant="contained" color="primary" disableElevation className={classes.button}>
                    <Link to="/result">⇨　Go to next question</Link>
                </Button>
            </Box>
            <Footer/>
        </React.Fragment>
    );
}

How to place Grid in center in React

Haruka Kato — Thu, 11 Feb 2021 01:45:15 +0000

I was trying to center element to center but

margin: 0 auto
display: block

nor

margin: 10px auto;

worked.
I researched and those solutions don't work for because it a block-level element by default, and which therefore occupies 100% width as you can see from the picture.

Here is the code I was trying to apply.

    return (
        <React.Fragment>
            <Header/>
            <Box
                className={classes.box}
                style={{
                    color: "#white"
                }}>
                <h2 className={classes.font}>Your customized stress release plan.</h2>
                <p className={classes.font}>20% complete</p>
                <h1 className={classes.font} >How did your stress change over the month?</h1>
                <h3 className={classes.font}>Select all that apply(required)</h3>
                    <Grid container className={classes.grid} >
                        <Grid item xs={6} sm={2} >
                            <Paper className={classes.paper}>xs=6 sm=3</Paper>
                        </Grid>
                        <Grid item xs={6} sm={2}>
                            <Paper className={classes.paper}>xs=6 sm=3</Paper>
                        </Grid>
                        <Grid item xs={6} sm={2}>
                            <Paper className={classes.paper}>xs=6 sm=3</Paper>
                        </Grid>
                    </Grid>
                    <Grid container >
                        <Grid item xs={6} sm={2}>
                            <Paper className={classes.paper}>xs=6 sm=3</Paper>
                        </Grid>
                        <Grid item xs={6} sm={2}>
                            <Paper className={classes.paper}>xs=6 sm=3</Paper>
                        </Grid>
                        <Grid item xs={6} sm={2}>
                            <Paper className={classes.paper}>xs=6 sm=3</Paper>
                        </Grid>
                    </Grid>
                <Button variant="contained" color="primary" disableElevation className={classes.button}>
                    <Link to="/question2">⇨　Go to questions</Link>
                </Button>
            </Box>
            <Footer/>
        </React.Fragment>
    );

You could use

    margin: '0 auto',
    width: '50%',

but in my case, it already specifies the width so applying this makes the grid smaller.

So I used this.

    grid:{
        justifyContent: 'center',
        alignContent:  'center',
    },

I hope this helps those who are trying to center Grid element.

Firebase Authentification using google sign-in OnAuthStateChanged logout

Haruka Kato — Wed, 27 Jan 2021 01:50:34 +0000

I was working on firebase authentification using google sign-in and a lot of articles online were explaining about Sign-in but there weren't many articles explaining logout.

It took me a while to figure this out so I want to share it here.

This is my directory structure.

So first, you sign in with google on this page.

Once you successfully signed in, the logout button will show up on the header.

So, I wanted to show this logout button when a user is signed in. Here is my SignIn.js

import React, { useState } from 'react';
import 'firebase/auth'
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import Header from './BasicComponents/Header';
import Footer from './BasicComponents/Footer';
import Button from '@material-ui/core/Button';
import { useFirebase } from "react-redux-firebase";
import { useDispatch, useSelector } from 'react-redux';
import { push } from 'connected-react-router'

const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
    },
    paper: {
        textAlign: 'center',
        backgroundColor: '#C0C0C0',
        opacity: 0.7,
        borderRadius: 50,
        height: 500,
        paddingTop: 20,
    },
    grid: {
        position: 'block',
        margin: '0 auto',
        marginTop: 50,
        marginBottom: 50,
    },
    input:{
        width: '70%',
        height: 50,
        fontSize: 15,
        padding: '.3em',
        borderRadius: 10,
        border: '1px solid #aaa',
    },
    input1:{
        width: '70%',
        height: 50,
        fontSize: 15,
        padding: '.1em',
        marginRight: 5,
        borderRadius: 10,
        border: '1px solid #aaa',
    },
    p1:{
        textAlign: 'left',
        paddingLeft: 80,
        fontColor: 'black',
    },
    button1:{
        backgroundColor: 'pink',
        color: 'black',
        width: '35%',
        borderRadius:40,
        marginTop: 10,
    },
    button2:{
        backgroundColor: '#9400D3',
        color: 'black',
        width: '35%',
        borderRadius:40,
    },
}));


export default function SignIn() {
    const classes = useStyles();
    const auth = useSelector(state => state.auth); //global stateを呼び出すため,Dev toolをみて決めてる
    const dispatch = useDispatch();
    const firebase = useFirebase();

    const signInWithGoogle = () => {
        firebase
            .login({
                provider: "google",
                type: "popup",
            })
            .then(() => {
                dispatch({ type: "USE_PROFILE" });
                dispatch(push('/top'));
            });
    };


    return (
        <div className={classes.root}>
            <Header/>
            <Grid >
                <Grid item xs={5} className={classes.grid}>
                    <Paper className={classes.paper}>
                        <form>
                            <h1>Welcome back!</h1>
                            <p>Please sign in below to continue</p>
                            <p className={classes.p1}>Email address</p>
                            <input
                                type="text"
                                name="Email"
                                className={classes.input1}
                            /><br></br>
                            <p className={classes.p1}>Password</p>
                            <input
                                type="password"
                                name="password"
                                className={classes.input}
                            /><br></br>
                            <Button classes={{root: classes.button1,}} type="submit">
                                Sign in
                            </Button>
                            <p>or</p>
                            <Button classes={{root: classes.button2,}}
                                    onClick={(event) => {
                                        event.preventDefault();
                                        signInWithGoogle();
                                    }} >
                                Sign in with Gmail
                            </Button><br></br>
                            <p >Forgot Password?</p>
                        </form>
                    </Paper>
                </Grid>
            </Grid>
            <Footer/>
        </div>

    );
}

And here is my index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'
import { Provider } from 'react-redux';
import {configureStore} from './configureStore';
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import { useHistory } from "react-router-dom";
import { createFirestoreInstance } from "redux-firestore";
import { BrowserRouter } from "react-router-dom";
import { useDispatch, useSelector } from 'react-redux';
import { ReactReduxFirebaseProvider } from "react-redux-firebase";
import { createStore, compose } from "redux";
import { rootReducer } from "./rootReducer";

  const firebaseConfig = {
    apiKey: "AIzaSyAOSBfTj_VQ4byWAAOWDhAsklmZtk2W_iE",
    authDomain: "stresstackle-599d9.firebaseapp.com",
    projectId: "stresstackle-599d9",
    storageBucket: "stresstackle-599d9.appspot.com",
    messagingSenderId: "930013144401",
    appId: "1:930013144401:web:79b25db79f4118359fdf70",
    measurementId: "G-J26Y6MYWV3"
  };

const rrfConfig = {
  userProfile: "users",
  useFirestoreForProfile: true,
};

firebase.initializeApp(firebaseConfig);
firebase.firestore();

export const auth = firebase.auth();

const initialState = {};
const store = createStore(rootReducer, initialState);

const rrfProps = {
  firebase,
  config: rrfConfig,
  dispatch: store.dispatch,
  createFirestoreInstance,
};

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <ReactReduxFirebaseProvider {...rrfProps}>
          <App />
      </ReactReduxFirebaseProvider>
    </Provider>
  </React.StrictMode>,
    document.getElementById('root')
    );

And App.js

import React, { Suspense } from 'react';
import { BrowserRouter as Router,Switch, Route} from 'react-router-dom';
import Top from './components/Top';
import Contact from './components/Contact';
import SignUp from './components/SignUp';
import SignIn from './components/SignIn';
import { ConnectedRouter } from 'connected-react-router';
import {history} from './configureStore';
import { Provider } from 'react-redux'
import {configureStore} from './configureStore';
const store = configureStore();

const App = () => {


    return (
        <React.Fragment>
            <Provider store={store}>
                <ConnectedRouter history={history}>
                    <Switch>
                        <Route exact path="/" component={Top}/>
                    </Switch>
                    <Switch>
                        <Route exact path="/contact" component={Contact}/>
                    </Switch>
                    <Switch>
                        <Route exact path="/signup" component={SignUp}/>
                    </Switch>
                    <Switch>
                        <Route exact path="/signin" component={SignIn}/>
                    </Switch>

                    <Switch>
                        <Route exact path="/top" component={Top}/>
                    </Switch>
                </ConnectedRouter>
            </Provider>
        </React.Fragment>
    )

}
export default App;

I use Header.js file to show the logout button.

import React from 'react'
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 {push} from "connected-react-router";
import {useDispatch, useSelector} from "react-redux";
import { useState } from 'react';
import { useEffect } from 'react'
import firebase from "firebase/app";


const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
    appBar:{
      height: 90,
    },
    button:{
        fontSize:50,
        display: 'flex',
        justifyContent: 'space-between',
    },
}));

export default function Header({children}) {
  const classes = useStyles();
    const auth = useSelector(state => state.auth); //global stateを呼び出すため,Dev toolをみて決めてる
    const dispatch = useDispatch();
    const [user, setUser] = useState(null);

    useEffect(() => {
        return firebase.auth().onAuthStateChanged(user => {
            setUser(user);
        });
    }, []);


    const logout = () => {
        firebase
            .logout({
                provider: "google",
                type: "popup",
            })
            .then(() => {
                dispatch({ type: "USE_PROFILE" });
                dispatch(push('/signin'));
            });
    };

    return (
            <React.Fragment>
                <div className={classes.root}>
                    <AppBar position="static" color='white' className={classes.appBar}>
                        <Toolbar className={classes.button}>
                            <p>ST</p>
                            {user ? (
                                <button onClick={logout}>Google Logout</button>
                            ) : (
                               <div></div>
                            )}
                        </Toolbar>
                    </AppBar>
                </div>
            </React.Fragment>
        );
    }

So, when a user is signed in, onAuthStateChanged changes from null. onAuthStateChanged is here to check if the state for user sign-in has changed or not.

    const [user, setUser] = useState(null);

    useEffect(() => {
        return firebase.auth().onAuthStateChanged(user => {
            setUser(user);
        });
    }, []);

If a user signed in,

   const logout = () => {
        firebase
            .logout({
                provider: "google",
                type: "popup",
            })
            .then(() => {
                dispatch({ type: "USE_PROFILE" });
                dispatch(push('/signin'));
            });
    };

This function is called and my header will show the logout button. A lot of articles I found were doing way complicated things so it took time for me to figure this out. And I felt like Firebase official document was not too helpful for the logout function.

Hope this helps!

Error: Could not find router reducer in state tree, it must be mounted under "router"

Haruka Kato — Thu, 21 Jan 2021 01:50:39 +0000

https://gyazo.com/64dd39bc0d236709ea16112c2775b51d

Hello there! I was trying to introduce google auth to my react-redux app for over a week and I was finally able to solve the problem.
First, I encountered this problem and I read almost all the solutions online but it did not help at all!

If you look at those solutions, most of them "decrease the version of history", but if it did not work, maybe you wanna take a look at my article!

I followed this tutorial https://github.com/GoZaddy/react-redux-firebase-article/blob/master/src to introduce Google Auth to my application. And its index.js is as follows.

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import { createStore, compose } from "redux";
import { Provider } from "react-redux";
import { ReactReduxFirebaseProvider } from "react-redux-firebase";
import { createFirestoreInstance } from "redux-firestore";
import { rootReducer } from "./ducks/reducers";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
import * as serviceWorker from "./serviceWorker";

const firebaseConfig = {
  apiKey: "AIzaSyBJTFQkg95Aj-s_NsA77mco8ZVG2siLv4U",
  authDomain: "react-redux-firebase-article.firebaseapp.com",
  databaseURL: "https://react-redux-firebase-article.firebaseio.com",
  projectId: "react-redux-firebase-article",
  storageBucket: "react-redux-firebase-article.appspot.com",
  messagingSenderId: "781345165856",
  appId: "1:781345165856:web:45fd42a60e5bb365172245",
  measurementId: "G-XFR3YXLCGW",
};

const rrfConfig = {
  userProfile: "users",
  useFirestoreForProfile: true,
};

firebase.initializeApp(firebaseConfig);
firebase.firestore();

const initialState = {};
const store = createStore(rootReducer, initialState);

const rrfProps = {
  firebase,
  config: rrfConfig,
  dispatch: store.dispatch,
  createFirestoreInstance,
};
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <ReactReduxFirebaseProvider {...rrfProps}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </ReactReduxFirebaseProvider>
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

I tried every solution online about this error so I thought

Error: Could not find router reducer in state tree, it must be mounted under "router"

I thought this error was occurring because of my Ducks pattern. So I tried to convert this index.js file to Ducks pattern then I was even more stuck and I didn't know what to do.

I spent a lot of time looking for how I can convert this Google Auth index.js file to Ducks pattern but I found zero articles. I followed some articles that explain how to convert from Re-ducks pattern to Ducks pattern and I followed but I started to get different errors continuously.

So I hired a tutor and asked a question and I was finally able to solve this problem.

Here is the important point. If you follow Ducks pattern, you don't wanna convert Google Auth index.js file to Ducks pattern because it makes things very complicated.

If you find this error while you are working on react-redux-firebase

Error: Could not find router reducer in state tree, it must be mounted under "router"　

you should look at this official document.
https://www.npmjs.com/package/connected-react-router

For me, my problem was I did not have

 <Provider store={store}>

in my App.js file.

Here is my App.js file.

import React, { Suspense } from 'react';
import { BrowserRouter as Router,Switch, Route} from 'react-router-dom';
import Top from './components/Top';
import Contact from './components/Contact';
import SignUp from './components/SignUp';
import SignIn from './components/SignIn';
import SignOut from './components/SignOut';
import { ConnectedRouter } from 'connected-react-router';
import {history} from './configureStore';
import { Provider } from 'react-redux'
import {configureStore} from './configureStore';
const store = configureStore();

const App = () => {


    return (
        <React.Fragment>
            <Provider store={store}>
                <ConnectedRouter history={history}>
                            <Switch>
                                <Route exact path="/" component={Top}/>
                            </Switch>
                            <Switch>
                                <Route exact path="/contact" component={Contact}/>
                            </Switch>
                            <Switch>
                                <Route exact path="/signup" component={SignUp}/>
                            </Switch>
                            <Switch>
                                <Route exact path="/signin" component={SignIn}/>
                            </Switch>
                            <Switch>
                                <Route exact path="/signout" component={SignOut}/>
                            </Switch>
                            <Switch>
                                <Route exact path="/top" component={Top}/>
                            </Switch>
                </ConnectedRouter>
                </Provider>
        </React.Fragment>
    )

}
export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'
import { Provider } from 'react-redux';
import {configureStore} from './configureStore';
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import { useHistory } from "react-router-dom";
import { createFirestoreInstance } from "redux-firestore";
import { BrowserRouter } from "react-router-dom";
import { useDispatch, useSelector } from 'react-redux';
import { ReactReduxFirebaseProvider } from "react-redux-firebase";
import { createStore, compose } from "redux";
import { rootReducer } from "./rootReducer";

  const firebaseConfig = {
    apiKey: "AIzaSyAOSBfTj_VQ4byWAAOWDhAsklmZtk2W_iE",
    authDomain: "stresstackle-599d9.firebaseapp.com",
    projectId: "stresstackle-599d9",
    storageBucket: "stresstackle-599d9.appspot.com",
    messagingSenderId: "930013144401",
    appId: "1:930013144401:web:79b25db79f4118359fdf70",
    measurementId: "G-J26Y6MYWV3"
  };

const rrfConfig = {
  userProfile: "users",
  useFirestoreForProfile: true,
};

firebase.initializeApp(firebaseConfig);
firebase.firestore();

const initialState = {};
const store = createStore(rootReducer, initialState);

const rrfProps = {
  firebase,
  config: rrfConfig,
  dispatch: store.dispatch,
  createFirestoreInstance,
};

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <ReactReduxFirebaseProvider {...rrfProps}>

          <App />

      </ReactReduxFirebaseProvider>
    </Provider>
  </React.StrictMode>,
    document.getElementById('root')
    );

/src/configureStore.js

import { createStore, applyMiddleware, compose } from 'redux';
import { routerMiddleware } from 'connected-react-router';
import {rootReducer} from './rootReducer';
// import thunk from 'redux-thunk';
// import logger from 'redux-logger';


const createBrowserHistory = require('history').createBrowserHistory;




export const history = createBrowserHistory();
//これをApp.jsに渡した


const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
export  function configureStore(preloadedState) {

    const store = createStore(
        rootReducer(history),
        preloadedState,
        composeEnhancers(
            applyMiddleware(
                routerMiddleware( history),
            )
        )
    );

    return store;
};
//↑Redux dev toolsとconnectingしている

/src/rootReducer.js

import {combineReducers} from 'redux';
import { connectRouter } from 'connected-react-router';
import {firebaseReducer} from "react-redux-firebase";
import {firestoreReducer} from "redux-firestore";

export const rootReducer =(history) => combineReducers({

    router: connectRouter(history),
    firebase: firebaseReducer,
    firestore: firestoreReducer,
});

//history:履歴管理に必要なもの
//connected-react-router:reduxとつなげられる
//..>..>..>みたいなアプリ上での遷移に対応できる

// title: Consultation,
// inquiry: Consultation

/src/components/SignIn.js

import React, { useState } from 'react';
import { useFirebaseApp } from 'reactfire';
import 'firebase/auth'
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import Header from './BasicComponents/Header';
import Footer from './BasicComponents/Footer';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import { StylesProvider } from "@material-ui/core/styles";
import styled from "styled-components";
import { useFirebase } from "react-redux-firebase";
import { useHistory } from "react-router-dom";
import { useDispatch, useSelector } from 'react-redux';
import { push } from 'connected-react-router'

const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
    },
    paper: {
        textAlign: 'center',
        backgroundColor: '#C0C0C0',
        opacity: 0.7,
        borderRadius: 50,
        height: 500,
        paddingTop: 20,
    },
    grid: {
        position: 'block',
        margin: '0 auto',
        marginTop: 50,
        marginBottom: 50,
    },
    input:{
        width: '70%',
        height: 50,
        fontSize: 15,
        padding: '.3em',
        borderRadius: 10,
        border: '1px solid #aaa',
    },
    input1:{
        width: '70%',
        height: 50,
        fontSize: 15,
        padding: '.1em',
        marginRight: 5,
        borderRadius: 10,
        border: '1px solid #aaa',
    },
    p1:{
        textAlign: 'left',
        paddingLeft: 80,
        fontColor: 'black',
    },
    button1:{
        backgroundColor: 'pink',
        color: 'black',
        width: '35%',
        borderRadius:40,
        marginTop: 10,
    },
    button2:{
        backgroundColor: '#9400D3',
        color: 'black',
        width: '35%',
        borderRadius:40,
    },
}));


export default function SignUp() {
    const classes = useStyles();
    const auth = useSelector(state => state.auth); //global stateを呼び出すため,Dev toolをみて決めてる
    const dispatch = useDispatch();
    const firebase = useFirebase();

    const signInWithGoogle = () => {
        firebase
            .login({
                provider: "google",
                type: "popup",
            })
            .then(() => {
                dispatch({ type: "USE_PROFILE" });
                dispatch(push('/top'));
            });
    };


    return (
            <div className={classes.root}>
                <Header/>
                <Grid >
                    <Grid item xs={5} className={classes.grid}>
                        <Paper className={classes.paper}>
                            <form>
                            <h1>Welcome back!</h1>
                              <p>Please sign in below to continue</p>
                                 <p className={classes.p1}>Email address</p>
                                    <input
                                        type="text"
                                        name="Email"
                                        className={classes.input1}
                                    /><br></br>
                                    <p className={classes.p1}>Password</p>
                                    <input
                                        type="password"
                                        name="password"
                                        className={classes.input}
                                    /><br></br>
                                        <Button classes={{root: classes.button1,}} type="submit">
                                            Sign in
                                        </Button>
                                            <p>or</p>
                                        <Button classes={{root: classes.button2,}}
                                                onClick={(event) => {
                                                    event.preventDefault();
                                                    signInWithGoogle();
                                                }} >
                                            Sign in with Gmail
                                        </Button><br></br>
                            <p >Forgot Password?</p>
                            </form>
                        </Paper>
                    </Grid>
                </Grid>
            <Footer/>
        </div>

    );
}

I think this article can be helpful if you are working on react-redux-firebase and find this error because there are not many articles that explain how to solve this error for a react-redux-firebase app.

Error: Could not find router reducer in state tree, it must be mounted under "router"

Hope this was helpful for you!

How to override Material UI button styles

Haruka Kato — Sun, 10 Jan 2021 07:22:53 +0000

I was trying to change

border-radius:

for my button and I somehow could not change. I found out that Material UI button has default styles and you have to override it in order to change things. So when you change some styles and they are not applied, you should 'inspect' and check if the styles are crossed. Then that means the default styles won over your styles!

I looked at many articled and this worked.

https://material-ui.com/customization/components/ Please look at this document too!

This document says 'When the className property isn't enough, and you need to access deeper elements, you can take advantage of the classes object property to customize all the CSS injected by Material-UI for a given component'.

 <Button classes={{root: classes.button1,}}>
     Confirm
 </Button>

Some articles were suggesting

import { StylesProvider } from "@material-ui/core/styles";

const StyledButton = styled(Button)`
  background-color: red;
  border-radius: 0;
`;

export default function App() {
  return (
    <StylesProvider injectFirst>
      <div className="App">
        <StyledButton>Hello</StyledButton>
      </div>
    </StylesProvider>
  );
}

But this did not work for me. Since the way I followed is from Material UI official document, I guess it is more reliable.

Give me suggestions or comments if you know better ways or something! Hope this helps :)

text-align:center doesn't work for button

Haruka Kato — Fri, 08 Jan 2021 00:54:11 +0000

I was trying to place a button in the center and I could not apply text-align:center or margin: 0 auto and I found out that

button:{
  textAlign: 'center',
},

 <div className={classes.button}>
     <Button variant="contained" color="primary"　　　
　　　　disableElevation　className={classes.button}>
       Confirm
     </Button>
 </div>

You can enclose Button tag with div and apply text-align:center to div element!

Hope this helps!

text-align: center does not work...

Haruka Kato — Fri, 08 Jan 2021 00:45:31 +0000

I wanted those two boxes to be in the center but I couldn't apply 'text-align:center'.

I was doing some search and I found out for block elements such as

<p> <div> <h1>〜<h6>

the default is 'display:block' so you can't place the element itself in the center (text and image in the element will be centered).

So here is what you wanna do.

margin: 10px auto;

This means margin-right equals margin-left so it can place the element in the center!

CSS can be tricky and I sometimes spend a lot of time trying to figure it out but I hope I will get used to more rules.

Hope this can be helpful for you!

How to set background image in React

Haruka Kato — Tue, 05 Jan 2021 10:25:41 +0000

Having trouble setting a background image in your react project? I was looking at many posts on websites and I was finally able to solve this problem.

import candles from './Picture/candles.jpg';

<Box
    class="candles"
    style={{
    backgroundImage: `url(${candles})`,
}}>

I was trying this way for a while and it looked nothing wrong with it.

import candles from './Picture/candles.jpg';

<Box
    class="candles"
    style={{
    backgroundImage: `url(${candles})`,
    backgroundSize: "cover",
    height: "100vh",
    color: "#f5f5f5"
}}>

This worked and I found out that the image I was using was bigger than div default so it needed to be specified its height. So if you are struggling to set your background image in react, you can try this!

Hope this is helpful for you :)

text-align: right doesn't work...

Haruka Kato — Sat, 26 Dec 2020 10:20:17 +0000

I trapped in this problem many times so I would like to leave it here.

I wanted this 'Login' button to be on the right edge of this header but I could not apply text-align: right.

import React from 'react';
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,
  },
button:{
    textAlign: 'right',
    display:'block',
}
}));

export default function Top() {
  const classes = useStyles();

  return (
      <div className={classes.root}>
        <AppBar position="static" color='white'>
          <Toolbar >
            <Button className={classes.button} 
                    color="inherit">Login
            </Button>
          </Toolbar>
        </AppBar>
      </div>
  );
}

I found out this does not work because Button is enclosed by the parent element, 'Toolbar'. When you use 'text-align', it needs to know 'where is the center?' or 'where is the middle?'. Therefore, you should select a parent element which is also a block element, and apply text-align.

import React from 'react';
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,
  },
button:{
    textAlign: 'right',
    display:'block',
}
}));

export default function Top() {
  const classes = useStyles();

  return (
      <div className={classes.root}>
        <AppBar position="static" color='white'>
          <Toolbar className={classes.button}>
            <Button color="inherit">Login</Button>
          </Toolbar>
        </AppBar>
      </div>
  );
}

I used to use 'float: right' but it's not really recommended for various reasons so I've been trying to find other ways!

Please give me any correction if my grammar is weird or does not make sense!

Permission to username/project.git denied to user

Haruka Kato — Thu, 24 Dec 2020 09:39:53 +0000

I was trying to push my new repository to my Github and the permission was denied because I was trying to push it to my old workplace's account.

But it took some time to find the right solution for me so I wanted to leave here.

If you attempt all these steps and your terminal says like this

remote: Permission to harukakato35/StressBox.git denied to ○○○.
fatal: unable to access 'https://github.com/harukakato35/StressBox.git/': The requested URL returned error: 403

Try this as the quickest way.

git push git@github.com:harukakato35/StressBox.git main

Or with this way, you can connect with the account you want

$ git remote set-url origin https://hoge@github.com/hoge/abc.git
$ git push origin main

Hope this is useful for you!