#9: Add next, moves pages, CSS and components

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -5,6 +5,10 @@
 /.pnp
 .pnp.js
 
+# next.js
+/.next/
+/out/
+
 # testing
 /coverage
 

src/components/ColorPicker/ColorPicker.tsx → components/ColorPicker/ColorPicker.tsx

@@ -6,7 +6,6 @@ import {
   SelectChangeEvent,
 } from "@mui/material";
 import { FunctionComponent } from "react";
-import "./ColorPicker.css";
 
 export const Colors = {
   Gray: "#212529",

src/components/CoordinatesList/CoordinatesList.tsx → components/CoordinatesList/CoordinatesList.tsx

@@ -8,7 +8,7 @@ import {
   ListItemText,
 } from "@mui/material";
 import { Fragment, FunctionComponent, useState } from "react";
-import { IFile } from "../App/App";
+import { IFile } from "../../pages/_app";
 
 interface CoordinatesListProps {
   file: IFile;

src/components/FileUploadButton/FileUploadButton.tsx → components/FileUploadButton/FileUploadButton.tsx

@@ -1,7 +1,6 @@
 import { InsertDriveFile } from "@mui/icons-material";
 import Button from "@mui/material/Button";
 import { ChangeEvent, Fragment, FunctionComponent } from "react";
-import "./FileUploadButton.css";
 
 interface IFileUploadButtonProps {
   onSelectFile: (evt: ChangeEvent<HTMLInputElement>) => void;

src/components/FilesSelectionContainer/FilesSelectionContainer.tsx → components/FilesSelectionContainer/FilesSelectionContainer.tsx

@@ -14,10 +14,9 @@ import {
 import Papa from "papaparse";
 import { ChangeEvent, FunctionComponent } from "react";
 import { Link } from "react-router-dom";
-import { IFile } from "../App/App";
+import { IFile } from "../../pages/_app";
 import ColorPicker, { Colors } from "../ColorPicker/ColorPicker";
 import FileUploadButton from "../FileUploadButton/FileUploadButton";
-import "./FilesSelectionContainer.css";
 
 interface FilesSelectionContainerProps {
   files: IFile[];

src/components/Footer/Footer.tsx → components/Footer/Footer.tsx

@@ -1,6 +1,5 @@
 import { Box, Link } from "@mui/material";
 import { FunctionComponent } from "react";
-import "./Footer.css";
 
 const Footer: FunctionComponent = () => (
   <Box component="footer">

src/components/Header/Header.tsx → components/Header/Header.tsx

@@ -1,7 +1,6 @@
 import { AppBar, Toolbar, Typography } from "@mui/material";
 import { FunctionComponent } from "react";
 import LogoIcon from "../Logo/Logo";
-import "./Header.css";
 
 const Header: FunctionComponent = () => (
   <div>

src/components/Map/Map.tsx → components/Map/Map.tsx

@@ -1,6 +1,6 @@
 import { Wrapper } from "@googlemaps/react-wrapper";
 import { FunctionComponent, useEffect, useRef, useState } from "react";
-import { IFile } from "../App/App";
+import { IFile } from "../../pages/_app";
 import "./Map.css";
 
 interface MapContainerProps {

css/index.css

@@ -0,0 +1,7 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig

package.json

@@ -3,7 +3,9 @@
   "version": "0.1.0",
   "private": false,
   "dependencies": {
+    "@emotion/cache": "^11.7.1",
     "@emotion/react": "^11.9.0",
+    "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.8.1",
     "@googlemaps/react-wrapper": "^1.1.33",
     "@mui/icons-material": "^5.6.2",
@@ -12,6 +14,7 @@
     "@types/node": "^17.0.32",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.3",
+    "next": "^12.1.6",
     "papaparse": "^5.3.2",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
@@ -20,7 +23,10 @@
     "typescript": "^4.6.4"
   },
   "scripts": {
-    "start": "react-scripts start"
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
   },
   "eslintConfig": {
     "extends": [

pages/_app.tsx

@@ -0,0 +1,66 @@
+import { CacheProvider, EmotionCache } from "@emotion/react";
+import { Box, CssBaseline, ThemeProvider } from "@mui/material";
+import { AppProps } from "next/app";
+import Head from "next/head";
+import { useState } from "react";
+import Footer from "../components/Footer/Footer";
+import Header from "../components/Header/Header";
+import theme from "../config/theme";
+import "../css/ColorPicker.css";
+import "../css/FilesSelectionContainer.css";
+import "../css/FileUploadButton.css";
+import "../css/Footer.css";
+import "../css/Header.css";
+import { createEmotionCache } from "./_document";
+
+export interface ICoordinatesData {
+  date?: string;
+  time?: string;
+  id?: string;
+  line?: string;
+  latitude?: string;
+  longitude?: string;
+  speed?: string;
+}
+
+export interface IFile {
+  filename: string;
+  color: string;
+  data?: ICoordinatesData[];
+}
+
+interface AppWithCacheProps extends AppProps {
+  emotionCache?: EmotionCache;
+}
+
+const clientSideEmotionCache = createEmotionCache();
+
+export default function App({
+  Component,
+  emotionCache = clientSideEmotionCache,
+  pageProps,
+}: AppWithCacheProps) {
+  const [files, setFiles] = useState<IFile[]>([]);
+
+  return (
+    <CacheProvider value={emotionCache}>
+      <Head>
+        <meta name="viewport" content="initial-scale=1, width=device-width" />
+      </Head>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            minHeight: "100vh",
+          }}
+        >
+          <Header />
+          <Component {...pageProps} />
+          <Footer />
+        </Box>
+      </ThemeProvider>
+    </CacheProvider>
+  );
+}

pages/_document.tsx

@@ -0,0 +1,94 @@
+import createCache from "@emotion/cache";
+import createEmotionServer from "@emotion/server/create-instance";
+import Document, { Head, Html, Main, NextScript } from "next/document";
+import * as React from "react";
+import theme from "../config/theme";
+
+export default class MyDocument extends Document {
+  render() {
+    return (
+      <Html lang="en">
+        <Head>
+          {/* PWA primary color */}
+          <meta name="theme-color" content={theme.palette.primary.main} />
+          <link rel="shortcut icon" href="/favicon.ico" />
+          <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+          />
+          {/* Inject MUI styles first to match with the prepend: true configuration. */}
+          {(this.props as any).emotionStyleTags}
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+// `getInitialProps` belongs to `_document` (instead of `_app`),
+// it's compatible with static-site generation (SSG).
+MyDocument.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
+
+  const originalRenderPage = ctx.renderPage;
+
+  // You can consider sharing the same emotion cache between all the SSR requests to speed up performance.
+  // However, be aware that it can have global side effects.
+  const cache = createEmotionCache();
+  const { extractCriticalToChunks } = createEmotionServer(cache);
+
+  ctx.renderPage = () =>
+    originalRenderPage({
+      enhanceApp: (App: any) =>
+        function EnhanceApp(props) {
+          return <App emotionCache={cache} {...props} />;
+        },
+    });
+
+  const initialProps = await Document.getInitialProps(ctx);
+  // This is important. It prevents emotion to render invalid HTML.
+  // See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153
+  const emotionStyles = extractCriticalToChunks(initialProps.html);
+  const emotionStyleTags = emotionStyles.styles.map((style) => (
+    <style
+      data-emotion={`${style.key} ${style.ids.join(" ")}`}
+      key={style.key}
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{ __html: style.css }}
+    />
+  ));
+
+  return {
+    ...initialProps,
+    emotionStyleTags,
+  };
+};
+
+// prepend: true moves MUI styles to the top of the <head> so they're loaded first.
+// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
+export function createEmotionCache() {
+  return createCache({ key: "css", prepend: true });
+}

pages/index.tsx

@@ -0,0 +1,10 @@
+import { FunctionComponent, useState } from "react";
+import FilesSelectionContainer from "../components/FilesSelectionContainer/FilesSelectionContainer";
+import { IFile } from "./_app";
+
+const FilesSelectionPage: FunctionComponent = () => {
+  const [files, setFiles] = useState<IFile[]>([]);
+  return <FilesSelectionContainer files={files} setFiles={setFiles} />;
+};
+
+export default FilesSelectionPage;

src/pages/MapViewer/MapViewer.tsx → pages/map.tsx

@@ -10,9 +10,9 @@ import {
 } from "@mui/material";
 import { FunctionComponent, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import { IFile } from "../../components/App/App";
-import CoordinatesList from "../../components/CoordinatesList/CoordinatesList";
-import Map from "../../components/Map/Map";
+import CoordinatesList from "../components/CoordinatesList/CoordinatesList";
+import Map from "../components/Map/Map";
+import { IFile } from "./_app";
 
 interface MapViewerPageProps {
   files: IFile[];