Skip to content

Commit 2378335

Browse files
author
Jovert Lota Palonpon
authored
wip (#52)
1 parent 3a02ccc commit 2378335

File tree

18 files changed

+171
-150
lines changed

18 files changed

+171
-150
lines changed

‎resources/js/App.js‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { withWidth, CssBaseline, MuiThemeProvider } from '@material-ui/core';
77
import { Navigator } from './core';
88
import { ROUTES } from './config';
99
import { Loading } from './views';
10+
import { AppProvider } from './AppContext';
1011

1112
function App(props) {
1213
const [initialized, setInitialized] = useState(false);
@@ -258,41 +259,40 @@ function App(props) {
258259
const { width, environment, darkTheme, lightTheme } = props;
259260

260261
const pageProps = {
262+
// Props
263+
width,
264+
environment,
265+
routes: ROUTES,
266+
267+
// State
261268
loading,
262269
authenticated,
263270
nightMode,
264271
user,
265272
token,
266273
username,
267274
monitoringEnabled,
275+
276+
// Methods
277+
handleNightModeToggled,
278+
authenticate,
279+
handleLock,
280+
handleSignOut,
268281
};
269282

270283
return (
271284
<MuiThemeProvider theme={nightMode ? darkTheme : lightTheme}>
272285
<CssBaseline />
273286

274-
{loading ? (
275-
<Loading
276-
pageProps={{
277-
...pageProps,
278-
}}
279-
/>
280-
) : (
281-
<Router>
282-
<Navigator
283-
pageProps={{
284-
...pageProps,
285-
width,
286-
environment: environment,
287-
routes: ROUTES,
288-
handleNightModeToggled: handleNightModeToggled,
289-
authenticate: authenticate,
290-
handleLock: handleLock,
291-
handleSignOut: handleSignOut,
292-
}}
293-
/>
294-
</Router>
295-
)}
287+
<AppProvider {...pageProps}>
288+
{loading ? (
289+
<Loading />
290+
) : (
291+
<Router>
292+
<Navigator />
293+
</Router>
294+
)}
295+
</AppProvider>
296296
</MuiThemeProvider>
297297
);
298298
}

‎resources/js/AppContext.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React, { createContext } from 'react';
2+
3+
export const AppContext = createContext();
4+
5+
export const AppProvider = props => (
6+
<AppContext.Provider value={props}>{props.children}</AppContext.Provider>
7+
);

‎resources/js/core/Navigator.js‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
1-
import React from 'react';
2-
import PropTypes from 'prop-types';
1+
import React, { useContext } from 'react';
32
import { withRouter, Route, Switch, Redirect } from 'react-router-dom';
43

54
import * as NavigationUtils from '../utils/Navigation';
65
import * as UrlUtils from '../utils/URL';
6+
import { AppContext } from '../AppContext';
77

88
const Navigator = props => {
9-
const { authenticated, username, environment, routes } = props.pageProps;
9+
const { environment, routes, authenticated, username } = useContext(
10+
AppContext,
11+
);
1012

1113
return (
1214
<Switch>
@@ -57,8 +59,4 @@ const Navigator = props => {
5759
);
5860
};
5961

60-
Navigator.propTypes = {
61-
pageProps: PropTypes.object.isRequired,
62-
};
63-
6462
export default withRouter(Navigator);

‎resources/js/ui/TableToolbar/Forms/Filter.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -292,7 +292,7 @@ Filter = withStyles(
292292

293293
input: {
294294
margin: theme.spacing.unit,
295-
minWidth: '12.5rem',
295+
minWidth: 200,
296296
},
297297
}),
298298
{ withTheme: true },

‎resources/js/ui/TableToolbar/TableToolbar.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,7 @@ export default withStyles(
204204

205205
filterMenu: {
206206
position: 'absolute',
207-
padding: '1rem',
207+
padding: 16,
208208
right: 0,
209209
zIndex: 999,
210210
},
@@ -218,7 +218,7 @@ export default withStyles(
218218
},
219219

220220
filterName: {
221-
marginRight: '0.25rem',
221+
marginRight: 4,
222222
},
223223
}),
224224
{ withTheme: true },

‎resources/js/views/Loading.js‎

Lines changed: 31 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,54 @@
1-
import React from 'react';
1+
import React, { useContext } from 'react';
22
import { withStyles, Grid, CircularProgress } from '@material-ui/core';
33

44
import darkLogo from '../../img/logos/short-dark.svg';
55
import lightLogo from '../../img/logos/short-light.svg';
6-
7-
const Loading = props => (
8-
<Grid
9-
container
10-
justify="center"
11-
alignItems="center"
12-
className={props.classes.container}
13-
>
14-
<Grid item>
15-
<Grid item className={props.classes.logoContainer}>
16-
<img
17-
src={props.pageProps.nightMode ? darkLogo : lightLogo}
18-
alt="company-logo"
19-
className={props.classes.logo}
20-
/>
21-
</Grid>
22-
23-
<Grid item className={props.classes.loadingContainer}>
24-
<CircularProgress color="primary" />
6+
import { AppContext } from '../AppContext';
7+
8+
const Loading = props => {
9+
const { nightMode } = useContext(AppContext);
10+
11+
return (
12+
<Grid
13+
container
14+
justify="center"
15+
alignItems="center"
16+
className={props.classes.container}
17+
>
18+
<Grid item>
19+
<Grid item className={props.classes.logoContainer}>
20+
<img
21+
src={nightMode ? darkLogo : lightLogo}
22+
alt="company-logo"
23+
className={props.classes.logo}
24+
/>
25+
</Grid>
26+
27+
<Grid item className={props.classes.loadingContainer}>
28+
<CircularProgress color="primary" />
29+
</Grid>
2530
</Grid>
2631
</Grid>
27-
</Grid>
28-
);
32+
);
33+
};
2934

3035
const styles = theme => ({
3136
container: {
3237
height: '100vh',
3338
},
3439

3540
logoContainer: {
36-
padding: '0.75rem',
41+
padding: 12,
3742
textAlign: 'center',
3843
},
3944

4045
logo: {
41-
width: '5rem',
42-
height: '5rem',
46+
width: 80,
47+
height: 80,
4348
},
4449

4550
loadingContainer: {
46-
padding: '0.75rem',
51+
padding: 12,
4752
textAlign: 'center',
4853
},
4954
});

‎resources/js/views/__backoffice/layouts/Clean.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,6 @@ Clean.propTypes = {
9999
history: PropTypes.object.isRequired,
100100
location: PropTypes.object.isRequired,
101101
match: PropTypes.object.isRequired,
102-
pageProps: PropTypes.object.isRequired,
103102

104103
pageTitle: PropTypes.string,
105104
loading: PropTypes.bool,

‎resources/js/views/__backoffice/layouts/Master.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState, useEffect } from 'react';
1+
import React, { useState, useEffect, useContext } from 'react';
22
import PropTypes from 'prop-types';
33

44
import classNames from 'classnames';
@@ -14,6 +14,7 @@ import {
1414
import { Breadcrumbs, Snackbar, Modal } from '../../../ui';
1515
import { LinearDeterminate } from '../../../ui/Loaders';
1616
import { Footer, Header, Sidebar } from '../partials';
17+
import { AppContext } from '../../../AppContext';
1718

1819
function Master(props) {
1920
const [minimized, setMinimized] = useState(false);
@@ -68,19 +69,19 @@ function Master(props) {
6869
//
6970
});
7071

72+
const { nightMode } = useContext(AppContext);
73+
7174
const { classes, showBreadcrumbs, ...other } = props;
7275

7376
const {
7477
children,
7578
history,
7679
location,
7780
pageTitle,
78-
pageProps,
7981
loading,
8082
message,
8183
alert,
8284
} = props;
83-
const { nightMode } = pageProps;
8485

8586
const renderLoading = (
8687
<Grid
@@ -194,7 +195,6 @@ function Master(props) {
194195
Master.propTypes = {
195196
classes: PropTypes.object.isRequired,
196197
pageTitle: PropTypes.string.isRequired,
197-
pageProps: PropTypes.object.isRequired,
198198
loading: PropTypes.bool,
199199

200200
primaryAction: PropTypes.object,

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,6 @@ Slave.propTypes = {
138138
history: PropTypes.object.isRequired,
139139
location: PropTypes.object.isRequired,
140140
match: PropTypes.object.isRequired,
141-
pageProps: PropTypes.object.isRequired,
142141

143142
pageTitle: PropTypes.string,
144143
loading: PropTypes.bool,

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

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useCallback, useContext } from 'react';
22
import PropTypes from 'prop-types';
33

44
import {
@@ -48,6 +48,7 @@ import {
4848
} from '../../../icons/1x1';
4949
import { Ph as PhIcon, Us as UsIcon } from '../../../icons/flags/4x3';
5050
import { Skeleton } from '../../../ui';
51+
import { AppContext } from '../../../AppContext';
5152

5253
const UserAvatar = props => {
5354
const { user } = props;
@@ -151,15 +152,15 @@ const LocaleMenu = props => {
151152
};
152153

153154
const AccountMenu = props => {
155+
const { user, handleLock, handleSignOut } = useContext(AppContext);
156+
154157
const {
155158
history,
156159
classes,
157-
pageProps,
158160

159161
accountMenuOpen,
160162
onAccountMenuToggle,
161163
} = props;
162-
const { user, handleLock, handleSignOut } = pageProps;
163164

164165
const navigate = path => history.push(path);
165166

@@ -191,12 +192,10 @@ const AccountMenu = props => {
191192
</ListItemAvatar>
192193

193194
<ListItemText>
194-
<Typography>
195-
{pageProps.user.name}
196-
</Typography>
195+
<Typography>{user.name}</Typography>
197196

198197
<Typography color="textSecondary">
199-
{pageProps.user.email}
198+
{user.email}
200199
</Typography>
201200
</ListItemText>
202201
</MenuItem>
@@ -260,7 +259,6 @@ const AccountMenu = props => {
260259
function Header(props) {
261260
const {
262261
classes,
263-
pageProps,
264262
pageTitle,
265263
loading,
266264

@@ -277,10 +275,11 @@ function Header(props) {
277275

278276
const {
279277
user,
278+
280279
monitoringEnabled,
281280
nightMode,
282281
handleNightModeToggled,
283-
} = pageProps;
282+
} = useContext(AppContext);
284283

285284
const skeletonProps = {
286285
color: colors.grey[400],
@@ -711,7 +710,6 @@ function Header(props) {
711710

712711
Header.propTypes = {
713712
classes: PropTypes.object.isRequired,
714-
pageProps: PropTypes.object.isRequired,
715713
pageTitle: PropTypes.string.isRequired,
716714
loading: PropTypes.bool,
717715

0 commit comments

Comments
 (0)