Added a help modal

app/.eslintrc.json

@@ -4,7 +4,11 @@
     "import/order": [
       "error",
       {
-        "newlines-between": "always"
+        "newlines-between": "always",
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
       }
     ]
   }

app/pages/_app.js

@@ -1,6 +1,6 @@
-import { appWithTranslation } from 'next-i18next'
-import { createTheme, ThemeProvider } from '@mui/material/styles'
 import { CssBaseline } from '@mui/material'
+import { createTheme, ThemeProvider } from '@mui/material/styles'
+import { appWithTranslation } from 'next-i18next'
 
 import 'reset-css'
 import '../styles/global.scss'

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

app/pages/home/Hero.js

@@ -1,43 +1,72 @@
+import { Box, Chip } from '@mui/material'
 import { useTranslation } from 'next-i18next'
 import Image from 'next/image'
-import { Box } from '@mui/material'
+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'
-      }}
-    >
       <Box
         sx={{
-          width: 400,
+          py: 12,
-          m: 'auto'
+          textAlign: 'center'
         }}
       >
-        <Image
+        <Chip
-          src={logo}
+          label={t('help_header')}
-          alt='logo'
+          variant='outlined'
-          layout='responsive'
+          onClick={openModal}
-          width={500}
+          sx={{
-          height={300}
+            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>
-      <Box
+
-        sx={{
+      <HelpModal
-          width: 400,
+        open={modalOpen}
-          m: 'auto'
+        onClose={closeModal}
-        }}
+      />
-      >
+    </>
-        <h1>Market Gaps</h1>
-        <p>{t('description')}</p>
-      </Box>
-    </Box>
   )
 }
 

app/pages/home/Table.js

@@ -1,6 +1,6 @@
-import { Component } from 'react'
-import { DataGrid } from '@mui/x-data-grid'
 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'
 

app/pages/home/index.js

@@ -1,5 +1,5 @@
-import { Component } from 'react'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { Component } from 'react'
 import { models } from 'shared-stuff'
 
 import dbConnect from '../../lib/dbConnect'

app/public/locales/en/home.json

@@ -1,5 +1,9 @@
 {
   "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",

app/public/locales/ru/home.json

@@ -1,5 +1,9 @@
 {
   "description": "Находи выгодную разницу между ценой набора и ценой его частей по отдельности.",
+  "help_header": "Как использовать этот сайт?",
+  "help_body_1": "На главной странице сайта находится таблица, которая содержит информацию о прайм предметах, обновляемую в реальном времени. Колонка \"Наименование\" содержит ссылку на страницу предмета на warframe.market и время последнего обновления информации.",
+  "help_body_2": "Зная разницу между ценой частей и ценой комплекта можно, например сэкономить на покупке или даже заработать, если купить части по отдельности, а продать как сет.",
+  "help_body_3": "Приятного использования!",
   "name": "Наименование",
   "parts_price": "Цена частей",
   "set_price": "Цена набора",