From 47c2e0a252c2d6dc7778f879a0ee7f79e1639e44 Mon Sep 17 00:00:00 2001 From: William Melo Date: Mon, 30 May 2022 00:07:07 -0300 Subject: [PATCH 1/4] #9: Add next, moves pages, CSS and components --- .eslintrc.json | 3 + .gitignore | 4 + .../ColorPicker/ColorPicker.tsx | 1 - .../CoordinatesList/CoordinatesList.tsx | 2 +- .../FileUploadButton/FileUploadButton.tsx | 1 - .../FilesSelectionContainer.tsx | 3 +- .../Footer/Footer.tsx | 1 - .../Header/Header.tsx | 1 - {src/components => components}/Logo/Logo.tsx | 0 {src/components => components}/Map/Map.css | 0 {src/components => components}/Map/Map.tsx | 2 +- {src/config => config}/theme.ts | 0 .../ColorPicker => css}/ColorPicker.css | 0 .../FileUploadButton.css | 0 .../FilesSelectionContainer.css | 0 {src/components/Footer => css}/Footer.css | 0 {src/components/Header => css}/Header.css | 0 css/index.css | 7 + next-env.d.ts | 5 + next.config.js | 6 + package.json | 8 +- pages/_app.tsx | 66 ++++++ pages/_document.tsx | 94 +++++++++ pages/index.tsx | 10 + .../MapViewer/MapViewer.tsx => pages/map.tsx | 6 +- public/index.html | 28 --- src/components/App/App.tsx | 49 ----- src/index.css | 8 - src/index.tsx | 20 -- src/pages/FilesSelection/FilesSelection.tsx | 15 -- tsconfig.json | 18 +- yarn.lock | 198 +++++++++++++++++- 32 files changed, 406 insertions(+), 150 deletions(-) create mode 100644 .eslintrc.json rename {src/components => components}/ColorPicker/ColorPicker.tsx (98%) rename {src/components => components}/CoordinatesList/CoordinatesList.tsx (97%) rename {src/components => components}/FileUploadButton/FileUploadButton.tsx (96%) rename {src/components => components}/FilesSelectionContainer/FilesSelectionContainer.tsx (98%) rename {src/components => components}/Footer/Footer.tsx (94%) rename {src/components => components}/Header/Header.tsx (94%) rename {src/components => components}/Logo/Logo.tsx (100%) rename {src/components => components}/Map/Map.css (100%) rename {src/components => components}/Map/Map.tsx (97%) rename {src/config => config}/theme.ts (100%) rename {src/components/ColorPicker => css}/ColorPicker.css (100%) rename {src/components/FileUploadButton => css}/FileUploadButton.css (100%) rename {src/components/FilesSelectionContainer => css}/FilesSelectionContainer.css (100%) rename {src/components/Footer => css}/Footer.css (100%) rename {src/components/Header => css}/Header.css (100%) create mode 100644 css/index.css create mode 100644 next-env.d.ts create mode 100644 next.config.js create mode 100644 pages/_app.tsx create mode 100644 pages/_document.tsx create mode 100644 pages/index.tsx rename src/pages/MapViewer/MapViewer.tsx => pages/map.tsx (89%) delete mode 100644 public/index.html delete mode 100644 src/components/App/App.tsx delete mode 100644 src/index.css delete mode 100644 src/index.tsx delete mode 100644 src/pages/FilesSelection/FilesSelection.tsx diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..bffb357 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/.gitignore b/.gitignore index af02ba9..1f7e03f 100644 --- a/.gitignore +++ b/.gitignore @@ -5,6 +5,10 @@ /.pnp .pnp.js +# next.js +/.next/ +/out/ + # testing /coverage diff --git a/src/components/ColorPicker/ColorPicker.tsx b/components/ColorPicker/ColorPicker.tsx similarity index 98% rename from src/components/ColorPicker/ColorPicker.tsx rename to components/ColorPicker/ColorPicker.tsx index e83a201..3516f52 100644 --- a/src/components/ColorPicker/ColorPicker.tsx +++ b/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", diff --git a/src/components/CoordinatesList/CoordinatesList.tsx b/components/CoordinatesList/CoordinatesList.tsx similarity index 97% rename from src/components/CoordinatesList/CoordinatesList.tsx rename to components/CoordinatesList/CoordinatesList.tsx index 5035bff..dcd50dc 100644 --- a/src/components/CoordinatesList/CoordinatesList.tsx +++ b/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; diff --git a/src/components/FileUploadButton/FileUploadButton.tsx b/components/FileUploadButton/FileUploadButton.tsx similarity index 96% rename from src/components/FileUploadButton/FileUploadButton.tsx rename to components/FileUploadButton/FileUploadButton.tsx index e9625f9..9fc1440 100644 --- a/src/components/FileUploadButton/FileUploadButton.tsx +++ b/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) => void; diff --git a/src/components/FilesSelectionContainer/FilesSelectionContainer.tsx b/components/FilesSelectionContainer/FilesSelectionContainer.tsx similarity index 98% rename from src/components/FilesSelectionContainer/FilesSelectionContainer.tsx rename to components/FilesSelectionContainer/FilesSelectionContainer.tsx index eae142b..630fed9 100644 --- a/src/components/FilesSelectionContainer/FilesSelectionContainer.tsx +++ b/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[]; diff --git a/src/components/Footer/Footer.tsx b/components/Footer/Footer.tsx similarity index 94% rename from src/components/Footer/Footer.tsx rename to components/Footer/Footer.tsx index 20fd2c8..b20d033 100644 --- a/src/components/Footer/Footer.tsx +++ b/components/Footer/Footer.tsx @@ -1,6 +1,5 @@ import { Box, Link } from "@mui/material"; import { FunctionComponent } from "react"; -import "./Footer.css"; const Footer: FunctionComponent = () => ( diff --git a/src/components/Header/Header.tsx b/components/Header/Header.tsx similarity index 94% rename from src/components/Header/Header.tsx rename to components/Header/Header.tsx index 3f2eb9b..d476347 100644 --- a/src/components/Header/Header.tsx +++ b/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 = () => (
diff --git a/src/components/Logo/Logo.tsx b/components/Logo/Logo.tsx similarity index 100% rename from src/components/Logo/Logo.tsx rename to components/Logo/Logo.tsx diff --git a/src/components/Map/Map.css b/components/Map/Map.css similarity index 100% rename from src/components/Map/Map.css rename to components/Map/Map.css diff --git a/src/components/Map/Map.tsx b/components/Map/Map.tsx similarity index 97% rename from src/components/Map/Map.tsx rename to components/Map/Map.tsx index 4cc91a7..9199d3a 100644 --- a/src/components/Map/Map.tsx +++ b/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 { diff --git a/src/config/theme.ts b/config/theme.ts similarity index 100% rename from src/config/theme.ts rename to config/theme.ts diff --git a/src/components/ColorPicker/ColorPicker.css b/css/ColorPicker.css similarity index 100% rename from src/components/ColorPicker/ColorPicker.css rename to css/ColorPicker.css diff --git a/src/components/FileUploadButton/FileUploadButton.css b/css/FileUploadButton.css similarity index 100% rename from src/components/FileUploadButton/FileUploadButton.css rename to css/FileUploadButton.css diff --git a/src/components/FilesSelectionContainer/FilesSelectionContainer.css b/css/FilesSelectionContainer.css similarity index 100% rename from src/components/FilesSelectionContainer/FilesSelectionContainer.css rename to css/FilesSelectionContainer.css diff --git a/src/components/Footer/Footer.css b/css/Footer.css similarity index 100% rename from src/components/Footer/Footer.css rename to css/Footer.css diff --git a/src/components/Header/Header.css b/css/Header.css similarity index 100% rename from src/components/Header/Header.css rename to css/Header.css diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..c482cf6 --- /dev/null +++ b/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; +} diff --git a/next-env.d.ts b/next-env.d.ts new file mode 100644 index 0000000..4f11a03 --- /dev/null +++ b/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/next.config.js b/next.config.js new file mode 100644 index 0000000..a843cbe --- /dev/null +++ b/next.config.js @@ -0,0 +1,6 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = { + reactStrictMode: true, +} + +module.exports = nextConfig diff --git a/package.json b/package.json index a12a3b8..400cc9c 100644 --- a/package.json +++ b/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": [ diff --git a/pages/_app.tsx b/pages/_app.tsx new file mode 100644 index 0000000..c7bf63c --- /dev/null +++ b/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([]); + + return ( + + + + + + + +
+ +