french-tech-homies · emyann · Jan 27, 2019 · Feb 23, 2019 · Feb 23, 2019
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel", "@babel/preset-typescript"],
+  "plugins": [["styled-components", { "ssr": true }]]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+.next
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,17 +5,23 @@
     "start": "cross-env NODE_ENV=production node dist/index.js"
   },
   "dependencies": {
+    "@material-ui/core": "^3.9.1",
     "@zeit/next-typescript": "^1.1.0",
     "axios": "^0.18.0",
     "body-parser": "^1.18.3",
     "express": "^4.16.4",
     "next": "7.0.2",
     "react": "16.7.0",
-    "react-dom": "16.7.0"
+    "react-dom": "16.7.0",
+    "react-jss": "^8.6.1",
+    "styled-components": "^4.1.3"
   },
   "devDependencies": {
-    "@types/next": "^7.0.0",
+    "@babel/preset-typescript": "^7.1.0",
+    "@types/next": "^7.0.6",
     "@types/react": "^16.6.0",
+    "@types/styled-components": "^4.1.6",
+    "babel-plugin-styled-components": "^1.10.0",
     "cross-env": "^5.2.0",
     "nodemon": "^1.18.8",
     "ts-node": "^7.0.1",

diff --git a/pages/Tiles.tsx b/pages/Tiles.tsx
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import App, { Container } from 'next/app';
+import Head from 'next/head';
+import { MuiThemeProvider } from '@material-ui/core/styles';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import JssProvider from 'react-jss/lib/JssProvider';
+import getPageContext from '../src/helpers/getPageContext';
+
+class MyApp extends App {
+  pageContext: any;
+  constructor(props) {
+    super(props);
+    this.pageContext = getPageContext();
+  }
+
+  componentDidMount() {
+    // Remove the server-side injected CSS.
+    const jssStyles = document.querySelector('#jss-server-side');
+    if (jssStyles && jssStyles.parentNode) {
+      jssStyles.parentNode.removeChild(jssStyles);
+    }
+  }
+
+  render() {
+    const { Component, pageProps } = this.props;
+    return (
+      <Container>
+        <Head>
+          <title>My page</title>
+        </Head>
+        {/* Wrap every page in Jss and Theme providers */}
+        <JssProvider registry={this.pageContext.sheetsRegistry} generateClassName={this.pageContext.generateClassName}>
+          {/* MuiThemeProvider makes the theme available down the React
+              tree thanks to React context. */}
+          <MuiThemeProvider theme={this.pageContext.theme} sheetsManager={this.pageContext.sheetsManager}>
+            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+            <CssBaseline />
+            {/* Pass pageContext to the _document though the renderPage enhancer
+                to render collected styles on server-side. */}
+            <Component pageContext={this.pageContext} {...pageProps} />
+          </MuiThemeProvider>
+        </JssProvider>
+      </Container>
+    );
+  }
+}
+
+export default MyApp;
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -0,0 +1,22 @@
+import Document, { NextDocumentContext, Enhancer } from 'next/document';
+import { ServerStyleSheet } from 'styled-components';
+
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx: NextDocumentContext) {
+    const sheet: any = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
+    const enhanceApp: Enhancer = App => props => sheet.collectStyles(<App {...props} />);
+
+    try {
+      ctx.renderPage = () => originalRenderPage(enhanceApp);
+      const initialProps: any = await Document.getInitialProps(ctx);
+
+      return {
+        ...initialProps,
+        styles: [...initialProps.styles, ...sheet.getStyleElement()]
+      };
+    } finally {
+      sheet.seal();
+    }
+  }
+}
diff --git a/pages/a.tsx b/pages/a.tsx
diff --git a/pages/b.tsx b/pages/b.tsx
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,9 +1,91 @@
-import React from 'react'
-import Link from 'next/link'
+import React, { Component } from 'react';
+import axios from 'axios';
 
