DEV Community: Ethan Soo Hon

Writing your 1st Custom Hook

Ethan Soo Hon — Mon, 22 Feb 2021 18:19:20 +0000

We've all heard of "custom hooks" before but many people still learning React find them intimidating (speaking from personal experience!) and it's hard to see the benefit without a concrete example.

In this tutorial we will first attempt to solve a problem without using a custom hook then we will refactor the code to use a custom hook and see how much cleaner and how much less code there actually is.

Semantic UI

For this tutorial we will use the react component library Semantic UI. No particular reason, I have just been using it lately and it is relatively simple. After running create-react-app these are our only 2 dependencies

$  yarn add semantic-ui-react semantic-ui-css
## Or NPM
$  npm install semantic-ui-react semantic-ui-css

To quickly bootstrap our project so we can get on with writing our custom hook let's grab a layout example from their site.

![Example screen](https://i.gyazo.com/b3bd5a64368f11e469ea481c0eba3913.png) *[Link to page](https://react.semantic-ui.com/layouts/login)*

This resulting layout is achieved with Semantic UI components in about 30 lines. We will take this code and make a Login.js component.

We'll place our Login in our App.js and don't forget the import line for the minified stylesheet or else the library won't work!

import './App.css';
import Login from './Login.js';
import 'semantic-ui-css/semantic.min.css'

function App() {
  return (
    <main>
      <Login></Login>
    </main>
  );
}

Goal

We'll try to keep the problem as simple as possible; we want an alert/message to be transitioned in at the top of the screen when a user's login fails or succeeds. In addition, we want for that message to timeout after a specific amount of time. This form is not connected to anything so to emulate a login failing (by network issues, incorrect credentials etc...) or succeeding we use Math.random() each time the form is submitted.

/* Inside Login.js*/
<Form
   size='large'
   onSubmit={(e) => {
      e.preventDefault();
      const RANDOM_FAILURE = Math.random();
      if (RANDOM_FAILURE >= 0.5) {
         console.log('Login Succeeded');
      } else {
        console.log('Login failed');                
       }
   }}
   >

Message Component + API

Semantic UI comes with a Message component that looks like the perfect candidate for a pop-up message.

![Message Component](https://i.gyazo.com/da35a83a85a17ba213e7f227d97497cf.png) *[Link to page](https://react.semantic-ui.com/collections/message/#types-message)*

Looking at the props we can see that the Message component needs the following props in order to be customized...
Note: As seen below some of the props here do the same thing so we only need one of them.

![Message Component](https://i.gyazo.com/1057565bdb6511fdbe6cd5c178ec80d3.png) *Redundant props success & positive, negative & error and hidden and visible*

Transition Component + API

We also want to transition the message in smoothly with a CSS animation. We could do it manually but Semantic UI also comes with a Transition component that does it for us if we wrap around our it around our Message. This way we can specify the animation we want as a string prop. Here's a basic example

   <Transition
        duration={2000}
        animation="scale"
        visible={false}
        unmountOnHide={true}>
     <p> Hello World! </p>
</Transition>

The transition component will only trigger when its visible prop is changed from false to true or vice-versa. You Cannot just do visible={true} and expect it to work.

Attempt 1

First let's make our local state for the message and transition. We will set the Message component as always visible (props visible={true} and hidden={false}) and let the Transition component wrapped around it handle the visibility. We then create our piece of state (using an object) and fill it will all the info that we need to customize our Message via props.


  const [messageConfig, setmessageConfig] = useState({
    visible: false,
    header: "",
    content: "",
    error: false,
    success: false,
  });

Okay nows let's pass the properties from this state object into our Components! Notice in the onDismiss for our Message (a required prop) we just hide the message and set the state back to the default values.

            <Transition
                duration={2000}
                animation='scale'
                visible={messageConfig.visible}
                unmountOnHide={true}
            >
                <Message
                    onDismiss={() => {
                    setmessageConfig({
                            header: '',
                            content: '',
                            error: false,
                            success: false,
                            visible: false
                        });
                    }}
                    compact
                    size='large'
                    content={messageConfig.content}
                    header={messageConfig.header}
                    error={messageConfig.error}
                    success={messageConfig.success}
                    visible={true}
                    hidden={false}
                >

                </Message>
            </Transition>

Now that we have everything setup we just need to call our setMessageConfig whenever we want to see a message and then create a setTimeout() to hide the message after a specific period of time (let's say 2s).

Here's our onSubmit from before now with the newly added code

    onSubmit={(e) => {
                            e.preventDefault();
                            const RANDOM_FAILURE = Math.random();
                            console.log(RANDOM_FAILURE);
                            if (RANDOM_FAILURE >= 0.5) {
                                console.log('Login Succeeded');
                                setmessageConfig({
                                    header: 'Success',
                                    content: 'Login Successfull',
                                    error: false,
                                    success: true,
                                    visible: true
                                });
                                setTimeout(() => {
                                    setmessageConfig({
                                        header: '',
                                        content: '',
                                        error: false,
                                        success: true,
                                        visible: false
                                    });
                                }, 2000);
                            } else {
                                console.log('Login failed');
                                setmessageConfig({
                                    header: 'Failure',
                                    content: 'Login Failed',
                                    error: false,
                                    success: true,
                                    visible: true
                                });
                                setTimeout(() => {
                                    setmessageConfig({
                                        header: '',
                                        content: '',
                                        error: false,
                                        success: true,
                                        visible: false
                                    });
                                }, 2000);
                            }
                        }}

![Working Message](https://i.gyazo.com/e97fe65c33c2e87e9207db775fac6bd6.png) *Technically it works... but we can do better*

It works... but look at all the code we have to type everytime we need to show and autoHide a message. Let's try to refactor it into a custom hook.

Custom Hook rules

These are paraphrased directly from the React docs

1) The code written by the custom hook will be functionally equivalent to what we have now. The advantage of refactoring is having a cleaner, easier to understand code base and reusable logic.

2) Name your custom hooks function by the React convention (useSomething). Is it required? No. But it is a very important convention for others you will potentially share the hook/codebase with.

3) Components using the same custom hook do not share state variables; the state variables defined in custom hooks are fully isolated.

Writing the hook

A custom hook is just a function; the thing that makes it a custom hook is its use of built-in React hooks functions (useState, useEffect etc...) and reusable logic. I defined an object to hold the initial state of our message just for convenience.

import { useState } from 'react';
const INITIAL_STATE = {
    header: '',
    content: '',
    error: false,
    success: false,
    visible: false
};
function useMessage(autoHideDuration = 2000) {
    const [messageConfig, setmessageConfig] = useState(INITIAL_STATE);
    function showMessage(config = { ...INITIAL_STATE }) {
        setmessageConfig({ ...config, visible: true });
        setTimeout(() => {
            hideMessage();
        }, autoHideDuration );
    }
    function hideMessage() {
        setmessageConfig({...INITIAL_STATE});
    }
    return [showMessage, hideMessage, messageConfig];
}

All we did here was

Name our function according to hook rules. We take in an argument here to determine the delay before the message hides. Your custom hook can take in arguments or not, up to you.
Take the defined state object in Login.js and move it in here.
Create two helper functions to manipulate the state so when we are using the hook we don't have call the setter or the setTimeout directly making it cleaner and easier to use.
showMessage takes in the config from the user, sets visible to true, and then initiates a setTimeout that hides the Message after the period is over.
There is no strict rule that states what should be returned from a custom hook needs to be in an array, but most people follow the return pattern used by useState and return an array of multiple values we can destructure to access.

Using the custom hook

We removed the state messageConfig from Login.js and replaced it with our custom hook.

const [showMessage, hideMessage, messageConfig] = useMessage(2500);

Here's how our onSubmit now looks!

onSubmit={(e) => {                           
  e.preventDefault();                            
  const RANDOM_FAILURE = Math.random();                          
  if (RANDOM_FAILURE >= 0.5) {                               
    showMessage({                                
       header: 'Success',                                
       content: 'Login Successful',                          
       error: false,                         
       success: true,
       visible: true                         
    });
  } else {                               
     showMessage({                               
       header: 'Failure',                                
       content: 'Login Failed',                              
       error: true,                              
       success: false,                               
      visible: true                          
    });
}
}}

*Wayyyyy better* 😄

Here's the final version; have fun writing custom hooks!

*Cover image Credit : Link to Image

Let's Make a Redux + Material UI + OAuth Starter template! Pt 4. Navbar & Theme Switch

Ethan Soo Hon — Sun, 21 Feb 2021 19:36:22 +0000

In the last part of this tutorial series we will set up a mobile responsive Navbar component that has a theme switcher and the user's profile details once they're logged in.

AppBar

![Appbar docs](https://i.gyazo.com/56f37bdfc4aaf58467df8e090e923fe2.png) *Material UI Docs*

On this same documentation page they have many examples of built NavBars; we will take the sample code for the App Bar with a primary search field example and modify it to suit our needs.The good news is that we finished setting up the redux store in the previous article (so we don't have to add any additional code); the bad news is the NavBar code seems rather complex at first glance, so let's walk through it together!

![AppBar with search](https://i.gyazo.com/cd4c5da46509a6f2ef6fd899a054b66f.png ) *Our starting point*

Breaking down our NavBar.js

1) Styles:
From our example code we copied from the documentation we see that that this particular AppBar has a search bar and a hamburger icon on the far left. We don't need the search bar or the hamber icon so we will remove the styles for those and add in additional styles for...

theme switch (themeToggle)
image container for the user's photo (imageContainer)
nav ruleset to change the backgroundColor. (nav)


const useStyles = makeStyles((theme) => ({
  grow: {
    flexGrow: 1,
  },
  title: {
    display: 'none',
    [theme.breakpoints.up('sm')]: {
      display: 'block',
    },
  },
  sectionDesktop: {
    display: 'none',
    [theme.breakpoints.up('md')]: {
      display: 'flex',
    },
  },
  sectionMobile: {
    display: 'flex',
    [theme.breakpoints.up('md')]: {
      display: 'none',
    },
  },
    nav: {
        backgroundColor: theme.palette.primary.main,
        color: theme.palette.primary.contrastText
    },
    themeToggle: {
        [theme.breakpoints.up('sm')]: {
            padding: 0
        }
    },
    imageContainer: {
        maxWidth: '100%',
        height: 'auto',
        '& img': {
            width: '2em'
        }
    }
}));

*We removed inputInput, inputRoot , searchIcon, search and menuButton properties*

The rest is fairly simple; the syntax of the Material UI makeStyles hook allows you to easily set nested properties (Like in SASS/SCSS) AND set up media queries. We didn't explicitly set our own breakpoints when making a custom theme so they are inherited from the default theme.

![Breakpoint docs]( https://i.gyazo.com/f7f533ed5d6f67915f7a0f5916eae78f.png) *Default breakpoint values*

2) Local State and Theme Switch

There are lots of state variables and functions in the example component; let's determine what they do.

Note: The example also had a submenu on desktop as well, but I chose to remove it to simplify the code. This means we deleted the following...

const [anchorEl, setAnchorEl] = React.useState(null);
const isMenuOpen = Boolean(anchorEl);
handleProfileMenuOpen,handleProfileMenuClose functions
renderMenu variable

const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null);

To enable mobile responsiveness we will have a submenu pop up when the width of the device is too small to fit all items in the default nav bar. This will be done with the Material UI Menu component. The prop anchorEl (which takes in a DOM node) determines where the menu will appear on the screen.

When the user clicks on our mobile menu icon handleMobileMenuOpen will be called. We have a variable setup to coerce the value of mobileMoreAnchorEl to a boolean. If it's still the default null value this will evaluate to false. If there is a DOM element in mobileMoreAnchorEl then we know they clicked it and want to open the mobile menu.

    const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);

    /*The anchor pieces of state need to either be null or have a DOM element */
    const handleMobileMenuOpen = (event) => {
        setMobileMoreAnchorEl(event.currentTarget);
    };
    const handleMobileMenuClose = () => {
        setMobileMoreAnchorEl(null);
    };

*To close it we just set state back to null*

renderMobileMenu

This variable contains the JSX for our sub-menu on mobile; The menu is made with the Material UI menu component. We will mostly leave this menu as-is but feel free to play with the Icon / badge content to change the # of notifications or emails etc...

The one thing we want to add here is a toggle to switch the theme; luckily Material UI also has a component for that

![Switch docs]( https://i.gyazo.com/af999c8ee8d7266b822958a1b1125374.png) *[Just what we need!](https://material-ui.com/components/switches/#Switches.js)*

The basic example is sufficient enough we just have to supply a few props. The most important being the checked boolean and the onChange function.

For the switch I decided true=dark mode (no particular reason) so we reach in to the redux store with useSelector and grab our theme object. If the theme.palette type is "dark" checked is true. onChange when clicked will dispatch our toggleTheme action creator we made in article 3 and voila we have a working theme button!

    const { auth, theme } = useSelector((state) => state);
const renderMobileMenu = (
        <Menu
            anchorEl={mobileMoreAnchorEl}
            anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
            id={mobileMenuId} 
            keepMounted
            transformOrigin={{ vertical: 'top', horizontal: 'right' }}
            open={isMobileMenuOpen}
            onClose={handleMobileMenuClose}
        >
            <MenuItem>
                <IconButton aria-label='show 1 new mails' color='inherit'>
                    <Badge badgeContent={1} color='secondary'>
                        <MailIcon />
                    </Badge>
                </IconButton>
                <p>Messages</p>
            </MenuItem>
...
...
...
<MenuItem>
                <IconButton aria-label='toggle dark mode'>
                    <Switch
                        color='default'
                        checked={theme.palette.type === 'dark'}
                        onChange={() => dispatch(toggleTheme())}
                        inputProps={{ 'aria-label': 'primary checkbox' }}
                        name='themeToggle'
                    ></Switch>
                </IconButton>
                <p>Theme </p>
            </MenuItem>
    </Menu>

*id here is just a string; we use it for ARIA support. Our mobile button to bring up the submenu should have an aria-controls prop equal to this ID*

3) The returned JSX
Again we are mostly keeping the code from App Bar with a primary search field the only thing we add to the Navbar is the users profile picture, the switch for toggling the theme and conditional rendering dependent on the user's login status.

Here are the components wrapping the navbar...

return (
 <header className={classes.grow}>
  <AppBar position='static' component='div'>
   <Toolbar component='nav' className={classes.nav}>
    <Typography className={classes.title} variant='h6' noWrap>
     Google Oauth Redux
    </Typography>
    <div className={classes.grow} />
    ...
    ...
    ...
)

Within the above components we have the following two divs that separate the content that will render in the navbar on desktop widths and mobile widths. We add the conditional rendering in there.
Note: The JSX in the sectionMobile div is JUST FOR THE ICON/BUTTON to open the submenu (see renderMobileMenu variable)

Desktop NavBar items

    <div className={classes.sectionDesktop}>
    {auth.user ? <>
        /* ...Mail & Notification IconButtons */
          <IconButton aria-label='toggle dark mode'>
           <Switch                               
                  color='default'                                        
                  checked={theme.palette.type === 'dark'}                                    
                  onChange={() => dispatch(toggleTheme())}                               
                  inputProps={{ 'aria-label': 'primary checkbox' }}                                      
                  name='themeToggle'                                
           </Switch>                
          </IconButton>
          <IconButton
              edge='end'                         
              aria label='account of current user'                   
              aria-haspopup='true'                               
              color='inherit'
          >
         <div className={classes.imageContainer}>                                
               <img src={auth.user.imageUrl} alt={auth.user.givenName} />                                    
             </div> 
          </IconButton>
       </> : <p>Not Logged in </p>}
      <div/>

Mobile NavBar items

import MoreIcon from '@material-ui/icons/MoreVert';

<div className={classes.sectionMobile}>
  {auth.user ? <>
    <IconButton                                  
       aria-label='show more'                                
       aria-controls={mobileMenuId}                              
       aria-haspopup='true'                              
       onClick={handleMobileMenuOpen}                                
       color='inherit'
      >                              
        <MoreIcon />                         
      </IconButton>
  </>:  <p>Not Logged in </p>}

</div>

Finally at the very end we throw in the variable renderMobileMenu (it's not a function, just JSX) because the menu is always being rendered (even if we're not on mobile or have not opened it) but only visible to us when we click the button that triggers a state change and causes the open prop be true.

<header>
   <AppBar> 
    <Toolbar>
    ...
    ...
    </Toolbar>
   </AppBar>
   {renderMobileMenu}
</header>

Done 👍

If you have followed this 4 part series you should now have a very reasonable starting template for bootstrapping your front-end projects!

Here's a full working version and the repo to the completed code; please let me know what you think!

(Be sure to also read the Gotchas section in the Git repo)!

Let's Make a Redux + Material UI + OAuth Starter template! Pt 3. Alerts & Themes

Ethan Soo Hon — Sat, 20 Feb 2021 18:52:34 +0000

In this part of the series we will examine how to build an alert and theme system controlled by the redux store that you can use across your entire app. Although our buttons do change (due to conditional rendering) if someone interacts with your site it's always a good idea to let the user know if their actions went through successfully or failed!

![Different types of alerts](https://miro.medium.com/max/6800/1*R4lNMpEdY0VOD96MtkLx4g@2x.png) *Different libraries have different names for them but they serve the same purpose*

Snackbar

In the case of the Material UI component library they named this component Snackbar.

All of the conditions listed in this description are achievable by passing in some props to the Snackbar component. Typically Snackbars are displayed on the bottom of the screen but through you can modify the position with the anchorOrigin prop. See the Full API here.

API

Looking at the API we can see that at the bare minimum we need to pass as props are the following...

open: bool //If true, Snackbar is open.
message: string 
// To put snackbar at top center
anchorOrigin: { vertical: 'top', horizontal: 'center' }
onClose: function 
//Calls our onClose after time is up
autoHideDuration: number (ms)

Because these props are the things that will customize any SnackBar/Alert it makes sense to set up our initial state (in our yet to be made reducer) as an object with the above key value pairs so we can easily spread the state object into the component.

Time to Code

Similarly we will begin setting up the our redux code to handle this Alert system.

1) Types:
Simple enough, we have one to set/show a message and one to clear/hide a message.

export const SHOW_ALERT = 'SHOW_ALERT';
export const CLEAR_ALERT = 'CLEAR_ALERT';

2) Action Creators:
showAlert returns an action object with a single key-value pair in its payload object; message.
clearAlert just returns an action object with the type since we use our INITIAL_STATE object in the reducer file to reset it back to normal

export const showAlert = (
    msgConfig = { message: 'default'}
) => ({ type: SHOW_ALERT, payload: { ...msgConfig } });

export const clearAlert = () => ({ type: CLEAR_ALERT });

3) Reducers:
Here's how we set up our INITIAL_STATE object with key-value pairs matching the props that will go into the Snackbar component.

const INITIAL_STATE = {
    open: false,
    message: '',
    anchorOrigin: { vertical: 'top', horizontal: 'center' },
    autoHideDuration: 3500
};

In the actual code handling SHOW_ALERT we just spread the previous state object (to keep all the other properties), set open to true and spread the action.payload into the object as well to get the message property.

const alertReducer = (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case SHOW_ALERT:
            /*
       action.payload looks like
        {message:''}
      */
            return { ...state, open: true, ...action.payload };
        case CLEAR_ALERT:
            return { ...INITIAL_STATE };
        default:
            return state;
    }
};

