From cc7e080ee95f01043a3035cb4dd33a5420264d66 Mon Sep 17 00:00:00 2001 From: robertsavian Date: Sat, 5 Dec 2020 15:15:21 -0600 Subject: [PATCH 1/2] Material UI --- package.json | 3 + src/components/pages/about-page/AboutPage.tsx | 24 +- .../dashboard-page/DashboardPage.styles.ts | 15 ++ .../pages/dashboard-page/DashboardPage.tsx | 32 +++ .../components/Deposits.styles.ts | 9 + .../dashboard-page/components/Deposits.tsx | 28 ++ .../components/Orders.constants.ts | 42 +++ .../components/Orders.styles.ts | 9 + .../dashboard-page/components/Orders.tsx | 49 ++++ .../pages/dashboard-page/components/Title.tsx | 12 + src/components/pages/index-page/IndexPage.tsx | 28 +- src/components/shared/Layout.tsx | 31 --- src/components/shared/Link.tsx | 53 ++++ src/components/shared/copyright/Copyright.tsx | 18 ++ .../shared/main-layout/MainLayout.styles.ts | 84 ++++++ .../shared/main-layout/MainLayout.tsx | 82 ++++++ .../shared/main-nav/MainNav.module.css | 9 - src/components/shared/main-nav/MainNav.tsx | 34 --- .../shared/main-navigation/MainNavigation.tsx | 51 ++++ .../ui/light-bulb-icon/LightBulbIcon.tsx | 10 + src/components/ui/pro-tip/ProTip.styles.ts | 13 + src/components/ui/pro-tip/ProTip.tsx | 19 ++ src/components/ui/theme.tsx | 19 ++ src/constants/Routes.ts | 1 + src/pages/_app.tsx | 27 +- src/pages/_document.tsx | 47 ++++ src/pages/about/index.tsx | 6 +- src/pages/api/users/index.ts | 6 +- src/pages/dashboard/index.tsx | 16 ++ src/pages/films/[id].tsx | 6 +- src/pages/films/index.tsx | 6 +- src/pages/index.tsx | 6 +- yarn.lock | 240 +++++++++++++++++- 33 files changed, 913 insertions(+), 122 deletions(-) create mode 100644 src/components/pages/dashboard-page/DashboardPage.styles.ts create mode 100644 src/components/pages/dashboard-page/DashboardPage.tsx create mode 100644 src/components/pages/dashboard-page/components/Deposits.styles.ts create mode 100644 src/components/pages/dashboard-page/components/Deposits.tsx create mode 100644 src/components/pages/dashboard-page/components/Orders.constants.ts create mode 100644 src/components/pages/dashboard-page/components/Orders.styles.ts create mode 100644 src/components/pages/dashboard-page/components/Orders.tsx create mode 100644 src/components/pages/dashboard-page/components/Title.tsx delete mode 100644 src/components/shared/Layout.tsx create mode 100644 src/components/shared/Link.tsx create mode 100644 src/components/shared/copyright/Copyright.tsx create mode 100644 src/components/shared/main-layout/MainLayout.styles.ts create mode 100644 src/components/shared/main-layout/MainLayout.tsx delete mode 100644 src/components/shared/main-nav/MainNav.module.css delete mode 100644 src/components/shared/main-nav/MainNav.tsx create mode 100644 src/components/shared/main-navigation/MainNavigation.tsx create mode 100644 src/components/ui/light-bulb-icon/LightBulbIcon.tsx create mode 100644 src/components/ui/pro-tip/ProTip.styles.ts create mode 100644 src/components/ui/pro-tip/ProTip.tsx create mode 100644 src/components/ui/theme.tsx create mode 100644 src/pages/dashboard/index.tsx diff --git a/package.json b/package.json index 07e25ad..7552e69 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,10 @@ "-----------------------------------------------------------------------": "" }, "dependencies": { + "@material-ui/core": "4.11.0", + "@material-ui/icons": "4.9.1", "axios": "0.21.0", + "clsx": "1.1.1", "next": "10.0.3", "react": "17.0.1", "react-dom": "17.0.1" diff --git a/src/components/pages/about-page/AboutPage.tsx b/src/components/pages/about-page/AboutPage.tsx index dc81af1..e879af0 100644 --- a/src/components/pages/about-page/AboutPage.tsx +++ b/src/components/pages/about-page/AboutPage.tsx @@ -1,19 +1,23 @@ import React from 'react'; -import Link from 'next/link'; +import Link from '../../shared/Link'; import { Routes } from '../../../constants/Routes'; +import Container from '@material-ui/core/Container'; +import Typography from '@material-ui/core/Typography'; +import Box from '@material-ui/core/Box'; +import { ProTip } from '../../ui/pro-tip/ProTip'; interface IProps {} export const AboutPage: React.FC = (props) => { return ( -
-

About

-

This is the about page

-

- - Go home - -

-
+ + + + This the about page. + + Go to the main page + + + ); }; diff --git a/src/components/pages/dashboard-page/DashboardPage.styles.ts b/src/components/pages/dashboard-page/DashboardPage.styles.ts new file mode 100644 index 0000000..d2a87b1 --- /dev/null +++ b/src/components/pages/dashboard-page/DashboardPage.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles, createStyles } from '@material-ui/core/styles'; + +export const useDashboardPageStyles = makeStyles((theme) => + createStyles({ + paper: { + padding: theme.spacing(2), + display: 'flex', + overflow: 'auto', + flexDirection: 'column', + }, + fixedHeight: { + height: 240, + }, + }) +); diff --git a/src/components/pages/dashboard-page/DashboardPage.tsx b/src/components/pages/dashboard-page/DashboardPage.tsx new file mode 100644 index 0000000..e252150 --- /dev/null +++ b/src/components/pages/dashboard-page/DashboardPage.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import clsx from 'clsx'; +import { Grid } from '@material-ui/core'; +import Paper from '@material-ui/core/Paper'; +import { Deposits } from './components/Deposits'; +import { Orders } from './components/Orders'; +import { useDashboardPageStyles } from './DashboardPage.styles'; + +interface IProps {} + +export const DashboardPage: React.FC = (props) => { + const classes = useDashboardPageStyles(); + const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight); + + return ( + + + asdf + + + + + + + + + + + + + ); +}; diff --git a/src/components/pages/dashboard-page/components/Deposits.styles.ts b/src/components/pages/dashboard-page/components/Deposits.styles.ts new file mode 100644 index 0000000..23b0cb4 --- /dev/null +++ b/src/components/pages/dashboard-page/components/Deposits.styles.ts @@ -0,0 +1,9 @@ +import { makeStyles, createStyles } from '@material-ui/core/styles'; + +export const useDepositsStyles = makeStyles((theme) => + createStyles({ + depositContext: { + flex: 1, + }, + }) +); diff --git a/src/components/pages/dashboard-page/components/Deposits.tsx b/src/components/pages/dashboard-page/components/Deposits.tsx new file mode 100644 index 0000000..ed1f9b2 --- /dev/null +++ b/src/components/pages/dashboard-page/components/Deposits.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import Link from '@material-ui/core/Link'; +import Typography from '@material-ui/core/Typography'; +import { Title } from './Title'; +import { useDepositsStyles } from './Deposits.styles'; + +interface IProps {} + +export const Deposits: React.FC = (props) => { + const classes = useDepositsStyles(); + + return ( + <> + Recent Deposits + + $3,024.00 + + + on 15 March, 2019 + +
+ ) => event.preventDefault()}> + View balance + +
+ + ); +}; diff --git a/src/components/pages/dashboard-page/components/Orders.constants.ts b/src/components/pages/dashboard-page/components/Orders.constants.ts new file mode 100644 index 0000000..4fc6b65 --- /dev/null +++ b/src/components/pages/dashboard-page/components/Orders.constants.ts @@ -0,0 +1,42 @@ +export const tableRows = [ + { + id: 0, + date: '16 Mar, 2019', + name: 'Elvis Presley', + shipTo: 'Tupelo, MS', + paymentMethod: 'VISA ⠀•••• 3719', + amount: 312.44, + }, + { + id: 1, + date: '16 Mar, 2019', + name: 'Paul McCartney', + shipTo: 'London, UK', + paymentMethod: 'VISA ⠀•••• 2574', + amount: 866.99, + }, + { + id: 2, + date: '16 Mar, 2019', + name: 'Tom Scholz', + shipTo: 'Boston, MA', + paymentMethod: 'MC ⠀•••• 1253', + amount: 100.81, + }, + { + id: 3, + date: '16 Mar, 2019', + name: 'Michael Jackson', + shipTo: 'Gary, IN', + paymentMethod: 'AMEX ⠀•••• 2000', + amount: 654.39, + }, + { + id: 4, + date: '15 Mar, 2019', + name: 'Bruce Springsteen', + shipTo: 'Long Branch, NJ', + paymentMethod: 'VISA ⠀•••• 5919', + amount: 212.79, + }, +]; diff --git a/src/components/pages/dashboard-page/components/Orders.styles.ts b/src/components/pages/dashboard-page/components/Orders.styles.ts new file mode 100644 index 0000000..d4a849b --- /dev/null +++ b/src/components/pages/dashboard-page/components/Orders.styles.ts @@ -0,0 +1,9 @@ +import { makeStyles, createStyles } from '@material-ui/core/styles'; + +export const useOrdersStyles = makeStyles((theme) => + createStyles({ + seeMore: { + marginTop: theme.spacing(3), + }, + }) +); diff --git a/src/components/pages/dashboard-page/components/Orders.tsx b/src/components/pages/dashboard-page/components/Orders.tsx new file mode 100644 index 0000000..3186f37 --- /dev/null +++ b/src/components/pages/dashboard-page/components/Orders.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import Link from '@material-ui/core/Link'; +import Table from '@material-ui/core/Table'; +import TableBody from '@material-ui/core/TableBody'; +import TableCell from '@material-ui/core/TableCell'; +import TableHead from '@material-ui/core/TableHead'; +import TableRow from '@material-ui/core/TableRow'; +import { Title } from './Title'; +import { useOrdersStyles } from './Orders.styles'; +import { tableRows } from './Orders.constants'; + +interface IProps {} + +export const Orders: React.FC = (props) => { + const classes = useOrdersStyles(); + + return ( + <> + Recent Orders + + + + Date + Name + Ship To + Payment Method + Sale Amount + + + + {tableRows.map((row) => ( + + {row.date} + {row.name} + {row.shipTo} + {row.paymentMethod} + {row.amount} + + ))} + +
+
+ ) => event.preventDefault()}> + See more orders + +
+ + ); +}; diff --git a/src/components/pages/dashboard-page/components/Title.tsx b/src/components/pages/dashboard-page/components/Title.tsx new file mode 100644 index 0000000..5c452d3 --- /dev/null +++ b/src/components/pages/dashboard-page/components/Title.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import Typography from '@material-ui/core/Typography'; + +interface IProps {} + +export const Title: React.FC = (props) => { + return ( + + {props.children} + + ); +}; diff --git a/src/components/pages/index-page/IndexPage.tsx b/src/components/pages/index-page/IndexPage.tsx index 8e25beb..42b8d05 100644 --- a/src/components/pages/index-page/IndexPage.tsx +++ b/src/components/pages/index-page/IndexPage.tsx @@ -1,23 +1,25 @@ import React from 'react'; -import Link from 'next/link'; +import Link from '../../shared/Link'; import { Routes } from '../../../constants/Routes'; +import Container from '@material-ui/core/Container'; +import Typography from '@material-ui/core/Typography'; +import Box from '@material-ui/core/Box'; +import { ProTip } from '../../ui/pro-tip/ProTip'; interface IProps {} export const IndexPage: React.FC = (props) => { return ( -
-

- Hello Next.js{' '} - - 👋 - -

-

- - About + + + + Welcome to the home page.x + + + Go to the about page -

-
+ + + ); }; diff --git a/src/components/shared/Layout.tsx b/src/components/shared/Layout.tsx deleted file mode 100644 index d996049..0000000 --- a/src/components/shared/Layout.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; -import Head from 'next/head'; -import { MainNav } from './main-nav/MainNav'; - -interface IProps { - title?: string; -} - -export const Layout: React.FC = (props) => { - return ( -
- - {props.title} - - - -
- -
- {props.children} -
-
- I'm here to stay (Footer) -
-
- ); -}; - -Layout.defaultProps = { - title: 'This is the default title', -}; diff --git a/src/components/shared/Link.tsx b/src/components/shared/Link.tsx new file mode 100644 index 0000000..938f170 --- /dev/null +++ b/src/components/shared/Link.tsx @@ -0,0 +1,53 @@ +import React, { forwardRef } from 'react'; +import clsx from 'clsx'; +import { useRouter } from 'next/router'; +import NextLink, { LinkProps as NextLinkProps } from 'next/link'; +import MuiLink, { LinkProps as MuiLinkProps } from '@material-ui/core/Link'; + +type NextComposedProps = Omit, 'href'> & NextLinkProps; + +const NextComposed = forwardRef((props, ref) => { + const { as, href, replace, scroll, passHref, shallow, prefetch, ...other } = props; + + return ( + + + + ); +}); + +interface LinkPropsBase { + activeClassName?: string; + innerRef?: React.Ref; + naked?: boolean; +} + +export type LinkProps = LinkPropsBase & NextComposedProps & Omit; + +// A styled version of the Next.js Link component: +// https://nextjs.org/docs/#with-link +const Link: React.FC = (props) => { + const { href, activeClassName = 'active', className: classNameProps, innerRef, naked, ...other } = props; + + const router = useRouter(); + const pathname = typeof href === 'string' ? href : href.pathname; + const className = clsx(classNameProps, { + [activeClassName]: router.pathname === pathname && activeClassName, + }); + + if (naked) { + return ; + } + + return ; +}; + +export default React.forwardRef((props, ref) => ); diff --git a/src/components/shared/copyright/Copyright.tsx b/src/components/shared/copyright/Copyright.tsx new file mode 100644 index 0000000..b61d939 --- /dev/null +++ b/src/components/shared/copyright/Copyright.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import Typography from '@material-ui/core/Typography'; +import MuiLink from '@material-ui/core/Link'; + +interface IProps {} + +export const Copyright: React.FC = (props) => { + return ( + + {'Copyright © '} + + Your Website + {' '} + {new Date().getFullYear()} + {'.'} + + ); +}; diff --git a/src/components/shared/main-layout/MainLayout.styles.ts b/src/components/shared/main-layout/MainLayout.styles.ts new file mode 100644 index 0000000..312fe2c --- /dev/null +++ b/src/components/shared/main-layout/MainLayout.styles.ts @@ -0,0 +1,84 @@ +import { createStyles, makeStyles } from '@material-ui/core/styles'; + +const drawerWidth = 240; + +export const useMainLayoutStyles = makeStyles((theme) => + createStyles({ + root: { + display: 'flex', + }, + toolbar: { + paddingRight: 24, // keep right padding when drawer closed + }, + toolbarIcon: { + display: 'flex', + alignItems: 'center', + justifyContent: 'flex-end', + padding: '0 8px', + ...theme.mixins.toolbar, + }, + appBar: { + zIndex: theme.zIndex.drawer + 1, + transition: theme.transitions.create(['width', 'margin'], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + }, + appBarShift: { + marginLeft: drawerWidth, + width: `calc(100% - ${drawerWidth}px)`, + transition: theme.transitions.create(['width', 'margin'], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.enteringScreen, + }), + }, + menuButton: { + marginRight: 36, + }, + menuButtonHidden: { + display: 'none', + }, + title: { + flexGrow: 1, + }, + drawerPaper: { + position: 'relative', + whiteSpace: 'nowrap', + width: drawerWidth, + transition: theme.transitions.create('width', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.enteringScreen, + }), + }, + drawerPaperClose: { + overflowX: 'hidden', + transition: theme.transitions.create('width', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + width: theme.spacing(7), + [theme.breakpoints.up('sm')]: { + width: theme.spacing(9), + }, + }, + appBarSpacer: theme.mixins.toolbar, + content: { + flexGrow: 1, + height: '100vh', + overflow: 'auto', + }, + container: { + paddingTop: theme.spacing(4), + paddingBottom: theme.spacing(4), + }, + paper: { + padding: theme.spacing(2), + display: 'flex', + overflow: 'auto', + flexDirection: 'column', + }, + fixedHeight: { + height: 240, + }, + }) +); diff --git a/src/components/shared/main-layout/MainLayout.tsx b/src/components/shared/main-layout/MainLayout.tsx new file mode 100644 index 0000000..eca6ad1 --- /dev/null +++ b/src/components/shared/main-layout/MainLayout.tsx @@ -0,0 +1,82 @@ +import React, { useState } from 'react'; +import clsx from 'clsx'; +import Drawer from '@material-ui/core/Drawer'; +import Box from '@material-ui/core/Box'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import Divider from '@material-ui/core/Divider'; +import IconButton from '@material-ui/core/IconButton'; +import Badge from '@material-ui/core/Badge'; +import Container from '@material-ui/core/Container'; +import MenuIcon from '@material-ui/icons/Menu'; +import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; +import NotificationsIcon from '@material-ui/icons/Notifications'; +import { MainNavigation } from '../main-navigation/MainNavigation'; +import { Copyright } from '../copyright/Copyright'; +import { useMainLayoutStyles } from './MainLayout.styles'; +import Head from 'next/head'; + +interface IProps { + title: string; +} + +export const MainLayout: React.FC = (props) => { + const classes = useMainLayoutStyles(); + const [open, setOpen] = useState(true); + + return ( + <> + + {props.title} + +
+ + + setOpen(true)} + className={clsx(classes.menuButton, { [classes.menuButtonHidden]: open })} + > + + + + {props.title} + + + + + + + + + +
+ setOpen(false)}> + + +
+ + + +
+
+ + {props.children} + + + + +
+
+ + ); +}; diff --git a/src/components/shared/main-nav/MainNav.module.css b/src/components/shared/main-nav/MainNav.module.css deleted file mode 100644 index 993cf52..0000000 --- a/src/components/shared/main-nav/MainNav.module.css +++ /dev/null @@ -1,9 +0,0 @@ -.crumbs { - /*list-style-type: none;*/ - /*padding-left: 0;*/ -} - -.crumb li { - display: inline-block; - padding: 0 10px; -} diff --git a/src/components/shared/main-nav/MainNav.tsx b/src/components/shared/main-nav/MainNav.tsx deleted file mode 100644 index cb2b871..0000000 --- a/src/components/shared/main-nav/MainNav.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import Link from 'next/link'; -import { Routes } from '../../../constants/Routes'; -import styles from './MainNav.module.css'; -import environment from 'environment'; - -interface IProps {} - -export const MainNav: React.FC = (props) => { - return ( - - ); -}; diff --git a/src/components/shared/main-navigation/MainNavigation.tsx b/src/components/shared/main-navigation/MainNavigation.tsx new file mode 100644 index 0000000..e6f777d --- /dev/null +++ b/src/components/shared/main-navigation/MainNavigation.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemIcon from '@material-ui/core/ListItemIcon'; +import ListItemText from '@material-ui/core/ListItemText'; +import HomeIcon from '@material-ui/icons/Home'; +import DashboardIcon from '@material-ui/icons/Dashboard'; +import InfoIcon from '@material-ui/icons/Info'; +import List from '@material-ui/core/List'; +import Link from 'next/link'; +import { Routes } from '../../../constants/Routes'; + +interface IProps {} + +export const MainNavigation: React.FC = (props) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/components/ui/light-bulb-icon/LightBulbIcon.tsx b/src/components/ui/light-bulb-icon/LightBulbIcon.tsx new file mode 100644 index 0000000..aaf1951 --- /dev/null +++ b/src/components/ui/light-bulb-icon/LightBulbIcon.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon'; + +export const LightBulbIcon: React.FC = (props) => { + return ( + + + + ); +}; diff --git a/src/components/ui/pro-tip/ProTip.styles.ts b/src/components/ui/pro-tip/ProTip.styles.ts new file mode 100644 index 0000000..c868f0b --- /dev/null +++ b/src/components/ui/pro-tip/ProTip.styles.ts @@ -0,0 +1,13 @@ +import { createStyles, makeStyles } from '@material-ui/core/styles'; + +export const useProTipStyles = makeStyles((theme) => + createStyles({ + root: { + margin: theme.spacing(6, 0, 3), + }, + lightBulb: { + verticalAlign: 'middle', + marginRight: theme.spacing(1), + }, + }) +); diff --git a/src/components/ui/pro-tip/ProTip.tsx b/src/components/ui/pro-tip/ProTip.tsx new file mode 100644 index 0000000..04df55a --- /dev/null +++ b/src/components/ui/pro-tip/ProTip.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import Link from '@material-ui/core/Link'; +import Typography from '@material-ui/core/Typography'; +import { LightBulbIcon } from '../light-bulb-icon/LightBulbIcon'; +import { useProTipStyles } from './ProTip.styles'; + +interface IProps {} + +export const ProTip: React.FC = (props) => { + const classes = useProTipStyles(); + + return ( + + + Pro tip: See more templates on the + Material-UI documentation. + + ); +}; diff --git a/src/components/ui/theme.tsx b/src/components/ui/theme.tsx new file mode 100644 index 0000000..5dfacf9 --- /dev/null +++ b/src/components/ui/theme.tsx @@ -0,0 +1,19 @@ +import { createMuiTheme } from '@material-ui/core/styles'; +import red from '@material-ui/core/colors/red'; + +export const theme = createMuiTheme({ + palette: { + primary: { + main: '#556cd6', + }, + secondary: { + main: '#19857b', + }, + error: { + main: red.A400, + }, + background: { + default: '#fff', + }, + }, +}); diff --git a/src/constants/Routes.ts b/src/constants/Routes.ts index 208ac69..914af0d 100644 --- a/src/constants/Routes.ts +++ b/src/constants/Routes.ts @@ -7,4 +7,5 @@ export enum Routes { About = '/about', Films = '/films', Films_FilmId = '/films/[film_id]', + Dashboard = '/dashboard', } diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 0ee2db8..fd1af35 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,19 +1,32 @@ -import '../css/main.css'; - -import React from 'react'; -import { AppProps } from 'next/app'; +import React, { useEffect } from 'react'; import Head from 'next/head'; +import { AppProps } from 'next/app'; +import { ThemeProvider } from '@material-ui/core/styles'; +import CssBaseline from '@material-ui/core/CssBaseline'; +import { theme } from '../components/ui/theme'; const NextApp: React.FC = (props) => { + useEffect(() => { + // Remove the server-side injected CSS. + const jssStyles = document.querySelector('#jss-server-side'); + if (jssStyles) { + jssStyles.parentElement!.removeChild(jssStyles); + } + }, []); + return ( - + <> My Next.js Starter {/* Use minimum-scale=1 to enable GPU rasterization */} - - + + {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} + + + + ); }; diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 5824097..080e7fa 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -1,5 +1,7 @@ import React from 'react'; import Document, { Html, Head, Main, NextScript, DocumentContext, DocumentInitialProps } from 'next/document'; +import { ServerStyleSheets } from '@material-ui/core/styles'; +import { theme } from '../components/ui/theme'; class NextDocument extends Document { static async getInitialProps(ctx: DocumentContext): Promise { @@ -13,6 +15,8 @@ class NextDocument extends Document { + {/* PWA primary color */} + @@ -25,4 +29,47 @@ class NextDocument extends Document { } } +// `getInitialProps` belongs to `_document` (instead of `_app`), +// it's compatible with server-side generation (SSG). +NextDocument.getInitialProps = async (ctx) => { + // Resolution order + // + // On the server: + // 1. app.getInitialProps + // 2. page.getInitialProps + // 3. document.getInitialProps + // 4. app.render + // 5. page.render + // 6. document.render + // + // On the server with error: + // 1. document.getInitialProps + // 2. app.render + // 3. page.render + // 4. document.render + // + // On the client + // 1. app.getInitialProps + // 2. page.getInitialProps + // 3. app.render + // 4. page.render + + // Render app and page and get the context of the page with collected side effects. + const sheets = new ServerStyleSheets(); + const originalRenderPage = ctx.renderPage; + + ctx.renderPage = () => + originalRenderPage({ + enhanceApp: (App) => (props) => sheets.collect(), + }); + + const initialProps = await Document.getInitialProps(ctx); + + return { + ...initialProps, + // Styles fragment is rendered after the app and page rendering finish. + styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()], + }; +}; + export default NextDocument; diff --git a/src/pages/about/index.tsx b/src/pages/about/index.tsx index 1e3e4fd..5ec6e49 100644 --- a/src/pages/about/index.tsx +++ b/src/pages/about/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Layout } from '../../components/shared/Layout'; +import { MainLayout } from '../../components/shared/main-layout/MainLayout'; import { NextPage } from 'next'; import { AboutPage } from '../../components/pages/about-page/AboutPage'; @@ -7,9 +7,9 @@ interface IProps {} const AboutRoute: NextPage = (props) => { return ( - + - + ); }; diff --git a/src/pages/api/users/index.ts b/src/pages/api/users/index.ts index a76a0f8..a9dca37 100644 --- a/src/pages/api/users/index.ts +++ b/src/pages/api/users/index.ts @@ -1,10 +1,10 @@ import { NextApiRequest, NextApiResponse } from 'next'; -type IResponseData = { +interface IResponseData { users: any[]; -}; +} -export default (req: NextApiRequest, res: NextApiResponse) => { +export default (req: NextApiRequest, res: NextApiResponse): void => { const sampleUserData = [ { id: '101', name: 'Alice' }, { id: '102', name: 'Bob' }, diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx new file mode 100644 index 0000000..78aeac3 --- /dev/null +++ b/src/pages/dashboard/index.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { NextPage } from 'next'; +import { MainLayout } from '../../components/shared/main-layout/MainLayout'; +import { DashboardPage } from '../../components/pages/dashboard-page/DashboardPage'; + +interface IProps {} + +const DashboardRoute: NextPage = (props) => { + return ( + + + + ); +}; + +export default DashboardRoute; diff --git a/src/pages/films/[id].tsx b/src/pages/films/[id].tsx index 830eeba..8d369d3 100644 --- a/src/pages/films/[id].tsx +++ b/src/pages/films/[id].tsx @@ -1,6 +1,6 @@ import React from 'react'; import { GetStaticProps, GetStaticPaths, NextPage } from 'next'; -import { Layout } from '../../components/shared/Layout'; +import { MainLayout } from '../../components/shared/main-layout/MainLayout'; import { IFilm } from '../../domains/films/films.constants'; import { getFilm, getFilms } from '../../domains/films/films.services'; import { FilmPage } from '../../components/pages/film-page/FilmPage'; @@ -12,9 +12,9 @@ interface IProps { const FilmRoute: NextPage = (props) => { return ( - + - + ); }; diff --git a/src/pages/films/index.tsx b/src/pages/films/index.tsx index 28ea2ba..e341301 100644 --- a/src/pages/films/index.tsx +++ b/src/pages/films/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { GetStaticProps, NextPage } from 'next'; -import { Layout } from '../../components/shared/Layout'; +import { MainLayout } from '../../components/shared/main-layout/MainLayout'; import { IFilm } from '../../domains/films/films.constants'; import { getFilms } from '../../domains/films/films.services'; import { FilmPages } from '../../components/pages/films-page/FilmsPage'; @@ -11,9 +11,9 @@ interface IProps { const FilmsRoute: NextPage = (props) => { return ( - + - + ); }; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 4f1ce7c..7865446 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Layout } from '../components/shared/Layout'; +import { MainLayout } from '../components/shared/main-layout/MainLayout'; import { IndexPage } from '../components/pages/index-page/IndexPage'; import { NextPage } from 'next'; @@ -7,9 +7,9 @@ interface IProps {} const IndexRoute: NextPage = (props) => { return ( - + - + ); }; diff --git a/yarn.lock b/yarn.lock index 57bc53b..e80bcd9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -82,7 +82,7 @@ core-js-pure "^3.0.0" regenerator-runtime "^0.13.4" -"@babel/runtime@7.12.5", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2": +"@babel/runtime@7.12.5", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.7": version "7.12.5" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e" integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg== @@ -98,6 +98,11 @@ lodash "^4.17.13" to-fast-properties "^2.0.0" +"@emotion/hash@^0.8.0": + version "0.8.0" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413" + integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow== + "@eslint/eslintrc@^0.2.1": version "0.2.1" resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.2.1.tgz#f72069c330461a06684d119384435e12a5d76e3c" @@ -134,6 +139,77 @@ resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.1.0.tgz#6c9eafc78c1529248f8f4d92b0799a712b6052c6" integrity sha512-i9YbZPN3QgfighY/1X1Pu118VUz2Fmmhd6b2n0/O8YVgGGfw0FbUYoA97k7FkpGJ+pLCFEDLUmAPPV4D1kpeFw== +"@material-ui/core@4.11.0": + version "4.11.0" + resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.11.0.tgz#b69b26e4553c9e53f2bfaf1053e216a0af9be15a" + integrity sha512-bYo9uIub8wGhZySHqLQ833zi4ZML+XCBE1XwJ8EuUVSpTWWG57Pm+YugQToJNFsEyiKFhPh8DPD0bgupz8n01g== + dependencies: + "@babel/runtime" "^7.4.4" + "@material-ui/styles" "^4.10.0" + "@material-ui/system" "^4.9.14" + "@material-ui/types" "^5.1.0" + "@material-ui/utils" "^4.10.2" + "@types/react-transition-group" "^4.2.0" + clsx "^1.0.4" + hoist-non-react-statics "^3.3.2" + popper.js "1.16.1-lts" + prop-types "^15.7.2" + react-is "^16.8.0" + react-transition-group "^4.4.0" + +"@material-ui/icons@4.9.1": + version "4.9.1" + resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.9.1.tgz#fdeadf8cb3d89208945b33dbc50c7c616d0bd665" + integrity sha512-GBitL3oBWO0hzBhvA9KxqcowRUsA0qzwKkURyC8nppnC3fw54KPKZ+d4V1Eeg/UnDRSzDaI9nGCdel/eh9AQMg== + dependencies: + "@babel/runtime" "^7.4.4" + +"@material-ui/styles@^4.10.0": + version "4.11.2" + resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.2.tgz#e70558be3f41719e8c0d63c7a3c9ae163fdc84cb" + integrity sha512-xbItf8zkfD3FuGoD9f2vlcyPf9jTEtj9YTJoNNV+NMWaSAHXgrW6geqRoo/IwBuMjqpwqsZhct13e2nUyU9Ljw== + dependencies: + "@babel/runtime" "^7.4.4" + "@emotion/hash" "^0.8.0" + "@material-ui/types" "^5.1.0" + "@material-ui/utils" "^4.11.2" + clsx "^1.0.4" + csstype "^2.5.2" + hoist-non-react-statics "^3.3.2" + jss "^10.0.3" + jss-plugin-camel-case "^10.0.3" + jss-plugin-default-unit "^10.0.3" + jss-plugin-global "^10.0.3" + jss-plugin-nested "^10.0.3" + jss-plugin-props-sort "^10.0.3" + jss-plugin-rule-value-function "^10.0.3" + jss-plugin-vendor-prefixer "^10.0.3" + prop-types "^15.7.2" + +"@material-ui/system@^4.9.14": + version "4.11.2" + resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.11.2.tgz#7f0a754bba3673ed5fdbfa02fe438096c104b1f6" + integrity sha512-BELFJEel5E+5DMiZb6XXT3peWRn6UixRvBtKwSxqntmD0+zwbbfCij6jtGwwdJhN1qX/aXrKu10zX31GBaeR7A== + dependencies: + "@babel/runtime" "^7.4.4" + "@material-ui/utils" "^4.11.2" + csstype "^2.5.2" + prop-types "^15.7.2" + +"@material-ui/types@^5.1.0": + version "5.1.0" + resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2" + integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A== + +"@material-ui/utils@^4.10.2", "@material-ui/utils@^4.11.2": + version "4.11.2" + resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.2.tgz#f1aefa7e7dff2ebcb97d31de51aecab1bb57540a" + integrity sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA== + dependencies: + "@babel/runtime" "^7.4.4" + prop-types "^15.7.2" + react-is "^16.8.0 || ^17.0.0" + "@next/bundle-analyzer@10.0.3": version "10.0.3" resolved "https://registry.yarnpkg.com/@next/bundle-analyzer/-/bundle-analyzer-10.0.3.tgz#4eac34f171301581638deaa4dbb939632888c653" @@ -225,6 +301,13 @@ dependencies: "@types/react" "*" +"@types/react-transition-group@^4.2.0": + version "4.4.0" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.0.tgz#882839db465df1320e4753e6e9f70ca7e9b4d46d" + integrity sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w== + dependencies: + "@types/react" "*" + "@types/react@*", "@types/react@17.0.0": version "17.0.0" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.0.tgz#5af3eb7fad2807092f0046a1302b7823e27919b8" @@ -1254,6 +1337,11 @@ cliui@^6.0.0: strip-ansi "^6.0.0" wrap-ansi "^6.2.0" +clsx@1.1.1, clsx@^1.0.4: + version "1.1.1" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188" + integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA== + code-point-at@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77" @@ -1551,6 +1639,14 @@ css-loader@4.3.0: schema-utils "^2.7.1" semver "^7.3.2" +css-vendor@^2.0.8: + version "2.0.8" + resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.8.tgz#e47f91d3bd3117d49180a3c935e62e3d9f7f449d" + integrity sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ== + dependencies: + "@babel/runtime" "^7.8.3" + is-in-browser "^1.0.2" + css.escape@^1.5.0: version "1.5.1" resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb" @@ -1603,6 +1699,11 @@ cssnano-simple@1.2.1: cssnano-preset-simple "1.2.1" postcss "^7.0.32" +csstype@^2.5.2: + version "2.6.14" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.14.tgz#004822a4050345b55ad4dcc00be1d9cf2f4296de" + integrity sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A== + csstype@^3.0.2: version "3.0.5" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.5.tgz#7fdec6a28a67ae18647c51668a9ff95bb2fa7bb8" @@ -1788,6 +1889,14 @@ doctrine@^3.0.0: dependencies: esutils "^2.0.2" +dom-helpers@^5.0.1: + version "5.2.0" + resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.0.tgz#57fd054c5f8f34c52a3eeffdb7e7e93cd357d95b" + integrity sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ== + dependencies: + "@babel/runtime" "^7.8.7" + csstype "^3.0.2" + dom-serializer@1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.0.1.tgz#79695eb49af3cd8abc8d93a73da382deb1ca0795" @@ -2857,6 +2966,13 @@ hmac-drbg@^1.0.0: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" +hoist-non-react-statics@^3.3.2: + version "3.3.2" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" + integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== + dependencies: + react-is "^16.7.0" + hoopy@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d" @@ -2958,6 +3074,11 @@ husky@4.3.0: slash "^3.0.0" which-pm-runs "^1.0.0" +hyphenate-style-name@^1.0.3: + version "1.0.4" + resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d" + integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ== + iconv-lite@0.4.24: version "0.4.24" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b" @@ -3005,6 +3126,13 @@ imurmurhash@^0.1.4: resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea" integrity sha1-khi5srkoojixPcT7a21XbyMUU+o= +indefinite-observable@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/indefinite-observable/-/indefinite-observable-2.0.1.tgz#574af29bfbc17eb5947793797bddc94c9d859400" + integrity sha512-G8vgmork+6H9S8lUAg1gtXEj2JxIQTo0g2PbFiYOdjkziSI0F7UYBiVwhZRuixhBCNGczAls34+5HJPyZysvxQ== + dependencies: + symbol-observable "1.2.0" + indexes-of@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607" @@ -3197,6 +3325,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1: dependencies: is-extglob "^2.1.1" +is-in-browser@^1.0.2, is-in-browser@^1.1.3: + version "1.1.3" + resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835" + integrity sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU= + is-negative-zero@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.0.tgz#9553b121b0fac28869da9ed459e20c7543788461" @@ -3351,6 +3484,77 @@ json5@^2.1.2: dependencies: minimist "^1.2.5" +jss-plugin-camel-case@^10.0.3: + version "10.5.0" + resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.5.0.tgz#4b0a9c85e65e5eb72cbfba59373686c604d88f72" + integrity sha512-GSjPL0adGAkuoqeYiXTgO7PlIrmjv5v8lA6TTBdfxbNYpxADOdGKJgIEkffhlyuIZHlPuuiFYTwUreLUmSn7rg== + dependencies: + "@babel/runtime" "^7.3.1" + hyphenate-style-name "^1.0.3" + jss "10.5.0" + +jss-plugin-default-unit@^10.0.3: + version "10.5.0" + resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.5.0.tgz#e9f2e89741b0118ba15d52b4c13bda2b27262373" + integrity sha512-rsbTtZGCMrbcb9beiDd+TwL991NGmsAgVYH0hATrYJtue9e+LH/Gn4yFD1ENwE+3JzF3A+rPnM2JuD9L/SIIWw== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.5.0" + +jss-plugin-global@^10.0.3: + version "10.5.0" + resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.5.0.tgz#eb357ccd35cb4894277fb2117a78d1e498668ad6" + integrity sha512-FZd9+JE/3D7HMefEG54fEC0XiQ9rhGtDHAT/ols24y8sKQ1D5KIw6OyXEmIdKFmACgxZV2ARQ5pAUypxkk2IFQ== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.5.0" + +jss-plugin-nested@^10.0.3: + version "10.5.0" + resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.5.0.tgz#790c506432a23a63c71ceb5044e2ac85f0958702" + integrity sha512-ejPlCLNlEGgx8jmMiDk/zarsCZk+DV0YqXfddpgzbO9Toamo0HweCFuwJ3ZO40UFOfqKwfpKMVH/3HUXgxkTMg== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.5.0" + tiny-warning "^1.0.2" + +jss-plugin-props-sort@^10.0.3: + version "10.5.0" + resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.5.0.tgz#5bcc3bd8e68cd3e2dafb47d67db28fd5a4fcf102" + integrity sha512-kTLRvrOetFKz5vM88FAhLNeJIxfjhCepnvq65G7xsAQ/Wgy7HwO1BS/2wE5mx8iLaAWC6Rj5h16mhMk9sKdZxg== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.5.0" + +jss-plugin-rule-value-function@^10.0.3: + version "10.5.0" + resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.5.0.tgz#60ee8240dfe60418e1ba4729adee893cbe9be7a3" + integrity sha512-jXINGr8BSsB13JVuK274oEtk0LoooYSJqTBCGeBu2cG/VJ3+4FPs1gwLgsq24xTgKshtZ+WEQMVL34OprLidRA== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.5.0" + tiny-warning "^1.0.2" + +jss-plugin-vendor-prefixer@^10.0.3: + version "10.5.0" + resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.5.0.tgz#01f04cfff31f43f153f5d71972f5800b10a2eb84" + integrity sha512-rux3gmfwDdOKCLDx0IQjTwTm03IfBa+Rm/hs747cOw5Q7O3RaTUIMPKjtVfc31Xr/XI9Abz2XEupk1/oMQ7zRA== + dependencies: + "@babel/runtime" "^7.3.1" + css-vendor "^2.0.8" + jss "10.5.0" + +jss@10.5.0, jss@^10.0.3: + version "10.5.0" + resolved "https://registry.yarnpkg.com/jss/-/jss-10.5.0.tgz#0c2de8a29874b2dc8162ab7f34ef6573a87d9dd3" + integrity sha512-B6151NvG+thUg3murLNHRPLxTLwQ13ep4SH5brj4d8qKtogOx/jupnpfkPGSHPqvcwKJaCLctpj2lEk+5yGwMw== + dependencies: + "@babel/runtime" "^7.3.1" + csstype "^3.0.2" + indefinite-observable "^2.0.1" + is-in-browser "^1.1.3" + tiny-warning "^1.0.2" + "jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.1.0.tgz#642f1d7b88aa6d7eb9d8f2210e166478444fa891" @@ -4387,6 +4591,11 @@ pnp-webpack-plugin@1.6.4: dependencies: ts-pnp "^1.1.6" +popper.js@1.16.1-lts: + version "1.16.1-lts" + resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05" + integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA== + portfinder@^1.0.25: version "1.0.28" resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778" @@ -4570,7 +4779,7 @@ promise@^7.0.1: dependencies: asap "~2.0.3" -prop-types@15.7.2, prop-types@^15.7.2: +prop-types@15.7.2, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -4723,16 +4932,31 @@ react-dom@17.0.1: object-assign "^4.1.1" scheduler "^0.20.1" -react-is@16.13.1, react-is@^16.8.1: +react-is@16.13.1, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +"react-is@^16.8.0 || ^17.0.0": + version "17.0.1" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339" + integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA== + react-refresh@0.8.3: version "0.8.3" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f" integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg== +react-transition-group@^4.4.0: + version "4.4.1" + resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9" + integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw== + dependencies: + "@babel/runtime" "^7.5.5" + dom-helpers "^5.0.1" + loose-envify "^1.4.0" + prop-types "^15.6.2" + react@17.0.1: version "17.0.1" resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127" @@ -5620,6 +5844,11 @@ supports-color@^7.1.0: dependencies: has-flag "^4.0.0" +symbol-observable@1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804" + integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ== + table@^5.2.3: version "5.4.6" resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e" @@ -5716,6 +5945,11 @@ timers-browserify@^2.0.4: dependencies: setimmediate "^1.0.4" +tiny-warning@^1.0.2: + version "1.0.3" + resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" + integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== + to-arraybuffer@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43" From 1580d60432cf18464d878599f4eb724fdbe4d4a9 Mon Sep 17 00:00:00 2001 From: robertsavian Date: Sat, 5 Dec 2020 15:32:33 -0600 Subject: [PATCH 2/2] merge --- .../shared/main-layout/MainLayout.styles.ts | 6 +- .../shared/main-layout/MainLayout.tsx | 82 +++++++++++++++++++ .../shared/main-navigation/MainNavigation.tsx | 51 ++++++++++++ 3 files changed, 136 insertions(+), 3 deletions(-) create mode 100644 src/components/shared/main-layout/MainLayout.tsx create mode 100644 src/components/shared/main-navigation/MainNavigation.tsx diff --git a/src/components/shared/main-layout/MainLayout.styles.ts b/src/components/shared/main-layout/MainLayout.styles.ts index 312fe2c..ffe2885 100644 --- a/src/components/shared/main-layout/MainLayout.styles.ts +++ b/src/components/shared/main-layout/MainLayout.styles.ts @@ -1,8 +1,8 @@ -import { createStyles, makeStyles } from '@material-ui/core/styles'; +import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; const drawerWidth = 240; -export const useMainLayoutStyles = makeStyles((theme) => +export const useMainLayoutStyles = makeStyles((theme) => createStyles({ root: { display: 'flex', @@ -15,7 +15,7 @@ export const useMainLayoutStyles = makeStyles((theme) => alignItems: 'center', justifyContent: 'flex-end', padding: '0 8px', - ...theme.mixins.toolbar, + ...(theme.mixins.toolbar as any), }, appBar: { zIndex: theme.zIndex.drawer + 1, diff --git a/src/components/shared/main-layout/MainLayout.tsx b/src/components/shared/main-layout/MainLayout.tsx new file mode 100644 index 0000000..eca6ad1 --- /dev/null +++ b/src/components/shared/main-layout/MainLayout.tsx @@ -0,0 +1,82 @@ +import React, { useState } from 'react'; +import clsx from 'clsx'; +import Drawer from '@material-ui/core/Drawer'; +import Box from '@material-ui/core/Box'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import Divider from '@material-ui/core/Divider'; +import IconButton from '@material-ui/core/IconButton'; +import Badge from '@material-ui/core/Badge'; +import Container from '@material-ui/core/Container'; +import MenuIcon from '@material-ui/icons/Menu'; +import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; +import NotificationsIcon from '@material-ui/icons/Notifications'; +import { MainNavigation } from '../main-navigation/MainNavigation'; +import { Copyright } from '../copyright/Copyright'; +import { useMainLayoutStyles } from './MainLayout.styles'; +import Head from 'next/head'; + +interface IProps { + title: string; +} + +export const MainLayout: React.FC = (props) => { + const classes = useMainLayoutStyles(); + const [open, setOpen] = useState(true); + + return ( + <> + + {props.title} + +
+ + + setOpen(true)} + className={clsx(classes.menuButton, { [classes.menuButtonHidden]: open })} + > + + + + {props.title} + + + + + + + + + +
+ setOpen(false)}> + + +
+ + + +
+
+ + {props.children} + + + + +
+
+ + ); +}; diff --git a/src/components/shared/main-navigation/MainNavigation.tsx b/src/components/shared/main-navigation/MainNavigation.tsx new file mode 100644 index 0000000..e6f777d --- /dev/null +++ b/src/components/shared/main-navigation/MainNavigation.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemIcon from '@material-ui/core/ListItemIcon'; +import ListItemText from '@material-ui/core/ListItemText'; +import HomeIcon from '@material-ui/icons/Home'; +import DashboardIcon from '@material-ui/icons/Dashboard'; +import InfoIcon from '@material-ui/icons/Info'; +import List from '@material-ui/core/List'; +import Link from 'next/link'; +import { Routes } from '../../../constants/Routes'; + +interface IProps {} + +export const MainNavigation: React.FC = (props) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +};