From 91ca60857e5d65df3651353259de688e805d43fc Mon Sep 17 00:00:00 2001 From: erklyn Date: Wed, 2 Mar 2022 18:12:29 +0300 Subject: [PATCH] Finished --- .prettierrc | 1 + package.json | 1 + pages/api/index.js | 10 ++++++++++ pages/api/note/[id].js | 44 +++++++++++++++++++++++++++++++++++++++++ pages/api/note/index.js | 17 ++++++++++++++++ pages/index.jsx | 35 ++++++++++++++++++++++++-------- pages/notes/[id].jsx | 32 +++++++++++++++++++++++------- pages/notes/index.jsx | 38 ++++++++++++++++++++++++----------- src/data/data.js | 8 ++++++++ yarn.lock | 19 ++++++++++++++++++ 10 files changed, 178 insertions(+), 27 deletions(-) create mode 100644 .prettierrc create mode 100644 pages/api/index.js create mode 100644 pages/api/note/[id].js create mode 100644 pages/api/note/index.js create mode 100644 src/data/data.js diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..9e26dfe --- /dev/null +++ b/.prettierrc @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/package.json b/package.json index d86fa87..44ebf3a 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "@theme-ui/presets": "^0.3.0", "dotenv-load": "^2.0.0", "next": "^9.5.0", + "next-connect": "^0.12.2", "next-env": "^1.1.1", "react": "^16.13.1", "react-dom": "^16.13.1", diff --git a/pages/api/index.js b/pages/api/index.js new file mode 100644 index 0000000..86edc2d --- /dev/null +++ b/pages/api/index.js @@ -0,0 +1,10 @@ +import nc from 'next-connect' + +const handler = nc() + .get( async(req , res) => { + res.json({message: 'OK'}) + }) + .post(() => { + res.json({message: 'POSTED'}) + }) +export default handler; \ No newline at end of file diff --git a/pages/api/note/[id].js b/pages/api/note/[id].js new file mode 100644 index 0000000..64f7699 --- /dev/null +++ b/pages/api/note/[id].js @@ -0,0 +1,44 @@ +import nc from 'next-connect' +import notes from '../../../src/data/data' + +const getNote = id => notes.find(n => n.id === parseInt(id)) + +const handler = nc() + .get((req, res) => { + const note = getNote(req.query.id) + + if(!note) { + res.status(404) + res.end() + return + } + res.json({data: note}) + }) + .patch((req, res) => { + const note = getNote(req.query.id) + + if(!note) { + res.status(404) + res.end() + return + } + const i = notes.findIndex(n => n.id === parseInt(req.query.id)) + const updated = {...note , ...req.body} + + notes[i] = updated + res.json({date: updated}) + }) + .delete((req, res) => { + const note = getNote(req.query.id) + + if(!note) { + res.statusCode(404) + res.end() + return + } + const i = notes.findIndex(n => n.id === parseInt(req.body.id)) + + notes.splice(i, 1) + res.json({data: req.query.id}) + }) +export default handler; \ No newline at end of file diff --git a/pages/api/note/index.js b/pages/api/note/index.js new file mode 100644 index 0000000..5f7efde --- /dev/null +++ b/pages/api/note/index.js @@ -0,0 +1,17 @@ +import nc from 'next-connect' +import notes from '../../../src/data/data'; + +const handler = nc() + .post((req, res) => { + const note = { + ...req.body, + id: Date.now() + } + notes.push(note) + res.json({data: note}) + }) + .get((req, res) => { + res.json({data: notes}) + }) + +export default handler; \ No newline at end of file diff --git a/pages/index.jsx b/pages/index.jsx index ce084f8..3b0f9f1 100644 --- a/pages/index.jsx +++ b/pages/index.jsx @@ -1,11 +1,30 @@ /** @jsx jsx */ -import { jsx } from 'theme-ui' -import Link from 'next/link' +import { jsx } from "theme-ui"; +import Link from "next/link"; -export default () => ( -
-
-

This is a really dope note taking app.

+export default ({ content }) => ( +
+
+

{content.title}

-
-) +
+); + +export function getStaticProps() { + //GET DATA FROM CMS + + return { + props: { + content: { + title: "I don't get this actually.", + }, + }, + }; +} diff --git a/pages/notes/[id].jsx b/pages/notes/[id].jsx index 53016d6..c87771a 100644 --- a/pages/notes/[id].jsx +++ b/pages/notes/[id].jsx @@ -1,15 +1,33 @@ /** @jsx jsx */ -import { jsx } from 'theme-ui' -import { useRouter } from 'next/router' -import Link from 'next/link' +import { jsx } from "theme-ui"; +import { useRouter } from "next/router"; +import Link from "next/link"; export default () => { - const router = useRouter() - const { id }= router.query + const router = useRouter(); + const { id } = router.query; return ( -
+

Note: {id}

- ) + ); +}; + +export async function getServerSideProps({ params, req, res }) { + const response = await fetch(`http://localhost:3000/api/note/${params.id}`); + if (!response.ok) { + res.writeHead(301, { + Location: "/notes", + }); + res.end(); + return { + props: {}, + }; + } + const { data } = await response.json(); + + return { + props: { note: data }, + }; } diff --git a/pages/notes/index.jsx b/pages/notes/index.jsx index fee877f..3f2d5c0 100644 --- a/pages/notes/index.jsx +++ b/pages/notes/index.jsx @@ -1,20 +1,25 @@ /** @jsx jsx */ -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}`})) +import { jsx } from "theme-ui"; +import Link from "next/link"; +export default ({ notes }) => { return ( -
+

My Notes

-
- {notes.map(note => ( -
+
+ {notes.map((note) => ( +
- -
+ +
{note.title}
@@ -23,5 +28,14 @@ export default () => { ))}
- ) + ); +}; + +export async function getServerSideProps() { + const res = await fetch("http://localhost:3000/api/note"); + + const { data } = await res.json(); + return { + props: { notes: data }, + }; } diff --git a/src/data/data.js b/src/data/data.js new file mode 100644 index 0000000..aac2bbf --- /dev/null +++ b/src/data/data.js @@ -0,0 +1,8 @@ +const notes = new Array(15) + .fill(1) + .map((_, i) => ({ + id: Date.now()+i, + title: `Note ${i}` + })) + +module.exports = notes \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index c976d52..37a0e0f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4054,6 +4054,13 @@ neo-async@^2.5.0, neo-async@^2.6.1: resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f" integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw== +next-connect@^0.12.2: + version "0.12.2" + resolved "https://registry.yarnpkg.com/next-connect/-/next-connect-0.12.2.tgz#8191db0f03c80f8f4dbbe80e643a48cb3c9a20b9" + integrity sha512-B/zKHPs5S7XWvAVsZVLvOeY2eL2U3g0W/BgCDetEJRcNDzxX2vi8rzqBuEoLLPlI8LvtHwujDVUFFjSgOEZTbA== + dependencies: + trouter "^3.2.0" + next-env@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/next-env/-/next-env-1.1.1.tgz#4ec4c1f745f36a24fe95d500d1118a3e934d6d6e" @@ -5040,6 +5047,11 @@ regex-parser@2.2.10: resolved "https://registry.yarnpkg.com/regex-parser/-/regex-parser-2.2.10.tgz#9e66a8f73d89a107616e63b39d4deddfee912b37" integrity sha512-8t6074A68gHfU8Neftl0Le6KTDwfGAj7IyjPIMSfikI2wJUTHDMaIq42bUsfVnj8mhx0R+45rdUXHGpN164avA== +regexparam@^1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f" + integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g== + regexpu-core@^4.7.0: version "4.7.0" resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.0.tgz#fcbf458c50431b0bb7b45d6967b8192d91f3d938" @@ -5745,6 +5757,13 @@ traverse@0.6.6: resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.6.6.tgz#cbdf560fd7b9af632502fed40f918c157ea97137" integrity sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc= +trouter@^3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/trouter/-/trouter-3.2.0.tgz#a9c510fce21b8e659a28732c9de9d82871efe8df" + integrity sha512-rLLXbhTObLy2MBVjLC+jTnoIKw99n0GuJs9ov10J870vDw5qhTurPzsDrudNtBf5w/CZ9ctZy2p2IMmhGcel2w== + dependencies: + regexparam "^1.3.0" + ts-pnp@^1.1.6: version "1.2.0" resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"