4) Components:
I will name this component Alert.js but in the returned JSX we will utilize the Snackbar component.

Note: Confusingly enough there is also a component in Material UI called Alert which we will not use

import { Snackbar, IconButton } from '@material-ui/core';
import CloseIcon from '@material-ui/icons/Close';
import { useDispatch, useSelector } from 'react-redux';
import { clearAlert } from '../actions/alertActions';

const Alert = () => {
    const alert = useSelector((state) => state.alert);
    const dispatch = useDispatch();
    const handleClose = () => dispatch(clearAlert());
    return (
        <Snackbar
            {...alert}
            onClose={handleClose}
            action={
                    <IconButton
                        size='small'
                        aria-label='close'
                        color='inherit'
                        onClick={handleClose}
                    >
                        <CloseIcon fontSize='small' />
                    </IconButton>
            }
        />
    );
};

We use the useSelector hook to get the alert object out of state, we use useDispatch to grab the dispatch function then we spread all the properties from the alert object from state into the Snackbar. The action prop takes in some Components/JSX you can use to make the close button.

Theming

In addition to the makeStyles() hook we saw in part 2 Material UI also has a robust and customizable theme system that works by having a MuiThemeProvider component wrapped around your root component. Whatever created theme you passed in as a prop to that provider will be used whenever a makeStyles() hook is invoked

