Merge pull request #427 from DnD-Montreal/407-loading-button

Loading button
DnD-Montreal · Feb 22, 2022 · 237b4c6 · 237b4c6
2 parents 1ab76b2 + 1bf9bbf
commit 237b4c6
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 47 deletions.
diff --git a/resources/js/Components/Atom/Button.tsx b/resources/js/Components/Atom/Button.tsx
@@ -0,0 +1,46 @@
+import {
+    Button as MuiButton,
+    ButtonProps as MuiButtonProps,
+    CircularProgress,
+} from '@mui/material'
+import React, {ReactNode} from 'react'
+
+type ButtonProps = {
+    loading?: boolean
+    children: ReactNode | string
+    size?: 'small' | 'medium' | 'large'
+} & MuiButtonProps
+
+const Button = ({loading = false, size = 'medium', children, ...props}: ButtonProps) => {
+    const getLoadingSize = () => {
+        switch (size) {
+            case 'small':
+                return {
+                    buttonHeight: '27px',
+                    loadingSize: '21px',
+                }
+            case 'large':
+                return {
+                    buttonHeight: '38.5px',
+                    loadingSize: '32.5px',
+                }
+            default:
+                return {
+                    buttonHeight: '33px',
+                    loadingSize: '27px',
+                }
+        }
+    }
+    return (
+        <MuiButton size={size} {...props} style={{height: getLoadingSize().buttonHeight}}>
+            {loading ? (
+                <CircularProgress color='secondary' size={getLoadingSize().loadingSize} />
+            ) : (
+                children
+            )}
+        </MuiButton>
+    )
+}
+
+Button.displayName = 'Button'
+export default Button
diff --git a/resources/js/Components/Atom/index.ts b/resources/js/Components/Atom/index.ts
@@ -1,4 +1,5 @@
 export {default as Autocomplete} from './Autocomplete'
+export {default as Button} from './Button'
 export {default as DataTable} from './DataTable'
 export {default as Drawer} from './Drawer'
 export {default as Link} from './Link'

