Basic posgtres removal + some tests

Author: yamalight

Diff for: server-components-demo/credentials.js

@@ -44,8 +44,7 @@
     "server:prod": "cross-env NODE_ENV=production nodemon -- --conditions=react-server server",
     "bundler:dev": "cross-env NODE_ENV=development nodemon -- scripts/build.js",
     "bundler:prod": "cross-env NODE_ENV=production nodemon -- scripts/build.js",
-    "prettier": "prettier --write **/*.js",
-    "seed": "node ./scripts/seed.js"
+    "prettier": "prettier --write **/*.js"
   },
   "babel": {
     "presets": [

Diff for: server-components-demo/notes/.gitkeep

@@ -21,16 +21,11 @@ babelRegister({
 const express = require('express');
 const compress = require('compression');
 const {readFileSync} = require('fs');
-const {unlink, writeFile} = require('fs').promises;
 const {pipeToNodeWritable} = require('react-server-dom-webpack/writer');
 const path = require('path');
-const {Pool} = require('pg');
 const React = require('react');
 const ReactApp = require('../src/App.server').default;
 
-// Don't keep credentials in the source tree in a real app!
-const pool = new Pool(require('../credentials'));
-
 const PORT = 4000;
 const app = express();
 
@@ -93,77 +88,6 @@ app.get('/react', function(req, res) {
   sendResponse(req, res, null);
 });
 
-const NOTES_PATH = path.resolve(__dirname, '../notes');
-
-app.post(
-  '/notes',
-  handleErrors(async function(req, res) {
-    const now = new Date();
-    const result = await pool.query(
-      'insert into notes (title, body, created_at, updated_at) values ($1, $2, $3, $3) returning id',
-      [req.body.title, req.body.body, now]
-    );
-    const insertedId = result.rows[0].id;
-    await writeFile(
-      path.resolve(NOTES_PATH, `${insertedId}.md`),
-      req.body.body,
-      'utf8'
-    );
-    sendResponse(req, res, insertedId);
-  })
-);
-
-app.put(
-  '/notes/:id',
-  handleErrors(async function(req, res) {
-    const now = new Date();
-    const updatedId = Number(req.params.id);
-    await pool.query(
-      'update notes set title = $1, body = $2, updated_at = $3 where id = $4',
-      [req.body.title, req.body.body, now, updatedId]
-    );
-    await writeFile(
-      path.resolve(NOTES_PATH, `${updatedId}.md`),
-      req.body.body,
-      'utf8'
-    );
-    sendResponse(req, res, null);
-  })
-);
-
-app.delete(
-  '/notes/:id',
-  handleErrors(async function(req, res) {
-    await pool.query('delete from notes where id = $1', [req.params.id]);
-    await unlink(path.resolve(NOTES_PATH, `${req.params.id}.md`));
-    sendResponse(req, res, null);
-  })
-);
-
-app.get(
-  '/notes',
-  handleErrors(async function(_req, res) {
-    const {rows} = await pool.query('select * from notes order by id desc');
-    res.json(rows);
-  })
-);
-
-app.get(
-  '/notes/:id',
-  handleErrors(async function(req, res) {
-    const {rows} = await pool.query('select * from notes where id = $1', [
-      req.params.id,
-    ]);
-    res.json(rows[0]);
-  })
-);
-
-app.get('/sleep/:ms', function(req, res) {
-  setTimeout(() => {
-    res.json({ok: true});
-  }, req.params.ms);
-});
-
 app.use(express.static('build'));
 app.use(express.static('public'));
 

Diff for: server-components-demo/package-lock.json

@@ -7,13 +7,9 @@
  */
 
 import {Suspense} from 'react';
-
 import Note from './Note.server';
-import NoteList from './NoteList.server';
-import EditButton from './EditButton.client';
-import SearchField from './SearchField.client';
+import NoteManager from './NoteManager.client';
 import NoteSkeleton from './NoteSkeleton';
-import NoteListSkeleton from './NoteListSkeleton';
 
 export default function App({selectedId, isEditing, searchText}) {
   return (
@@ -28,17 +24,9 @@ export default function App({selectedId, isEditing, searchText}) {
             alt=""
             role="presentation"
           />
-          <strong>React Notes</strong>
-        </section>
-        <section className="sidebar-menu" role="menubar">
-          <SearchField />
-          <EditButton noteId={null}>New</EditButton>
+          <strong>React Server Components Demo</strong>
         </section>
-        <nav>
-          <Suspense fallback={<NoteListSkeleton />}>
-            <NoteList searchText={searchText} />
-          </Suspense>
-        </nav>
+        <NoteManager searchText={searchText} />
       </section>
       <section key={selectedId} className="col note-viewer">
         <Suspense fallback={<NoteSkeleton isEditing={isEditing} />}>

Diff for: server-components-demo/package.json

@@ -6,25 +6,9 @@
  *
  */
 
-import {fetch} from 'react-fetch';
-
-import {db} from './db.server';
 import SidebarNote from './SidebarNote';
 
-export default function NoteList({searchText}) {
-  // const notes = fetch('http://localhost:4000/notes').json();
-
-  // WARNING: This is for demo purposes only.
-  // We don't encourage this in real apps. There are far safer ways to access
-  // data in a real application!
-  const notes = db.query(
-    `select * from notes where title ilike $1 order by id desc`,
-    ['%' + searchText + '%']
-  ).rows;
-
-  // Now let's see how the Suspense boundary above lets us not block on this.
-  // fetch('http://localhost:4000/sleep/3000');
-
+export default function NoteList({notes = [], searchText}) {
   return notes.length > 0 ? (
     <ul className="notes-list">
       {notes.map((note) => (

Diff for: server-components-demo/scripts/init_db.sh

@@ -0,0 +1,23 @@
+import {Suspense, useState} from 'react';
+import EditButton from './EditButton.client';
+import NoteList from './NoteList.server';
+import NoteListSkeleton from './NoteListSkeleton';
+import SearchField from './SearchField.client';
+
+export default function NoteManager({searchText}) {
+  const [notes, setNotes] = useState([]);
+
+  return (
+    <>
+      <section className="sidebar-menu" role="menubar">
+        <SearchField />
+        <EditButton noteId={null}>New</EditButton>
+      </section>
+      <nav>
+        <Suspense fallback={<NoteListSkeleton />}>
+          <NoteList notes={notes} searchText={searchText} />
+        </Suspense>
+      </nav>
+    </>
+  );
+}