Skip to content

Commit b2a4f52

Browse files
karpolankarpolan
committed
refactor: Pages uses AppView or AppForm as main container
1 parent 364e4ca commit b2a4f52

File tree

5 files changed

+37
-143
lines changed

5 files changed

+37
-143
lines changed

‎src/layout/PrivateLayout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const SIDE_BAR_ITEMS: Array<LinkToPage> = [
2727
icon: 'home',
2828
},
2929
{
30-
title: 'Profile',
30+
title: 'Profile (404)',
3131
path: '/user',
3232
icon: 'account',
3333
},

‎src/views/About/AboutView.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Card, CardActions, CardContent, CardHeader, Divider, Grid, Typography } from '@mui/material';
2-
import { AppButton, AppLink, AppIconButton } from '../../components';
2+
import { AppButton, AppLink, AppIconButton, AppView } from '../../components';
33
import DialogsSection from './DialogsSection';
44

55
/**
@@ -9,7 +9,7 @@ import DialogsSection from './DialogsSection';
99
*/
1010
const AboutView = () => {
1111
return (
12-
<Grid container spacing={2}>
12+
<AppView>
1313
<Grid item xs={12} md={3}>
1414
<Card>
1515
<CardHeader title="Application title here..." subheader="Version 0.1" />
@@ -136,7 +136,7 @@ const AboutView = () => {
136136
</CardContent>
137137
</Card>
138138
</Grid>
139-
</Grid>
139+
</AppView>
140140
);
141141
};
142142

‎src/views/Dev/DevView.tsx‎

Lines changed: 2 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Card, CardActions, CardContent, CardHeader, Divider, Grid, Typography } from '@mui/material';
2-
import { AppButton, AppLink, AppIconButton } from '../../components';
2+
import { AppButton, AppLink, AppIconButton, AppView } from '../../components';
33

44
/**
55
* Renders Development tools when env.REACT_APP_DEBUG is true
@@ -9,136 +9,7 @@ import { AppButton, AppLink, AppIconButton } from '../../components';
99
const DevView = () => {
1010
if (process.env.REACT_APP_DEBUG !== 'true') return null; // Hide this page on when env.REACT_APP_DEBUG is not set
1111

12-
return (
13-
<Grid container spacing={2}>
14-
<Grid item xs={12} md={3}>
15-
<Card>
16-
<CardHeader title="Application title here..." subheader="Version 0.1" />
17-
<CardContent>Detailed description of the application here...</CardContent>
18-
<CardActions>
19-
<AppButton to="/" color="primary">
20-
OK
21-
</AppButton>
22-
</CardActions>
23-
</Card>
24-
</Grid>
25-
26-
{/* <Grid item xs={12} md={3}>
27-
<DialogsSection />
28-
</Grid> */}
29-
30-
<Grid item xs={12} md={6}>
31-
<Card>
32-
<CardHeader title="AppLink" />
33-
<CardContent>
34-
<AppLink>MUI default</AppLink> <AppLink color="inherit">MUI inherit</AppLink>{' '}
35-
<AppLink color="primary">MUI primary</AppLink> <AppLink color="secondary">MUI secondary</AppLink>{' '}
36-
<AppLink color="textPrimary">MUI textPrimary</AppLink>{' '}
37-
<AppLink color="textSecondary">MUI textSecondary</AppLink> <AppLink color="error">MUI error</AppLink> <br />
38-
<AppLink to="/">Internal Link</AppLink> &nbsp;
39-
<AppLink to="/" openInNewTab>
40-
Internal Link in New Tab
41-
</AppLink>{' '}
42-
&nbsp;
43-
<AppLink href="//karpolan.com">External Link</AppLink> &nbsp;
44-
<AppLink href="//karpolan.com" openInNewTab={false}>
45-
External Link in Same Tab
46-
</AppLink>{' '}
47-
&nbsp;
48-
<br />
49-
<AppButton to="/" sx={{ ml: 0 }} size="small" label="as Default Button" />
50-
<AppButton to="/" size="small" color="primary" label="as Primary Button" />
51-
<AppButton to="/" sx={{ mr: 0 }} size="small" color="secondary" label="as Secondary Button" />
52-
</CardContent>
53-
</Card>
54-
</Grid>
55-
56-
<Grid item xs={12} md={6}>
57-
<Card>
58-
<CardHeader title="AppButton" />
59-
<CardContent>
60-
<AppButton sx={{ ml: 0 }}>Default</AppButton>
61-
<AppButton disabled>Disabled</AppButton>
62-
<AppButton color="primary">Primary</AppButton>
63-
<AppButton color="secondary">Secondary</AppButton>
64-
<AppButton color="error">Error</AppButton>
65-
<AppButton color="warning">Warning</AppButton>
66-
<AppButton color="info">Info</AppButton>
67-
<AppButton color="success">Success</AppButton>
68-
<AppButton color="#FF8C00">#FF8C00</AppButton>
69-
<AppButton color="rgb(50, 205, 50)">rgb(50, 205, 50)</AppButton>
70-
<AppButton color="inherit" sx={{ mr: 0 }}>
71-
Inherit
72-
</AppButton>
73-
</CardContent>
74-
</Card>
75-
</Grid>
76-
77-
<Grid item xs={12} md={6}>
78-
<Card>
79-
<CardHeader title="AppIconButton" />
80-
<CardContent>
81-
<AppIconButton title="Default icon, no color specified" />
82-
<AppIconButton icon="close" color="primary" title="Close icon with Primary color" />
83-
<AppIconButton icon="menu" color="secondary" title="Menu icon with Secondary color" />
84-
<AppIconButton icon="settings" color="error" title="Settings icon with Error color" />
85-
<AppIconButton icon="search" color="warning" title="Search icon with Warning color" />
86-
<AppIconButton icon="info" color="info" title="Info icon with Info color" />
87-
<AppIconButton icon="home" color="success" title="Home icon with Success color" />
88-
<AppIconButton
89-
icon="visibilityoff"
90-
color="#FF8C00"
91-
title="VisibilityOff icon with DarkOrange (#FF8C00) color"
92-
/>
93-
<AppIconButton
94-
icon="visibilityon"
95-
color="rgb(50, 205, 50)"
96-
title="VisibilityOn icon with LimeGreen (rgb(50, 205, 50)) color"
97-
/>
98-
<AppIconButton icon="account" color="inherit" title="Account icon with Inherit color" />
99-
{/* <AppIconButton icon="close" color="primary" disabled title="Disabled Close icon with Primary color" /> */}
100-
</CardContent>
101-
</Card>
102-
</Grid>
103-
104-
<Grid item xs={12}>
105-
<Card>
106-
<CardContent>
107-
<Typography variant="h1">MUI Typo h1</Typography>
108-
<Typography variant="h2">MUI Typography h2</Typography>
109-
<Typography variant="h3">MUI Typography h3</Typography>
110-
<Typography variant="h4">MUI Typography h4</Typography>
111-
<Typography variant="h5">MUI Typography h5</Typography>
112-
<Typography variant="h6">MUI Typography h6</Typography>
113-
<Divider />
114-
<Typography variant="subtitle1">MUI Typography subtitle1</Typography>
115-
<Typography variant="subtitle2">MUI Typography subtitle2</Typography>
116-
<Typography variant="caption">MUI Typography caption</Typography>
117-
<Divider />
118-
<Typography variant="body1">
119-
MUI Typography body1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
120-
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
121-
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
122-
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
123-
qui officia deserunt mollit anim id est laborum.
124-
</Typography>
125-
<Divider />
126-
<Typography variant="body2">
127-
MUI Typography body2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
128-
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
129-
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
130-
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
131-
qui officia deserunt mollit anim id est laborum.
132-
</Typography>
133-
<Divider />
134-
<Typography variant="overline">MUI Typography overline</Typography>
135-
<Divider />
136-
<Typography variant="button">MUI Typography button</Typography>
137-
</CardContent>
138-
</Card>
139-
</Grid>
140-
</Grid>
141-
);
12+
return <AppView>Debug controls and components on this page...</AppView>;
14213
};
14314