/*
This theme variable is usually the
default Material UI theme but if
it detects a theme provider component
wrapped around it, that theme will instead be used
*/
const useStyles = makeStyles((theme) => ({
    center: {
        etc...
                etc...
    },
}));

![Theming detail page](https://i.gyazo.com/9873f614d8361456c669a8c7d5d1ad02.png) *How would we switch to dark mode?*

To create your own theme you need to leverage their API and use the createMuiTheme function. It takes in an object with key value pairs that can be set to colors (palette) font-sizes (via typography) and many more!

(*Note: I encourage everyone to look into the default theme object to see what can be set. It looks intimidating at first but it is just a giant object)

Dark Mode

This is such a common use case they have a whole section in the documentation devoted to this! In this case we just need to create a new theme and set the value of palette.type to 'dark' or 'light'.

const darkTheme = createMuiTheme({
  palette: {
    type: 'dark',
  },
});

![Dark mode differences](https://i.gyazo.com/e38ae2c672c6b841ae5b99fd52b8e20f.png) *By default only these properties are changed when the mode is switched*

Unfortunately this only modifies certain properties of the theme NOT including the primary or secondary colors. If you recall from article 2 we styled the button in our login component like so...

const useStyles = makeStyles((theme) => ({
    button: {
       etc...
       backgroundColor: theme.palette.primary.main,
         etc....
}));

Thus switching the type to 'dark' will not affect theme.palette.primary so the button will remain the same color. If you wanted your component to be darkened as well we'll have to set our own palette.primary color when creating our theme!

Time to Code

For the sake of simplicity I will only have 2 themes to switch between; light and dark.

1) Types

export const TOGGLE_THEME = 'TOGGLE_THEME';

2) Action Creators
That's it! The defined light and dark mode objects/themes are pre-defined in the themeReducer file

export const toggleTheme = () => ({ type: TOGGLE_THEME });

3) Reducer
Since we are managing the theme object directly through redux our state will just be whatever object is the result of us calling the createMuiTheme() function. We create two themes for light and dark mode with the only difference being the primary.main color.