-export default () => (
-  <ul>
-    <li><Link href='/a' as='/a'><a>a</a></Link></li>
-    <li><Link href='/b' as='/b'><a>b</a></Link></li>
-  </ul>
-)
+import styled from 'styled-components';
+import Button from '@material-ui/core/Button';
+
+import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
+
+const StyledButton = styled(Button)`
+  background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
+  border-radius: 3px;
+  border: 0;
+  color: white;
+  height: 48px;
+  padding: 0 30px;
+  box-shadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3);
+`;
+interface Props {
+  infos: { hostname: string; cpus: any[]; headers: {} };
+}
+export default class Home extends Component<Props> {
+  static async getInitialProps() {
+    const res = await axios('http://localhost:3000/api/fth');
+    console.log('res', res.data, res.headers);
+    return { infos: { ...res.data, headers: res.headers } };
+  }
+  render() {
+    const { infos } = this.props;
+    console.log(infos);
+    return (
+      <div>
+        <header>
+          <h1>French Tech Homies</h1>
+        </header>
+        <Paper elevation={1}>
+          <Typography variant="h5" component="h3">
+            {infos.hostname}
+          </Typography>
+        </Paper>
+        <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+          <div
+            style={{
+              display: 'flex',
+              width: '400px',
+              border: '1px',
+              borderStyle: 'solid',
+              borderColor: 'black',
+              margin: 16
+            }}
+          >
+            {infos.hostname}
+          </div>
+          <div
+            style={{
+              display: 'flex',
+              width: '400px',
+              flexDirection: 'column',
+              border: '1px',
+              borderStyle: 'solid',
+              borderColor: 'black',
+              margin: 16
+            }}
+          >
+            Number of CPUs: {infos.cpus.length}
+            <ul>
+              {infos.cpus.map((cpu, i) => {
+                return <span key={i}>{cpu.model}</span>;
+              })}
+            </ul>
+          </div>
+          <div
+            style={{
+              display: 'flex',
+              width: '400px',
+              flexDirection: 'column',
+              border: '1px',
+              borderStyle: 'solid',
+              borderColor: 'black',
+              margin: 16
+            }}
+          >
+            {JSON.stringify(infos.headers, null, 2)}
+          </div>
+        </div>
+        <StyledButton>Styled Components</StyledButton>
+        <footer>Social networks</footer>
+      </div>
+    );
+  }
+}
diff --git a/src/helpers/getPageContext.tsx b/src/helpers/getPageContext.tsx
@@ -0,0 +1,54 @@
+import { SheetsRegistry } from 'jss';
+import { createMuiTheme, createGenerateClassName } from '@material-ui/core/styles';
+import purple from '@material-ui/core/colors/purple';
+import green from '@material-ui/core/colors/green';
+
+// A theme with custom primary and secondary color.
+// It's optional.
+const theme = createMuiTheme({
+  palette: {
+    primary: {
+      light: purple[300],
+      main: purple[500],
+      dark: purple[700]
+    },
+    secondary: {
+      light: green[300],
+      main: green[500],
+      dark: green[700]
+    }
+  },
+  typography: {
+    useNextVariants: true
+  }
+});
+
+function createPageContext() {
+  return {
+    theme,
+    // This is needed in order to deduplicate the injection of CSS in the page.
+    sheetsManager: new Map(),
+    // This is needed in order to inject the critical CSS.
+    sheetsRegistry: new SheetsRegistry(),
+    // The standard class name generator.
+    generateClassName: createGenerateClassName()
+  };
+}
+
+let pageContext;
+
+export default function getPageContext() {
+  // Make sure to create a new context for every server-side request so that data
+  // isn't shared between connections (which would be bad).
+  // @ts-ignore
+  if (!process.browser) {
+    return createPageContext();
+  }
+
+  // Reuse context on the client-side.
+  if (!pageContext) {
+    pageContext = createPageContext();
+  }
+
+  return pageContext;
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -11,16 +11,11 @@
     "noUnusedParameters": true,
     "removeComments": false,
     "preserveConstEnums": true,
+    "downlevelIteration": true,
     "sourceMap": true,
     "skipLibCheck": true,
     "baseUrl": ".",
-    "typeRoots": [
-      "./node_modules/@types"
-    ],
-    "lib": [
-      "dom",
-      "es2015",
-      "es2016"
-    ]
+    "typeRoots": ["./node_modules/@types"],
+    "lib": ["dom", "es2015", "es2016"]
   }
 }