14415
export default DevView;

‎src/views/NotFoundView.tsx‎

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,33 @@
1+
import { useNavigate } from 'react-router-dom';
2+
import { Stack, Typography } from '@mui/material';
3+
import { AppAlert, AppButton, AppLink, AppView } from '../components';
4+
15
/**
26
* "Not Found" aka "Error 404" view
3-
* @page NotFound
7+
* url: any unknown :)
8+
* @page NotFoundView
49
*/
5-
const NotFoundViewView = () => {
6-
return <div>Page not found!</div>;
10+
const NotFoundView = () => {
11+
const navigate = useNavigate();
12+
13+
const onClose = () => {
14+
navigate('/', { replace: true });
15+
};
16+
17+
return (
18+
<AppView>
19+
<Typography variant="h3">Page not found!</Typography>
20+
<Typography variant="body1">
21+
Requested address is unknown, please check your URL or go to the <AppLink to="/">home page</AppLink>.
22+
</Typography>
23+
<AppAlert severity="error" onClose={onClose}>
24+
Error 404 - Page not found
25+
</AppAlert>
26+
<Stack direction="row" justifyContent="center">
27+
<AppButton onClick={onClose}>Go to Home Page</AppButton>
28+
</Stack>
29+
</AppView>
30+
);
731
};
832

9-
export default NotFoundViewView;
33+
export default NotFoundView;

‎src/views/Welcome/WelcomeView.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Typography } from '@mui/material';
2-
import { Stack } from '@mui/system';
3-
import { AppLink } from '../../components';
2+
import { AppLink, AppView } from '../../components';
43

54
/**
65
* Renders "Welcome" view
@@ -9,14 +8,14 @@ import { AppLink } from '../../components';
98
*/
109
const WelcomeView = () => {
1110
return (
12-
<Stack direction="column" spacing={2}>
11+
<AppView>
1312
<Typography variant="h4">Welcome to React App with MUI</Typography>
1413

1514
<div>This is Welcome page, put your content here....</div>
1615
<div>
1716
Take a look on samples of components at <AppLink to="/about">About Page</AppLink>
1817
</div>
19-
</Stack>
18+
</AppView>
2019
);
2120
};
2221

0 commit comments

Comments
 (0)