updates nextjs, emotion

Upgraded nextjs and emotion versions

common/styles/global.js

@@ -1,9 +1,9 @@
-import * as Constants from '~/common/constants';
+import * as Constants from "~/common/constants";
 
-import { injectGlobal } from 'react-emotion';
+import { css } from "@emotion/core";
 
 /* prettier-ignore */
-export default () => injectGlobal`
+const GlobalStyles = () => css`
   @font-face {
     font-family: 'mono';
     src: url('/static/SFMono-Medium.woff');
@@ -50,3 +50,5 @@ export default () => injectGlobal`
     }
   }
 `;
+
+export default GlobalStyles;

components/Form.js

@@ -1,7 +1,7 @@
-import * as React from 'react';
-import * as Constants from '~/common/constants';
+import * as React from "react";
+import * as Constants from "~/common/constants";
 
-import { css } from 'react-emotion';
+import { css } from "@emotion/core";
 
 const STYLES_BUTTON = css`
   background: ${Constants.theme.buttonBackground};
@@ -57,14 +57,14 @@ const STYLES_BUTTON = css`
 export const Button = ({ children, style, onClick, href }) => {
   if (href) {
     return (
-      <a className={STYLES_BUTTON} style={style} href={href}>
+      <a css={STYLES_BUTTON} style={style} href={href}>
         {children}
       </a>
     );
   }
 
   return (
-    <button className={STYLES_BUTTON} style={style} onClick={onClick}>
+    <button css={STYLES_BUTTON} style={style} onClick={onClick}>
       {children}
     </button>
   );
@@ -109,23 +109,24 @@ export const Input = ({
   value,
   name,
   placeholder,
-  type = 'text',
-  autoComplete = 'input-autocomplete-off',
-  onBlur = e => {},
-  onFocus = e => {},
-  onChange = e => {},
+  type = "text",
+  autoComplete = "input-autocomplete-off",
+  onBlur = (e) => {},
+  onFocus = (e) => {},
+  onChange = (e) => {},
 }) => {
   return (
     <input
-      className={STYLES_INPUT}
+      css={STYLES_INPUT}
       style={style}
       value={value}
       onChange={onChange}
       name={name}
       onFocus={onFocus}
       onBlur={onBlur}
       type={type}
-      placeholder={placeholder}>
+      placeholder={placeholder}
+    >
       {children}
     </input>
   );

components/GoogleButton.js

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import * as React from "react";
 
-import { css } from 'react-emotion';
+import { css } from "@emotion/core";
 
 const STYLES_GOOGLE = css`
   height: 48px;
@@ -34,16 +34,16 @@ const STYLES_LOGO = css`
   display: inline-flex;
   background-size: cover;
   background-position: 50% 50%;
-  background-image: url('/static/logos/google.jpg');
+  background-image: url("/static/logos/google.jpg");
   margin-right: 16px;
   margin-left: 8px;
 `;
 
 export default class GoogleButton extends React.Component {
   render() {
     return (
-      <a className={STYLES_GOOGLE} href={this.props.href}>
-        <span className={STYLES_LOGO} />
+      <a css={STYLES_GOOGLE} href={this.props.href}>
+        <span css={STYLES_LOGO} />
         Sign in with Google
       </a>
     );

components/PageState.js

@@ -1,10 +1,10 @@
-import * as React from 'react';
-import * as Constants from '~/common/constants';
+import * as React from "react";
+import * as Constants from "~/common/constants";
 
-import { css } from 'react-emotion';
+import { css } from "@emotion/core";
 
 const STYLES_PAGE_STATE = css`
-  font-family: 'mono';
+  font-family: "mono";
   width: 100%;
   background: ${Constants.colors.black};
   color: ${Constants.colors.white};
@@ -22,13 +22,17 @@ const STYLES_TITLE_SECTION = css`
   padding: 24px;
 `;
 
-export default props => {
-  const testData = { viewer: props.data.viewer, organization: props.data.organization };
-
-  return (
-    <div className={STYLES_PAGE_STATE}>
-      <div className={STYLES_TITLE_SECTION}>NEXT-POSTGRES 0.1 - DATA VIEWER</div>
-      <div className={STYLES_SECTION}>{JSON.stringify(testData, null, 2)}</div>
-    </div>
-  );
-};
+export default class PageState extends React.Component {
+  render() {
+    const testData = {
+      viewer: this.props.data.viewer,
+      organization: this.props.data.organization,
+    };
+    return (
+      <div css={STYLES_PAGE_STATE}>
+        <div css={STYLES_TITLE_SECTION}>NEXT-POSTGRES 0.1 - DATA VIEWER</div>
+        <div css={STYLES_SECTION}>{JSON.stringify(testData, null, 2)}</div>
+      </div>
+    );
+  }
+}

components/Text.js

@@ -1,7 +1,7 @@
-import * as React from 'react';
-import * as Constants from '~/common/constants';
+import * as React from "react";
+import * as Constants from "~/common/constants";
 
-import { css } from 'react-emotion';
+import { css } from "@emotion/core";
 
 const MAX_WIDTH = 768;
 
@@ -17,8 +17,8 @@ const STYLES_HEADING = css`
   margin: 0 auto 0 auto;
 `;
 
-export const H1 = props => {
-  return <h1 {...props} className={STYLES_HEADING} />;
+export const H1 = (props) => {
+  return <h1 {...props} css={STYLES_HEADING} />;
 };
 
 const STYLES_HEADING_TWO = css`
@@ -33,8 +33,8 @@ const STYLES_HEADING_TWO = css`
   margin: 0 auto 0 auto;
 `;
 
-export const H2 = props => {
-  return <h2 {...props} className={STYLES_HEADING_TWO} />;
+export const H2 = (props) => {
+  return <h2 {...props} css={STYLES_HEADING_TWO} />;
 };
 
 const STYLES_PARAGRAPH = css`
@@ -50,8 +50,8 @@ const STYLES_PARAGRAPH = css`
   margin: 0 auto 0 auto;
 `;
 
-export const P = props => {
-  return <p {...props} className={STYLES_PARAGRAPH} />;
+export const P = (props) => {
+  return <p {...props} css={STYLES_PARAGRAPH} />;
 };
 
 const STYLES_BODY_TEXT = css`
@@ -63,6 +63,6 @@ const STYLES_BODY_TEXT = css`
   position: relative;
 `;
 
-export const BODY = props => {
-  return <div {...props} className={STYLES_BODY_TEXT} />;
+export const BODY = (props) => {
+  return <div {...props} css={STYLES_BODY_TEXT} />;
 };

package.json

@@ -10,8 +10,10 @@
     "do-drop-database": "node ./scripts drop-database"
   },
   "dependencies": {
-    "@babel/preset-env": "^7.8.3",
-    "@babel/register": "^7.8.3",
+    "@babel/preset-env": "^7.12.1",
+    "@babel/register": "^7.12.1",
+    "@emotion/babel-preset-css-prop": "10.1.0",
+    "@emotion/core": "10.0.35",
     "@loadable/component": "^5.12.0",
     "babel-plugin-emotion": "^9.2.11",
     "babel-plugin-module-resolver": "^4.0.0",
@@ -21,17 +23,15 @@
     "cookie-parser": "^1.4.4",
     "dotenv": "^8.2.0",
     "emotion": "^9.2.11",
-    "emotion-server": "^9.2.11",
     "express": "^4.17.1",
     "googleapis": "^47.0.0",
     "isomorphic-fetch": "^2.2.1",
     "jsonwebtoken": "^8.5.1",
     "knex": "^0.20.10",
-    "next": "^9.3.0",
+    "next": "^10.0.2",
     "pg": "^7.18.0",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-emotion": "^9.2.11",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "universal-cookie": "^4.0.3"
   }
 }

pages/_app.js

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import { Global } from "@emotion/core";
+
+import App from "next/app";
+import injectGlobalStyles from "~/common/styles/global";
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <React.Fragment>
+      <Global styles={injectGlobalStyles()} />
+      <Component {...pageProps} />
+    </React.Fragment>
+  );
+}
+
+MyApp.getInitialProps = async (appContext) => {
+  const appProps = await App.getInitialProps(appContext);
+  return { ...appProps };
+};
+
+export default MyApp;