Split table into component
This commit is contained in:
13
app/components/layout.js
Normal file
13
app/components/layout.js
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import Head from 'next/head'
|
||||||
|
|
||||||
|
export default function Layout({ children }) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Head>
|
||||||
|
<title>Warframe Center</title>
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
</Head>
|
||||||
|
<main>{children}</main>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -1,9 +1,9 @@
|
|||||||
/** @type {import('next').NextConfig} */
|
/** @type {import('next').NextConfig} */
|
||||||
const nextConfig = {
|
const nextConfig = {
|
||||||
reactStrictMode: true,
|
reactStrictMode: true,
|
||||||
webpack: (config, { webpack }) => {
|
// webpack: (config, { webpack }) => {
|
||||||
return config
|
// return config
|
||||||
},
|
// },
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = nextConfig
|
module.exports = nextConfig
|
||||||
|
|||||||
@@ -1,7 +1,12 @@
|
|||||||
import '../styles/global.scss'
|
import '../styles/global.scss'
|
||||||
|
import Layout from '../components/layout'
|
||||||
|
|
||||||
function MyApp({ Component, pageProps }) {
|
function MyApp({ Component, pageProps }) {
|
||||||
return <Component {...pageProps} />
|
return (
|
||||||
|
<Layout>
|
||||||
|
<Component {...pageProps} />
|
||||||
|
</Layout>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default MyApp
|
export default MyApp
|
||||||
|
|||||||
18
app/pages/home/ItemRow.js
Normal file
18
app/pages/home/ItemRow.js
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
import React from "react"
|
||||||
|
|
||||||
|
export default class ItemRow extends React.Component {
|
||||||
|
constructor ({ scanResult }) {
|
||||||
|
super()
|
||||||
|
this.scanResult = scanResult
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<tr>
|
||||||
|
<td>{this.scanResult.name}</td>
|
||||||
|
<td>{this.scanResult.partsPrice}</td>
|
||||||
|
<td>{this.scanResult.setPrice}</td>
|
||||||
|
</tr>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
25
app/pages/home/Table.js
Normal file
25
app/pages/home/Table.js
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
import React from "react"
|
||||||
|
import ItemRow from './ItemRow'
|
||||||
|
|
||||||
|
export default class Table extends React.Component {
|
||||||
|
constructor ({ scanResults }) {
|
||||||
|
super()
|
||||||
|
this.scanResults = scanResults
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<table>
|
||||||
|
<thead></thead>
|
||||||
|
<tbody>
|
||||||
|
{this.scanResults.map((scanResult) =>
|
||||||
|
<ItemRow
|
||||||
|
key={scanResult._id}
|
||||||
|
scanResult={scanResult}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
39
app/pages/home/index.js
Normal file
39
app/pages/home/index.js
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
import React from "react"
|
||||||
|
import dbConnect from '../../lib/dbConnect'
|
||||||
|
import { models } from 'shared-stuff'
|
||||||
|
import Table from './Table'
|
||||||
|
|
||||||
|
export default class Home extends React.Component {
|
||||||
|
constructor ({ scanResults }) {
|
||||||
|
super()
|
||||||
|
this.scanResults = scanResults
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Table
|
||||||
|
scanResults={this.scanResults}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getServerSideProps() {
|
||||||
|
try {
|
||||||
|
await dbConnect()
|
||||||
|
const scanResults = await models.ScanResult.find({})
|
||||||
|
|
||||||
|
return {
|
||||||
|
props: {
|
||||||
|
scanResults: JSON.parse(JSON.stringify(scanResults))
|
||||||
|
},
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e)
|
||||||
|
return {
|
||||||
|
props: {},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,46 +1,4 @@
|
|||||||
import Head from 'next/head'
|
import home from './home'
|
||||||
import dbConnect from '../lib/dbConnect'
|
|
||||||
import { models } from 'shared-stuff'
|
|
||||||
|
|
||||||
export default function Home({ scanResults }) {
|
export default home.Home
|
||||||
return (
|
export const getServerSideProps = home.getServerSideProps
|
||||||
<div className="container">
|
|
||||||
<Head>
|
|
||||||
<title>Warframe Center</title>
|
|
||||||
<link rel="icon" href="/favicon.ico" />
|
|
||||||
</Head>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<ul>
|
|
||||||
{scanResults.map((scanResult) => (
|
|
||||||
<li key={scanResult._id}>
|
|
||||||
<h2>{scanResult.name}</h2>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getServerSideProps(context) {
|
|
||||||
try {
|
|
||||||
await dbConnect()
|
|
||||||
const scanResults = await models.ScanResult.find({})
|
|
||||||
|
|
||||||
return {
|
|
||||||
props: {
|
|
||||||
scanResults: JSON.parse(JSON.stringify(scanResults))
|
|
||||||
},
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e)
|
|
||||||
return {
|
|
||||||
props: {},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
"description": "The background job that collects data and stores it in a DB",
|
"description": "The background job that collects data and stores it in a DB",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
"start": "node src/index.js"
|
||||||
},
|
},
|
||||||
"author": "Anatoly Kopyl",
|
"author": "Anatoly Kopyl",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
|
|||||||
Reference in New Issue
Block a user