diff --git a/resources/js/Components/Authentication/Authentication.tsx b/resources/js/Components/Authentication/Authentication.tsx
@@ -44,19 +44,21 @@ const Authentication = ({
                 open={open}
                 anchorEl={anchorEl}
                 onClose={handleClose}
-                transformOrigin={{vertical: 'top', horizontal: 'right'}}
-                anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}>
+                transformOrigin={{vertical: 'top', horizontal: 'center'}}
+                anchorOrigin={{vertical: 'bottom', horizontal: 'center'}}>
                 {user ? (
-                    <Box sx={{width: 200}}>
+                    <Box sx={{width: 150}}>
                         <Link href={route('user.edit', user.id)}>
                             <Button
+                                size='large'
                                 fullWidth
                                 variant='text'
                                 startIcon={<AccountBoxIcon />}>
                                 Profile
                             </Button>
                         </Link>
                         <Button
+                            size='large'
                             startIcon={<LogoutIcon />}
                             fullWidth
                             variant='text'

diff --git a/resources/js/Components/Form/CharacterImportForm.tsx b/resources/js/Components/Form/CharacterImportForm.tsx
@@ -1,7 +1,15 @@
 import {useForm} from '@inertiajs/inertia-react'
 import ClearIcon from '@mui/icons-material/Clear'
-import {Alert, Box, Button, Grid, Link, TextField, Typography} from '@mui/material'
-import {Link as InertiaLink} from 'Components'
+import {
+    Alert,
+    Box,
+    Button as MuiButton,
+    Grid,
+    Link,
+    TextField,
+    Typography,
+} from '@mui/material'
+import {Button, Link as InertiaLink} from 'Components'
 import React from 'react'
 import styled from 'styled-components'
 import route from 'ziggy-js'
@@ -42,7 +50,7 @@ type CharacterImportFormData = {
 }
 
 const CharacterImportForm = () => {
-    const {data, setData, post} = useForm<CharacterImportFormData>({
+    const {data, setData, post, processing} = useForm<CharacterImportFormData>({
         beyond_link: null,
         logs: null,
     })
@@ -68,12 +76,12 @@ const CharacterImportForm = () => {
                         multiple={false}
                         type='file'
                     />
-                    <Button
+                    <MuiButton
                         disabled={Boolean(data.beyond_link)}
                         variant='contained'
                         component='span'>
                         Upload
-                    </Button>
+                    </MuiButton>
                 </Label>
                 {data?.logs && (
                     <Grid>
@@ -109,6 +117,7 @@ const CharacterImportForm = () => {
                 <Grid item md={8} />
                 <Grid item md={2} xs={6}>
                     <Button
+                        loading={processing}
                         variant='contained'
                         fullWidth
                         onClick={() => {

diff --git a/resources/js/Components/Form/DmEntryCreateForm.tsx b/resources/js/Components/Form/DmEntryCreateForm.tsx
@@ -2,9 +2,17 @@ import {useForm} from '@inertiajs/inertia-react'
 import AdapterDateFns from '@mui/lab/AdapterDateFns'
 import DateTimePicker from '@mui/lab/DateTimePicker'
 import LocalizationProvider from '@mui/lab/LocalizationProvider'
-import {Button, Grid, TextField, Typography} from '@mui/material'
+import {Grid, TextField, Typography} from '@mui/material'
 import useUser from '@Utils/use-user'
-import {Autocomplete, ErrorText, Link, NumberInput, Select, StepperForm} from 'Components'
+import {
+    Autocomplete,
+    Button,
+    ErrorText,
+    Link,
+    NumberInput,
+    Select,
+    StepperForm,
+} from 'Components'
 import React, {useState} from 'react'
 import styled from 'styled-components'
 import {adventureType} from 'Types/adventure-data'
@@ -106,9 +114,8 @@ const DmEntryCreateForm = ({
                   adventure: editData?.adventure || undefined,
               }
 
-    const {data, setData, errors, clearErrors, post, put} = useForm<DmEntryFormDataType>(
-        DM_ENTRY_FORM_INITIAL_VALUE,
-    )
+    const {data, setData, errors, clearErrors, post, processing, put} =
+        useForm<DmEntryFormDataType>(DM_ENTRY_FORM_INITIAL_VALUE)
     const [activeStep, setActiveStep] = useState<number>(0)
     const stepTitles = [{label: 'Details'}, {label: 'Magic Items'}]
     const stepOneContent = (
@@ -275,6 +282,7 @@ const DmEntryCreateForm = ({
             <Grid item xs={4} />
             <Grid item xs={4}>
                 <Button
+                    loading={processing}
                     variant='contained'
                     fullWidth
                     onClick={() => {

diff --git a/resources/js/Components/Form/EntryCreateForm.tsx b/resources/js/Components/Form/EntryCreateForm.tsx
@@ -2,16 +2,9 @@ import {useForm} from '@inertiajs/inertia-react'
 import AdapterDateFns from '@mui/lab/AdapterDateFns'
 import DateTimePicker from '@mui/lab/DateTimePicker'
 import LocalizationProvider from '@mui/lab/LocalizationProvider'
-import {
-    Button,
-    Checkbox,
-    FormControlLabel,
-    Grid,
-    TextField,
-    Typography,
-} from '@mui/material'
+import {Checkbox, FormControlLabel, Grid, TextField, Typography} from '@mui/material'
 import useUser from '@Utils/use-user'
-import {Autocomplete, ErrorText, Link, NumberInput, StepperForm} from 'Components'
+import {Autocomplete, Button, ErrorText, Link, NumberInput, StepperForm} from 'Components'
 import React, {useState} from 'react'
 import styled from 'styled-components'
 import {adventureType} from 'Types/adventure-data'
@@ -116,7 +109,7 @@ const EntryCreateForm = ({
                   adventure: editData?.adventure || undefined,
               }
 
-    const {data, setData, errors, clearErrors, post, put} =
+    const {data, setData, errors, clearErrors, post, processing, put} =
         useForm<EntryFormDataType>(ENTRY_INITIAL_VALUE)
     const [activeStep, setActiveStep] = useState<number>(0)
     const [isGmInSystem, setIsGmInSystem] = useState<boolean>(
@@ -367,6 +360,7 @@ const EntryCreateForm = ({
             <Grid item xs={4} />
             <Grid item xs={4}>
                 <Button
+                    loading={processing}
                     variant='contained'
                     fullWidth
                     onClick={() => {

diff --git a/resources/js/Components/index.ts b/resources/js/Components/index.ts
@@ -27,6 +27,7 @@ export {
 // Atoms
 export {
     Autocomplete,
+    Button,
     DataTable,
     Drawer,
     Link,

diff --git a/resources/js/Layouts/ApplicationLayout/ApplicationLayout.tsx b/resources/js/Layouts/ApplicationLayout/ApplicationLayout.tsx
@@ -140,16 +140,11 @@ const ApplicationLayout = ({children}: LayoutProps) => {
                             user={user}
                         />
                         <UserAvatarColumn item container xs={12} md={3}>
-                            <Grid item xs={2} />
                             <Grid
                                 item
                                 container
-                                xs
-                                md={4}
-                                justifyContent={
-                                    window.innerWidth > 768 ? 'end' : 'center'
-                                }
-                                style={{cursor: 'pointer'}}
+                                justifyContent='center'
+                                style={{cursor: 'pointer', margin: '0 auto'}}
                                 onClick={handleClick}>
                                 <Username data-cy='user'>{getUsername()}</Username>
                                 <Avatar sx={{bgcolor: '#4E302E'}} />

diff --git a/resources/js/Pages/Profile.tsx b/resources/js/Pages/Profile.tsx
@@ -1,16 +1,7 @@
 import {useForm} from '@inertiajs/inertia-react'
-import {
-    Alert,
-    Button,
-    CircularProgress,
-    Divider,
-    Grid,
-    Snackbar,
-    TextField,
-    Typography,
-} from '@mui/material'
+import {Alert, Divider, Grid, Snackbar, TextField, Typography} from '@mui/material'
 import {ThemeProvider} from '@mui/material/styles'
-import {DeleteModal, ErrorText, Select} from 'Components'
+import {Button, DeleteModal, ErrorText, Select} from 'Components'
 import {ApplicationLayout} from 'Layouts'
 import React, {useEffect, useState} from 'react'
 import {getFontTheme, useUser} from 'Utils'
@@ -150,15 +141,12 @@ const Profile = () => {
                         Reset
                     </Button>
                     <Button
+                        loading={processing}
                         variant='contained'
                         size='small'
-                        style={{marginLeft: 6, height: 27}}
+                        style={{marginLeft: 6}}
                         onClick={() => put(route('user.update', [user.id]))}>
-                        {processing ? (
-                            <CircularProgress color='secondary' size='27px' />
-                        ) : (
-                            'Save'
-                        )}
+                        Save
                     </Button>
                 </Grid>
                 <Grid item xs={12}>