feat: modify nextjs templates and index to use material ui

4 years ago · 6b0ce569f3
parent 0ba269f9f3
commit 6b0ce569f3
3 changed files with 113 additions and 97 deletions
--- 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 <Component {...pageProps} />;
+  // 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 <Component {...pageProps} />;
-}
+  return (
+    <ThemeProvider theme={theme}>
+      <Header />
+      <Component
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...pageProps}
+      />
+      ;
+    </ThemeProvider>
+  );
+};

 export default App;
--- 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<DocumentInitialProps> {
-    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(<App {...props} />),
-        });
+export default class MyDocument extends Document {
+  render(): JSX.Element {
+    return (
+      <Html lang="en">
+        <Head>
+          <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+          />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}

-      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(
+          <App
+            /* eslint-disable react/jsx-props-no-spreading */
+            {...props}
+          />,
        ),
-      };
-    } 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(),
+    ],
+  };
+};
--- 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<AnvilList>
+> {
+  return {
+    props: await fetchJSON(`${API_BASE_URL}/api/anvils`),
+  };
+}

-function Home(): JSX.Element {
+const Home = (): JSX.Element => {
  return (
-    <div className={styles.container}>
-      <Head>
-        <title>Create Next App</title>
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-
-      <main className={styles.main}>
-        <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
-        </h1>
-
-        <p className={styles.description}>
-          Get started by editing{' '}
-          <code className={styles.code}>pages/index.js</code>
-        </p>
-
-        <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h3>Documentation &rarr;</h3>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h3>Learn &rarr;</h3>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
-
-          <a
-            href="https://github.com/vercel/next.js/tree/master/examples"
-            className={styles.card}
-          >
-            <h3>Examples &rarr;</h3>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-          >
-            <h3>Deploy &rarr;</h3>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
-          </a>
-        </div>
-      </main>
-
-      <footer className={styles.footer}>
-        <a
-          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Powered by{' '}
-          <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
-        </a>
-      </footer>
-    </div>
+    <Grid container alignItems="center" justify="space-around">
+      <Grid item xs={3}>
+        <Anvils />
+        <State />
+        <Nodes />
+      </Grid>
+      <Grid item xs={5}>
+        <ReplicatedStorage />
+      </Grid>
+      <Grid item xs={3}>
+        <CPU />
+        <SharedStorage />
+        <Memory />
+      </Grid>
+    </Grid>
  );
-}
+};

 export default Home;