Migrate to yarn berry and fix all workspace errors

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)

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>
+  )
+}

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

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)

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']))
+    }
+  }
+}