From 6b0ce569f3d34403dfb071545fb55b34a5ca3fc4 Mon Sep 17 00:00:00 2001 From: Josue Date: Mon, 8 Mar 2021 11:26:46 -0500 Subject: [PATCH] feat: modify nextjs templates and index to use material ui --- striker-ui/pages/_app.tsx | 30 ++++++++-- striker-ui/pages/_document.tsx | 78 +++++++++++++++---------- striker-ui/pages/index.tsx | 102 +++++++++++++-------------------- 3 files changed, 113 insertions(+), 97 deletions(-) diff --git a/striker-ui/pages/_app.tsx b/striker-ui/pages/_app.tsx index 5ddc17cb..d15ea99a 100644 --- a/striker-ui/pages/_app.tsx +++ b/striker-ui/pages/_app.tsx @@ -1,10 +1,32 @@ +import { useEffect } from 'react'; +import { AppProps } from 'next/app'; +import { ThemeProvider } from '@material-ui/core/styles'; +import theme from '../theme'; +import Header from '../components/organisms/Header'; import '../styles/globals.css'; -import { AppProps } from 'next/app'; +const App = ({ Component, pageProps }: AppProps): JSX.Element => { + // return ; + // This hook is for ensuring the styling is in sync between client and server + useEffect(() => { + // Remove the server-side injected CSS. + const jssStyles = document.querySelector('#jss-server-side'); + if (jssStyles) { + jssStyles.parentElement?.removeChild(jssStyles); + } + }, []); -function App({ Component, pageProps }: AppProps): JSX.Element { // eslint-disable-next-line react/jsx-props-no-spreading - return ; -} + return ( + +
+ + ; + + ); +}; export default App; diff --git a/striker-ui/pages/_document.tsx b/striker-ui/pages/_document.tsx index b3c85303..3975d367 100644 --- a/striker-ui/pages/_document.tsx +++ b/striker-ui/pages/_document.tsx @@ -1,36 +1,52 @@ -import Document, { DocumentContext, DocumentInitialProps } from 'next/document'; -import { ServerStyleSheet } from 'styled-components'; +import { Children } from 'react'; +import Document, { Html, Head, Main, NextScript } from 'next/document'; +import { ServerStyleSheets } from '@material-ui/core/styles'; -class StyledDocument extends Document { - static async getInitialProps( - context: DocumentContext, - ): Promise { - const styleSheet = new ServerStyleSheet(); - const originalRenderPage = context.renderPage; - - try { - context.renderPage = () => - originalRenderPage({ - enhanceApp: (App) => (props) => - // eslint-disable-next-line react/jsx-props-no-spreading - styleSheet.collectStyles(), - }); +export default class MyDocument extends Document { + render(): JSX.Element { + return ( + + + + + +
+ + + + ); + } +} - const initialProps = await Document.getInitialProps(context); +// `getInitialProps` belongs to `_document` (instead of `_app`), +// it's compatible with server-side generation (SSG). +MyDocument.getInitialProps = async (ctx) => { + // Render app and page and get the context of the page with collected side effects. + const sheets = new ServerStyleSheets(); + const originalRenderPage = ctx.renderPage; - return { - ...initialProps, - styles: ( - <> - {initialProps.styles} - {styleSheet.getStyleElement()} - + ctx.renderPage = () => + originalRenderPage({ + enhanceApp: (App) => (props) => + sheets.collect( + , ), - }; - } finally { - styleSheet.seal(); - } - } -} + }); + + const initialProps = await Document.getInitialProps(ctx); -export default StyledDocument; + return { + ...initialProps, + // Styles fragment is rendered after the app and page rendering finish. + styles: [ + ...Children.toArray(initialProps.styles), + sheets.getStyleElement(), + ], + }; +}; diff --git a/striker-ui/pages/index.tsx b/striker-ui/pages/index.tsx index 9aa1e948..f17b780a 100644 --- a/striker-ui/pages/index.tsx +++ b/striker-ui/pages/index.tsx @@ -1,67 +1,45 @@ -import Head from 'next/head'; -import styles from '../styles/Home.module.css'; +import { GetServerSidePropsResult } from 'next'; +import { Grid } from '@material-ui/core'; + +import Anvils from '../components/Anvils'; +import Nodes from '../components/Nodes'; +import CPU from '../components/CPU'; +import SharedStorage from '../components/SharedStorage'; +import ReplicatedStorage from '../components/ReplicatedStorage'; +import State from '../components/State'; +import Memory from '../components/Memory'; + +import API_BASE_URL from '../lib/consts/API_BASE_URL'; +import fetchJSON from '../lib/fetchers/fetchJSON'; + +import 'typeface-muli'; + +export async function getServerSideProps(): Promise< + GetServerSidePropsResult +> { + return { + props: await fetchJSON(`${API_BASE_URL}/api/anvils`), + }; +} -function Home(): JSX.Element { +const Home = (): JSX.Element => { return ( - + + + + + + + + + + + + + + + ); -} +}; export default Home;