let INITIAL_STATE = {};
const LIGHT_MODE_STATE = createMuiTheme({
    palette: {
        type: 'light',
        primary: {
            main: '#3f51b5', 
            contrastText: '#fff'
        }
    }
});
const DARK_MODE_STATE = createMuiTheme({
    palette: {
        type: 'dark',
        primary: {
            main: '#000',
            contrastText: '#fff'
        }
    }
});

*Note: Any properties you don't set are inherited from the default theme so you can still use variables like typography, spacing etc... even though we didn't explicitly define it

We throw in a one-liner to detect the users theme preference from their computer via a function on the global window object.

let matched = window.matchMedia('(prefers-color-scheme: dark)').matches;
matched
    ? (INITIAL_STATE = { ...DARK_MODE_STATE })
    : (INITIAL_STATE = { ...LIGHT_MODE_STATE });

Finally we write the reducer itself; very simple, we just toggle from light to dark.

const themeReducer = (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case TOGGLE_THEME:
            //There is no payload we just replace the theme obj/state with the
            //opposite of whatever type is
            return state.palette.type === 'light'
                ? { ...DARK_MODE_STATE }
                : { ...LIGHT_MODE_STATE };
        default:
            return state;
    }
};

4) Provider and wrapping up
Okay we have a theme, we have a light and dark mode in our redux store, now what? Now we need to funnel that theme object into the MuiThemeProvider component Material UI gives us. When the theme changes in the store it will be updated here as well. We take in children as props (using destructuring) so anything wrapped in this Provider still shows up on the screen.

import { MuiThemeProvider } from '@material-ui/core/styles';
import { useSelector } from 'react-redux';

function Theme({ children }) {
    const theme = useSelector((state) => state.theme);
    return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>;
}

export default Theme;

Now we can wrap the theme provider at our root component (App.js or something). Also note we added our Alert component here so it always shows up if we trigger it.

import { makeStyles } from '@material-ui/core/styles';
import { useSelector } from 'react-redux';
import Alert from './Alert';
import Login from './Login';
import Logout from './Logout';
import ThemeProvider from './ThemeProvider';
import CssBaseline from '@material-ui/core/CssBaseline';

function App() {
    const classes = useStyles();
    const auth = useSelector((state) => state.auth);
    return (
        <ThemeProvider>
            <CssBaseline />
            <main >
                <Alert />
                {auth.loggedIn ? <Logout /> : <Login />}
            </main>
        </ThemeProvider>
    );
}

Here we use a component called CSSBaseline also from Material UI (which they recommend to place at the root of your project) and it functions identically to Normalize CSS
(Provides good defaults, consistent styling, box-sizing:border-box and most importantly allows our theme switch from light to dark to also change the body background )

Let's test the Alert!

We setup both the Alert system and the theme system through redux but we never actually dispatched any actions to use them. For the theme we will make a switch in the next article, but you can switch between the "LIGHT_MODE_STATE" and "DARK_MODE_STATE" objects in the themeReducer to see how it would look. We want to see the alerts when a login succeeds, a login fails, a logout succeeds and a logout fails. All we have to do is dispatch our Alert action creator at the right time.

