init

app/entry.server.tsx

@@ -1,4 +1,3 @@
-import 'dotenv/config'
 import type { EntryContext } from "@remix-run/node";
 import { RemixServer } from "@remix-run/react";
 import { renderToString } from "react-dom/server";

app/routes/index.tsx

@@ -19,9 +19,10 @@ export default function Index() {
   return (
     <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
       <h1>Welcome to Remix Heroku</h1>
+      <a href="/new">Add a new note</a>
       <p> Notes: </p>
       <ul>
-        {data.notes.map(({ id, name }) => ( <li key={name}>id: {id} name: {name}</li>))}
+        {data.notes.map(({ id, name, content }) => ( <li key={name}>id: {id} name: {name} content: {content}</li>))}
       </ul>
       
       

app/routes/new.tsx

@@ -0,0 +1,50 @@
+import type { ActionFunction } from "@remix-run/node";
+import { redirect } from "@remix-run/node";
+
+import { db } from "~/utils/db.server";
+
+export const action: ActionFunction = async ({
+  request,
+}) => {
+  const form = await request.formData();
+  const name = form.get("name");
+  const content = form.get("content");
+  // we do this type check to be extra sure and to make TypeScript happy
+  if (
+    typeof name !== "string" ||
+    typeof content !== "string"
+  ) {
+    throw new Error(`Form not submitted correctly.`);
+  }
+
+  const fields = { name, content };
+
+  await db.note.create({ data: fields });
+  return redirect(`/`);
+};
+
+
+export default function NewNote() {
+    return (
+      <div>
+        <p>Add your own note</p>
+        <form method="post">
+          <div>
+            <label>
+              Name: <input type="text" name="name" />
+            </label>
+          </div>
+          <div>
+            <label>
+              Content: <textarea name="content" />
+            </label>
+          </div>
+          <div>
+            <button type="submit" className="button">
+              Add
+            </button>
+          </div>
+        </form>
+      </div>
+    );
+  }

package-lock.json

@@ -10,7 +10,6 @@
         "@remix-run/node": "^1.3.4",
         "@remix-run/react": "^1.3.4",
         "@remix-run/serve": "^1.3.4",
-        "dotenv": "^16.0.0",
         "prisma": "^3.12.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2"
@@ -3116,6 +3115,7 @@
       "version": "16.0.0",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.0.tgz",
       "integrity": "sha512-qD9WU0MPM4SWLPJy/r2Be+2WgQj8plChsyrCNQzW/0WjvcJQiKQJ9mH3ZgB3fxbUUxgc/11ZJ0Fi5KiimWGz2Q==",
+      "dev": true,
       "engines": {
         "node": ">=12"
       }
@@ -12104,7 +12104,8 @@
     "dotenv": {
       "version": "16.0.0",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.0.tgz",
-      "integrity": "sha512-qD9WU0MPM4SWLPJy/r2Be+2WgQj8plChsyrCNQzW/0WjvcJQiKQJ9mH3ZgB3fxbUUxgc/11ZJ0Fi5KiimWGz2Q=="
+      "integrity": "sha512-qD9WU0MPM4SWLPJy/r2Be+2WgQj8plChsyrCNQzW/0WjvcJQiKQJ9mH3ZgB3fxbUUxgc/11ZJ0Fi5KiimWGz2Q==",
+      "dev": true
     },
     "duplexify": {
       "version": "3.7.1",

package.json

@@ -14,7 +14,6 @@
     "@remix-run/node": "^1.3.4",
     "@remix-run/react": "^1.3.4",
     "@remix-run/serve": "^1.3.4",
-    "dotenv": "^16.0.0",
     "prisma": "^3.12.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

prisma/migrations/20220407141313_init/migration.sql

@@ -2,6 +2,7 @@
 CREATE TABLE "Note" (
     "id" SERIAL NOT NULL,
     "name" TEXT NOT NULL,
+    "content" TEXT NOT NULL,
 
     CONSTRAINT "Note_pkey" PRIMARY KEY ("id")
 );

prisma/schema.prisma

@@ -14,4 +14,5 @@ datasource db {
 model Note {
   id      Int      @id @default(autoincrement())
   name   String
+  content String
 }

prisma/seed.ts

@@ -2,7 +2,7 @@ import { PrismaClient } from "@prisma/client";
 const db = new PrismaClient();
 
 async function seed() {
-    return db.note.create({ data: { name: "Note from the databae" }});
+    return db.note.create({ data: { name: "Note from the databae", content: " I am a new note :) " }});
 }
 
 seed();