Split table into component

2022-03-13 16:19:52 +03:00
parent 9e216f821f
commit 648af4f060
8 changed files with 108 additions and 50 deletions
--- a/app/pages/_app.js
+++ b/app/pages/_app.js
@@ -1,7 +1,12 @@
 import '../styles/global.scss'
+import Layout from '../components/layout'

 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return (
+    <Layout>
+      <Component {...pageProps} />
+    </Layout>
+  )
 }

 export default MyApp
--- a/app/pages/home/ItemRow.js
+++ b/app/pages/home/ItemRow.js
@@ -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>
+    )
+  }
+}
--- a/app/pages/home/Table.js
+++ b/app/pages/home/Table.js
@@ -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>
+    )
+  }
+}
--- a/app/pages/home/index.js
+++ b/app/pages/home/index.js
@@ -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: {},
+    }
+  }
+}
--- a/app/pages/index.js
+++ b/app/pages/index.js
@@ -1,46 +1,4 @@
-import Head from 'next/head'
-import dbConnect from '../lib/dbConnect'
-import { models } from 'shared-stuff'
+import home from './home'

-export default function Home({ scanResults }) {
-  return (
-    <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: {},
-    }
-  }
-}
+export default home.Home
+export const getServerSideProps = home.getServerSideProps