//Inside Login.js and Logout.js
    const onSuccess = (res) => {
        dispatch(googleOAuthLogin(res));
        dispatch(
            showAlert({
                message: 'Successfully logged in',
            })
        );
    };
    const onFailure = (res) => {
        dispatch(googleOAuthLogin(res));
        dispatch(
            showAlert({
                message: 'Login failed ',
            })
        );
    };

*Yes, the button should do nothing until you plug in your client id from the first article*

We're done setting up redux! In the last article we will make the mobile responsive navbar that displays the user's info when they're logged in and a we'll make a switch for dark mode!

Let's Make a Redux + Material UI + OAuth Starter template! Pt 2. Login/Logout

Ethan Soo Hon — Sat, 20 Feb 2021 01:31:50 +0000

In this part of the tutorial we will take the client ID we got in part 1 and hook it up to a Login and Logout component that will use the react-google-login library. Here's the packages you need

"dependencies": {
    "@material-ui/core": "^4.11.2",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.57",
    "@material-ui/styles": "^4.11.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-google-login": "^5.2.2",
    "react-redux": "^7.2.2",
    "react-scripts": "4.0.1",
    "redux": "^4.0.5"
  }

(Already assuming you have your CRA + redux setup)

The documentation for react-google-login is very helpful and concise. The only thing I feel is missing are instructions to get your Google OAuth client id which I covered in the 1st article.
Now we could use the built in components shipped with the library and supply them with specific props to look something like this...

  <GoogleLogin
    clientId="zzzzz"
    buttonText="Login"
    onSuccess={responseGoogle} //Some function 
    onFailure={responseGoogle}
  />
  //same for GoogleLogout component

This is serviceable but we eventually want to set up a theme for our project and have the styles of all our components switch when we go from light mode -> dark mode. So we will create our own Login and Logout button from Material UI components and use the hooks useGoogleLogin() useGoogleLogout() also in this library to make our buttons.

The props that went into the GoogleLogin component are now passed into this hook function as an object

The useGoogleLogout() hook is pretty much identical in functionality so the most important part is now writing the onSuccess and onFailure functions for both. Let's check the docs to see what those functions should do

The expected object to be returned if the authentication succeeds is something with the tokenId, profileObj, googleId (etc...) properties. If that same request fails an object is sent to onFailure that includes an error property along with some details about the message.

Time to Code

...With that we have everything we need to start coding! Since we will store user information in the redux store let's set up those pieces first

Setting up your redux folders is highly opinionated but this is how I set up my folders

|- reducers
|- types
|- actions

1) Types:
Fairly simple there are only 2 possible states; the user logging in and the user logging out

export const SIGN_IN = 'SIGN_IN';
export const SIGN_OUT = 'SIGN_OUT';

2) Action Creators:
We'll write two functions that return action objects one for Login and one for Logout.

