diff --git a/resources/js/App.js b/resources/js/App.js index f92bf02..92627ca 100755 --- a/resources/js/App.js +++ b/resources/js/App.js @@ -7,6 +7,7 @@ import { withWidth, CssBaseline, MuiThemeProvider } from '@material-ui/core'; import { Navigator } from './core'; import { ROUTES } from './config'; import { Loading } from './views'; +import { AppProvider } from './AppContext'; function App(props) { const [initialized, setInitialized] = useState(false); @@ -258,6 +259,12 @@ function App(props) { const { width, environment, darkTheme, lightTheme } = props; const pageProps = { + // Props + width, + environment, + routes: ROUTES, + + // State loading, authenticated, nightMode, @@ -265,34 +272,27 @@ function App(props) { token, username, monitoringEnabled, + + // Methods + handleNightModeToggled, + authenticate, + handleLock, + handleSignOut, }; return ( - {loading ? ( - - ) : ( - - - - )} + + {loading ? ( + + ) : ( + + + + )} + ); } diff --git a/resources/js/AppContext.js b/resources/js/AppContext.js new file mode 100644 index 0000000..cd806ba --- /dev/null +++ b/resources/js/AppContext.js @@ -0,0 +1,7 @@ +import React, { createContext } from 'react'; + +export const AppContext = createContext(); + +export const AppProvider = props => ( + {props.children} +); diff --git a/resources/js/core/Navigator.js b/resources/js/core/Navigator.js index 6055a8b..f9d5554 100755 --- a/resources/js/core/Navigator.js +++ b/resources/js/core/Navigator.js @@ -1,12 +1,14 @@ -import React from 'react'; -import PropTypes from 'prop-types'; +import React, { useContext } from 'react'; import { withRouter, Route, Switch, Redirect } from 'react-router-dom'; import * as NavigationUtils from '../utils/Navigation'; import * as UrlUtils from '../utils/URL'; +import { AppContext } from '../AppContext'; const Navigator = props => { - const { authenticated, username, environment, routes } = props.pageProps; + const { environment, routes, authenticated, username } = useContext( + AppContext, + ); return ( @@ -57,8 +59,4 @@ const Navigator = props => { ); }; -Navigator.propTypes = { - pageProps: PropTypes.object.isRequired, -}; - export default withRouter(Navigator); diff --git a/resources/js/ui/TableToolbar/Forms/Filter.js b/resources/js/ui/TableToolbar/Forms/Filter.js index bfcc083..dd3a306 100644 --- a/resources/js/ui/TableToolbar/Forms/Filter.js +++ b/resources/js/ui/TableToolbar/Forms/Filter.js @@ -292,7 +292,7 @@ Filter = withStyles( input: { margin: theme.spacing.unit, - minWidth: '12.5rem', + minWidth: 200, }, }), { withTheme: true }, diff --git a/resources/js/ui/TableToolbar/TableToolbar.js b/resources/js/ui/TableToolbar/TableToolbar.js index ef92d36..2b92f04 100644 --- a/resources/js/ui/TableToolbar/TableToolbar.js +++ b/resources/js/ui/TableToolbar/TableToolbar.js @@ -204,7 +204,7 @@ export default withStyles( filterMenu: { position: 'absolute', - padding: '1rem', + padding: 16, right: 0, zIndex: 999, }, @@ -218,7 +218,7 @@ export default withStyles( }, filterName: { - marginRight: '0.25rem', + marginRight: 4, }, }), { withTheme: true }, diff --git a/resources/js/views/Loading.js b/resources/js/views/Loading.js index 78dbd18..f733219 100644 --- a/resources/js/views/Loading.js +++ b/resources/js/views/Loading.js @@ -1,31 +1,36 @@ -import React from 'react'; +import React, { useContext } from 'react'; import { withStyles, Grid, CircularProgress } from '@material-ui/core'; import darkLogo from '../../img/logos/short-dark.svg'; import lightLogo from '../../img/logos/short-light.svg'; - -const Loading = props => ( - - - - company-logo - - - - +import { AppContext } from '../AppContext'; + +const Loading = props => { + const { nightMode } = useContext(AppContext); + + return ( + + + + company-logo + + + + + - -); + ); +}; const styles = theme => ({ container: { @@ -33,17 +38,17 @@ const styles = theme => ({ }, logoContainer: { - padding: '0.75rem', + padding: 12, textAlign: 'center', }, logo: { - width: '5rem', - height: '5rem', + width: 80, + height: 80, }, loadingContainer: { - padding: '0.75rem', + padding: 12, textAlign: 'center', }, }); diff --git a/resources/js/views/__backoffice/layouts/Clean.js b/resources/js/views/__backoffice/layouts/Clean.js index 8859f54..d0e92c2 100644 --- a/resources/js/views/__backoffice/layouts/Clean.js +++ b/resources/js/views/__backoffice/layouts/Clean.js @@ -99,7 +99,6 @@ Clean.propTypes = { history: PropTypes.object.isRequired, location: PropTypes.object.isRequired, match: PropTypes.object.isRequired, - pageProps: PropTypes.object.isRequired, pageTitle: PropTypes.string, loading: PropTypes.bool, diff --git a/resources/js/views/__backoffice/layouts/Master.js b/resources/js/views/__backoffice/layouts/Master.js index 656c5ef..724bc84 100755 --- a/resources/js/views/__backoffice/layouts/Master.js +++ b/resources/js/views/__backoffice/layouts/Master.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useContext } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; @@ -14,6 +14,7 @@ import { import { Breadcrumbs, Snackbar, Modal } from '../../../ui'; import { LinearDeterminate } from '../../../ui/Loaders'; import { Footer, Header, Sidebar } from '../partials'; +import { AppContext } from '../../../AppContext'; function Master(props) { const [minimized, setMinimized] = useState(false); @@ -68,6 +69,8 @@ function Master(props) { // }); + const { nightMode } = useContext(AppContext); + const { classes, showBreadcrumbs, ...other } = props; const { @@ -75,12 +78,10 @@ function Master(props) { history, location, pageTitle, - pageProps, loading, message, alert, } = props; - const { nightMode } = pageProps; const renderLoading = ( { const { user } = props; @@ -151,15 +152,15 @@ const LocaleMenu = props => { }; const AccountMenu = props => { + const { user, handleLock, handleSignOut } = useContext(AppContext); + const { history, classes, - pageProps, accountMenuOpen, onAccountMenuToggle, } = props; - const { user, handleLock, handleSignOut } = pageProps; const navigate = path => history.push(path); @@ -191,12 +192,10 @@ const AccountMenu = props => { - - {pageProps.user.name} - + {user.name} - {pageProps.user.email} + {user.email} @@ -260,7 +259,6 @@ const AccountMenu = props => { function Header(props) { const { classes, - pageProps, pageTitle, loading, @@ -277,10 +275,11 @@ function Header(props) { const { user, + monitoringEnabled, nightMode, handleNightModeToggled, - } = pageProps; + } = useContext(AppContext); const skeletonProps = { color: colors.grey[400], @@ -711,7 +710,6 @@ function Header(props) { Header.propTypes = { classes: PropTypes.object.isRequired, - pageProps: PropTypes.object.isRequired, pageTitle: PropTypes.string.isRequired, loading: PropTypes.bool, diff --git a/resources/js/views/__backoffice/partials/Sidebar.js b/resources/js/views/__backoffice/partials/Sidebar.js index b281ef8..7ed3041 100644 --- a/resources/js/views/__backoffice/partials/Sidebar.js +++ b/resources/js/views/__backoffice/partials/Sidebar.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useContext } from 'react'; import classNames from 'classnames'; import PropTypes from 'prop-types'; @@ -32,12 +32,13 @@ import * as StringUtils from '../../../utils/String'; import brandLogoLight from '../../../../img/logos/short-light.svg'; import brandLogoDark from '../../../../img/logos/short-dark.svg'; +import { AppContext } from '../../../AppContext'; function Sidebar(props) { + const { nightMode } = useContext(AppContext); const { classes, location, - pageProps, pageTitle, // Never used here. primaryAction, // Never used here. staticContext, // Never used here. @@ -51,7 +52,6 @@ function Sidebar(props) { } = props; const { variant, onClose } = props; - const { nightMode } = pageProps; const [activeLinkGroup, setActiveLinkGroup] = useState(-1); const [initialized, setInitialized] = useState(false); @@ -367,7 +367,6 @@ function Sidebar(props) { Sidebar.propTypes = { PaperProps: PropTypes.object.isRequired, classes: PropTypes.object.isRequired, - pageProps: PropTypes.object.isRequired, open: PropTypes.bool, onClose: PropTypes.func, diff --git a/resources/js/views/__backoffice/settings/Account.js b/resources/js/views/__backoffice/settings/Account.js index 72b12ba..45372d2 100644 --- a/resources/js/views/__backoffice/settings/Account.js +++ b/resources/js/views/__backoffice/settings/Account.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useContext } from 'react'; import { Formik, Form } from 'formik'; import * as Yup from 'yup'; @@ -26,11 +26,12 @@ import { Settings as SettingsLayout, Slave as SlaveLayout, } from '../layouts'; +import { AppContext } from '../../../AppContext'; function Account(props) { + const { user } = useContext(AppContext); const { classes, ...other } = props; - const { location, pageProps } = props; - const { user } = pageProps; + const { location } = props; const [passwordSubmitting, setPasswordSubmitting] = useState(false); const [credentialsSubmitting, setCredentialsSubmitting] = useState(false); diff --git a/resources/js/views/__backoffice/settings/Navigation.js b/resources/js/views/__backoffice/settings/Navigation.js index 39774ec..5bfcbf9 100644 --- a/resources/js/views/__backoffice/settings/Navigation.js +++ b/resources/js/views/__backoffice/settings/Navigation.js @@ -77,7 +77,6 @@ Navigation.propTypes = { history: PropTypes.object.isRequired, location: PropTypes.object.isRequired, match: PropTypes.object.isRequired, - pageProps: PropTypes.object.isRequired, }; const styles = theme => ({ diff --git a/resources/js/views/__backoffice/settings/Profile.js b/resources/js/views/__backoffice/settings/Profile.js index aeae0fc..96efd6f 100644 --- a/resources/js/views/__backoffice/settings/Profile.js +++ b/resources/js/views/__backoffice/settings/Profile.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useContext } from 'react'; import { Formik, Form } from 'formik'; import * as Yup from 'yup'; @@ -28,11 +28,12 @@ import { Settings as SettingsLayout, Slave as SlaveLayout, } from '../layouts'; +import { AppContext } from '../../../AppContext'; function Profile(props) { + const { user } = useContext(AppContext); const { classes, ...other } = props; - const { location, pageProps } = props; - const { user } = pageProps; + const { location } = props; const [loading, setLoading] = useState(false); const [message, setMessage] = useState({}); diff --git a/resources/js/views/__backoffice/users/List.js b/resources/js/views/__backoffice/users/List.js index a6bb3cf..d1d7191 100755 --- a/resources/js/views/__backoffice/users/List.js +++ b/resources/js/views/__backoffice/users/List.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useContext } from 'react'; import { Avatar, @@ -20,6 +20,7 @@ import * as UrlUtils from '../../../utils/URL'; import { Table } from '../../../ui'; import { Master as MasterLayout } from '../layouts'; import { User } from '../../../models'; +import { AppContext } from '../../../AppContext'; function List(props) { const [loading, setLoading] = useState(false); @@ -333,9 +334,9 @@ function List(props) { }); }, [pagination.data]); + const { user: authUser } = useContext(AppContext); const { ...childProps } = props; - const { history, pageProps } = props; - const { user: authUser } = pageProps; + const { history } = props; const { data: rawData, diff --git a/resources/js/views/auth/SignIn.js b/resources/js/views/auth/SignIn.js index 2a451bc..b9e67a2 100755 --- a/resources/js/views/auth/SignIn.js +++ b/resources/js/views/auth/SignIn.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useContext } from 'react'; import { Link as RouterLink } from 'react-router-dom'; import { Formik, Form } from 'formik'; import * as Yup from 'yup'; @@ -24,8 +24,11 @@ import { import * as UrlUtils from '../../utils/URL'; import * as NavigationUtils from '../../utils/Navigation'; import { Auth as AuthLayout } from '../layouts'; +import { AppContext } from '../../AppContext'; function SignIn(props) { + const { authenticate } = useContext(AppContext); + const [loading, setLoading] = useState(false); const [identified, setIdentified] = useState(false); const [passwordVisible, setPasswordVisibility] = useState(false); @@ -114,7 +117,6 @@ function SignIn(props) { setLoading(true); try { - const { pageProps } = props; const { password } = values; const response = await axios.post('/api/v1/auth/signin', { @@ -122,7 +124,7 @@ function SignIn(props) { password, }); - pageProps.authenticate(JSON.stringify(response.data)); + authenticate(JSON.stringify(response.data)); setLoading(false); } catch (error) { diff --git a/resources/js/views/auth/passwords/Reset.js b/resources/js/views/auth/passwords/Reset.js index 5d625e7..f8f37ac 100755 --- a/resources/js/views/auth/passwords/Reset.js +++ b/resources/js/views/auth/passwords/Reset.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useContext } from 'react'; import { Link as RouterLink } from 'react-router-dom'; import { Formik, Form } from 'formik'; import * as Yup from 'yup'; @@ -21,6 +21,7 @@ import { import * as NavigationUtils from '../../../utils/Navigation'; import * as UrlUtils from '../../../utils/URL'; import { Auth as AuthLayout } from '../../layouts'; +import { AppContext } from '../../../AppContext'; function PasswordReset(props) { const [loading, setLoading] = useState(false); @@ -64,7 +65,8 @@ function PasswordReset(props) { setLoading(true); try { - const { match, pageProps } = props; + const { authenticate } = useContext(AppContext); + const { match } = props; const { token } = match.params; const response = await axios.patch( @@ -72,7 +74,7 @@ function PasswordReset(props) { values, ); - await pageProps.authenticate(JSON.stringify(response.data)); + await authenticate(JSON.stringify(response.data)); setLoading(false); } catch (error) { diff --git a/resources/js/views/layouts/Auth.js b/resources/js/views/layouts/Auth.js index b07e24e..c4d0d00 100755 --- a/resources/js/views/layouts/Auth.js +++ b/resources/js/views/layouts/Auth.js @@ -1,10 +1,11 @@ -import React from 'react'; +import React, { useContext } from 'react'; import PropTypes from 'prop-types'; import { Grid, Card, Typography, Button, withStyles } from '@material-ui/core'; import { LinearIndeterminate } from '../../ui/Loaders'; import logoLight from '../../../img/logos/short-light.svg'; import logoDark from '../../../img/logos/short-dark.svg'; +import { AppContext } from '../../AppContext'; /** * Format a given title @@ -36,67 +37,76 @@ const formattedSubTitle = subTitle => { return subTitle; }; -const Auth = props => ( - - - <> - {props.loading && } - - - - company-logo - - - - - {props.message.hasOwnProperty('title') - ? formattedTitle(props.message.title) - : formattedTitle(props.title)} - - {props.message.hasOwnProperty('body') - ? formattedSubTitle(props.message.body) - : formattedSubTitle(props.subTitle)} +const Auth = props => { + const { nightMode } = useContext(AppContext); + + return ( + + + <> + {props.loading && } + + + + company-logo - {props.message.hasOwnProperty('type') ? ( - - + + + {props.message.hasOwnProperty('title') + ? formattedTitle(props.message.title) + : formattedTitle(props.title)} + + {props.message.hasOwnProperty('body') + ? formattedSubTitle(props.message.body) + : formattedSubTitle(props.subTitle)} + + + {props.message.hasOwnProperty('type') ? ( + + - - + + - - ) : ( - {props.children} - )} - - - + ) : ( + {props.children} + )} + + + + - -); + ); +}; Auth.propTypes = { loading: PropTypes.bool,