Resolved Prop Drilling Using Global State

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,41 +259,40 @@ function App(props) {
     const { width, environment, darkTheme, lightTheme } = props;
 
     const pageProps = {
+        // Props
+        width,
+        environment,
+        routes: ROUTES,
+
+        // State
         loading,
         authenticated,
         nightMode,
         user,
         token,
         username,
         monitoringEnabled,
+
+        // Methods
+        handleNightModeToggled,
+        authenticate,
+        handleLock,
+        handleSignOut,
     };
 
     return (
         <MuiThemeProvider theme={nightMode ? darkTheme : lightTheme}>
             <CssBaseline />
 
-            {loading ? (
-                <Loading
-                    pageProps={{
-                        ...pageProps,
-                    }}
-                />
-            ) : (
-                <Router>
-                    <Navigator
-                        pageProps={{
-                            ...pageProps,
-                            width,
-                            environment: environment,
-                            routes: ROUTES,
-                            handleNightModeToggled: handleNightModeToggled,
-                            authenticate: authenticate,
-                            handleLock: handleLock,
-                            handleSignOut: handleSignOut,
-                        }}
-                    />
-                </Router>
-            )}
+            <AppProvider {...pageProps}>
+                {loading ? (
+                    <Loading />
+                ) : (
+                    <Router>
+                        <Navigator />
+                    </Router>
+                )}
+            </AppProvider>
         </MuiThemeProvider>
     );
 }

resources/js/AppContext.js

@@ -0,0 +1,7 @@
+import React, { createContext } from 'react';
+
+export const AppContext = createContext();
+
+export const AppProvider = props => (
+    <AppContext.Provider value={props}>{props.children}</AppContext.Provider>
+);

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 (
         <Switch>
@@ -57,8 +59,4 @@ const Navigator = props => {
     );
 };
 
-Navigator.propTypes = {
-    pageProps: PropTypes.object.isRequired,
-};
-
 export default withRouter(Navigator);

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 },

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 },

resources/js/views/Loading.js

@@ -1,49 +1,54 @@
-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 => (
-    <Grid
-        container
-        justify="center"
-        alignItems="center"
-        className={props.classes.container}
-    >
-        <Grid item>
-            <Grid item className={props.classes.logoContainer}>
-                <img
-                    src={props.pageProps.nightMode ? darkLogo : lightLogo}
-                    alt="company-logo"
-                    className={props.classes.logo}
-                />
-            </Grid>
-
-            <Grid item className={props.classes.loadingContainer}>
-                <CircularProgress color="primary" />
+import { AppContext } from '../AppContext';
+
+const Loading = props => {
+    const { nightMode } = useContext(AppContext);
+
+    return (
+        <Grid
+            container
+            justify="center"
+            alignItems="center"
+            className={props.classes.container}
+        >
+            <Grid item>
+                <Grid item className={props.classes.logoContainer}>
+                    <img
+                        src={nightMode ? darkLogo : lightLogo}
+                        alt="company-logo"
+                        className={props.classes.logo}
+                    />
+                </Grid>
+
+                <Grid item className={props.classes.loadingContainer}>
+                    <CircularProgress color="primary" />
+                </Grid>
             </Grid>
         </Grid>
-    </Grid>
-);
+    );
+};
 
 const styles = theme => ({
     container: {
         height: '100vh',
     },
 
     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',
     },
 });

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,

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,19 +69,19 @@ function Master(props) {
         //
     });
 
+    const { nightMode } = useContext(AppContext);
+
     const { classes, showBreadcrumbs, ...other } = props;
 
     const {
         children,
         history,
         location,
         pageTitle,
-        pageProps,
         loading,
         message,
         alert,
     } = props;
-    const { nightMode } = pageProps;
 
     const renderLoading = (
         <Grid
@@ -194,7 +195,6 @@ function Master(props) {
 Master.propTypes = {
     classes: PropTypes.object.isRequired,
     pageTitle: PropTypes.string.isRequired,
-    pageProps: PropTypes.object.isRequired,
     loading: PropTypes.bool,
 
     primaryAction: PropTypes.object,

resources/js/views/__backoffice/layouts/Slave.js

@@ -138,7 +138,6 @@ Slave.propTypes = {
     history: PropTypes.object.isRequired,
     location: PropTypes.object.isRequired,
     match: PropTypes.object.isRequired,
-    pageProps: PropTypes.object.isRequired,
 
     pageTitle: PropTypes.string,
     loading: PropTypes.bool,

resources/js/views/__backoffice/partials/Header.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
 
 import {
@@ -48,6 +48,7 @@ import {
 } from '../../../icons/1x1';
 import { Ph as PhIcon, Us as UsIcon } from '../../../icons/flags/4x3';
 import { Skeleton } from '../../../ui';
+import { AppContext } from '../../../AppContext';
 
 const UserAvatar = props => {
     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 => {
                                     </ListItemAvatar>
 
                                     <ListItemText>
-                                        <Typography>
-                                            {pageProps.user.name}
-                                        </Typography>
+                                        <Typography>{user.name}</Typography>
 
                                         <Typography color="textSecondary">
-                                            {pageProps.user.email}
+                                            {user.email}
                                         </Typography>
                                     </ListItemText>
                                 </MenuItem>
@@ -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,
 

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,