/*
  Will be passed in as the onSuccess and onFailure callback
  for useGoogleLogin() hook
/*
export const googleOAuthLogin = (response) => {
    const action = { type: SIGN_IN };
    let payload;
    if (typeof response === 'undefined' || response.error) {
        //If login fails
        payload = null;
    } else {
        payload = response;
    }
    action.payload = payload;
    return action;
};

For the logout we don't necessarily need to handle any errors (see we didn't even accept an argument here) because all we're really doing is just clearing the user out of the redux store.

/*
  Will be passed in as the onSuccess and onFailure callback
  for useGoogleLogout() hook
/*
export const googleOAuthLogout = () => {
    const action = { type: SIGN_OUT };
    return action;
};

3) Reducer
I chose to store this piece of state in the redux store under the "auth" key which has an initial state I defined to be...

const INITIAL_STATE = {
    loggedIn: false,
    user: null
};

We write the reducer handling both SIGN_IN and SIGN_OUT actions (don't forget to use default parameters!). For SIGN_IN our action.payload is null if it failed, but if it succeeded our Google response object should be in there.

case SIGN_IN:
 let loggedIn = action.payload ? true : false;
 return loggedIn ?
 {...state,loggedIn,user: {                      
    tokenId: action.payload.tokenId,                     
    ...action.payload.profileObj
   }
 }
: { ...state, loggedIn, user: null };

/*
 If successful looks state looks like 
 {loggedIn: true, user: {tokenId: "sometoken" , profileObj: {}}
*/

case SIGN_OUT:
 return { ...INITIAL_STATE};

4) Login Component

Without talking too much about the actual CSS used to make the buttons let's quickly examine how to use the built-in styling system for Material UI

import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
    center: {
        display: 'flex',
        justifyContent: 'center'
    },
    button: {
        textTransform: 'none',
        marginTop: theme.spacing(10),
        display: 'flex',
        alignItems: 'center',
        boxShadow: theme.shadows[3],
        backgroundColor: theme.palette.primary.main,
        color: theme.palette.primary.contrastText,
        transition: 'background-color 0.5s',
        '&:hover': {
            backgroundColor: theme.palette.primary.dark,
            transition: 'background-color 0.5s',
            cursor: 'pointer'
        }
    },
}));

We return an object from the makeStyles callback that has key value pairs where the keys are class names you wish to use and the value is always an object that specifies CSS properties. (Keep in mind CSS properties are camelCased)

What is the theme variable?

Since we don't have a theme defined yet Material UI supplies a default theme for us that you can see here (its just a giant object)

To use these classes we simply call the function above (we called it useStyles) and we get back our object.

const classes = useStyles();
return(
<p className={classes.center}> Hello! </p>
)

I will be using the hooks provided by react-redux but this is equivalent to use mapStateToProps (replaced by useSelector) and mapDispatchToProps(replaced by useDipatch; we have to manually dispatch it)

...
import googleLogo from '../images/google-logo.png';
import { useDispatch } from 'react-redux';
...


const clientId =
    'blahblahblahblah.apps.googleusercontent.com';
function Login() {
    const onSuccess = (res) => {
        dispatch(googleOAuthLogin(res));
    };
    const onFailure = (res) => {
        dispatch(googleOAuthLogin(res));
    };

    const { signIn } = useGoogleLogin({
        onSuccess,
        onFailure,
        clientId,
        isSignedIn: true
    });

    return (
        <Container component='section' className={classes.center}>
            <Button className={classes.button} onClick={signIn}>
                <Avatar src={googleLogo} className={classes.avatar} />
                <Typography component='p' variant='h6' className={classes.text}>
                    Sign in with Google
                </Typography>
            </Button>
        </Container>
    );
}

We use clientId from article 1, and isSignedIn is a boolean used to persist the users login across sessions via a entry in localStorage

To keep the styling consistent we use the same makeStyles object for the Logout component the only difference is the functions passed into useGoogleLogout are called onFailure and onLogoutSuccess.


function Logout() {
    const classes = useStyles();
    const dispatch = useDispatch();
    const onSuccess = (res) => {
        dispatch(googleOAuthLogout(res));
    };
    const onFailure = (res) => {
        dispatch(googleOAuthLogout(res));
    };
    const { signOut } = useGoogleLogout({
        onFailure,
        onLogoutSuccess: onSuccess,
        clientId,
        isSignedIn: true
    });
    return (
        <Container component='section' className={classes.center}>
            <Button className={classes.button} onClick={signOut}>
                <Avatar src={googleLogo} className={classes.avatar} />
                <Typography component='p' variant='h6' className={classes.text}>
                    Sign out of Google
                </Typography>
            </Button>
        </Container>
    );
}

Last Step!

Lets go to App.js (or whatever your root component is called) and add conditional rendering for these components. We'll reach into the store with useSelector and check the auth.loggedIn property to determine what button to show.

function App() {
    const auth = useSelector((state) => state.auth);
    return (
            <main>
                {auth.loggedIn ? <Logout /> : <Login />}
            </main>
        </ThemeProvider>
    );
}

Your project should look something like this now!

Part 3 will set up the Alert system through redux and the theme system so we can easily switch from light to dark mode.

Let's Make a Redux + Material UI + OAuth Starter template! Pt 1. What's OAuth??

Ethan Soo Hon — Fri, 19 Feb 2021 03:24:54 +0000

