chore

Author: Hendrixer

pages/index.jsx

@@ -2,10 +2,21 @@
 import { jsx } from 'theme-ui'
 import Link from 'next/link'
 
-export default () => (
+export default ({content}) => (
   <div sx={{ height: `calc(100vh - 60px)`}}>
     <div sx={{variant: 'containers.page', display: 'flex', alignItems: 'center', height: '100%'}}>
-      <h1 sx={{fontSize: 8, my: 0}}>This is a really dope note taking app.</h1>
+      <h1 sx={{fontSize: 8, my: 0}}>{content.title}</h1>
     </div>
   </div> 
 )
+
+
+export async function getStaticProps() {
+  return {
+    props: {
+      content: {
+        title: 'Look at my note app tho'
+      }
+    }
+  }
+}

pages/notes/[id].jsx

@@ -3,7 +3,7 @@ import { jsx } from 'theme-ui'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
 
-export default () => {
+const Note = () => {
   const router = useRouter()
   const { id }= router.query
 
@@ -13,3 +13,24 @@ export default () => {
     </div>
   )
 }
+
+export default Note
+
+export async function getServerSideProps({params, req, res}) {
+  const response = await fetch(`http://localhost:3000/api/note/${params.id}`)
+
+  if (!response.ok) {
+    res.writeHead(302, { Location: '/notes' })
+    res.end()
+    return {props: {}}
+  }
+
+  const {data} = await response.json()
+  
+  
+  if (data) {
+    return {
+      props: {note: data}
+    }
+  }
+}

pages/notes/index.jsx

@@ -2,9 +2,7 @@
 import { jsx } from 'theme-ui'
 import Link from 'next/link'
 
-export default () => {
-  const notes = new Array(15).fill(1).map((e, i) => ({id: i, title: `This is my note ${i}`}))
-
+export default ({notes}) => {
   return (
     <div sx={{variant: 'containers.page'}}>
       <h1>My Notes</h1>
@@ -25,3 +23,13 @@ export default () => {
     </div>
   )
 }
+
+
+export async function getServerSideProps() {
+  const res = await fetch(`http://localhost:3000/api/note`)
+  const {data} = await res.json()
+
+  return {
+    props: {notes: data}
+  }
+}

src/data/data.js

@@ -1,3 +1,8 @@
-const notes = []
+const notes = new Array(15)
+  .fill(1)
+  .map((_, i) => ({
+    id: Date.now() + i,
+    title: `Note ${i}`
+  }))
 
 module.exports = notes