Migrate to yarn berry and fix all workspace errors

2022-07-07 01:12:21 +03:00
parent 78fd1b5adf
commit 862cbd3af1
41 changed files with 5878 additions and 8452 deletions
--- a/frontend/.env.local.example
+++ b/frontend/.env.local.example
@@ -0,0 +1 @@
+MONGODB_URI=
--- a/frontend/.eslintrc.json
+++ b/frontend/.eslintrc.json
@@ -0,0 +1,15 @@
+{
+  "extends": ["standard", "standard-jsx", "standard-react", "next/core-web-vitals"],
+  "rules": {
+    "import/order": [
+      "error",
+      {
+        "newlines-between": "always",
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
+      }
+    ]
+  }
+}
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,30 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
--- a/frontend/components/Footer.js
+++ b/frontend/components/Footer.js
@@ -0,0 +1,33 @@
+import { Box, Typography, Link } from '@mui/material'
+import { Component } from 'react'
+
+export default class Footer extends Component {
+  render () {
+    return (
+      <Box
+        sx={{
+          p: 12
+        }}
+      >
+        All data is collected from the&nbsp;
+        <Link
+          href='https://warframe.market/api_docs'
+          target='_blank'
+          rel='noreferrer'
+        >
+          Warframe Market API
+        </Link>
+
+        <Typography variant='h6'>DISCLAIMER</Typography>
+        <Box
+          sx={{
+            fontSize: 12,
+            lineHeight: 'normal'
+          }}
+        >
+          Digital Extremes Ltd, Warframe and the logo Warframe are registered trademarks. All rights are reserved worldwide. This site has no official link with Digital Extremes Ltd or Warframe. All artwork, screenshots, characters or other recognizable features of the intellectual property relating to these trademarks are likewise the intellectual property of Digital Extremes Ltd.
+        </Box>
+      </Box>
+    )
+  }
+}
--- a/frontend/components/WithYandexMetrika.js
+++ b/frontend/components/WithYandexMetrika.js
@@ -0,0 +1,37 @@
+import Router from 'next/router'
+import React, { useCallback, useEffect } from 'react'
+import ym, { YMInitializer } from 'react-yandex-metrika'
+
+const WithYandexMetrika = (props) => {
+  const { children } = props
+
+  const enabled = process.env.NODE_ENV !== 'development'
+
+  const hit = useCallback((url) => {
+    if (enabled) {
+      ym('hit', url)
+    } else {
+      console.log('%c[YandexMetrika](HIT)', 'color: orange', url)
+    }
+  }, [enabled])
+
+  useEffect(() => {
+    hit(window.location.pathname + window.location.search)
+    Router.events.on('routeChangeComplete', hit)
+  }, [hit])
+
+  return (
+    <>
+      {enabled && (
+        <YMInitializer
+          accounts={[87671663]}
+          options={{ webvisor: true, defer: true }}
+          version='2'
+        />
+      )}
+      {children}
+    </>
+  )
+}
+
+export default WithYandexMetrika
--- a/frontend/components/layout.js
+++ b/frontend/components/layout.js
@@ -0,0 +1,16 @@
+import Head from 'next/head'
+
+import Footer from './Footer'
+
+export default function Layout ({ children }) {
+  return (
+    <>
+      <Head>
+        <title>Warframe Center</title>
+        <link rel='icon' href='/favicon.ico' />
+      </Head>
+      <main>{children}</main>
+      <Footer />
+    </>
+  )
+}
--- a/frontend/ecosystem.config.js
+++ b/frontend/ecosystem.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  apps: [{
+    name: 'warframe-center-app-3000',
+    script: 'npm run start',
+    watch: false
+  }]
+}
--- a/frontend/lib/dbConnect.js
+++ b/frontend/lib/dbConnect.js
@@ -0,0 +1,43 @@
+import mongoose from 'mongoose'
+
+const MONGODB_URI = process.env.MONGODB_URI
+
+if (!MONGODB_URI) {
+  throw new Error(
+    'Please define the MONGODB_URI environment variable inside .env.local'
+  )
+}
+
+/**
+ * Global is used here to maintain a cached connection across hot reloads
+ * in development. This prevents connections growing exponentially
+ * during API Route usage.
+ */
+let cached = global.mongoose
+
+if (!cached) {
+  cached = global.mongoose = { conn: null, promise: null }
+}
+
+async function dbConnect () {
+  if (cached.conn) {
+    return cached.conn
+  }
+
+  if (!cached.promise) {
+    const opts = {
+      useNewUrlParser: true,
+      useUnifiedTopology: true,
+      bufferCommands: false
+    }
+
+    cached.promise = mongoose.connect(MONGODB_URI, opts)
+      .then(mongoose => {
+        return mongoose
+      })
+  }
+  cached.conn = await cached.promise
+  return cached.conn
+}
+
+export default dbConnect
--- a/frontend/next-i18next.config.js
+++ b/frontend/next-i18next.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en', 'ru']
+  }
+}
--- a/frontend/next.config.js
+++ b/frontend/next.config.js
@@ -0,0 +1,31 @@
+const withPlugins = require('next-compose-plugins')
+
+const { i18n } = require('./next-i18next.config')
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  i18n
+  // webpack: (config, { webpack }) => {
+  //   return config
+  // },
+}
+
+const redirects = {
+  async redirects () {
+    return [
+      {
+        source: '/',
+        destination: '/home',
+        permanent: true
+      }
+    ]
+  }
+}
+
+module.exports = withPlugins(
+  [
+    [redirects]
+  ],
+  nextConfig
+)
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "frontend",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.5.0",
+    "@mui/material": "^5.5.0",
+    "@mui/x-data-grid": "^5.6.1",
+    "moment": "^2.29.4",
+    "mongoose": "^6.4.3",
+    "next": "latest",
+    "next-compose-plugins": "^2.2.1",
+    "next-i18next": "^11.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-moment": "^1.1.1",
+    "react-yandex-metrika": "^2.6.0",
+    "reset-css": "^5.0.1",
+    "sass": "^1.49.9",
+    "shared-stuff": "1.0.0",
+    "sharp": "^0.30.3"
+  },
+  "devDependencies": {
+    "babel-eslint": "^10.1.0",
+    "eslint": "^8.11.0",
+    "eslint-config-next": "^12.1.0",
+    "eslint-config-standard": "^16.0.3",
+    "eslint-config-standard-jsx": "^10.0.0",
+    "eslint-config-standard-react": "^11.0.1",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-react": "^7.29.3"
+  }
+}
--- a/frontend/pages/_app.js
+++ b/frontend/pages/_app.js
@@ -0,0 +1,29 @@
+import { CssBaseline } from '@mui/material'
+import { createTheme, ThemeProvider } from '@mui/material/styles'
+import { appWithTranslation } from 'next-i18next'
+
+import 'reset-css'
+import '../styles/global.scss'
+import Layout from '../components/layout'
+import WithYandexMetrika from '../components/WithYandexMetrika'
+
+function App ({ Component, pageProps }) {
+  const theme = createTheme({
+    palette: {
+      mode: 'light'
+    }
+  })
+
+  return (
+    <WithYandexMetrika>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <Layout>
+          <Component {...pageProps} />
+        </Layout>
+      </ThemeProvider>
+    </WithYandexMetrika>
+  )
+}
+
+export default appWithTranslation(App)
--- a/frontend/pages/home/HelpModal.js
+++ b/frontend/pages/home/HelpModal.js
@@ -0,0 +1,32 @@
+import { Dialog, DialogTitle, Box, Typography } from '@mui/material'
+import { useTranslation } from 'next-i18next'
+
+export default function HelpModal ({ open, onClose }) {
+  const { t } = useTranslation('home')
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+    >
+      <DialogTitle>
+        {t('help_header')}
+      </DialogTitle>
+      <Box
+        sx={{
+          p: 3
+        }}
+      >
+        <Typography gutterBottom>
+          {t('help_body_1')}
+        </Typography>
+        <Typography gutterBottom>
+          {t('help_body_2')}
+        </Typography>
+        <Typography gutterBottom>
+          {t('help_body_3')}
+        </Typography>
+      </Box>
+    </Dialog>
+  )
+}
--- a/frontend/pages/home/Hero.js
+++ b/frontend/pages/home/Hero.js
@@ -0,0 +1,73 @@
+import { Box, Chip } from '@mui/material'
+import { useTranslation } from 'next-i18next'
+import Image from 'next/image'
+import { useState } from 'react'
+
+import logo from './assets/warframe_logo.png'
+import HelpModal from './HelpModal'
+
+const Hero = () => {
+  const { t } = useTranslation('home')
+  const [modalOpen, setModalOpen] = useState(false)
+
+  const openModal = () => {
+    setModalOpen(true)
+  }
+
+  const closeModal = () => {
+    setModalOpen(false)
+  }
+
+  return (
+    <>
+      <Box
+        sx={{
+          py: 12,
+          textAlign: 'center'
+        }}
+      >
+        <Chip
+          label={t('help_header')}
+          variant='outlined'
+          onClick={openModal}
+          sx={{
+            position: 'absolute',
+            top: '10px',
+            right: '10px'
+          }}
+        />
+
+        <Box
+          sx={{
+            width: 400,
+            m: 'auto'
+          }}
+        >
+          <Image
+            src={logo}
+            alt='logo'
+            layout='responsive'
+            width={500}
+            height={300}
+          />
+        </Box>
+        <Box
+          sx={{
+            width: 400,
+            m: 'auto'
+          }}
+        >
+          <h1>Market Gaps</h1>
+          <p>{t('description')}</p>
+        </Box>
+      </Box>
+
+      <HelpModal
+        open={modalOpen}
+        onClose={closeModal}
+      />
+    </>
+  )
+}
+
+export default Hero
--- a/frontend/pages/home/Table.js
+++ b/frontend/pages/home/Table.js
@@ -0,0 +1,98 @@
+import { Link, Typography, Box } from '@mui/material'
+import { DataGrid } from '@mui/x-data-grid'
+import { Component } from 'react'
+import { withTranslation } from 'react-i18next'
+import Moment from 'react-moment'
+
+class Table extends Component {
+  constructor ({ scanResults, t }) {
+    super()
+    this.scanResults = scanResults
+      ? scanResults.map(row => ({
+        ...row,
+        id: row._id
+      }))
+      : []
+    this.columns = [
+      {
+        field: 'name',
+        headerName: t('name'),
+        flex: 2,
+        renderCell: (cellValues) => {
+          return (
+            <Box
+              component='span'
+              sx={{
+                display: 'block'
+              }}
+            >
+              <Link
+                target='_blank'
+                href={cellValues.row.url}
+                rel='noreferrer'
+              >
+                {cellValues.row.fullName}
+              </Link>
+              <Typography variant='caption' display='block'>
+                <Moment
+                  format='DD.MM HH:mm'
+                >
+                  {cellValues.row.updatedAt}
+                </Moment>
+              </Typography>
+            </Box>
+          )
+        }
+      },
+      {
+        field: 'partsPrice',
+        headerName: t('parts_price'),
+        flex: 1
+      },
+      {
+        field: 'setPrice',
+        headerName: t('set_price'),
+        flex: 1
+      },
+      {
+        field: 'difference',
+        headerName: t('difference'),
+        flex: 1
+      }
+    ]
+  }
+
+  static getInitialProps () {
+    return {
+      props: { scanResults: [] }
+    }
+  }
+
+  render () {
+    return (
+      <Box
+        sx={{
+          height: '90vh',
+          width: '100%'
+        }}
+      >
+        <DataGrid
+          rows={this.scanResults}
+          columns={this.columns}
+          autoPageSize
+          initialState={{
+            sorting: {
+              sortModel: [{ field: 'difference', sort: 'desc' }]
+            }
+          }}
+          sx={{
+            borderLeft: 'none',
+            borderRight: 'none'
+          }}
+        />
+      </Box>
+    )
+  }
+}
+
+export default withTranslation('home')(Table)
--- a/frontend/pages/home/assets/gunner1.png
+++ b/frontend/pages/home/assets/gunner1.png
--- a/frontend/pages/home/assets/gunner2.png
+++ b/frontend/pages/home/assets/gunner2.png
--- a/frontend/pages/home/assets/warframe_logo.png
+++ b/frontend/pages/home/assets/warframe_logo.png
--- a/frontend/pages/home/index.js
+++ b/frontend/pages/home/index.js
@@ -0,0 +1,30 @@
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { models } from 'shared-stuff'
+
+import dbConnect from '../../lib/dbConnect'
+
+import Hero from './Hero'
+import Table from './Table'
+
+export default function Home ({ scanResults }) {
+  return (
+    <>
+      <Hero />
+      <Table
+        scanResults={scanResults}
+      />
+    </>
+  )
+}
+
+export async function getServerSideProps ({ locale }) {
+  await dbConnect()
+  const scanResults = await models.ScanResult.find({})
+
+  return {
+    props: {
+      scanResults: JSON.parse(JSON.stringify(scanResults)),
+      ...(await serverSideTranslations(locale, ['common', 'home']))
+    }
+  }
+}
--- a/frontend/public/favicon.ico
+++ b/frontend/public/favicon.ico
--- a/frontend/public/locale_icons/de.png
+++ b/frontend/public/locale_icons/de.png
--- a/frontend/public/locale_icons/en.png
+++ b/frontend/public/locale_icons/en.png
--- a/frontend/public/locale_icons/fr.png
+++ b/frontend/public/locale_icons/fr.png
--- a/frontend/public/locale_icons/ru.png
+++ b/frontend/public/locale_icons/ru.png
--- a/frontend/public/locale_icons/ua.png
+++ b/frontend/public/locale_icons/ua.png
--- a/frontend/public/locales/en/common.json
+++ b/frontend/public/locales/en/common.json
--- a/frontend/public/locales/en/home.json
+++ b/frontend/public/locales/en/home.json
@@ -0,0 +1,11 @@
+{
+  "description": "Find a profitable difference between the price of the set and the price of the sum of it's parts.",
+  "help_header": "How to use this site",
+  "help_body_1": "The main page of the site has a table, that contains info about prime items, that is updated in real time. The column \"Name\" has a link to the item on warframe.market and the time of the last update.",
+  "help_body_2": "Knowing the difference between the price of the set and the price of the sum of it's parts lets you save platinum buying or even make a profit by purchasing the parts and selling them as a set.",
+  "help_body_3": "Have fun!",
+  "name": "Name",
+  "parts_price": "Parts Price",
+  "set_price": "Set Price",
+  "difference": "Difference"
+}
--- a/frontend/public/locales/ru/common.json
+++ b/frontend/public/locales/ru/common.json
--- a/frontend/public/locales/ru/home.json
+++ b/frontend/public/locales/ru/home.json
@@ -0,0 +1,11 @@
+{
+  "description": "Находи выгодную разницу между ценой набора и ценой его частей по отдельности.",
+  "help_header": "Как использовать этот сайт?",
+  "help_body_1": "На главной странице сайта находится таблица, которая содержит информацию о прайм предметах, обновляемую в реальном времени. Колонка \"Наименование\" содержит ссылку на страницу предмета на warframe.market и время последнего обновления информации.",
+  "help_body_2": "Зная разницу между ценой частей и ценой комплекта можно, например сэкономить на покупке или даже заработать, если купить части по отдельности, а продать как сет.",
+  "help_body_3": "Приятного использования!",
+  "name": "Наименование",
+  "parts_price": "Цена частей",
+  "set_price": "Цена набора",
+  "difference": "Разница"
+}
--- a/frontend/styles/_fonts.scss
+++ b/frontend/styles/_fonts.scss
@@ -0,0 +1,22 @@
+$text-font: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
+sans-serif;
+
+$font-h0: normal normal 300 56px/64px $text-font;
+$font-h1: normal normal 300 48px/56px $text-font;
+$font-h2: normal normal 300 40px/48px $text-font;
+$font-h3: normal normal 300 36px/44px $text-font;
+$font-h4: normal normal 300 32px/40px $text-font;
+$font-h5: normal normal 300 28px/36px $text-font;
+$font-h6: normal normal 300 24px/32px $text-font;
+$font-h7: normal normal 300 20px/26px $text-font;
+$font-h8: normal normal 300 18px/24px $text-font;
+$font-h9: normal normal 300 16px/20px $text-font;
+
+$font-r8: normal normal 300 24px/30px $text-font;
+$font-r7: normal normal 300 22px/28px $text-font;
+$font-r6: normal normal 300 20px/26px $text-font;
+$font-r5: normal normal 300 18px/24px $text-font;
+$font-r4: normal normal 300 16px/22px $text-font;
+$font-r3: normal normal 300 14px/18px $text-font;
+$font-r2: normal normal 300 12px/16px $text-font;
--- a/frontend/styles/_variables.scss
+++ b/frontend/styles/_variables.scss
@@ -0,0 +1 @@
+@import './fonts';
--- a/frontend/styles/global.scss
+++ b/frontend/styles/global.scss
@@ -0,0 +1,31 @@
+@import './variables';
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font: $font-r4;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+h1 {
+  font: $font-h1;
+}
+h2 {
+  font: $font-h2;
+}
+h3 {
+  font: $font-h3;
+}
+h4 {
+  font: $font-h4;
+}
+h5 {
+  font: $font-h5;
+}
+h6 {
+  font: $font-h6;
+}