In this 4 part tutorial series we will set up a starting template using Material UI , Redux and Google OAuth 2.0. As seen in the cover image this template will help bootstrap front-end projects while taking care of some harder things to implement in the front-end world, namely...

1) An alert/notification system setup through the Redux store
2) An easily customizable theme system with the built in CSS-in-JS solutions offered by Material-UI
3) Client-side OAuth and a mobile responsive navbar that is filled with the user's info when logged in

Live example for those interested

Prerequisites

Familiarity with React hooks and Redux
Have NPM/Node installed
Know about the concept of a component library in React (it's okay if you've never used one!)
Know about the concepts of CSS in JS (also okay if never used before)
A Google Cloud Platform account (free) and an OAuth 2.0 Client ID (also free, may require gmail account)

What's OAuth?

In the past years these buttons that allow you to sign in with some other social media account have become more and more prevalent on the web.
As users we all know the advantages; less passwords to keep track of and a better sense of trust if you can log-in to an unfamiliar app with an already created account.

*Seen these before?*

As developers OAuth gives all the above advantages to your users PLUS the ability to easily use a users public information and associate a user with a Google (or Twitter etc...) account ID.

Without getting too much into the weeds I think this Digital Ocean Post does a great job of explaining the concept

😵

It seems complex at first but much this process is abstracted away by the React library used here called react-google-login. It helps to visualize these steps in the context of the application so let's see how that looks...

1) Our App sends a request to user to ask for permission this is triggered when our button is clicked

2) The user logins in and grants permission
3) react-google-login (if step 2 succeeded) initiates step 3 and requests access for the users info from their servers
4) The token for OAuth access and some public user profile info is sent back to client side and stored in the redux store.

In this template we never actually do anything with the token so 5 and 6 are left to be implemented later.

Getting Setup through Google Cloud Platform

The first thing you need to have your web app communicate with Google's OAuth client is a Google Cloud Platform account, for this you need a free gmail account.

Steps

Go to https://console.cloud.google.com/ and sign up for an individual account. Yes, you need to enter a credit card for the free trial but the platform will never charge you after you used up your credit and additionally getting an OAuth client ID to use is also free
Once on the dashboard (if this is your first time) you should see in the navbar a "My First Project" tab. This is a default project started for you automatically; for simplicity's sake we'll use that.
On the left side you should see a hamburger menu which once expanded you should see a "APIs and Services" tab, which has the sub-section called "Credentials"

*You should be here*

Afterwards we have to click "configure consent screen", select user type "External" and then click Create
You will be taken to a form to fill with app information (your email, app name etc...). Fill out only the required fields and DON'T add any authorized domains, you can do this later when creating the clientID.
Next we are taken to a scopes screen in which you have to configure what type of access you want from Google OAuth;
Click "Add or Remove Scopes" while keeping in mind the default scope for react-google-login is as follows "profile email" and let's also add openid scope to get their Google ID. Just a little further

Next it will ask how many test users out of 100 you wish to register BUT we're going to leave that blank since you are only bound by this restriction while you have an OAuth client that requests sensitive scopes. We only request email, personal info and ID which are considered non-sensitive scopes so we don't have to worry about that. Your actual limit with this OAuth is 10,000 token grants per day.
Finally go to save/continue now we can finally go back to the "API & Services" on Credentials.
Near the top of the page click the "+ create credentials", select "OAuth Client Id", choose web application, name the app again (just used internally) and now we can add Authorized JavaScript origins. For now let's just make it so it works on http://localhost:3000 and click create.

*Done!*
A screen should pop up with both a client ID and a client Secret. The client secret is used server-side so we don't need it here but we will take the Client ID and copy it somewhere.
Note! : You don't need to hide your clientID in .env ! We restricted the URLs that can access it so it should be fine out in the open.

Next article we will make the Login and Logout components using your clientID, store the fetched user info in the redux store, and examine how the library persists the users logged in state through client-side storage!

DEV Community: Ethan Soo Hon

Writing your 1st Custom Hook

Semantic UI

Goal

Message Component + API

Transition Component + API

Attempt 1

Custom Hook rules

Writing the hook

Using the custom hook

Let's Make a Redux + Material UI + OAuth Starter template! Pt 4. Navbar & Theme Switch

AppBar

Breaking down our NavBar.js

renderMobileMenu

Desktop NavBar items

Mobile NavBar items

Done 👍

Let's Make a Redux + Material UI + OAuth Starter template! Pt 3. Alerts & Themes

Snackbar

API

Time to Code

Theming

Dark Mode

Time to Code

Let's test the Alert!

Let's Make a Redux + Material UI + OAuth Starter template! Pt 2. Login/Logout

Time to Code

*What is the theme variable? *

Last Step!

Let's Make a Redux + Material UI + OAuth Starter template! Pt 1. What's OAuth??

Prerequisites

What's OAuth?

Getting Setup through Google Cloud Platform

Steps

What is the theme variable?